Transcript 4 Design and Layout

Design and Layout
Sage Lichtenwalner
National OA Web Site
Youth Coordinator
NOAC 2002 E-Scouting
1
Basic Site Design Principles
NOAC 2002 E-Scouting
2
The Design Process
Define the Site
Set up the Information
Design the Site
Construction
NOAC 2002 E-Scouting
3
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
4
How to Design
Design or Layout –
Which comes first?
Design on Paper
Information Structure
Page Layout
NOAC 2002 E-Scouting
5
Accessibility Notes
Test your pages
Monitors are different
Always include
alternates and
fallbacks
NOAC 2002 E-Scouting
6
Site Design
NOAC 2002 E-Scouting
7
Organizing Information
Gather Content
Chunk Information
Develop a Hierarchy
Establish Relationships
NOAC 2002 E-Scouting
8
Site Structure
Information Structures
Sequences
Hierarchies
Webs
File Structure
NOAC 2002 E-Scouting
9
Site Theme
Resource
E-Commerce
Entertainment
NOAC 2002 E-Scouting
10
Navigation
Information Flow
Table of Contents
Titles
Headings
Navigation Bars
Don’t Reinvent the
Library
NOAC 2002 E-Scouting
11
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
12
Site Elements
Home Page
Resources
Site Guides
What’s New
Search Features
Contact Information
User Feedback
FAQ Pages
Error Pages
NOAC 2002 E-Scouting
13
Page Layout
NOAC 2002 E-Scouting
14
Layout Principles
Page Dimensions
NOAC 2002 E-Scouting
15
Recommended Page Sizes
NOAC 2002 E-Scouting
16
Layout Principles
Page Dimensions
Fixed vs. Flexible
Line Length
Page Length
Page Navigation
Page Headers and
Footers
NOAC 2002 E-Scouting
17
Page Layout Tables
NOAC 2002 E-Scouting
18
Page Style
COLOR
Contrast
Understand the
Medium
Page Grid
Screens of
Information
Keep it Simple
NOAC 2002 E-Scouting
19
Typography
Alignment
White Space
Typefaces
Type Size
Accessibility
CSS – Cascading
Style Sheets
NOAC 2002 E-Scouting
20
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
21