Lesson 5 Presentation Design Objectives Upon completion of this - - PowerPoint PPT Presentation

Lesson 5

Presentation Design

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.

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?

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.

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.

Choosing a Visual Theme

A visual theme = a “look and

feel” that ties a Web site together:

–

The theme should get your audience’s 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.

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?

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.

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.

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.

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.

Principles of Design

What makes a “look &

feel” work?

Three elements work

together to make stunning Web site designs:

– Unity – Balance – Proportion

Principles of Design

Unity = all the elements

• n your Web page look

like they belong together, such as:

– Using similar styles or

colors.

– Placing elements into

comfortable locations next to each other.

Principles of Design

Balance = elements on

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

Principles of Design

Proportion = elements

look the right size. Disproportionate objects attract unusual attention and give the feeling that something isn’t quite

• right. Examples include:

– Headings that are too

small or too big.

– Graphics that take up too

much space.

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.

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.