Design and Layout

1
Design and Layout

• Sage Lichtenwalner
• National OA Web Site
• Youth Coordinator

2
Basic Site Design Principles
3
The Design Process

• Define the Site
• Set up the Information
• Design the Site
• Construction

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

5
How to Design

• Design or Layout Which comes first?
• Design on Paper
• Information Structure
• Page Layout

6
Accessibility Notes

• Test your pages
• Monitors are different

• Always include alternates and fallbacks

7
Site Design
8
Organizing Information

• Gather Content
• Chunk Information

• Develop a Hierarchy
• Establish Relationships

9
Site Structure

• Information Structures

• Sequences

• Hierarchies

• Webs

• File Structure

10
Site Theme

• Resource

• E-Commerce

• Entertainment

11
Navigation

• Information Flow
• Table of Contents
• Titles
• Headings
• Navigation Bars
• Dont Reinvent the Library

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

13
Site Elements

• Home Page
• Resources
• Site Guides

• Whats New
• Search Features

• Contact Information
• User Feedback
• FAQ Pages
• Error Pages

14
Page Layout
15
Layout Principles

• Page Dimensions

16
Recommended Page Sizes
17
Layout Principles

• Page Dimensions
• Fixed vs. Flexible

• Line Length
• Page Length
• Page Navigation
• Page Headers and Footers

18
Page Layout Tables
19
Page Style

• COLOR
• Contrast

• Understand the Medium
• Page Grid

• Screens of Information

• Keep it Simple

20
Typography

• Alignment
• White Space
• Typefaces
• Type Size
• Accessibility
• CSS Cascading Style Sheets

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