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

Slides:



Advertisements
Similar presentations
Website Design What is Involved?. Web Design ConsiderationsSlide 2Bsc Web Design Stage 1 Website Design Involves Interface Design Site Design –Organising.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
UI Best Practices Application Developer’s Intro School Week 1 Day 1.
Basic Principles of Web Page Design CSCI 150, CSCI 155, CSCI , MSTI 131 and MSTI 260 Developed by BNapoli.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Chapter 4 Planning Site Navigation. 2 Principles of Web Design Chapter 4 Objectives Understand navigation principles Build navigation schemes that meet.
Principles of Web Design 5th Edition
Copyright © 2013 Pearson Education, Inc. Publishing as Prentice Hall. Microsoft Office 2010 PowerPoint, Workshop 1 Communication with Presentations.
16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.
Developing Effective Civic Websites An effective website balances what the client wants, what users need, and what constitutes good design by considering:
Designing Basic Web Sites III: Interface Design Based on Web Style Guide, Lynch and Horton Technical Communication.
Web Site Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 6, 1999.
Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,
Designing Your Page Step 1: Design for a Computer Medium A computer screen is not a printed page. Readability changes depending on color, layout and format.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Let me control over my pages: Tables, Frames, and CSS.
MSc Publishing on the WWW Web Design Week 2. Aims and Objectives To introduce the stages of web design and implementation To introduce needs analysis.
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Web Page Design ECE 3940 Megan O’Byrne 10 September 09.
Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
Chapter 8 Document Design 2 Page Layout
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
WEB DESIGN TIPS FOR DESIGNING A WEB PAGE. PURPOSE OF WEBSITE To inform To persuade To market/sell To entertain To advocate KNOW YOUR PURPOSE!
1 Technical Communication A Reader-Centred Approach First Canadian Edition Paul V. Anderson Kerry Surman
Document and Web design has five goals:
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Chapter 2 Web Site Design Principles
Web Site Design Principles
Chapter 7. Designing Documents and Web Sites © 2013 by Bedford/St. Martin's1 Document and Web design has five goals: to make a good impression on readers.
1 © Netskills Quality Internet Training, University of Newcastle Web Page Design © Netskills, Quality Internet Training University.
Copyright © 2002 by Pearson Education, Inc., publishing as Longman publishers. All rights reserved. Chapter 8 Designing Pages and Screens Professional.
Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in.
INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.
12 Developing a Web Site Section 12.1 Discuss the functions of a Web site Compare and contrast style sheets Apply cascading style sheets (CSS) to a Web.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Introduction to Web Page Design. General Design Tips.
PRINCIPLES OF WEB DESIGN. EDGAR GARCIA – WEB DESIGN 2/8/13.
Chapter 17 Designing for the Web Ryan Galloway Andy O’Neil Joe Ahn.
Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance.
Development and Design of Multimedia. Planning Your Title 1)Develop the concept or idea – a multimedia project starts with an idea that supports a vision.
Principles of Web Design 6 th Edition Chapter 9 – Site Navigation.
© 2011 Pearson Education, Inc., publishing as Longman Publishers. 1 Chapter 13 Designing Pages and Documents Technical Communication, 12 th Edition John.
Web Page Concept and Design :
Page Design Issues IWM 14 Information Services for the Web.
Content Administration 08/19/13 & 08/20/13.
Storyboard, Design, Layout.  Create storyboards  Decide upon navigation  Prepare short page summaries.
Posters, Magazines, Websites
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
COMM1PCOMM1P Alan Woolrych E-store lectures Monday 12/11/01 11:00 EC 13:00 ECA Page Layout 7.
Introduction to Web Authoring Ellen Cushman our syllabus
COMP 143 Web Development with Adobe Dreamweaver CC.
Chapter 2 Web Site Design Principles
Section 6.1 Section 6.2 Write Web text Use a mission statement
Understanding the principles of website development
Create and edit web pages 4
Surface Stage: Design Comps
Objective % Explain concepts used to create websites.
Session I Chapter 18 - How to Design a Web Site
Principles of Web Design 5th Edition
Tips on good web site Design
Chapter 2 Web Site Design Principles
Designing Pages and Documents
Chapter 14: designing reader centered documents and pages
Presentation transcript:

NOAC 2002 E-Scouting1 Design and Layout Sage Lichtenwalner National OA Web Site Youth Coordinator

NOAC 2002 E-Scouting2 Basic Site Design Principles

NOAC 2002 E-Scouting3 The Design Process Define the Site Set up the Information Design the Site Construction

NOAC 2002 E-Scouting4 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-Scouting5 How to Design Design or Layout – Which comes first? Design on Paper Information Structure Page Layout

NOAC 2002 E-Scouting6 Accessibility Notes Test your pages Monitors are different Always include alternates and fallbacks

NOAC 2002 E-Scouting7 Site Design

NOAC 2002 E-Scouting8 Organizing Information Gather Content Chunk Information Develop a Hierarchy Establish Relationships

NOAC 2002 E-Scouting9 Site Structure Information Structures Sequences Hierarchies Webs File Structure

NOAC 2002 E-Scouting10 Site Theme Resource E-Commerce Entertainment

NOAC 2002 E-Scouting11 Navigation Information Flow Table of Contents Titles Headings Navigation Bars Don’t Reinvent the Library

NOAC 2002 E-Scouting12 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-Scouting13 Site Elements Home Page Resources Site Guides What’s New Search Features Contact Information User Feedback FAQ Pages Error Pages

NOAC 2002 E-Scouting14 Page Layout

NOAC 2002 E-Scouting15 Layout Principles Page Dimensions

NOAC 2002 E-Scouting16 Recommended Page Sizes

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

NOAC 2002 E-Scouting18 Page Layout Tables

NOAC 2002 E-Scouting19 Page Style COLORCOLOR Contrast Understand the Medium Page Grid Screens of Information Keep it Simple

NOAC 2002 E-Scouting20 Typography Alignment White Space Typefaces Type Size Accessibility CSS – Cascading Style Sheets

NOAC 2002 E-Scouting21 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