Presentation Design

1
Lesson 5

• Presentation Design

2
Objectives

• Upon completion of this lesson, you should be
  able to
  
• Plan the visual design of your Web pages.
• Use thumbnail sketches and rough sketches to plan
  your visual design.
  
• Identify various possible themes for your Web
  site and select one.
  
• Plan background, foreground, and other design
  elements.
  
• Apply a theme and related design elements to your
  Web site.
  
• Apply three principles of design unity, balance,
  and proportion.
  
• Use a focus group to test your design theme.

3
Visualizing Your Web Site

• Presentation design (visual design) planning
  how your Web site will look
  
• What colors will look good together?
• What fonts will be used for the written text?
• What graphics and multimedia effects are needed?
• How will all these elements be combined
  attractively?
  

Step-by-Step 5.1
4
Visualizing Your Web Site

• A thumbnail sketch a short, relatively small
  drawing
  
• Thumbnail sketches are used to brainstorm what
  pages can look like. A thumbnail sketch like the
  one below eventually led to the Web page shown
  here.
• Web pages use greeking. Greeking squiggly lines
  used to represent text.

Step-by-Step 5.1
5
Rough Sketches

• A rough sketch a more developed sketch
• The thumbnail sketch led to this rough sketch.
• Rough sketches also use greeking.
• Elements are more refined.
• Rough sketches are often given to artists for
  completion.

Step-by-Step 5.2
6
Choosing a Visual Theme

• A visual theme a look and feel that ties a
  Web site together
  
• The theme should get your audiences attention
  and communicate your message. For example, this
  site promotes speech recognition products and
  solutions for speech recognition users. The
  theme includes a speech recognition headset in
  the top corner, highly visible speech recognition
  products, and a navigation bar. The banner
  emphasizes solutions for speech recognition users.

Step-by-Step 5.3
7
Identifying Poor Theme Ideas

• What will the reaction of your audience be to
  your visual theme?
  
• What do you believe is the theme of this Web
  page?
  
• Does it capture your interest?
• Do you want to know more?
• What are some of the good and bad team ideas you
  have seen on the Web?
  

Step-by-Steps 5.4 5.5
8
Elements of a User Interface

• What are the visual user interface elements?
• A background that reflects the theme.
• Foreground elements that reflect the theme.
• Other elements that support the theme.

Step-by-Steps 5.4 5.5
9
Backgrounds Colors or Images

• A background image a look and feel for the
  background of the Web page
  
• On some Web pages, a background color will
  suffice.
  
• On other pages, graphics make up the background
  image.
  
• Colors and background graphics must contrast with
  the foreground elements.
  
• This trilobite image was changed in Photoshop to
  make an attractive tiled background.

Step-by-Step 5.6
10
Foregrounds Content and Links

• The foreground the content of the Web page. It
  can include text and images, plus
  
• Titles.
• Headings.
• Subheadings.
• Sidebars.
• Body text.
• Illustrations.

Step-by-Step 5.6
11
Other Elements

• Other elements additional elements on the page
  that assist the user in the interaction and
  navigation of the site, such as
  
• Buttons.
• Hyperlinks.
• Search fields.
• Navigation bars.
• Table of contents.

Step-by-Step 5.6
12
Principles of Design

• What makes a look feel work?
• Three elements work together to make stunning Web
  site designs
  
• Unity
• Balance
• Proportion

Step-by-Steps 5.7 5.8
13
Principles of Design

• Unity all the elements on your Web page look
  like they belong together, such as
  
• Using similar styles or colors.
• Placing elements into comfortable locations next
  to each other.

Step-by-Steps 5.7 5.8
14
Principles of Design

• Balance elements on a Web page must balance in
  terms of light, color, shade, size, and position.

Step-by-Steps 5.7 5.8
15
Principles of Design

• Proportion elements look the right size.
  Disproportionate objects attract unusual
  attention and give the feeling that something
  isnt quite right. Examples include
• Headings that are too small or too big.
• Graphics that take up too much space.

Step-by-Steps 5.7 5.8
16
Testing Your Look

• Ask people what they think.
• Have a focus group make sketches of how your
  rough sketches can improve your Web site.
  
• Fix your site based on their recommendations.
• Include this input into your design document.

Step-by-Steps 5.7 5.8
17
Summary

• In this lesson, you learned
• To use thumbnail sketches and rough sketches to
  plan your visual design.
  
• To identify various possible themes for your Web
  site.
  
• To plan background, foreground, and other design
  elements.
  
• To apply a theme and related design elements to
  your Web site.
  
• To apply three principles of design unity,
  balance, and proportion.
  
• To use a focus group to test your theme.