Basic Web Design 101
When creating a website, there are nine
main elements to be considered and each contributes to the impact
and success of your site.
1. Overall Look
Your home page is your billboard or
store front - it creates an immediate impression on visitors to your
site, so it's got to create the right impression ... right?
It should look:
Aim to "underwhelm" rather than
overwhelm! Too many flashing lights, colours, drop-down boxes,
graphics etc will be distracting. It's a bit like those stores that
play loud, frenetic music - your heart rate rises, your stress
levels go up and you just want to get out - fast!
Whether you have a business site or a
personal page, you have to give people a reason to stay on your site
- we're mercenary little critters, we humans, our first question is
always, "what's in it for me?"
That doesn't mean that you have to give
away free programs, books, tickets or holidays - it does mean that
you have to offer something. That "something" could be:
- Help with a problem
- Opportunities to contact similar
- Links to useful sites
If you do have a business site, you
need to give information about your product or service that is:
- easy to follow
- easy to find
- easy to order
We all know that speed is the key to
keeping visitors. People get impatient if it takes too long to make
contact - so you must ensure that your home page at least, loads as
quickly as possible. That means no big, flash graphics.
Keep reminding yourself that your first
page is like a billboard. When driving your car, you don't have time
to read detailed descriptions, or admire intricate pictures on
billboards. The signs flash past you and have to make an immediate
Your web visitors are 'flashing past'
as well, so keep your front page simple and fast.
There are numerous articles on the net
about how to improve speed - take the time to check them out and
then discard anything that slows down your home page too much.
4. Graphics and
The graphics and lay-out of your home
page contribute to that first impression - think about what image
your site is trying to convey and make sure everything on your site
contributes something towards that overall image.
If you have a serious business site,
you don't want garish cartoons on your front page - but if you have
a games site, then cartoons can be an integral part of the image.
Graphics are what eat up the loading
time of your site. A rough rule of thumb to determine good loading
time for a page is to keep the entire page around 30k.
Images should be between 6 - 8 k. Each
additional 2k adds approximately one second to loading time.
If in doubt, right click the image and
then click on Properties to get the size of the image.
Colour is also an important part of
your site; colours have different effects on our emotions:
- Red and orange excite the senses and
increase heart beat
- Blues and greens are more restful
- Yellow reminds us of sunshine and is
a happy colour
Consider the effect you want to create
and choose a colour that is appropriate.
When reading Western texts, the eye
travels from the top left of the page, across and then down to the
bottom right. Remember this when you're placing graphics on your
Any graphic which has a directional
aspect should be placed to point the eye towards the most important
section of the page. If you have a picture of a bird on the top left
corner of your page, make sure it is facing inward and that its beak
is leading the eye to the centre of the page, not away from it.
The same applies to all graphics:
- Faces should 'look' to the centre of
- Cars should be 'parked' facing
towards the centre of the page
- Roads, neck ties etc should all be
placed to lead the eye across from left to right, or down from top
This is also why you should place your
navigation bars down the left side of your page - it keeps them
constantly in the visitor's field of vision.
5. Text Readability
This doesn't refer to the words you use
(we'll look at them in detail later) - but to the way the words look
on the page.
Going back to the concept of the
billboard, your words need to stand out on your page - you need to
surround them with plenty of white space.
Think over some of the sites you've
visited - some make you feel as if you have to duck your head to
read them! Dark backgrounds make you feel as if you're in a small
space and also have a depressing effect on your mood.
Certain coloured backgrounds make it
very difficult to read the text; purples, orange tonings and reds
dazzle the eyes.
The colour of your text is just as
important - bear in mind that different browsers read colours
differently - what looks great on your browser, could well be
invisible on another!
Take a lesson from the newspapers and
divide your text into columns for easier (and quicker) reading -
even two columns are better than one slab of text that covers the
entire width of the page.
Another element that contributes to
text readability is the font you choose. Plain fonts (Arial, Times
New Roman, Garamond and Courier) are the easiest to read. Fancy
fonts are fine for headings, but not for full pages (imagine trying
to read a whole page in Gothic,
Script, Westminster, or Cloister). Your eyes would soon tire of the effort involved and
you'd be reaching for the back button!
You have to make your page as easy for
your visitors to read as is humanly possible and this means breaking
it up into little 'chunks' for them. We've already looked at the
need for columns, (which divide the page vertically) - you also need
to divide your page horizontally, by the use of headings and
When you were at school, your teachers
told you to use headings in your notes - apply the same principles
to your web pages. Look for the key points on each page and write a
short statement that summarises each point - this is your heading.
Read through each section and see if it
can be further divided into smaller points; write a summary of these
sub-sections and these are your sub-headings.
Select a font for all your headings and
sub-headings (and stick to it). It's not necessary to have a
different font for headings (just go up one size for headings, and
then use bold on all headings and sub-headings).
This way it's easy to recognize which
is a heading (large and bold) and which
is a sub-heading (same size but bold).
The point of this is to make it easy
for your visitors to glance at your page and to take in all the key
points. If what they see interests them, they'll stay and keep
reading - so it goes without saying, that your headings should be
written with care!
To draw attention to other important
points, you can also highlight them -
by putting a whole sentence in bold or a different colour (or both). However, take care with the colours you select - some are quite difficult to read - even against a white background.
Your main navigation bar should run
down the left side of your page, for two reasons:
- We're accustomed to reading from
left to right and from top to bottom
- We're accustomed to finding
navigation bars on the left of web pages - why buck the system
(especially when it works)?
On a long page. It's also a good idea
to have a brief nav bar along the bottom of the page (just home | top of page will suffice).
When you've found a system you're happy
with - use it on every page, so that your visitors know where to
look for the information.
Make a blank page which has your page
layout (columns), any logos or standardized graphics, alt tags and
navigation bar already built in. Call this 'blank" and then when you
make a new page, you have everything already set up and just have to
enter the content, html tags and then save it as "whatever.htm".
8. Privacy Statement
If your site is a business site, then
one of the most important things you have to do is to ensure that
your potential customers feel confident dealing with you. On the
web, you do this by telling people exactly what you're doing to
safeguard their interests - in particular, how you're protecting
their privacy. It's worth having a separate page which sets out - in
detail - your policy towards their email addresses; how you accept
orders; how you gather information; who has access to this
information; how you use information gathered from children and so
Visitors also like to know that real
people have used your products or services, so it's worth asking
your satisfied customers if you can quote any positive comments
they've made about you. Don't be afraid to ask for testimonials - we
all like to know that our opinions are valued.
Set up a separate page for your
testimonials and offer to include links to your customers' pages in
return for using their comments. This is one of those "win-win"
Now we come to the most important
element - if this part is wrong, the rest of your efforts are
largely wasted. How many times have you been impressed by a site's
initial appearance, only to be disappointed by poor spelling,
careless grammar and punctuation?
It reflects badly on the site owner and
indicates that whoever is responsible for this page, is sloppy,
careless, lazy, unprofessional or all of the above! Would you
entrust any of your hard-earned money to someone who doesn't even
care enough to check the expression of his/her own site?
- You can take steps to improve your
own writing skills
- You can employ someone to proof read
and edit your work
- You can employ someone to write your
pages for you.