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