The order of design

As a site reviewer, I'm privileged to see new website designs on a daily basis. Sometimes I am pleasantly surprised by a new feature, an ingenious marketing tool or simply a really cool design.

I'd say these sites that are put together well and have fresh ideas come along 1 out of a 100. That means that 99 sites are usually making the standard errors made by most new designers. And if I had to find a basic reason why most of the errors are made, I'd say that it's lack of planning or lack of having an order in their design.

I have come up with an order to my designs that works very effectively and ends up saving me loads of time in working out bugs and fixes. It also allows me to design faster and cleaner, thereby saving my clients some money since I'm not spending their money fixing mistakes.

Here it is in a nutshell.

1. Plan. Plan. Plan. - I cannot stress this part of web site design enough. You should have on paper every page and every piece of content you intend to have on a web site before you start designing. Make a flow chart of the entire site. Write down who your target audience is. Decide what the main goal of the site is. Decide on the color scheme. Have all your pictures ready. Write out your sales copy. Draw links on paper between the pages that will link. Write in the spaces where you will allow advertising. Write out all the questions that will go in your interactive reply forms. If you have a database, get all your products labeled and ready.

This list could go on and on, but the point is to be able to "see" your entire site before step 1 of design begins. You should be able to see how the site will flow, how the visitors will traverse through the site, where they will order, how they might leave, what you want them to not miss and on and on. Only then do you begin designing.

2. Graphics come first. - Design the graphical shell or layout for the site first. I use a combination of Fireworks, Photoshop and Dreamweaver to design all my sites. Fireworks is my main graphic creation tool. I might spend one to two days getting the graphics just right before I ever start one line of code of html. The more time you work on getting your graphics just right, the less time you will spend changing them later.

3. Create a sample graphical page. - Next I take my graphical look and plug it into an html page. I add some bogus text just to show the layout and then show the client for their approval. If they don't like the shade or shape of something, I make the changes then show them again. This process is dynamic and goes back and forth until they are satisfied. Of course, I go through all this because I tell my clients that once they sign off on the graphical layout, that's it, the site starts building out and there's no going back. The bottom line to this is to get your graphics how you like them, then move on.

4. Set up navigation - At this stage your graphics are just right. Now you start working on your navigation. Where will your links go and what will they link to? In some cases this may have to be done during the graphics phase as the links are really embedded within the images, but for text links, this is the time to do it. We are talking about the links that will stay the same regardless of what page on the finished site you are on. Usually these links are at the top, left or bottom of the page.

You'll also want to add your metatags and description at this point so when you duplicate pages, they carry over. If you have any Server Side Includes such as the date being displayed on every page, you do that here also. You also set up your basic tables at this point to set the width of your design for the entire site.

5. Duplicate pages - Now we start what's called 'building out' the site. We still have only one finished page and we start doing a "save as" routine to make the rest of the pages of the site. Yes, they will be identical, but this saves a lot of time rather than designing each page from scratch. This also ensures that all the links will be correct on every page, or if you make a mistake, that they will be wrong on every page, but hey, at least you know where to find it.

I build out the entire site, every page at this point. Note that I haven't put in one piece of text or sales copy. We've essentially been working on the shell or structure of the site.

6. Link Testing - Now that you have all the pages built out, preview the entire site in a browser. You don't have to load it to the web just yet to test this. Most html generators have a preview engine.

7. Add your content - Start adding your text and doing your text formatting, etc. This is really the easy part. Don't forget to spell check.

8. Upload and test your site - Start uploading pages and images. Once uploaded, go once through every nook and cranny of the site. Check EVERY SINGLE link to make sure it is working properly. Look for broken images. Do these steps in BOTH Internet Explorer and Netscape Navigator. If you don't have both, then get them, they are free.

9. Bask - Enjoy your finished web site, at least until tomorrow when you have a great idea that must be added.