Welcome to Debugyeh
Friday, 14 September 2007
Designing a Website - My method
Everyone
We all have our own methods when we come to web design, or sometimes, even lack of methods - this did for a while also include me! When making web pages, in the early days - I used to just open up my editor, and away I go, start coding away, looking up my code etc. However, the snag always comes when you've got more than 10 pages. Things become messy, and then you start to which you created a plan!
Simply a Must
Plans don't actually need to be all to complex, but they can stop you getting in a pickle at a later date, you don't even need to reference to them every 5 minutes, but they are a guide, and can speed up your progress 10 fold. When you create a plan, you think about it, jotting those ideas down, which is why you don't always need to reference to it, its because you've already thought about it.
My Plans
It really depends on how big the website is I'm planning, but for this example we'll just say its a 5 page website, a micro site. Now to effectively plan this site, and build it, I'll consider what sections it will need. Usually a header, a navigation bar, a main area for content, and a footer. I recently also build all my pages with what is known as a 'cloud', just a small area about the logo or header, with a few key phrases which are whats actually in the website, for the web crawlers (I'll do an article on web crawlers later).
So I've identified the areas which are going to be included. So the next step is to get a piece of paper, and just scribble down a design, fitting those sections in.
Fancy Plans
You can skip this bit, but if your a bit of a whizz with photo shop, what I tend to do is create the page in photo shop, as a finished template might look like. Of course this is a guide, and you can skip this and go straight to coding from your paper template. I do this because quite often I can use some of the images I made in photo shop in the web page, maybe a few gradient background images or perhaps I've knocked up a quick logo. Its just another way to help your planning.
Coding Frenzy
These days I tend not to use tables anymore, I use CSS tables with div's. (a tutorial on this will be coming). Now these are great, and when creating your template, try and divide up all the different containers which you need to code in. Work from the top down of your paper design, and before you know it, you've got a blank template page, ready for your content.
Keeping Up Appearances
Now you have your template. You must keep your web page looking consistent.
Things to consider, firstly, how does your web page look in Internet Explorer 6 / 7, and FireFox, does it look the same? You might need to tweak your design at this point.
Now your starting to create pages, that navigation bar will quickly become hard to maintain. This is where if you don't know any PHP, a popular editor can come in handy, with Library Include files.
To do this, define your site. Then on the right hand pane, click assets, find the icon that looks like an open book, then click it, then highlight key areas like your header, your navigation, footer, and on each of them, click the plus on the bottom right, and create yourself some library files. You can now update 1 file, and all of your other pages will be updated automatically.
That's about it.
I hope you found this useful.
Alan Hamlyn
http://www.astutely.co.uk/
http://www.wuup.co.uk/