• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Week 5 -Designing For Eye Appeal 3
 

Week 5 -Designing For Eye Appeal 3

on

  • 1,276 views

 

Statistics

Views

Total Views
1,276
Views on SlideShare
1,275
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Week 5 -Designing For Eye Appeal 3 Week 5 -Designing For Eye Appeal 3 Presentation Transcript

    • Designing For Eye Appeal
      Toward a Better Design
    • 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
    • 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
    • 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
    • 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
    • Color
      Color Wheel
      • Using the color wheel will help you avoid color disasters (hopefully)
      • All colors are created by combining the three primary colors
      • Primary Colors
      • Red
      • Blue
      • Yellow
    • Color
      • Secondary colors
      • Combinations of the three primary colors
      • Orange
      • Green
      • Violet
    • Color
      • Cooler colors
      • Blue
      • Green
      • Violet
      • Connected with sea and sky
      • Warmer colors
      • Yellow
      • Orange
      • Red
      • Connected with fire
    • Color
      • Tertiary Colors
      • Created by mixing primary and complimentary colors
    • Color
      Harmony is pleasing to the eye
      Visually balanced
      Engages viewer
      Creates a sense of order
      Not harmonious
      Boring
      Bland, under-stimulating
      Chaotic
      Cannot be organized
    • 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
    • Color
      Analogous colors
      Colors which are next to each other on the color wheel
      Three colors
      Less contrast
    • Color
      Traditional Primary Colors – Paint - http://www.colormatters.com/colortheory.html
      Paint Colors – Inkjet - http://daphne.palomar.edu/design/cwheel.html
      Mixing Paints
      Light Colors - http://www.itc.virginia.edu/unixsys/gimp/gimpdoc-html/color.html
      Mixing lights
    • Color
      Color Scheme Generator http://www.wellstyled.com/tools/colorscheme2/index-en.html
      Color Theory http://courses.washington.edu/d545s08/Specifications/prettyPage/color.htm
    • 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/
    • 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)
    • 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?
    • 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
    • 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
    • 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.
    • 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
    • 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
    • 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”
    • 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