Design Principles Review

1. Design Principles Review C. R. A. P.

2. Contrast • Elements on a web page that are too similar in size, shape, or color create confusion, lack a focal point, and have no hierarchy of information. • As a result: • Users lack direction to important information. The majority of web users scan pages; they do not read word-by-word.

3. Contrast • Effective use of contrast makes a page easily scannable. • Robin's rule, "If two elements, such as type, rules, graphics, color, texture, etc., are not the same, make them very different—don't make them almost the same!" Use contrast to guide your audience through each page of your site. They'll be glad you did.

4. Contrast: Poor Example • What draws your attention first? • The navigation buttons are too large and overwhelm the page. • Big buttons give the page an unprofessional look. • All of the other images on the page are about the same size. • There's not enough contrast between the other images to create good visual hierarchy.

5. Contrast: Good Example • Good contrast • Good balance • Focal point

6. Contrast: Poor Example • What do you notice first? • The blue, purple and green image in the middle stands out because it is so big. • When you design a web page, ask yourself: • "What is the most important element on this page?“ • In this case, it's the "Exploring Chicago" logo at the top left.

7. Contrast: Poor Example • In addition, the main navigation on this page is difficult to find. • Are those images along the left side for navigation? • What about the text links at the top right? • The navigation scheme needs to be clearer.

8. Contrast: Good Example • Why is this page better designed? • Besides contrast, what other design principles have been taken into consideration?

9. Contrast: Poor Example • In this example, the Navigation looks good • However, the logo on the upper left side needs to be more visually dynamic • The image on the upper right side is weak.

10. Contrast: Good Example • In this example, the logo was redesigned and made larger. It is much more visually interesting. • The image on the upper right was also resized to give it more impact.

11. Contrast: Poor Example • Everything on the page is approximately the same size. • Nothing on the page really stands out and grabs your attention.

12. Contrast: Good Example • This design has visual impact and a clear visual hierarchy. • Notice the tweaked alignment of elements. • Every page in your site needs a visual focal point. • Proper contrast creates that focal point. • Remember, the easiest way to create contrast is with size, but you can create contrast with other page elements, such as shape, color, type, line, or texture.

