Week 9 Page 7: Consistency
Why Consistency is Important
|
|
Consistency is the key to a unified and understandable web site. Whatever design approach you take to the material should be done consistently throughout the site. This applies to the big picture (layout, navigation, color etc.) and the small picture (text and paragraph formatting, icons, lines, rules etc.) The reader should always know that each page is part of the same site. Sure, surprises and the "unexpected" are nice, however, not within your site's structure, layout, or navigation. The design principle, repetition, is the key to consistency. |
How to Design for Consistency
The key to good consistency is using or formatting design elements in the same way on every page. For example, if you use a 2 pixel weight dotted rule on the first page, you should use the same rule on other pages. If you use a curved corner on one photo frame, you should repeat that on all photo frames.
Here are some ideas about consistency in web design:
What elements can you use to create consistency?
- Basic layout
- Navigation scheme and location
- Color
- Heading and text size
- Fonts
- Spacing line and paragraph
- Graphics: Lines and rules
- Images: Illustrations and photo handling
How do you create inconsistency?
Too many colors, too many graphics, inconsistent placement of important elements, inconsistent text styles, line styles, shapes, colors and spacing.
Here's a lovely example: http://www.miniwhinniesminiatures.com/
Links to an external site.
You need to go to several pages in this site to appreciate its impressive inconsistency. The images are all very different in style including line drawings, photos, animations... you name it!
Consistency Examples
Let's look at two screen shots of web pages. We'll start with a "good" example of consistency!!
This site demonstrates strong consistency by employing the design principle, repetition. Notice the repetition of color and font. The subheadings next to the icons have consistent size and spacing. Look at the icons themselves, they have the same style, size and placement. You should take a look at the actual site to see how other pages continue the same consistent layout and design: http://shiftcreative.com/
Links to an external site.
Oh dear... how about the following example? There is very little consistency on this page. For example, look at all the different border styles for the photos and boxes! Some have drop shadows, others don't... the three photos at the bottom have heavy borders but the photos to the right and the top have a different frame treatment... the two tables in the middle have different borders (one is red with a drop shadow). You can see that lack of consistency creates confusion and a scattered lack of unity. Fortunately, they decided to update the site since I took the screen shot below.
Here's the archived version: http://web.archive.org/web/20120219115436/http://www.landscapingideasonline.com/
Links to an external site.
Check out the redesign! (Look how much it's improved): http://www.landscapingideasonline.com/
Links to an external site.
And lastly...
Successful Consistency or Not?!!Look at the following sites (you'll need to look at several pages to assess consistency) and decide: Successful or Not Successful? • Roomful of Blues: https://roomful.com/ Links to an external site. • Juggling Information Service: http://www.juggling.org/ Links to an external site. • Monterey Bay Kayaks (archived version): http://www.montereybaykayaks.com/ Links to an external site. You can post your comments to our class Weekly Class Discussion, Discoveries and Questions Forum if you want to discuss these sites with other students. |