Chapter 2

Web Site Design Principles

Principles of Web Design 2nd Ed. Chapter 2

2

Principles of Web Design Chapter 2

Objectives

• Design for the computer medium

• Design the whole site

• Design for the user

• Design for the screen

Principles of Web Design 2nd Ed. Chapter 2

3

Principles of Web Design Chapter 2

Design for the Medium

• Craft the look and feel

• Make your design portable

• Design for low bandwidth

• Plan for clear presentation and easy access to your information

Principles of Web Design 2nd Ed. Chapter 2

4

Principles of Web Design Chapter 2

Make Your Design Portable

• Your Web site design must be portable and accessible across different browsers, operating systems, and computer platforms

• You must always remember to test your work even when you feel confident of your results

Principles of Web Design 2nd Ed. Chapter 2

5

Principles of Web Design Chapter 2

• Figure 2-1

• Figure 2-2

Principles of Web Design 2nd Ed. Chapter 2

6

Principles of Web Design Chapter 2

Design for Low Bandwidth

• Plan your pages so that they are accessible at a variety of connection speeds

• If your pages download slowly because they contain large, detailed graphics or complicated animations, your users will leave before they ever see your content

Principles of Web Design 2nd Ed. Chapter 2

7

Principles of Web Design Chapter 2

• Figure 2-3

Principles of Web Design 2nd Ed. Chapter 2

8

Principles of Web Design Chapter 2

Design the Whole Site

• Plan the unifying themes and structures

• Create smooth transitions

• Use a grid to provide visual structure

• Use active white space

Principles of Web Design 2nd Ed. Chapter 2

9

Principles of Web Design Chapter 2

• Figure 2-4

• Figure 2-5

Principles of Web Design 2nd Ed. Chapter 2

10

Principles of Web Design Chapter 2

Create Smooth Transitions

• Plan to create a unified look

• Reinforce the identifying elements

• Avoid random, jarring changes in format

Principles of Web Design 2nd Ed. Chapter 2

11

Principles of Web Design Chapter 2

• Figure 2-6

• Figure 2-7

Principles of Web Design 2nd Ed. Chapter 2

12

Principles of Web Design Chapter 2

Use a Grid to Provide Structure

• The grid is a conceptual layout device that organizes content into columns and rows

• A grid provides visual consistency• HTML authors use the table elements to build

the grid for their pages• CSS will eventually replace tables for layout

Principles of Web Design 2nd Ed. Chapter 2

13

Principles of Web Design Chapter 2

Use Active White Space

• Use white space deliberately in your design• Good use of white space guides the reader

and defines the areas of your page• Active white space is an integral part of your

design that structures and separates content

Principles of Web Design 2nd Ed. Chapter 2

14

Principles of Web Design Chapter 2

• Figure 2-8• Figure 2-9• Figure 2-10• Figure 2-11• Figure 2-12• Figure 2-13• Figure 2-14

Principles of Web Design 2nd Ed. Chapter 2

15

Principles of Web Design Chapter 2

Design for the User

• Keep your design efforts centered solely around your user

• Design for interaction

• Design for location

• Guide the user’s eye

• Decide whether the user will read or scan

Principles of Web Design 2nd Ed. Chapter 2

16

Principles of Web Design Chapter 2

• Figure 2-15• Figure 2-16• Figure 2-17• Figure 2-18• Figure 2-19• Figure 2-20• Figure 2-21• Figure 2-22• Figure 2-23• Figure 2-24

Principles of Web Design 2nd Ed. Chapter 2

17

Principles of Web Design Chapter 2

Design for the User

• Keep a flat hierarchy

• Provide plenty of linking options

• Provide location information

• Use plenty of textual links

• Don’t overload the user with too much content

• Design for accessibility

Principles of Web Design 2nd Ed. Chapter 2

18

Principles of Web Design Chapter 2

• Figure 2-25• Figure 2-26• Figure 2-27• Figure 2-28• Figure 2-29• Figure 2-30• Figure 2-31• Figure 2-32

Principles of Web Design 2nd Ed. Chapter 2

19

Principles of Web Design Chapter 2

Design for the Screen

• The computer display is very different from print-based media

• The display is landscape-oriented• Colors and contrasts are different• Computer displays are low-resolution

devices• Reformat paper documents for online

display

Principles of Web Design 2nd Ed. Chapter 2

20

Principles of Web Design Chapter 2

• Figure 2-33• Figure 2-34• Figure 2-35• Figure 2-36

Principles of Web Design 2nd Ed. Chapter 2

21

Principles of Web Design Chapter 2

Summary Craft a look and feel and stick with it

throughout your site. Revise and test your interface by paying close attention to the demands of online display.

Make your design portable, using as low a bandwidth as possible

Plan for easy access to your information. Don’t let the user click through more than two or three pages before they get what they want.

Principles of Web Design 2nd Ed. Chapter 2

22

Principles of Web Design Chapter 2

Summary Design a unified look for your site. Create

templates for your grid structure and apply them consistently.

Use white space actively as an integral part of your design. Use text, color, and object placement to guide the user’s eye.

Leverage the power of hypertext linking. Provide enough links for the user to create their own path through your information.

Principles of Web Design 2nd Ed. Chapter 2

23

Principles of Web Design Chapter 2

Summary

Use the ALT attribute on all graphics. Plan for users who can’t or won’t download graphics.

Design your text for online display Know your audience and design pages that

suit their needs, interests, and viewing preferences