1. Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2

2. Chapter Objectives  Discuss the relationship between page length, content placement, and usability  Complete Step 5: Design the look and feel of the site  Complete Step 6: Specify the site’s navigation system  Use a checklist to review your design plan Chapter 4: Planning a Successful Web Site: Part 22

3. Page Length, Content Placement, and Usability  The initial, visible screen area is extremely valuable space  Place the most critical information above and to the left of the potential scroll zones –Avoid a cluttered appearance Chapter 4: Planning a Successful Web Site: Part 23

4. Page Length, Content Placement, and Usability  Eye-tracking studies use various technologies to produce heat maps in which data is represented by color  Eye-tracking heat maps are created by analyzing the movement of a visitor’s eyes as he or she views a Web page  Over the past several years, eye-tracking studies suggest that a site’s visitors typically first look at the top and left areas of a page, and then look down and to the right Chapter 4: Planning a Successful Web Site: Part 24

5. Visual Consistency  You can create visual consistency by repeating design features — typeface, content position, color scheme — and actual content — name, logo, major links — across all pages at a site  Inconsistent appearances confuse visitors Chapter 4: Planning a Successful Web Site: Part 25

6. Color and Visual Contrast  Color schemes create unity  Limit the number of colors in your scheme to three major colors  Apply color scheme to the background, graphic art and illustrations, and text across all pages  Choose background and text colors to provide sufficient contrast  Choose graphics that match your color scheme Chapter 4: Planning a Successful Web Site: Part 26

7. Color and Visual Contrast Chapter 4: Planning a Successful Web Site: Part 27

8. CSS and Formatting  The CSS specification allows Web designers to use a text document, called a style sheet, to control the appearance of one or more pages at a site  Styles can create visual consistency Chapter 4: Planning a Successful Web Site: Part 28

9. CSS and Formatting  Inline Style –Inserted within a tag  Internal Style Sheet –Inserted within a page’s heading tags  External Style Sheet –Saved in a folder with the site’s pages Chapter 4: Planning a Successful Web Site: Part 29

10. CSS and Formatting Chapter 4: Planning a Successful Web Site: Part 210

11. Page Layout  Can ensure visual consistency across a Web site’s pages  A well-designed layout creates a sense of balance  Display certain items consistently (in the same place) on all pages –Logo and name –Search feature –Links –Content area Chapter 4: Planning a Successful Web Site: Part 211

12. Page Layout Chapter 4: Planning a Successful Web Site: Part 212

13. Layout Grids  Underlying structure of rows and columns  Allows you to precisely position page content Chapter 4: Planning a Successful Web Site: Part 213

14. CSS and Page Layout  Style sheets can also be used to control page layout by dividing a page into sections, such as a header section or a navigation section – tag Chapter 4: Planning a Successful Web Site: Part 214

15. Tables  Arrangement of cells in columns and rows  Two common uses –Create rows and columns of data –Create Web page layout Chapter 4: Planning a Successful Web Site: Part 215

16. Tables Chapter 4: Planning a Successful Web Site: Part 216

17. Tables  Position text and other elements –Float property –Cell spacing –Cell padding Chapter 4: Planning a Successful Web Site: Part 217

18. Step 5: Design the Look and Feel of the Site Chapter 4: Planning a Successful Web Site: Part 218

19. Step 6: Specify the Site’s Navigation System  Well-designed navigation is easier for visitors to understand  Draws them deeper into the Web site  Design should be both user based and user controlled Chapter 4: Planning a Successful Web Site: Part 219

20. User-Based Navigation  Link pages based on the visitors’ needs  Understand how visitors will view your Web site –Usability tests Formal Informal Chapter 4: Planning a Successful Web Site: Part 220

21. User-Controlled Navigation  Visitors move around the site in a manner they choose  Link back to home page  Next page link  Previous page link  Well-designed navigation is essential to the success of your Web site Chapter 4: Planning a Successful Web Site: Part 221

22. Link Types  Text links  Image Links –Image map  Menus  Bars  Tabs  Breadcrumb trail  Site map  Search capability Chapter 4: Planning a Successful Web Site: Part 222

23. Text Links  Common way to navigate from section to section  Target  Mouseover link  Rollover link Chapter 4: Planning a Successful Web Site: Part 223

24. Image Links  You can assign a link to an image –Image map Client-side Server-side Hot spots Chapter 4: Planning a Successful Web Site: Part 224

25. Menus, Bars, and Tabs  Best for grouping related links  Navigation menu –List of related links –Pop-out menu  Navigation bar –Graphic buttons present links Drop-down menu  Navigation tabs –Present links as small tabs Chapter 4: Planning a Successful Web Site: Part 225

26. Menus, Bars, and Tabs Chapter 4: Planning a Successful Web Site: Part 226

27. Menus, Bars, and Tabs Chapter 4: Planning a Successful Web Site: Part 227

28. Menus, Bars, and Tabs Chapter 4: Planning a Successful Web Site: Part 228

29. Breadcrumb Trail  Hierarchical outline or horizontal list that shows a visitor the path he or she has taken from the home page to the page currently being viewed –Use in conjunction with other navigational elements Chapter 4: Planning a Successful Web Site: Part 229

30. Site Map  Summary page of links to major pages at the site Chapter 4: Planning a Successful Web Site: Part 230

31. Search Capability  Allows visitors to quickly locate pages in your site  Popular navigation tool for sites with large numbers of pages  Web site search feature  Hosted Web-site search provider  AutoComplete Chapter 4: Planning a Successful Web Site: Part 231

32. Search Capability Chapter 4: Planning a Successful Web Site: Part 232

33. Navigation Design Tips  Create both a user-based and a user- controlled navigation system  Place major links at the top and/or down the left side on all pages at your site  Avoid ambiguous text in text links Chapter 4: Planning a Successful Web Site: Part 233

34. Navigation Design Tips  Ensure that links clearly identify their target pages.  Include a link back to the home page on underlying pages. Include Next Page and Previous Page links on pages to be visited sequentially  Follow WAI guidelines for text links, grouping links using navigation menus or bars, and image maps Chapter 4: Planning a Successful Web Site: Part 234

35. Navigation Design Tips Chapter 4: Planning a Successful Web Site: Part 235

36. Site Plan Checklist  Define the site’s purpose  Identify the site’s target audience  Determine the site’s general content  Select the site’s structure  Design the look and feel of the site  Specify the site’s navigation system Chapter 4: Planning a Successful Web Site: Part 236

37. Chapter Summary  Discuss the relationship between page length, content placement, and usability  Complete Step 5: Design the look and feel of the site  Complete Step 6: Specify the site’s navigation system  Use a checklist to review your design plan Chapter 4: Planning a Successful Web Site: Part 237

38. Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2