Transcript Design for the Computer Medium

Chapter 2
Web Site Design
Principles
Principles of Web Design, Third Edition
Objectives




Design for the computer medium
Create a unified site design
Design for the user
Design for the screen
Principles of Web Design, Third Edition
2
Design for the
Computer Medium
Craft the look and feel
The interface the user must navigate is
often called the “look and feel”
 The way your site works
 Personality it conveys to the user
Principles of Web Design, Third Edition
4
Make Your Design Portable

Your Web site design must be portable and
accessible across different




browsers
operating systems
computer platforms
You must always remember to test your work
even when you feel confident of your results
Principles of Web Design, Third Edition
5
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, Third Edition
6
Plan for clear presentation and
easy access

Plan for clear presentation and easy
access to your information
Provide direct links to areas of great demand
 Avoid looooong scrolling pages, break them if
necessary


www.refdesk.com
Principles of Web Design, Third Edition
7
Create a Unified Site
Design
Plan Smooth Transitions



Plan to create a unified look
Reinforce the identifying elements
Avoid random, jarring changes in format

Consistency creates smooth transitions
Principles of Web Design, Third Edition
9
Use a Grid to Provide Visual
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, Third Edition
10
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
Passive white space


Blank areas that border the screen or are results of
mismatched shapes
Active white space is an integral part of your
design that structures and separates content
Principles of Web Design, Third Edition
11
Design for the User
Design for the User

Keep your design efforts centered solely
around your user (fig. 2-12, 2-13, 2-14)




Design for interaction and…
Decide whether the user will read or scan
Design for location


Know your audience; survey them
Rank the info and position according to importance
Guide the user’s eye
Principles of Web Design, Third Edition
13
Design for the User

Keep a flat hierarchy…avoid too many layers!






Provide plenty of linking options
Provide location information
Use plenty of textual links
Don’t overload the user with too much content


“Three-clicks rule”
Provide a site map
Avoid the temptation!!!!!
Design for accessibility
Principles of Web Design, Third Edition
14
Design for Accessibility






Develop Web pages that remain accessible
despite any physical, sensory, and cognitive
disabilities
Developing accessible content naturally leads to
creating good design.
Follow W3 Accessibility Initiative guidelines at
www.w3.org/WAI/
Adaptive devices for accessible browsing:
http://www.w3.org/WAI/References/Browsing
Build alternative sites
Follow these quick tips:
http://www.w3.org/WAI/References/QuickTips/
Principles of Web Design, Third Edition
15
Hands-On Project



Ask your classmate what 2 sites are his/her favorites.
Write down the complete URL.
Visit at least one site and do the following:





Visit the home page and a secondary page
Indicate if there are unifying characteristics (shared theme,
colors, fonts, graphics, page layout or columns, etc.)
Indicate if there are areas of active and passive white space
(where are they?)
Indicate whether the design is appropriate for the content.
Submit your results.
Principles of Web Design, Third Edition
16
Design for the
Screen
Design for the Screen



The computer display is very different from printbased media
The display is landscape-oriented
Colors and contrasts are different


Computer displays are low-resolution devices


Avoid light text on a light background and dark text on
a dark background
Certain fonts are hard to read
Reformat paper documents for online display

e.g. Times New Roman font, designed for print, is hard
to read online
Principles of Web Design, Third Edition
18
Summary

Design specifically for the computer medium,
considering how the page layout, fonts, and colors
you use appear on the screen.

Craft an appropriate look and feel and stick with it
throughout your site.

Test and revise your interface by paying close
attention to the demands of online display. Make
your design portable by testing it in a variety of
browsers, operating systems and computing
platforms, and use as low a bandwidth as possible.
Principles of Web Design, Third Edition
19
Summary



Plan for easy access to your information. Provide
logical navigation tools, and do not make users
click through more than two or three pages before
they get what they want.
Design a unified look for your site. Strive for
smooth transitions from one page to the next.
Create templates for your grid structure and apply
them consistently.
Use active white space as an integral part of your
design. Use text, color, and object placement to
guide the user’s eye.
Principles of Web Design, Third Edition
20
Summary

Know your audience and design pages that suit their
needs, interests, and viewing preferences.

Leverage the power of hypertext linking. Provide
enough links for the users to create their own path
through your information.

Design your text for online display, considering the
differences between the screen and the page.
Principles of Web Design, Third Edition
21