Home arrow HTML arrow Page 2 - 10 Design Tips To Live By

10 Design Tips To Live By

In this article Mitchell talk about the top ten design tips that any web designer should live by. He talks about usability, colors, linking, cascading style sheets, image optimization, testimonials and more.

Author Info:
By: Mitchell Harper
Rating:  stars stars stars stars stars / 0
February 06, 2002
  1. · 10 Design Tips To Live By
  2. · Tips
  3. · More Tips
  4. · Conclusion

print this article

10 Design Tips To Live By - Tips
(Page 2 of 4 )

Tip #1: Select a color scheme and stick to it

How many times have you visited a site and noticed that their home page is colored in red, black and gray. You click on a link such as the about us page and you're greeted with a yellow and green page with blue text. This sort of inconsistent coloring is enough to deter visitors from every coming back to your site because it screams a lack of professionalism.

Before you even start coding your site, choose two or three complementary colors and stick with them. If you take a look at http://www.techbuy.com.au then you'll notice that I've used a strict combination of reds, grays and white consistently throughout the site.

The best way to choose a color scheme is to take a look at other sites that you like: what colors do they use and how do they use them? Do they gradually introduce the colors or are they all smack bang in the middle of the screen when you load their home page? I've come up with a list of the five most used color combinations around the web. Here's the list:
  1. Red, yellow and white
  2. Blue and white
  3. Red, gray and white
  4. Blue, orange and white
  5. Yellow, gray and white
Tip #2: 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. If you're desperate to implement flying pigs or falling snowflakes 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, etc.

Tip #3: 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.

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.

To see what I mean, spend a couple of minutes moving around http://www.amazon.com. Now, spend the same amount of time at http://www.isonsw.com.au. Which site's menu system did you feel comfortable with? I'm sure you answered Amazon's, because it was consistent, easy to use and blindly obvious which page you're on no matter where you are on their site. 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.

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 site. 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 red, making the background color of a <td> cell yellow, etc.

Use your color scheme as discussed in tip #1 to create a variety of styles including a bold 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.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials