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
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
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.
|About the contributor