As a site
reviewer, I'm privaleged 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.
[BACK]
|