This article will cover the top ten design tips that I live by. I've
spent the last few weeks formulating this list and if you run a website or are a professional web
developer, then this list will be of great importance to you!
Tip #1: Select a color scheme and stick to it!
How many times have you visited a website and noticed that their home page is coloured in red, blue
and gray, then you click on a link such as the contact page and you're greeted with a yellow and green
page with pink text. This type of inconsistent colouring is enough to stop any visitors from ever
coming back to your website because it screams a lack of professionalism (apart from bad tast in colours!).
Before you even start coding your site, choose two or three complementary colours and stick with them.
If you take a look at http://www.flatlinerecordsinc.net/ then you'll notice that I've used a strict
combination of green, black and white consistently throughout the site.
The best way to choose a colour scheme is to take a look at other sites that you like and ask yourself:
- What colours do they use and how do they use them?
- Do they gradually introduce the colours or are they all smack bang in the center of the screen?
To help in your decision on your own colour sheme l have come up with a list of the five most used color
combinations around the web:
- Red, yellow and white
- Red, gray and white
- Blue and white
- Blue, orange and white
- Yellow, gray and white
* Remember, what looks great on your 19"TFT screen may look absolutely vile on anopther persons
1980 12" screen, so test your site on as many different types of computers before stickin with a
colour scheme!
Tip #2: Provide an intuitive, easy to use menu navigation!
Have you ever been to a site and wondered where in the world the links to the rest of its pages are?
Menu accessibility is one of the key aspects to creating a positive usability experience for visitors
to your site because without it you have no site!
Most web sites either display a left-aligned, vertically orientated menu or a top-aligned, horizontally
orientated menu system. Surveys have shown that using either one (or both in a complementary style) of
these menu styles is guaranteed to provide your visitors with a positive site experience because they
feel comfortable moving from page to page and don't have to run for the back button every time they
want to return to the home page.
When you're developing a new site, you should prototype at least three menu systems and ask friends,
family and work colleagues which one they would prefer to use and why. Then from this you can come up
with the most suitable menu system that caters for everyones needs.
* The more blidly obvious which page you're on no matter where you are on the site, the easier it is
for people to use and understand!
Tip #3: Design for cross browser compatibility!
This is one of the most important tips that I offer people. Never, ever implement either an Internet
Explorer or Netscape specific function into a site unless a closed user group, such as a company
Intranet, will only use it.
Sure, it can be tempting to implement super-dooper DHTML effects such as automated iFrame scrolling,
but be warned: those who don't have the latest browser installed won't take to kindly to your
inconsideration for their antique browser. If you're desperate to implement flying pigs or falling
leaves on your site but still want cross-browser compatibility, then take a look at BrowserHawk from
http://www.cyscape.com/. BrowserHawk is a nifty set of COM's that allows you to detect all sorts of
things about the client's browser including whether or not they have JavaScript enabled, the
version and name of their browser and so on!
* So make sure like with the colour scheme testing, that you test your site on a range of different
browsers.
Tip #4: Use cascading style sheets
Cascading Style Sheets (CSS) allow you to develop a specific set of style classes, which you can
implement throughout your website. Style sheets can also be used to change certain style attributes
of the built-in HTML tags, such as making the color of a <H1> tag blue, making the background color
of a <td> cell green and so on.
Use your color scheme as discussed in tip #1 to create a range of styles including a bold,underlined
headline, an important points style, and a default text style. You may also want to change the default
style of the anchor tag so that your links match the color scheme of your site.
Tip #5: Open external links in a new window!
One easy to implement tip that is often overlooked on millions of websites is making sure that any links
that don't take the visitor directly to a page on your website should be opened in a new window by DEFAULT!
When you think about it, this benefits both yourself and the visitor: they still have your site open and
are given free reign to browse the external link, with the option to return to your site simply by
closing or minimising the external sites browser window.
To open a link in a new window you simply need to specify the value "_blank" for the target attribute of
the links anchor tag:
Click here to open yoursite.com in a new browser window.
This simple bit of html code will open a new window with the url specified (http://www.yoursite.com). Add it to
your page and see how it works!
Tip #6: Underline and color your hyperlinks!
The majority of web users are in a hurry and are pressed for time in some way or another. Our eyes only
pickup on certain things, and these don't include hyperlinks that look like they�re part of the body of a
document. When you're developing a new website, always make sure that your hyperlinks are underlined, and
preferably in a different colour to the text surrounding them.
If your visitors don't know there's a hyperlink there then they wont use it, so make it stand out!
Tip #7: Optimize your images!
One of the main reasons that a lot of websites are slow to load is because their images are not fully optimized.
Optimizing images will decrease their file size, resulting in less data needing to be downloaded from a site
before it can displayed the image. Here are three ways to optimize your images:
- Reduce the image size: Make sure your images are as small as possible. Crop any "white space" around the
edges because it increases the file size of the image.
- Reduce the number of colours: Many image formats including the Graphical Interchange Format (GIF) allow you
to reduce the color depth of an image without noticeably decreasing its visual quality. If you have an image
such as a logo, then try using a program such as Adobe PhotoShop or Macromedia Fireworks to decrease its colour
depth down from 16 bit to 8 bit. Save the image and view it in your browser. If it still looks crisp and clean,
then save the image. Notice the difference in file size compared to the 16-bit version?
- Reduce image quality: If you're working with a Joint Photographic Experts Group (JPEG) image, then you can
reduce its file size by reducing its quality. Using a program such as Adobe PhotoShop or Macromedia Fireworks,
you can specify the amount of "loss" for the image, which in turn reduces its file size.
I personally try to keep images below 10kb unless it is a graphic that visitors want to click on to see a more
detailed view!
Tip #8: Tell your visitors who you are and what you do straight up!
This is probably the simplest tip to implement in this article. When a new visitor comes to your site for the
first time, they want to know who you are and what you do straight up, especially if you're selling products.
On your home page, you should have a small paragraph telling them exactly who you are and what you do. This will
increase their confidence in your company and if you have what they're after then there's a better chance that
they will stick around.
A lot of sites on the web are not very personal, and this is not what we are used to. When shopping on the
highstreet we are always greeted with a smile from the shop-keeper, in the same way you need to smile at
your website visitors.
Tip #9: Use customer testimonials!
A customer testimonial is simply a comment from one/more of your websites visitors that includes some
positive details of their dealings with your website or company. By displaying customer testimonials on your
site, visitors can see that other people have used your site/products and found them to be useful and valuable
to their needs. Customer testimonials are also one of the best ways to increase your visitor's confidence in your
site (along with what l discussed in tip#8).
To display customer testimonials on your site, add a link to your menu system named "Customer Testimonials".
Link this to a page where you display all of the testimonials you have received from your customers. It is also
a good idea to place a few at the base of your homepage as examples, but don't brag about them otherwise your
visitors will think you are bigheaded! :(
To actually collect testimonials, you can either ask some of your customers for them directly, or setup a
feedback form on your website. Dont place any testimonials on your site that are strongly negative in any way,
just "filter" out the nagative stuff and look for the positive information, but don't trick your visitors as they
will soon know that you are lieing to them when they realise their product has arrived and it's been three
months since they ordered it!
Tip #10: Provide contact details on EVERY page!
One of the main sources of frustration for many web surfers (and l am one of these!) is the lack of contact details
on many websites. If you run a website that sells products, then many people may prefer to order over the phone
instead of the Internet. You should display either a sales email address or the phone number for your sales hot
line in the top right hand corner of every page.
* The whole point of a website is to make contact with new people/visitors and potential customers and vise-versa,
so don't make it hard for your customers to do so otherwise they will go somewhere else!
Conclusion
If you have an existing site then you should take the tips described in this article and try to apply them to
your website. If you're a web developer, then you may want to check-off each of these tips as you're prototyping
each and every site that you design. No doubt as you design more and more websites, you'll come up with a list
of your own design tips and guidelines, just as I have. Use them whenever you can, and share them with newbie web
developers so they don't make the same mistakes that you may have!
| This article has been kindly written for
WebDesignHelper.co.uk by Luke Humble - Web Designer / Flash Animator {http://www.boritech.com}. |
 |
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
