6. Page Structure

1,383 views
1,315 views

Published on

Web Design from the Web Style Guide

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,383
On SlideShare
0
From Embeds
0
Number of Embeds
153
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • !
  • 6. Page Structure

    1. 1. Page Structure CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From Web Style Guide, Chapter 6: Page Structure
    2. 2. The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging. — Jeffrey Zeldman
    3. 3. Site Design should… <ul><li>Satisfy design norms and user expectations </li></ul><ul><li>Focus on providing great content and services rather than on technologies and design novelty. </li></ul><ul><li>Be consistent with enterprise and organizational standards </li></ul>
    4. 5. Headers Headers provide site identity and global navigation, with search and perhaps other tools. Headers are the most visible component of site identity.
    5. 6. Scan Columns <ul><li>Sectional links </li></ul><ul><li>Search box </li></ul><ul><li>Contact info </li></ul><ul><li>Other minor elements </li></ul><ul><li>Left or right, no matter </li></ul>
    6. 7. Content Area
    7. 8. Footers <ul><li>Housekeeping Info </li></ul><ul><ul><li>Author </li></ul></ul><ul><ul><li>Copyright </li></ul></ul><ul><ul><li>Contact Info </li></ul></ul><ul><ul><li>Link to site map </li></ul></ul><ul><ul><li>Links to related sites </li></ul></ul>
    8. 9. Page Templates <ul><li>Internal page template dictates the general characteristics of the site. </li></ul>
    9. 10. Page Templates <ul><li>Secondary page template establishes header labels </li></ul><ul><li>Act as “sub-home page” </li></ul>
    10. 11. Home Page
    11. 12. Tag Lines Let visitors know what you do!
    12. 13. Above the Fold
    13. 14. Dropdown menus <ul><li>Use with caution </li></ul><ul><li>Consider Accessibility </li></ul>
    14. 15. Role-based navigation
    15. 16. Splash Page? Author: Don’t ever use an indulgent, functionally useless splash page as “eye candy” at the entrance to your site. Ever. http://www.webdesigndev.com/inspiration/20-crazy-but-creative-website-splash-page-examples

    ×