13. Alignment • Novice designers tend to center everything (because it's easy) or mix alignments (because they think it looks cool). • Resist the urge! • While you don't have to line up everything on the same edge, pick an alignment (flush left works best) and stick with it. • Your pages will look less cluttered, more professional, and be easier to navigate.

14. Alignment • In addition, align all of your text on the same baseline. Both horizontal and vertical alignment is important for crisp, professional looking pages. • And finally, make good use of block quotes to move your text away from the far left edge of the browser window. • Constantly bumping your eyes against the browser's left edge each time you begin to read the next line of text creates unwanted contrast and, therefore, distraction. • Make reading easier on your audience with just a few simple steps.

15. Alignment: Poor Example • In this example, the alignments are mixed. • The text is centered, the image is flush left. • Notice that text in all capital letters is difficult to read because capital letters are almost the same size (remember contrast?).

16. Alignment: Poor Example • The caption for the image is also in italics which compounds readability problems. • Additionally, notice there's no left margin; the image bumps up against the browser window on the left side.

17. Alignment: Good Example • Compare the two.

18. Alignment: Poor Example • For some reason, designers tend to neglect forms and many suffer usability problems as a result. • There's no reason a form can't be well designed! • Let's face it, a well designed form is easier for your audience to use.

19. Alignment: Good Example

20. Alignment: Poor Example • The alignment problems here are more subtle. • In this example, the alignments are mixed. • The text on top is centered, the navigation text on the left side is flush-right, and the body text is flush-left. • The centered text at the bottom is actually a JPEG image that's been resized and it's very pixelated.

21. Alignment: Good Example • Notice in this example, all the text is aligned flush-left. • This example also utilizes the other three design principles (contrast, repetition, and proximity) to give the page visual impact. • What, specifically, is done? • If you can articulate the specifics, you're on your way to being a great designer!

22. Repetition • Use repetitive elements throughout your web site for a consistent look. • While this sounds obvious, think about the number of web pages you've seen that don't appear to belong to the site you're visiting. • Repeat navigation buttons, colors, type styles, and basic layouts on each page to unify your site.

23. Repetition • Position some elements in the same place on every page to facilitate easy navigation. • You don't have to make your pages so similar that viewers can't tell them apart (remember contrast!), but strive for, in Robin's words, "unity with variety."

24. Repetition: Good Example • Which elements are repeated from page to page at the Beringer Vineyards site? • Here the opening page is on the top and an internal page is shown at bottom. • Notice that the repetition of certain colors and graphics gives this site a unified look and feel. • Navigation options are consistent, yet there is enough variety to keep the site visually interesting.

25. Repetition: Good Example

26. Repetition: Poor Example • These two pages are from the picture taking section of Kodak's web site. • There's absolutely no continuity among pages. • Each page looks like it was designed independently of the others. • The last thing you want to do is confuse your audience and this will do it.

27. Repetition: Poor Example

28. Repetition: Good Example • The Chicago Home & Garden site was designed to entice you to subscribe to the magazine. • The site does a great job with its use of rich color, superb imagery, and excellent use of the design principle of repetition. • Again, notice the repetition of colors, graphics, fonts, navigation, and page layout.

29. Repetition: Good Example

30. Proximity • Pay attention to the relationships that exist between the elements on your web pages. • Too often, novice designers evenly space all their text, graphics, and images on a page creating unclear relationships between the elements. • Again if there's no focal point; a viewers' eye will jump repeatedly from one element to the next. • Organize and cluster related items together so they create an appropriate visual hierarchy.

31. Proximity • Put headlines and subheads close to the text they belong with. • Put captions directly adjacent to the pictures they describe. • Be alert to orphaned elements. • Utilize negative space effectively to separate items that do not have a direct relationship to one another.

32. Proximity • As Robin says, "squint your eyes and see what elements on the page seem to have connections because of the spatial arrangements.“ • Double check to see if the connections are appropriate. • Fix the arrangements that don't seem to work and then congratulate yourself on a design well done!

33. Proximity: Poor Example • Look at the relationships between the text elements in this example. • Are the differences between headlines and subheads clear? • Which blocks of text go with which subheads?

34. Proximity: Good Example • Compare this example. • Note that even if you can't quite read all of the words, you do get a sense of what information is being conveyed just by how the items are grouped.

35. Proximity: Poor Example • Again, look at the relationships between the elements in this example. • What are those two lines of text on the top right-hand side of the page? • Why does the image appear to be floating off in space? • Why are there two headlines?

36. Proximity: Good Example • In this example, the items are grouped together in a logical fashion. • Notice that, in addition to proximity, the design principles of contrast, repetition, and alignment have been incorporated the to further enhance this layout.

37. Proximity: Poor Example • In this example, all of the items appear to have been placed randomly on the page. • The space between each item is so even that none of the elements seem related.

38. Proximity: Good Example • In this example, the items are grouped together in a logical fashion. • Again, in addition to proximity, the other three design principles are incorporated as well.

39. Proximity: Poor Example • In this example, the text under each image on the left is just a bit "off.“ • It's not well aligned, nor is it close enough to the photograph it describes. • The space between the green text in the center of the page is so even that none of the text elements seem related to one another.

40. Proximity: Poor Example • The "Order" button is too far away from the text that describes what is being offered for sale. • The "Basket with Balloons" text is not even close to the image it describes on the far right side of the page.

41. Proximity: Good Example • In this example, the items are grouped together in a logical fashion and it's clear which elements are related.

42. Good Web Design • While it's true that today almost anyone can make a web page, few do it well. • Yet there's no excuse for poorly designed pages if you follow this formula. • Indeed, proper application of these four design principles will markedly improve the look and feel of your web pages. • And that translates into more effective communication with your audience. • It's really that simple.