Dos and Donts Guide to Great Web Design
When followed, the guide will prove to be quite a valuable web
design resource. From the inexperienced to the experienced, this guide
has something for everyone.
The Process of Great Web Design
Just to make sure we are all on the same page, lets begin with the basic definition for "web design". According to Wikipedia, web design is:
"a process of conceptualization, planning, modeling, and execution
of electronic media delivery via Internet in the form of Markup
language suitable for interpretation by Web browser and display as
Graphical user interface".
The process of web design can be compared to the process of
writing a research paper. In the conceptualization/planning stage,
flowcharts (the outline) are created which illustrate the navigational
structure of your website. In the modeling stage, static wireframes are
created (the rough draft) which illustrate the skeletal layout for each
section of your website. After the wire frames are created, graphics,
colors and text are used to create the design of your web pages based
on the layout of the wire frames. In the execution stage, your design
is converted into a format supported by web browsers, text and content
are added, and finally, your website is published live to the Internet
for the world to see (final draft).
All three stages of the design process are equally important. Many
web designers skip a stage in order to save time or because they don't
think that is is necessary. However, all three stages are necessary if
your goal is to create a successful design and respectable website.
Even if the three stages are used, there are many mistakes that web
designers can make that will lead to poor-quality, non user-friendly
websites. It's time to clean out the cabinet of bad web design
practices and restock it with the good ones.
Stage 1: Conceptualization and planning
This stage is skipped more often than the other two stages. Most
writers don't enjoy creating outlines for research papers, and most web
designers don't like creating flowcharts either. Don't be lazy. If you
put forth the effort and plan out your website, then you will find the
web design process to go smoothly with fewer mistakes made along the
way.
There are a few things that you will need in order to effectively conceptualize and plan your website:
a braina pen and paper(optional) flowchart softwarea general idea of the different sections of your website
To begin, grab your pen and paper or launch your favorite flowchart software. I use OmniGraffle Professional
for Mac OS X which costs $150 per license but is well worth it if you
create websites on a regular basis. If you're on a PC, then SmartDraw is a great FREE piece of flowchart software that you can use. A pen and paper work just fine, though.
There are many methods to creating flowcharts. We are going to
show you the most basic way to do it for the sake of time and the
length of this article. If you want to learn more about flowcharts
visit flowcharts on Wikipedia.
View the flowchart
that we created when conceptualizing Chromatic Sites. (1) At the top of
the flowchart we list the name of our website. (2) Next, we include
each primary section of our website: Home, About, and Services. These
sections are the main navigation for your website. What the names of
each section will be is entirely dependent on the content of your
website. Try to use as few sections as possible so that your visitors
are not overwhelmed when navigating through your website.
(3) Next, add all of the secondary pages (subsections) that will be
listed on each of the primary pages. For Home, we have included
Professional Web Design, Web Development, and Search Engine
Optimization. The secondary navigation needs to be more descriptive
than the primary navigation. The deeper your websites' navigational
hierarchy goes, the more descriptive each label should be.
The Dos
Less is more; keep the number of primary sections to a minimum. We use 6 sections on our website which is more than enoughWhether you use a pen and paper or flowchart software, keep things
as clean and organized as possible. Although you (and anyone working
with you) are the only ones that will be using the flowchart, it still
needs to make senseYour primary sections should use broader terms, while secondary and tertiary terms should be more descriptive
The Donts
Creating a flowchart is pretty straight forward; however, there are a few mistakes that can easily be made:
Don't use very descriptive terms in your primary navigation unless your entire website focuses on one narrow topicDon't try and lump multiple topics on the same page. Create a
general section for these topics and from that section create
subsections. This will make the subsection (descriptive) web pages more
likely to have better rankings in the search engines (Google, Yahoo,
MSN, Ask)
Once you have created a concise and descriptive flowchart, you're
ready to move on to the second stage of the web design process:
modeling.
Stage 2: Modeling
In the modeling stage, static "wireframe" mockups are created.
Each mockup illustrates a bare-bones skeleton of the layout for each of
the web pages that will be included in your website. This stage is
important because it gives us an idea of where different elements will
be placed in our design. Some of these elements are:
logonavigational menucontentimages, videos
To create these mockups, you can use a pen and paper or your
preferred mockup software. In the past we have used Photoshop, but
lately we have been using OmniGraffle Professional. OmniGraffle is not
as resource intensive as Photoshop is and it allows us to assemble our
wireframe mockups much quicker.
In addition, make sure that you have the flowchart(s) that you
created nearby as you will need to reference these from time to time to
make sure that you are mocking up all of the pages that will appear on
your website.
Here is our example of how a wireframe mockup
should look. As you can see, there are no colors or graphics included.
This is exactly how a wireframe mockup should be - a skeletal layout of
your design. The purpose is to be able to have a general idea of where
each of the web page's elements will be placed.
We usually begin from the top left and work our way down to the
bottom. There is no specific way that a wireframe should look. Use your
imagination. However, make sure that when creating your wireframes you
don't forget to include the most important elements of a website (logo,
navigational menu, content placement, images/video placement).
If some of your pages will be using the same layout, then it is not
necessary to mock all of those pages up (although you certainly can).
Just be sure to mockup any unique layout that your website will have.
You'll thank yourself later.
The Dos
mockup all unique pagesinclude important elements (logo, navigation, content placement, images/video placement)start from the top and work your way downreference your flowchart created in stage 1 to make you don't forget to mockup any pagessave, save, save - like with anything on the computer, save your mockup(s) every 10 minutes or sofocus on clean, user friendly layoutslabel your elements so you don't forget what they are when you reference them in stage 3, executionuse other web sites as inspiration; there is nothing wrong with
taking elements from other sites and making them your own (see "donts")
The Donts
don't include graphics or colors (that's for the next stage)don't make your mockups too "busy"; focus on clean, well organized, user friendly layoutsdon't skip this stage; it is just as important as the first and the last
if you take elements from other websites, make sure you don't
plagiarize; there is a difference between being inspired by another
website to create certain elements of your design and blatantly ripping
off their layout and colors
Stage 3: Execution
In the third and final stage, execution, the planning from stages 1
and 2 are combined to assist in creating a live, interactive website.
The third stage is by far the most time intensive since you will be 1)
creating the graphics 2) creating the content, and finally, 3)
converting the web designs from images into code that web browsers use
to present your website to the world.
By the time you reach the third stage, you should have a clear idea of:
how your visitors will get from one place to another (stage 1, flowchart)how your web pages will be laid out (stage 2, wireframe mockups)
If you don't have a clear idea of these two things, go back to the
first and second stagees and continue to develop them. You will find
that the third stage is easiest when you have constructed a clear,
concise battle plan for designing your website.
Ditch the pen and paper
In stage 3, you need to be using Photoshop or another image
editing program since you will be using colors and graphics to create
the layout for your website.
We usually begin creating the "home" page (index) first. Use your
wireframes that you created in stage 2 as a template for each of the
pages you create. However, instead of using solid boxes, use graphics,
colors and text instead. Each page must look exactly how you want them
to look on the Internet since this is the final stage of the design
process.
Be sure to include the background for your navigation (but don't
actually add the text to your image). When converted using CSS
(cascading style sheets), your navigation should be in the form of text
and not images. Images are not crawl-able by the search engines (the
keywords used in your navigation won't be indexed in the search engine
results pages, meaning fewer people will be able to find your website).
When you're happy with your designs and feel that they are ready to
be put on the Internet, it's time to break apart the designs so that
you can create a CSS based layout. For more information on converting
your layouts to CSS or marking up your website in CSS, visit W3Schools.com or The Blog Herald.
After looking around the Internet, we couldn't find a decent
image-to-CSS tutorial - so expect one from us in the coming weeks.
Converting your designs into CSS is extremely important since table
layouts are a thing of the past.
Here is an example
of a nearly-completed website of the layout we mocked up in stage 2.
This was taken directly from our web browser and as you can see, there
is now a logo, colors, a pretty navigation system, a footer, and a most
importantly, a clean, organized layout. Thanks to the planning in
stages 1 and 2, our layout is well-organized and easy to use.
The Dos
reference your templates that were created in stage 2; though it is
fine to deviate from your original layout, you shouldn't need todo some research before creating your actual design; get ideas from other sites and make them your own (without plagiarizing)include color and graphics to create the final look for your web pagesuse CSS (cascading style sheets) to convert your designs from images into markup understandable by web browsersreference your flowchart from stage 1 when coding your pages with
hyperlinks; it is better to use a drop down menu that includes all (or
the majority) of the links in your website on every page; this will
allow for easier navigation and also make your pages easier to crawl
when the search engine spiders stop by; a great place to get CSS drop
down menus is at Dynamic Drivefinalize your design while working in Photoshop or whatever image
editing software you use; it can be a pain to make changes to your
design once it is converted into markup (code)
The Donts
don't include the text in your navigation menus when converting to
CSS; instead of using image text, use regular text that is readable by
search engine spidersdon't use tables when converting; even if you need to buy a book on CSS, it will be worth it; tables are deaddon't forget to compress your images when they are cut apart for
CSS; there is nothing worse than a slow loading website because of
large image files; Photoshop has a "Save Optimized For Web" option (CS3
- "Save for Web and Devices")
Process Makes Perfect
By following a web design process such as the one illustrated in
this article, you increase the chances of creating a website that is
well-organized, easily navigable, and very user-friendly.
About the Author
Professional Web Design company Chromatic Sites publishes web design
tips for amateur and professional web designers. Long articles posted
monthly, short articles posted weekly. Visit us at chromaticsites.com
|
