Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
-
Upload
victor-bryan -
Category
Documents
-
view
216 -
download
4
Transcript of Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
![Page 1: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/1.jpg)
Web Design,4th Edition
4Planning a SuccessfulWeb Site: Part 2
![Page 2: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/2.jpg)
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
![Page 3: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/3.jpg)
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
![Page 4: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/4.jpg)
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
![Page 5: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/5.jpg)
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
![Page 6: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/6.jpg)
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
![Page 7: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/7.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 7
Color and Visual Contrast
![Page 8: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/8.jpg)
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
![Page 9: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/9.jpg)
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
![Page 10: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/10.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 10
CSS and Formatting
![Page 11: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/11.jpg)
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
![Page 12: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/12.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 12
Page Layout
![Page 13: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/13.jpg)
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
![Page 14: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/14.jpg)
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
![Page 15: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/15.jpg)
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
![Page 16: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/16.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 16
Tables
![Page 17: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/17.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 17
Tables
Position text and other elements– Float property– Cell spacing– Cell padding
![Page 18: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/18.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 18
Step 5: Design the Look and Feel of the Site
![Page 19: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/19.jpg)
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
![Page 20: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/20.jpg)
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
![Page 21: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/21.jpg)
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
![Page 22: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/22.jpg)
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
![Page 23: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/23.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 23
Text Links
Common way to navigate from section to section
TargetMouseover linkRollover link
![Page 24: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/24.jpg)
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
![Page 25: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/25.jpg)
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
![Page 26: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/26.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 26
Menus, Bars, and Tabs
![Page 27: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/27.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 27
Menus, Bars, and Tabs
![Page 28: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/28.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 28
Menus, Bars, and Tabs
![Page 29: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/29.jpg)
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
![Page 30: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/30.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 30
Site Map
Summary page of links to major pages at the site
![Page 31: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/31.jpg)
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
![Page 32: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/32.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 32
Search Capability
![Page 33: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/33.jpg)
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
![Page 34: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/34.jpg)
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
![Page 35: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/35.jpg)
Chapter 4: Planning a Successful Web Site: Part 2 35
Navigation Design Tips
![Page 36: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/36.jpg)
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
![Page 37: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/37.jpg)
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
![Page 38: Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.](https://reader036.fdocuments.in/reader036/viewer/2022070407/56649e2a5503460f94b17dd7/html5/thumbnails/38.jpg)
Web Design,4th Edition
4Planning a SuccessfulWeb Site: Part 2