Principles of Web Design

1
Principles of Web Design

• WJ Patterson
• CSC 230
• Internet Design

2
Objectives

• State the principles of design for the computer
  medium
• Develop a unified look for a Web site
• Understand the importance of active white space
• Focus your design on the user
• Evaluate Web sites using screen-oriented design
  principles

3
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

4
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

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

6
Design the Whole Site

• Plan the unifying themes and structures
• Create smooth transitions
• Use a grid to provide visual structure
• Use active white space

7
Create Smooth Transitions

• Plan to create a unified look
• Reinforce the identifying elements
• Avoid random, jarring changes in format

8
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

9
Design for the User

• Keep your design efforts centered solely around
  your user
• Design for interaction
• Design for location
• Guide the users eye
• Decide whether the user will read or scan

10
Design for the User

• Use the power of hypertext linking
• Provide plenty of linking options
• Provide location information
• Avoid click here as a link
• Use plenty of textual links
• Dont overload the user with too much content

11
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

12
Patterson Rules of Thumb

• 30/30 rule-Keep the home page to under 30 seconds
  to load. 30k30 seconds using a 28k modem.
• You only have ONE chance to make a good first
  impression, dont blow yours.
• The viewer can, in an instance, hit the back
  button, dont give them a reason to use it.