Planning a Successful Website: Part 2 Web Design, 5 th Edition Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step : Specify the s navigation system Complete Step 5: Design the look and feel of the Complete Step 6: Test, publish, and maintain the Use a checklist to review your web design plan Chapter : Planning a Successful Website: Part 2 2 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 Eye-tracking studies use various technologies to produce heat maps that represent data using color Eye-tracking heat maps are created by analyzing the movement of a visitor s eyes as he or she views a webpage 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 : Planning a Successful Website: Part 2 3 Chapter : Planning a Successful Website: Part 2 When designing a webpage, you need to decide how to manage page width Fixed-width page Liquid or flexible page layout Hybrid page layout Step : Specify the Website s Navigation System A navigation system that is easy for visitors to understand and follow will draw them deeper into your to view detail pages with content that can satisfy their needs and expectations User-based navigation system User-controlled navigation system Chapter : Planning a Successful Website: Part 2 5 Chapter : Planning a Successful Website: Part 2 6 1
Text links Image links Navigation areas Breadcrumb trail Website map Search capability Text links are hyperlinks based on a word or words in an HTML document An image link assigns a link to a visual element, such as an illustration or a photograph Image map Hot spots Chapter : Planning a Successful Website: Part 2 7 Chapter : Planning a Successful Website: Part 2 8 You should group related links into a navigation area to create an eye-catching design element Navigation menu Navigation bar Drop-down menus Navigation tabs Chapter : Planning a Successful Website: Part 2 9 Chapter : Planning a Successful Website: Part 2 10 A breadcrumb trail is a hierarchical outline or horizontal list that shows a visitor the path he or she has taken from the home page to the currently viewed page A with a large number of pages and a complex structure often provides a map, also called a index Chapter : Planning a Successful Website: Part 2 11 Chapter : Planning a Successful Website: Part 2 12 2
A search feature is another popular navigation tool for s with a large number of pages A hosted search provider is a thirdparty company that uses spiders or other tools to build a searchable index of your s pages and then hosts the index on their servers Chapter : Planning a Successful Website: Part 2 13 Chapter : Planning a Successful Website: Part 2 1 Step 5: Design the Look and Feel of the Website You can create visual consistency by repeating design features typeface, content position, color scheme company or name, logo, and major links across all pages at a site Inconsistent appearances confuse visitors Color and Visual Consistency Color schemes create unity 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 : Planning a Successful Website: Part 2 15 Chapter : Planning a Successful Website: Part 2 16 Color and Visual Contrast 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 Styles can create visual consistency Chapter : Planning a Successful Website: Part 2 17 Chapter : Planning a Successful Website: Part 2 18 3
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 s pages and linked to them with HTML tag Chapter : Planning a Successful Website: Part 2 19 Chapter : Planning a Successful Website: Part 2 20 Can ensure visual consistency across a 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 : Planning a Successful Website: Part 2 21 Chapter : Planning a Successful Website: Part 2 22 Underlying structure of rows and columns, called a layout grid Allows you to precisely position and align page content 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 : Planning a Successful Website: Part 2 23 Chapter : Planning a Successful Website: Part 2 2
Tables Arrangement of cells in columns and rows Two common uses Create rows and columns of data Create webpage layout Step 6: Test, Publish, and Maintain the Website A formal usability test is an evaluation that generally takes place in a structured environment, such as a testing laboratory Create a that meets the needs of your hosting service Internal or external hosting vendor Size limits Update frequency Person in charge of updating Budget restrictions Chapter : Planning a Successful Website: Part 2 25 Chapter : Planning a Successful Website: Part 2 26 Site Plan Checklist Identify the s purpose and target audience Determine the s general content Select the s structure Specify the s navigation system Design the look and feel of the Test, publish, and maintain the Chapter Summary Discuss the relationship between page length, content placement, and usability Complete Step : Specify the s navigation system Complete Step 5: Design the look and feel of the Complete Step 6: Test, publish, and maintain the Use a checklist to review your web design plan Chapter : Planning a Successful Website: Part 2 27 Chapter : Planning a Successful Website: Part 2 28 Planning a Successful Website: Part 2 Web Design, 5 th Edition 5