noac 2002 e-scouting1 design and layout sage lichtenwalner national oa web site youth coordinator
Post on 20-Dec-2015
216 views
TRANSCRIPT
NOAC 2002 E-Scouting 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 DesignDesign for the User
Simple and ConsistentClear Navigational
AidsConsider BandwidthFeedback
Use Publishing Standards
Use the FoldWeb Pages are Like
News Articles
NOAC 2002 E-Scouting 5
How to DesignDesign or Layout – Which comes first?
Design on PaperInformation Structure
Page Layout
NOAC 2002 E-Scouting 6
Accessibility NotesTest your pages
Monitors are different
Always include alternates and fallbacks
NOAC 2002 E-Scouting 7
Site Design
NOAC 2002 E-Scouting 8
Organizing InformationGather Content
Chunk InformationDevelop a HierarchyEstablish Relationships
NOAC 2002 E-Scouting 9
Site StructureInformation Structures
SequencesHierarchies
Webs
File Structure
NOAC 2002 E-Scouting 10
Site ThemeResource
E-Commerce
Entertainment
NOAC 2002 E-Scouting 11
NavigationInformation Flow
Table of Contents
Titles
Headings
Navigation Bars
Don’t Reinvent the Library
NOAC 2002 E-Scouting 12
Lodge Navigation IdeasLeadership
LodgeChaptersCommittees
EventsWhen & WhereWhy Go?How to Sign Up
ProgramsResourcesAbout the Lodge
PurposeHistoryService
NOAC 2002 E-Scouting 13
Site ElementsHome PageResourcesSite GuidesWhat’s NewSearch FeaturesContact InformationUser FeedbackFAQ PagesError Pages
NOAC 2002 E-Scouting 14
Page Layout
NOAC 2002 E-Scouting 15
Layout PrinciplesPage Dimensions
NOAC 2002 E-Scouting 16
Recommended Page Sizes
NOAC 2002 E-Scouting 17
Layout PrinciplesPage 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 StyleCOLOR
Contrast
Understand the Medium
Page Grid
Screens of InformationKeep it Simple
NOAC 2002 E-Scouting 20
TypographyAlignment
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