Week 5 -Designing For Eye Appeal 3


Published on

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Week 5 -Designing For Eye Appeal 3

  1. 1. Designing For Eye Appeal<br />Toward a Better Design<br />
  2. 2. Lecture Concepts<br />Focus on designing a web site<br />Observe and critique existing sites<br />Develop key design concepts and guidelines<br />Provide important details on designing readable text<br />Sketching and prototyping a site design<br />
  3. 3. Lecture Objectives<br />Understand how existing sites incorporate key design concepts<br />Learn how to apply guidelines for good site design<br />Learn to use the following tools to create eye appeal:<br />Color<br />Balance<br />Alignment<br />Other tools<br />Become aware of the process of sketching, prototyping and testing your design<br />
  4. 4. Designing for Eye Appeal<br />As you begin to design – be aware of the impact of:<br />Color<br />Balance<br />Contrast<br />Alignment<br />Scrolling<br />Make pages easy to read and navigate<br />
  5. 5. Color<br />Remember: If an organization has a color scheme – USE IT!<br />Bold, bright colors can be distracting<br />Make the colors fit the PURPOSE of the site<br />Some colors lend a cool feeling; some are warmer<br />Some colors don’t go together<br />Colors often elicit feelings<br />Calm, soothing, exciting, friendly, confident<br />http://www.color-wheel-pro.com/color-meaning.html<br />
  6. 6. Color<br />Color Wheel<br /><ul><li>Using the color wheel will help you avoid color disasters (hopefully)
  7. 7. All colors are created by combining the three primary colors
  8. 8. Primary Colors
  9. 9. Red
  10. 10. Blue
  11. 11. Yellow</li></li></ul><li>Color<br /><ul><li>Secondary colors
  12. 12. Combinations of the three primary colors
  13. 13. Orange
  14. 14. Green
  15. 15. Violet</li></li></ul><li>Color<br /><ul><li>Cooler colors
  16. 16. Blue
  17. 17. Green
  18. 18. Violet
  19. 19. Connected with sea and sky
  20. 20. Warmer colors
  21. 21. Yellow
  22. 22. Orange
  23. 23. Red
  24. 24. Connected with fire</li></li></ul><li>Color<br /><ul><li>Tertiary Colors
  25. 25. Created by mixing primary and complimentary colors</li></li></ul><li>Color<br />Harmony is pleasing to the eye<br />Visually balanced<br />Engages viewer<br />Creates a sense of order<br />Not harmonious<br />Boring<br />Bland, under-stimulating<br />Chaotic<br />Cannot be organized<br />
  26. 26. Color<br />Complementary colors<br />Colors which sit across from each other on the color wheel.<br />Combining two complementary colors makes each seem more;<br />Intense <br />Brighter <br />Create more contrast<br />
  27. 27. Color<br />Analogous colors<br />Colors which are next to each other on the color wheel<br />Three colors<br />Less contrast<br />
  28. 28. Color<br />Traditional Primary Colors – Paint - http://www.colormatters.com/colortheory.html<br />Paint Colors – Inkjet - http://daphne.palomar.edu/design/cwheel.html<br />Mixing Paints<br />Light Colors - http://www.itc.virginia.edu/unixsys/gimp/gimpdoc-html/color.html<br />Mixing lights<br />
  29. 29. Color<br />Color Scheme Generator http://www.wellstyled.com/tools/colorscheme2/index-en.html<br />Color Theory http://courses.washington.edu/d545s08/Specifications/prettyPage/color.htm<br />
  30. 30. Color<br />To create contrast use shades and tints of a single color.<br />Shade:<br />Adding black to a color is called a shade<br />Tint<br />Adding white to a color is called a tint<br />Color Lag:<br />http://www.visibone.com/colorlab/<br />
  31. 31. Color<br />No right or wrong color scheme<br />Some combos create<br />Visual contrast and discord (which is generally bad)<br />Harmony and comfort (which is usually good)<br />
  32. 32. Color<br />Key color questions:<br />What kinds of colors will you use in your site?<br />How does your selection of colors fit with the purposes of your site and with the experience of the intended audience?<br />How would you explain your choices based on the color wheel?<br />
  33. 33. Alignment<br />The human eye likes when things are lined up.<br />The eye wants the elements of a Web page to be positioned so that they follow a single axis.<br />Use the same alignment from page to page<br />
  34. 34. Alignment<br />By default, you’ll end up with flush left and ragged right columns on web pages<br />This creates a natural axis for aligning your components<br />
  35. 35. Menus<br />Help viewers determine the following:<br />Where am I?<br />What else is available?<br />Where should I go next?<br />Menus and navigational elements answer those questions.<br />
  36. 36. Menus<br />The menu should always be visible or one click away<br />Menu locations:<br />Top<br />Left <br />Bottom <br />Menu cannot list everything<br />Break the site down into sections<br />Use submenus<br />
  37. 37. Principles of Scrolling<br />Scrolling<br />Inefficient process (requires too many steps)<br />Web pages are more like TVs than newspapers<br />Users often miss info that they have to scroll to view<br />Scrolling is not user-centered design<br />
  38. 38. Principles of Scrolling<br />User control<br />Websites should offer as much control to the viewer as possible.<br />Visitors choose what they want to view<br />Visitors choose the order of what they want to view<br />Visitors determine how much detail they want to consume<br />It would be a 24-hour, all-you-can-eat buffet<br />Think “Life is short, start with dessert”<br />
  39. 39. Simplicity and Courtesy<br />Much to consider in design<br />Color <br />Alignment <br />Navigation<br />content<br />Using everything could be complex, aim for <br />Simple <br />Straight-forward designs<br />That make sense to the user<br />Good design is more art than science<br />