Download presentation
Presentation is loading. Please wait.
Published byHillary Morton Modified over 9 years ago
2
Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience. Navigation labels are short, clear, and user-friendly Above all navigation should be designed for your visitor not yourself
3
Global navigation- the navigation that appears on each page, usually at the top or left side. › Features top-level section in a site › A small site would include every page a larger site would not
4
Local Navigation- used on large sites where there is so much content in a section that global navigation is inadequate. For example, a site that sells books, music, and movies would feature top- level categories in global and feature categories in the local section
5
Related navigation- usually appears within the content area and highlights content related to that page’s information. For example, the page featuring a specific movie for sale might list movies by the same director in the related navigation. Figure G-1 page 149
6
The elements that make up your navigation should be determined by: › the site’s goals › the content of the site › the target audience Pulldown menus are now popular
7
Information architects – people whose job is to create structures, navigation, and search systems for Web Sites. IAs work as independent consultants or as part of in-house Web design teams within organization Working with an IA can be especially useful on › complex sites that have thousands of pages of content › or that deal with multiple audience or topics
8
Interactive buttons (rollovers)- navigation graphics that change appearance when a visitor interacts with them Original state- appears when a visitor is not interacting with the button Hover state- appears when a visitor points to or hover over the imaged Pressed state- appears while the visitor is clicking the button
9
Navigation bar- a set of related navigation links, whether text or images Maintain a consistent look among the buttons! › Copy and paste then change the text and link
10
Each page on a Web site should have a navigation bar. Copy and paste the navigation bar to each page!
11
Pseudo-class defined properties for a particular state of the element. Links have 4 Commonly Used pseudo- class selectors: › a:link › a:visted › a:hover › a:active
12
a: link – the normal, unvisited state of a link a: visited – the link has been clicked in the visitor’s browser and is present in the browser's history a:hover– the visitor’s cursor is pointing to the link a: active – the link has been clicked by not released
13
By default, normal links are blue and underlined and visited links are purple and underlined. It’s best to create a style rule for at least the a:link, a:visited, and a:hover states so that each state looks different to visitors. Styled in order in the style sheet so it’s very important they are listed in order.
14
Leave links underlined. › Underlined text is universal for links (user- friendly) Differentiate between visited and unvisited links. › It’s best to create styles that make unvisited links more noticeable Experiment with hover styles and colors › Be dramatic and coordinate with your design › Avoid purple or blue!
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.