Embed Size (px)
Citation preview
Web Design,3rd Edition
4Planning a SuccessfulWeb Site: Part 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 2
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 lines– Avoid a cluttered
appearance
Chapter 4: Planning a Successful Web Site: Part 2 3
Visual Consistency
Use consistent content and design features—repeat design features
Inconsistent appearances confuse visitorsBe careful not to over apply consistency
– Overly applied consistency makes pages boring and uninteresting
Chapter 4: Planning a Successful Web Site: Part 2 4
Visual Consistency
Chapter 4: Planning a Successful Web Site: Part 2 5
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 pagesChoose background and text colors to provide
sufficient contrast--the greater the contrast, the greater the readability
Choose graphics that match or complement your color scheme
Chapter 4: Planning a Successful Web Site: Part 2 6
Color and Visual Contrast
Chapter 4: Planning a Successful Web Site: Part 2 7
CSS and Formatting (Cascading Style Sheets)
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 consistencyYou create style rules that allow you to specify
formatting properties and their values Style sheets centralize formatting
Chapter 4: Planning a Successful Web Site: Part 2 8
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 9
CSS and Formatting
Chapter 4: Planning a Successful Web Site: Part 2 10
External Style Sheet Sample Style Sheet in CSS editor
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– Links– Content area
Chapter 4: Planning a Successful Web Site: Part 2 11
Page Layout
Chapter 4: Planning a Successful Web Site: Part 2 12
Layout Grids
Underlying structure of rows and columns
Allows you to precisely position page content
Chapter 4: Planning a Successful Web Site: Part 2 13
Tables
Arrangement of cells in rows and columnsTwo common uses
– Create rows and columns of data– Create Web page layout
Chapter 4: Planning a Successful Web Site: Part 2 14
Tables
Chapter 4: Planning a Successful Web Site: Part 2 15
Web page data table Layout table
Tables
Position text and other elements– Float property--sets position of element (text)
positioned outside table – Cell spacing--amount of space between cell
contents and border – Cell padding--amount of space between table cells
Chapter 4: Planning a Successful Web Site: Part 2 16
Table and Cell Properties
Tables
Options for defining table width– Absolute width—will not resize if browser window
resizes– Relative width—defined as percentage of browser
window
Each option has advantages and disadvantages
Understand that each user will view your table differently
Chapter 4: Planning a Successful Web Site: Part 2 18
CSS and Page Layout
CSS can divide a page into sections– <div> tag
Chapter 4: Planning a Successful Web Site: Part 2 19
Step 5: Design the Look and Feel of the Site
Chapter 4: Planning a Successful Web Site: Part 2 20
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 21
User-Based Navigation
Link pages based on the visitors’ needsUnderstand how visitors will view your Web
site– Usability tests
• Formal—expensive—testing laboratory• Informal—friends, family members, coworkers
Chapter 4: Planning a Successful Web Site: Part 2 22
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 Allow site visitors the freedom to choose how they
want to move from page to page at your site
Chapter 4: Planning a Successful Web Site: Part 2 23
Link Types
Text links Image Links
– Image map
Menus Bars Tabs
Breadcrumb trail Site map Search capability Frames
Chapter 4: Planning a Successful Web Site: Part 2 24
Text Links
Common way to navigate from section to section
Target--clearly identify the page to which the link points
Mouse over link—hidden—use cautionRollover link—hidden—use caution
Chapter 4: Planning a Successful Web Site: Part 2 25
Image Links
You can assign a link to an image– Image map--contains hotspots—areas on the
image to which a link is assigned • Client-side--processed by visitor's browser • Server-side--sent back to server, more complicated
Chapter 4: Planning a Successful Web Site: Part 2 26
Image Links
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 28
Menus, Bars, and Tabs
Chapter 4: Planning a Successful Web Site: Part 2 29
Navigation bar
Drop-down menu
Navigation tabs
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
Breadcrumb trail from home page to current page
Site Map (Site Index)
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
Hosted Web-site search provider can provide search services
Chapter 4: Planning a Successful Web Site: Part 2 32
Search Capability
Chapter 4: Planning a Successful Web Site: Part 2 33
Frames
Divide Web pages into multiple areasCan scroll individuallyReceive mixed reviewsUnderstand the pros and cons of using frames
Chapter 4: Planning a Successful Web Site: Part 2 34
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 35
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 (Web Accessibility Initiative)
Chapter 4: Planning a Successful Web Site: Part 2 36
Navigation Design Tips
Chapter 4: Planning a Successful Web Site: Part 2 37
Design 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 38
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 2 39
Web Design,3rd Edition
4Planning a SuccessfulWeb Site: Part 2
