By: Mitchell Harper
In this article I'm going to talk about the top ten design tips that I live by. I've spent the last couple of weeks formulating this list and if you run a web site or are a professional web developer, then you really should keep this list by your side.
I've decided to share this list with you because of the overwhelming number of emails I receive every week from people that read my articles around the web. They ask me to critique their web sites for design and/or usability flaws. Hopefully though, if you use the tips in this article when you're creating a site then you won't need anyone to critique yours.
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:
Tip #2: Design for cross browser compatibility
- Red, yellow and white
- Blue and white
- Red, gray and white
- Blue, orange and white
- Yellow, gray and white
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.
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.
If you've never used cascading style sheets before, then checkout this article by yours truly first.
Tip #5: Open external links in a new window
One easy to implement tip that is often overlooked is making sure that any links that don't take the visitor directly to a page on your site 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 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:
<a target="_blank" href="http://www.yoursite.com">Click here</a> to open yoursite.com in a new browser window.
Tip #6: Underline and color your hyper links
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 hyper links that look like they’re part of the body of a document. When you're developing a new site, always make sure that your hyper links are underlined, and preferably in a different color to the text surrounding them.
Here's an extract from a site that I visited the other day:
Quickly glancing over the text shown in the example above, how many links did you spot? If you answered none, then you wouldn't be alone. This was the page I received when I signed up for an affiliate program a couple of days ago.
Each "click here" was actually a link, but the web designer didn't even bother to make the link stand out from the rest of the text around it. Look how much easier it is to spot the links when they're both underlined and colored:
Tip #7: Optimize your images
One of the main reasons that a lot of web sites are slow 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 be displayed. Here are three ways to optimize your images:
Tip #8: Tell your visitors who you are and what you do straight up
- 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 colors: 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 PhotoShop to decrease its color 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 PhotoShop, you can specify the amount of "loss" for the image, which in turn reduces its size.
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. Here's an example for a fictional site, Fred-Smith-Tools.com that sells gardening tools:
"Hi, thanks for stopping by Fred-Smith-Tools.com. We are based in Los Angeles, USA and sell a wide range of gardening tools including spades, pruning tools, clippers, spray guns and shovels. Please scroll down this page to take a look at our list of daily specials!"
Tip #9: Use customer testimonials
A customer testimonial is simply a comment from one/more of your sites visitors that includes some positive details of their dealings with your web site 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.
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.
To actually collect testimonials, you can either ask some of your customers for them directly, or setup a feed back form on your site. Here's the sort of testimonial you should be looking to post on your site:
"I found your site yesterday from Google.com and I must say, I'm really impressed with its layout and your HUGE range of products. I ordered a CD from your on Thursday and it arrived right at my door the next day. If only there were more sites like yours on the net. Good work."
Tip #10: Provide contact details on EVERY page
One of the main sources of frustration for many web surfers is the lack of contact details on many sites. If you run a web site 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.
If you have an existing site then you should take the tips described in this article and try to apply them to your site. 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 your 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!
Article submitted by Devarticles.com
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
More Web Development Articles
More By Developer Shed