1. Chapter 2 Web Site Design Principles

2. Objectives State the principles of design for the computer medium
Principles of Web Design
Chapter 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
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

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

5. Principles of Web Design
Chapter 2

6. Principles of Web Design
Chapter 2

7. 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

8. Principles of Web Design
Chapter 2

9. Principles of Web Design
Chapter 2

10. Design the Whole Site Plan the unifying themes and structures
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

11. Principles of Web Design
Chapter 2

12. Principles of Web Design
Chapter 2

13. 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

14. Principles of Web Design
Chapter 2

15. Principles of Web Design
Chapter 2

16. Use Active White Space Use white space deliberately in your design
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

17. Principles of Web Design
Chapter 2

18. Principles of Web Design
Chapter 2

19. Principles of Web Design
Chapter 2

20. Principles of Web Design
Chapter 2

21. Principles of Web Design
Chapter 2

22. Principles of Web Design
Chapter 2

23. Principles of Web Design
Chapter 2

24. 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

25. Principles of Web Design
Chapter 2

26. Principles of Web Design
Chapter 2

27. Principles of Web Design
Chapter 2

28. Principles of Web Design
Chapter 2

29. Principles of Web Design
Chapter 2

30. Principles of Web Design
Chapter 2

31. Principles of Web Design
Chapter 2

32. Principles of Web Design
Chapter 2

33. Principles of Web Design
Chapter 2

34. Principles of Web Design
Chapter 2

35. Design for the User Use the power of hypertext linking
Principles of Web Design
Chapter 2
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
Don’t overload the user with too much content

36. Principles of Web Design
Chapter 2

37. Principles of Web Design
Chapter 2

38. Principles of Web Design
Chapter 2

39. Principles of Web Design
Chapter 2

40. Principles of Web Design
Chapter 2

41. Principles of Web Design
Chapter 2

42. Principles of Web Design
Chapter 2

43. Principles of Web Design
Chapter 2

44. Principles of Web Design
Chapter 2

45. 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

46. Principles of Web Design
Chapter 2

47. Principles of Web Design
Chapter 2

48. Principles of Web Design
Chapter 2

49. Principles of Web Design
Chapter 2

50. 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.

51. 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.

52. 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.