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 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.

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.