980px
proflowers.com

proflowers.com

nordstrom.com

nordstrom.com

oldnavy.com

oldnavy.com

converse.com

converse.com

target.com

target.com

walmart.com

walmart.com

petsmart.com

petsmart.com

homedepot.com

homedepot.com

bustedtees.com

bustedtees.com

timbuk2.com

timbuk2.com

tullys.com

tullys.com

cariboucoffee.com

cariboucoffee.com

specialized.com

specialized.com

trekbikes.com

trekbikes.com

Following the Eye

One simple rule in evaluating the visual design of the page is to simply ask, “where does the eye go first?” What element of the design initially draws the users attention? Is this strategic? Or a distraction?

By asking your potential users to look at your page, or using sophisticated eye-tracking equipment, you can determine where most users look first and why, where they look second and why, etc.—does this align with your goals?

The movement of the user’s eye across the page shouldn’t be by accident it is the result of ingrained responses that the user has to visual stimuli.

See Also:

If your design is successful, the pattern that the user’s eye follows around the page will have two fundamental qualities:

  1. Smooth Flow: a design that has a smooth flow will lead the eye smoothly from one object to the next without the page seeming “cluttered” or “busy.”
  2. Guided Tour: in your design you want to show the user the possibilities of what they can see and where they can go without overwhelming them.

Contrast

In visual design, a primary tool that is used to draw attention is the technique of contrast, which will:

  1. Help the user understand relationships between elements of the page
  2. Communicate conceptual groups of information

A design without contrast will be seen as a gray featureless mass.

Uniformity & Consistency

Uniformity in design is key to effective communication in the fact that your user will be able to draw conclusions based on size, color, typeface, etc.—your main navigation should always look the same on each and every page!

By elements that are consistent and adhere to uniformity, you will provide the user with an easily identifiable mental map of your site and it’s elements.

By developing a uniform and consistent system of elements that work well together, your user will be much more likely to follow along with how the site works as whole.

Using Grid Based Design

A technique from print design is the use of grids to layout the page – grids are a precise means of creating a master layout that will adhere to uniformity.

Grids are a combination of verticle columns, horizontal fields, and white space gutters:

Designers have often thought that working inside a grid can be restrictive rather than a creative process. Untrue:

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php