Tutorials & Script Homepage
Design Theory 22 to 28
Web Page Mock Ups
Populating a Drop Down from a Database
Top Ten Web Design Tips
Design Usability and Graphics Compression
advertisment
advertisement
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
Spotted an Error ? Let us Know
100's more FREE templates at FreeWebTemplates
Looking for a new Web Host ?
Free templates from TemplatesLand
Professional High-End Templates
TemplateBox.com more FREE templates
Free Flash Templates and Intros
advertisement
 
DESIGN THEORY NUMBER : 24
Please Click Here, and Help Keep This Site FREE to Use
 
Please click on our sponsors advert to the right if you download or use anything from this page.
Thank you for your help.
This article has been kindly written for WebDesignHelper.co.uk by Luke Humble - Web Designer / Flash Animator {http://www.boritech.com}.

Top Ten Web Design Tips

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}.
Web Hosting  |  Membership website templates  |  Reliable UK Web Hosting  |  dresses  |  Art Web Templates  |  Cheap Flight Deals  |  UK Web Hosting Company  |  Coursework Writing  |  Reseller Hosting  |  coches de ocasion  |  Cheap UK Web Hosting  |   cell phones  |  Web Design  |  Low Cost Domain Names  |  Website templates  |  master a distancia  |  Austin Web Design  |  Flash Templates  |  Factory  |   cell phones  |  Canadian Web Hosting  |  Flash Intros  |  Web Templates  |  cartuchos  |  Corporate Logo Design Service  |  Website Templates  |  Bespoke Software Development  |  Domain Name Registration  |  Free Website Templates  |   Dedicated Server  |  UK Web Hosting  |  Dating Software - aeDating 4.1  |  Website Templates  |  Power Saver  |  taobao agent  |  Flash templates  |  cctv cameras  |  Lolita Dresse  |  china wholesale  |  Canadian Web Hosting  |   Cheap Web Hosting Deal  |  Linux Hosting  |  Web Design uk  |  Web Hosting  |  Business web directory  |  Electronics  |  Free domain names  |  Best UK web Hosting  |  Shower Enclosures UK  |  

 
advertisment
advertisment
advertisment
  Top-end templates
  Flash Templates
  Web Hosting UK
  Made-in-China.com
  Web Design Tips
  Web Hosting Reviews
  Web hosting reviews
  Website Design
  Top web hosting
  Stock Photography
  Bildagentur
  Reseller Hosting
  Company Logos
  Website Templates
  Website Templates
  Web Hosting UK
  templatebox.com
  freewebtemplates.com
  templatesland.com
  topfreegraphics.com
  freegraphicland.com
  free-templates-layouts
  Logo Design Software
  Layouts4Free
  Webmaster Resoucres
  Web Templates Factory
  Free Web Templates
  Free Templates Catalog
  Web Templates
  Reseller Web Hosting
  Stock Photography
  Animations-galore.com
  4print.com.au
  Host Review
  Web Hosting Host Color
  Dedicated Servers
  FlashTemplateDesign
  ZeroDollarTemplates
  Killersites.com
  how-to-build-websites
  Build a free website
  web Hosting
  Business Logo Design
  Templates Favpage
  webmastermind.de
  flasheasy.com
  More Featured Sites