5 Web Design Tips

August 12th, 2009

Group like Elements.

  1. Group visual elements with related functionality or related information together. Arrange these groups hierologically based on their importance and frequency of use.
  2. Separate the header used for main navigation and brand from the main content.




Use Lots of Spacing

  1. Limit number of columns to two with large amounts of margin spacing between them rather than opting for three columns.
  2. If vertical scrolling is unavoidable for displaying a pages content, embrace it and space the page out without too much concern for what is above the fold. Always make sure your main navigation is above the fold Also if scrolling is need consider having navigation in you pages footer. Consider horizonal navigation
  3. Add extra space between groups of related items.




High Contrast

  1. Make sure body copy has a color of high contrast to the background so it easy and enjoyable to read.
  2. Clear and consist contrast separating the hierarchy of your page. Make sure it is clear what a headline is compared to a subhead and body copy.
    Make sure important icons and navigational elements pop.
  3. Separate the header, footer and main content from one another using high contrast.
  4. Color and color value are the easiest way to create contrast, but consider other methods such as texture, direction, shapes used or type faces used.




Keep it Simple

  1. Don’t make your visitors think.
  2. Simple navigation: large buttons with as few options as possible.




Use Repetition

  1. Global navigation: the main navigation should be the same on every page.
  2. Use graphic and type standards. Reset your CSS and set your display elements at the top of your style sheet then try to avoid overriding them as much as possible.
  3. Be consistent with icon styles throughout your site. Use only one set of icons per site.
  4. Take extra special care to use consistent stylization of inline hyperlinks.
  5. Make sure any two pages of a site no matter how far from one another if placed side-by-side look as if they are from the same site.

CSS

  1.  
    No comments yet.
     
Post a Comment
  1. No trackbacks yet.
You must be logged in to post a comment.