1. Chapter 2 Web Site Design Principles

2. Principles of Web Design 2nd Ed. 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 2nd Ed. 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. Make Your Design Portable
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 2nd Ed. Chapter 2
Figure 2-1
Figure 2-2
Principles of Web Design 2nd Ed. Chapter 2

6. Design for Low Bandwidth
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 2nd Ed. Chapter 2
Figure 2-3
Principles of Web Design 2nd Ed. Chapter 2

8. Principles of Web Design 2nd Ed. 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 2nd Ed. Chapter 2
Figure 2-4
Figure 2-5
Principles of Web Design 2nd Ed. Chapter 2

10. Create Smooth Transitions
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 2nd Ed. Chapter 2
Figure 2-6
Figure 2-7
Principles of Web Design 2nd Ed. Chapter 2

12. Use a Grid to Provide Structure
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 2nd Ed. 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 2nd Ed. 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 2nd Ed. 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 2nd Ed. 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 2nd Ed. 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 2nd Ed. 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 2nd Ed. 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 2nd Ed. 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 2nd Ed. 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 2nd Ed. 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 2nd Ed. 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
Principles of Web Design 2nd Ed. Chapter 2