Design Principles

1. Design Principles EDUC 6307: Design of Print Based Media Summer 2009 Ranelle Woolrich

2. Design Principles • Contrast: Adds visual difference and can bring focus to a particular area. Can be created by contrasting fonts, colors, textures, lines, graphics, or other elements of the design. • Repetition: Some aspect of the design repeats throughout its entirety. Acts as a unifying force to the design. Elements that can repeat: fonts, colors, sizes, graphics. • Alignment: Creates cohesion and organization. Items are aligned with other items to portray a cohesive appearance. Left, right, or center text alignment are examples of alignment within the design. • Proximity: Helps determine organization. Similar items are located near one another while separation should exist between dissimilar items. Clustering similar items in an area while separating them from differing objects is one way to create proximity.

3. Contrast (Good): The contrast between the colors white and black for WhiteHouseBlackMarket keep a simple, concise, and clear design.

4. Contrast (Good): Strong contrast is portrayed with solid pink background, consistent white text, and figure of all black.

5. Contrast (Good): Three repeated colors are contrasted against each other in the three different striped backgrounds making an easy on the eye visual effect.

6. Contrast (Good): The contrast between yellow bullet buttons on the white background set apart the buttons for use.

7. Contrast (Bad): The colors in this website are too similar, not allowing for the eye to truly focus on one element. The entire visual seems to blend together instead of setting anything apart.

8. Contrast (Bad): The blue vertical lines in the background fade out the blue lettering in the center instead of having a contrasting color set the center lettering.

9. Contrast (Bad): The shape of red/orange circles in the background contrasted with the blue rectangular buttons does not work for this design.

10. Contrast (Bad): Way too many colors contrasting against each other in this example.

11. Repetition (Good): In this visual, the red banner is repeated throughout to note another section on the site.

12. Repetition (Good):The graphic on the right hand of the menu bar of this site is repeated as the bullet for the listing below on the site.

13. Repetition (Good): Three basic colors are repeated throughout this design in the text as well as the graphics and pictures to tie the entire picture together.

14. Repetition (Good):In considering two different portions from this site, the text MOO is repeated numerous times throughout.

15. Repetition (Bad): The number of fonts used here…instead of repeating among three…there are at least six different fonts used within this portion of the site.

16. Repetition (Bad): Repeating the dog head pattern in the background did not do anything to help this design.

17. Repetition (Bad): This banner from a website repeats the phrase “Eric Lee’s Web Site” but is definitely not a positive for the design scheme.

18. Repetition (Bad): In the bottom left corner, the technique of repetition is used with the pointing finger bullet, but this graphic, although repeating, has nothing to do with any of the rest of the website.

19. Alignment (Good): Use of the white space and left alignment in the columns sets up great alignment in this shot.

20. Alignment (Good): Pictures and texts are aligned together to make sections clear and simple.

21. Alignment (Good): Text aligns with pictures to make this website easy to naviagate.

22. Alignment (Good): Again the mix of graphics and text align with one another and help to separate varying parts.

23. Alignment (Bad): Lack of alignment with the picture boxes and text make this hard to read.

24. Alignment (Bad): Looking alignment anywhere, the eye has no place to rest or direction as to where to go next.

25. Alignment (Bad): The title at the top is left aligned. Middle text is centered as is the right column of pictures, but the far left column is left aligned. There is no consistency in the alignment.

26. Alignment (Bad): Even the portions that seem to be meant to be aligned (yellow rectangles and gray on right side) are not aligned appropriately.

27. Proximity (Good): Items are clustered together that match headings.

28. Proximity (Good): Different graphics and boxes keep similar items in close proximity.

29. Proximity (Good): This is an example of just words clustered in proximity of one another to be clear on groupings.

30. Proximity (Good): Proximity is used here to with the descriptions of books closely located to the item itself.

31. Proximity (Bad): Items here are way too close with little separation. Proximity is not used to the advantage on this site.

32. Proximity (Bad): Without using proximity, the items on this page seem to run together with no organization.

33. Proximity (Bad): Although separated by banner headings, the change in color affects this proximity and so on first glance, does the gray area belong to the “Service” or the “Resource Center”? If there was spacing between the groupings it would be more clear and proximity would then help determine which red banner the text corresponds to.

34. Proximity (Bad): Text all runs together instead of utilizing proximity to make it simple to see what groupings there really are on this site.

35. Sources • http://www.crapwebdesign.com/ • http://www.datadial.net/blog/index.php/2009/06/09/website-fail-30-web-designs-that-will-hurt-your-eyes/ • http://www.associatedcontent.com/article/1898774/the_crap_design_principle_contrast.html?cat=15 • http://www.qbn.com/topics/558640/ • http://sixrevisions.com/design-showcase-inspiration/30-light-and-sleek-web-designs-for-inspiration/ • http://www.webbyawards.com/webbys/current.php?season=13 • http://ccr.syr.edu/webguide/principles.html