web design, 4 th edition 4 planning a successful web site: part 2
TRANSCRIPT
Web Design,4th Edition
4Planning a SuccessfulWeb Site: Part 2
Chapter 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 2 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 2 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 2 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 2 6
Color and Visual Contrast
Color schemes create unityLimit the number of colors in your scheme to
three major colorsApply 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 2 7
Color and Visual Contrast
Chapter 4: Planning a Successful Web Site: Part 2 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 2 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 2 10
CSS and Formatting
Chapter 4: Planning a Successful Web Site: Part 2 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 2 12
Page Layout
Chapter 4: Planning a Successful Web Site: Part 2 13
Layout Grids
Underlying structure of rows and columns
Allows you to precisely position page content
Chapter 4: Planning a Successful Web Site: Part 2 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– <div> tag
Chapter 4: Planning a Successful Web Site: Part 2 15
Tables
Arrangement of cells in columns and rowsTwo common uses
– Create rows and columns of data– Create Web page layout
Chapter 4: Planning a Successful Web Site: Part 2 16
Tables
Chapter 4: Planning a Successful Web Site: Part 2 17
Tables
Position text and other elements– Float property– Cell spacing– Cell padding
Chapter 4: Planning a Successful Web Site: Part 2 18
Step 5: Design the Look and Feel of the Site
Chapter 4: Planning a Successful Web Site: Part 2 19
Step 6: Specify the Site’s Navigation System
Well-designed navigation is easier for visitors to understand
Draws them deeper into the Web siteDesign should be both user based and user
controlled
Chapter 4: Planning a Successful Web Site: Part 2 20
User-Based Navigation
Link pages based on the visitors’ needsUnderstand how visitors will view your Web
site– Usability tests
• Formal• Informal
Chapter 4: Planning a Successful Web Site: Part 2 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 2 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 2 23
Text Links
Common way to navigate from section to section
TargetMouseover linkRollover link
Chapter 4: Planning a Successful Web Site: Part 2 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 2 25
Menus, Bars, and Tabs
Best for grouping related linksNavigation 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 2 26
Menus, Bars, and Tabs
Chapter 4: Planning a Successful Web Site: Part 2 27
Menus, Bars, and Tabs
Chapter 4: Planning a Successful Web Site: Part 2 28
Menus, Bars, and Tabs
Chapter 4: Planning a Successful Web Site: Part 2 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 2 30
Site Map
Summary page of links to major pages at the site
Chapter 4: Planning a Successful Web Site: Part 2 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 featureHosted Web-site search providerAutoComplete
Chapter 4: Planning a Successful Web Site: Part 2 32
Search Capability
Chapter 4: Planning a Successful Web Site: Part 2 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 2 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 2 35
Navigation Design Tips
Chapter 4: Planning a Successful Web Site: Part 2 36
Site Plan Checklist
Define the site’s purposeIdentify the site’s target audienceDetermine the site’s general contentSelect the site’s structureDesign the look and feel of the siteSpecify the site’s navigation system
Chapter 4: Planning a Successful Web Site: Part 2 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
Web Design,4th Edition
4Planning a SuccessfulWeb Site: Part 2