1 / 21

Design and Layout

Design and Layout. Sage Lichtenwalner National OA Web Site Youth Coordinator. Basic Site Design Principles. The Design Process. Define the Site Set up the Information Design the Site Construction. Interface Design. Design for the User Simple and Consistent Clear Navigational Aids

jkraus
Download Presentation

Design and Layout

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Design and Layout Sage Lichtenwalner National OA Web Site Youth Coordinator NOAC 2002 E-Scouting

  2. Basic Site Design Principles NOAC 2002 E-Scouting

  3. The Design Process • Define the Site • Set up the Information • Design the Site • Construction NOAC 2002 E-Scouting

  4. Interface Design • Design for the User • Simple and Consistent • Clear Navigational Aids • Consider Bandwidth • Feedback • Use Publishing Standards • Use the Fold • Web Pages are Like News Articles NOAC 2002 E-Scouting

  5. How to Design • Design or Layout – Which comes first? • Design on Paper • Information Structure • Page Layout NOAC 2002 E-Scouting

  6. Accessibility Notes • Test your pages • Monitors are different • Always include alternates and fallbacks NOAC 2002 E-Scouting

  7. Site Design NOAC 2002 E-Scouting

  8. Organizing Information • Gather Content • Chunk Information • Develop a Hierarchy • Establish Relationships NOAC 2002 E-Scouting

  9. Site Structure • Information Structures • Sequences • Hierarchies • Webs • File Structure NOAC 2002 E-Scouting

  10. Site Theme • Resource • E-Commerce • Entertainment NOAC 2002 E-Scouting

  11. Navigation • Information Flow • Table of Contents • Titles • Headings • Navigation Bars • Don’t Reinvent the Library NOAC 2002 E-Scouting

  12. Lodge Navigation Ideas • Leadership • Lodge • Chapters • Committees • Events • When & Where • Why Go? • How to Sign Up • Programs • Resources • About the Lodge • Purpose • History • Service NOAC 2002 E-Scouting

  13. Site Elements • Home Page • Resources • Site Guides • What’s New • Search Features • Contact Information • User Feedback • FAQ Pages • Error Pages NOAC 2002 E-Scouting

  14. Page Layout NOAC 2002 E-Scouting

  15. Layout Principles • Page Dimensions NOAC 2002 E-Scouting

  16. Recommended Page Sizes NOAC 2002 E-Scouting

  17. Layout Principles • Page Dimensions • Fixed vs. Flexible • Line Length • Page Length • Page Navigation • Page Headers and Footers NOAC 2002 E-Scouting

  18. Page Layout Tables NOAC 2002 E-Scouting

  19. Page Style • COLOR • Contrast • Understand the Medium • Page Grid • Screens of Information • Keep it Simple NOAC 2002 E-Scouting

  20. Typography • Alignment • White Space • Typefaces • Type Size • Accessibility • CSS – Cascading Style Sheets NOAC 2002 E-Scouting

  21. Summary • The Web is not just a Highway • Use predictable navigation • Be kind to eyes • The design is the interface to the content • Great Web Sites are easy to use and easy to understand NOAC 2002 E-Scouting

More Related