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