Web Development

  Homes arrow Web Development arrow 10 Design tips to live by
 Webmaster Tools
 
Base64 Encoding 
Browser Settings 
CSS Coder 
CSS Navigation Menu 
Datetime Converter 
DHTML Tooltip 
Dig Utility 
DNS Utility 
Dropdown Menu 
Fetch Content 
Fetch Header 
Floating Layer 
htaccess Generator 
HTML to PHP 
HTML Encoder 
HTML Entities 
IP Convert 
Meta Tags 
Password Encryption
 
Password Strength
 
Pattern Extractor 
Ping Utility 
Pop-Up Window 
Regex Extractor 
Regex Match 
Scrollbar Color 
Source Viewer 
Syntax Highlighting 
URL Encoding 
Web Safe Colors 
Forums Sitemap 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
WEB DEVELOPMENT

10 Design tips to live by
By: Developer Shed
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2003-08-09

    Table of Contents:

    Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     

    SEARCH DEV MECHANIC

    TOOLS YOU CAN USE

    advertisement

    10 Design tips to live by

    By: Mitchell Harper

    Introduction


    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:

    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.

    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:

    1. 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.
    2. 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?
    3. 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.
    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. 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.

    Conclusion

    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!

    Useful links:

    http://www.dsiegel.com/tips/

    http://www.webpagesthatsuck.com/

    http://www.useit.com/

    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

       

    WEB DEVELOPMENT ARTICLES

    - On Page SEO for New Domains
    - Improve Your Site`s Speed
    - Safari Books Online Review
    - Creating an Estore From the Ground Up
    - Most Common SEO Mistakes Developers Make
    - Making the Most of Your Titles and Meta Desc...
    - Five Ways Using Flash Can Damage Your Site
    - A Web Designer`s Guide to Colors
    - Use Webstarts to Create a Free Site
    - More Than Just Looks. How Your Web Design C...
    - How to Design Content Pages
    - Mint Review
    - Make Your WordPress Website Look Professional
    - How to Create a Mobile Web Site
    - Meta Tags: Still Useful?

    Developer Shed Affiliates

     



    © 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap