Transcript Principles of Web Design Chapter 2

Chapter 2
Web Site Design Principles
Chapter 2
Principles of Web Design
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
2
Chapter 2
Principles of Web Design
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
3
Chapter 2
Principles of Web Design
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
4
Chapter 2
Principles of Web Design
• Figure 2-1
• Figure 2-2
Principles of Web Design 2nd Ed.
Chapter 2
5
Chapter 2
Principles of Web Design
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
6
Chapter 2
Principles of Web Design
• Figure 2-3
Principles of Web Design 2nd Ed.
Chapter 2
7
Chapter 2
Principles of Web Design
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
8
Chapter 2
Principles of Web Design
• Figure 2-4
• Figure 2-5
Principles of Web Design 2nd Ed.
Chapter 2
9
Chapter 2
Principles of Web Design
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
10
Chapter 2
Principles of Web Design
• Figure 2-6
• Figure 2-7
Principles of Web Design 2nd Ed.
Chapter 2
11
Chapter 2
Principles of Web Design
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
12
Chapter 2
Principles of Web Design
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
13
Chapter 2
Principles of Web Design
• 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
14
Chapter 2
Principles of Web Design
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
15
Chapter 2
Principles of Web Design
• 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
16
Chapter 2
Principles of Web Design
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
17
Chapter 2
Principles of Web Design
• 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
18
Chapter 2
Principles of Web Design
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
19
Chapter 2
Principles of Web Design
• Figure 2-33
• Figure 2-34
• Figure 2-35
• Figure 2-36
Principles of Web Design 2nd Ed.
Chapter 2
20
Chapter 2
Principles of Web Design
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
21
Chapter 2
Principles of Web Design
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
22
Chapter 2
Principles of Web Design
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
23