1. Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition

2. 2 Objectives Design for the computer medium Create a unified site design Design for the user Design for the screen

3. Principles of Web Design, Third Edition3 Design for the Computer 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. Principles of Web Design, Third Edition4 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, Third Edition5

6. 6

7. 7 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, Third Edition8

9. 9

10. 10 Create a Unified Site Design 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, Third Edition11

12. Principles of Web Design, Third Edition12

13. Principles of Web Design, Third Edition13 Plan Smooth Transitions Plan to create a unified look Reinforce the identifying elements Avoid random, jarring changes in format

14. Principles of Web Design, Third Edition14

15. Principles of Web Design, Third Edition15

16. Principles of Web Design, Third Edition16 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

17. Principles of Web Design, Third Edition17

18. Principles of Web Design, Third Edition18 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

19. Principles of Web Design, Third Edition19

20. Principles of Web Design, Third Edition20

21. Principles of Web Design, Third Edition21 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

22. Principles of Web Design, Third Edition22

23. Principles of Web Design, Third Edition23

24. Principles of Web Design, Third Edition24

25. Principles of Web Design, Third Edition25

26. Principles of Web Design, Third Edition26

27. Principles of Web Design, Third Edition27

28. Principles of Web Design, Third Edition28

29. Principles of Web Design, Third Edition29

30. Principles of Web Design, Third Edition30

31. Principles of Web Design, Third Edition31

32. Principles of Web Design, Third Edition32

33. Principles of Web Design, Third Edition33 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

34. Principles of Web Design, Third Edition34

35. Principles of Web Design, Third Edition35

36. Principles of Web Design, Third Edition36

37. Principles of Web Design, Third Edition37

38. Principles of Web Design, Third Edition38

39. Principles of Web Design, Third Edition39 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/

40. Principles of Web Design, Third Edition40

41. Principles of Web Design, Third Edition41

42. Principles of Web Design, Third Edition42 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

43. Principles of Web Design, Third Edition43

44. Principles of Web Design, Third Edition44

45. Principles of Web Design, Third Edition45

46. Principles of Web Design, Third Edition46 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.

47. Principles of Web Design, Third Edition47 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.

48. Principles of Web Design, Third Edition48 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.