Prof. Anselm SpoerriWeb Design Summary1 Web Guiding Principles Diversity of Users & Rapid Change –Diverse users, diverse computers, diverse skills, diverse.

Slides:



Advertisements
Similar presentations
YEARBOOK Layout and Design.
Advertisements

Hints and tips for good web content. The University’s web presence To clearly inform prospective students, their influencers, researchers, potential members.
The world’s libraries. Connected. Web Design for CQ Pages WebJunction 19 July 2012 Reneé Page Senior Web Designer OCLC.
1 Today’s Goal: Web Design for Usability To become able to appreciate the role of usability in Web design To become able to identify some of the factors.
contrast, repetition, alignment, proximity
LAYOUT OF PAGE ELEMENTS September 28 th, PATTERNS Common ways to use the Layout Elements of Visual Hierarchy, Visual Flow, Grouping and Alignment,
© Anselm Spoerri Lecture 4 – Overview Exercise 2 Meaning –Web Design Recap and Handout –Writing for the Web –Redesign Examples Mechanics –Questions: Typography.
© Anselm Spoerri Lecture 2 - Overview Meaning –PlanningPlanning –Web DesignWeb Design –NavigationNavigation –EvaluationEvaluation Mechanics –URL BasicsURL.
Principles of Graphic Design with some background on Web 2.0 styles.
Prof. Anselm Production Course Visual & Web Design – Overview Graphic Design Brief History of Graphic Design Education Communication.
Web Site Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 6, 1999.
CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.
The four basic principles of design
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
© Anselm Spoerri Lecture 14 Annotated Nike Ad Course Review –Course Objectives.
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.
Typography and Space for Web Design Important Issues From Web Style Guide.
Nick Donnarumma. We are either very lazy or very efficient because we tend not to read pages. We scan them instead to save time. We don’t figure out how.
Multimedia Design. Table of Content 1.Navigational structures 2.Storyboard 3.Multimedia interface components 4.Tips for interface design.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
Basic Principles of DESIGN Bristol Community College Bristol Community College Paula Mailloux Sources: The Non-Designers Design Book The Non-Designers.
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!
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Prof. Anselm Production Course Visual & Web Design – Overview Graphic Design Brief History of Graphic Design Education Communication.
Document and Web design has five goals:
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Don’t have to be a designer to know when something just ain’t right…
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
Chapter 2 Web Site Design Principles
Web Design.
Web Site Design Principles
Design Principles Review
Copyright © 2002 by Pearson Education, Inc., publishing as Longman publishers. All rights reserved. Chapter 8 Designing Pages and Screens Professional.
Billboard Design 101. Create a clear visual hierarchy The more important something is, the more prominent it is.
Graphic Design The “look & feel” portion of an interface What someone initially encounters Conveys an impression, mood.
© Anselm Spoerri Lecture 4 – Overview Exercise 2 Meaning –Web Design Recap –Writing for the Web Mechanics –Testing & Debugging Web Pages  Check Easy Stuff.
the rhetorical situation  audience  purpose  context design principles  arrangement  emphasis  contrast  repetition  alignment  proximity (some)
Web Site Usability: Chapter 3 Billboard Design Summary Notes on Steve Krug Don’t Make Me Think New Riders, 2 nd Edition Ben Hunt Web 2.0 How to Design.
Introduction to Web Page Design. General Design Tips.
© Anselm Spoerri Lecture 4 – Overview Exercise 2 Meaning –Web Design Recap –Writing for the Web Mechanics –Testing & Debugging Web Pages  Check Easy Stuff.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Fonts and Typography Section 7.3. Typography Typography: the style, arrangement, and appearance of text Well designed text makes your page more readable.
The basic Principles of Design The following is a brief overview of the principles of design. Although they are discussed separately, they are really interconnected.
Principles of effective web design NOTES Flo Morris-Duffin.
Don’t have to be a designer to know when something just ain’t right…
Building Your Web Page. Build Your Web Page Orfordville Public Library held at: Parkview High School Tue. April 8 Tue. April 15 Tue. April 22.
Graphic Design. What is it? Process of combining text and graphics to communicate an effective message through the design of logos, graphics, brochures,
Posters, Magazines, Websites
Visual Rhetoric and the Common Core Amy Jo Southworth Bay Shore High School
Web Page Design The Key to a Successful Web Page by Judy Bogdanets.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
Web Design Basics What is a good web site from a design standpoint?
Visual & Web Design – Overview
Section 7.1 Section 7.2 Identify presentation design principles
Web Site Design Web site diagrams from the Yale Style Manual at:
Principles of Graphic Design
Chapter 17 Designing for the web
Objective % Explain concepts used to create websites.
Term Project Evaluations Guiding Principles Summary
Session I Chapter 18 - How to Design a Web Site
Unit 14 Website Design HND in Computing and Systems Development
The good, the bad, & the ugly…
Don’t have to be a designer to know when something just ain’t right…
Objective Explain concepts used to create websites.
The four basic principles of design
The four basic principles of design
Presentation transcript:

Prof. Anselm SpoerriWeb Design Summary1 Web Guiding Principles Diversity of Users & Rapid Change –Diverse users, diverse computers, diverse skills, diverse … –Rapid evolution of technology and expectations –Short attention span Common Sense –No right way to design Make it short –More likely to be read and remembered –Cut in ½ and cut in ½ again Don't make me think –Get rid of question marks - each item has clear purpose Make it work at a glance –People have little time Support intented task - manage expectations

Prof. Anselm SpoerriWeb Design Summary2 User Behavior Scan pages - don't read them Look for anything = Search Interest Decide quickly Choose first “reasonable item” Muddle through Don't figure out how things work Resist forming models Stick to what works

Prof. Anselm SpoerriWeb Design Summary3 Design Implications Scan pages - don't read them Design for Scanning Make text short - cut words Make page work at a glance Sufficient left margin, 640x480 = main message Create Visual Hierarchy Look for anything = Search Interest Decide quickly Choose first “reasonable item” Make obvious what you can do on a page Make obvious what is clickable Muddle through Don't figure out how things work Resist forming models Don't make users think Get rid of question marks Each item = clear purpose Stick to what works Repetition & Consistency Grid Layout, Easy Navigation, Graphics, Color Coding, Typography

Prof. Anselm SpoerriWeb Design Summary4 User Behavior  Design Implications  Design Specifics 1 Use Grid System Maintain Consistency Helps you decide: location of primary & secondary navigation; location and sizes of images; location of headlines, main text, annotations etc. Create Visual Hierarchy & Rhythm Present Information Clearly & Logically Users can read info more quickly. Facilitates understanding and recall. Invisible Hand guiding users and creating sense of place Design for Scanning Make text short - cut words Make page work at a glance Sufficient left margin, 640x480 = main message Create Visual Hierarchy Make obvious what you can do Make obvious what is clickable Don't make users think Get rid of question marks Each item = clear purpose Repetition & Consistency Grid Layout, Easy Navigation, Graphics, Color Coding, Typography User Behavior  Design ImplicationsUser Behavior  Design Implications  Design Specifics Scan pages - don't read them Look for anything = Search Interest Decide quickly Choose first “reasonable item” Muddle through Don't figure out how things work Resist forming models Stick to what works

Prof. Anselm SpoerriWeb Design Summary5 User Behavior  Design Implications  Design Specifics 2 Create Visual Hierarchy & Guide Eye Important Things = Visually Prominent (More Important = Larger / Sharp Contrast) Use headlines to guide the eye Visual Contrast Use sharp changes in size (headline), light intensity (bold), color, texture, motion to create contrast. Proximity: related things spatially close Spatial separation = conceptual separation. Don't mix alignment styles. Use Grouping & Nesting to Increase Information Density (Short-term Memory = 3-7) Use bounding shapes. Design for Scanning Make text short - cut words Make page work at a glance Sufficient left margin, 640x480 = main message Create Visual Hierarchy Make obvious what you can do Make obvious what is clickable Don't make users think Get rid of question marks Each item = clear purpose Repetition & Consistency Grid Layout, Easy Navigation, Graphics, Color Coding, Typography User Behavior  Design ImplicationsUser Behavior  Design Implications  Design Specifics Scan pages - don't read them Look for anything = Search Interest Decide quickly Choose first “reasonable item” Muddle through Don't figure out how things work Resist forming models Stick to what works

Prof. Anselm SpoerriWeb Design Summary6 User Behavior  Design Implications  Design Specifics 3 Typography Heuristics Sans Serif type is easier to read on screen Type size points words per line Column width proportional to type size Bold and italic for small blocks of text Enough contrast between type & background Design for Scanning Make text short - cut words Make page work at a glance Sufficient left margin, 640x480 = main message Create Visual Hierarchy Make obvious what you can do Make obvious what is clickable Don't make users think Get rid of question marks Each item = clear purpose Repetition & Consistency Grid Layout, Easy Navigation, Graphics, Color Coding, Typography User Behavior  Design ImplicationsUser Behavior  Design Implications  Design Specifics Scan pages - don't read them Look for anything = Search Interest Decide quickly Choose first “reasonable item” Muddle through Don't figure out how things work Resist forming models Stick to what works

Prof. Anselm SpoerriWeb Design Summary7 User Behavior  Design Implications  Design Specifics 1 Use Grid System Maintain Consistency Helps you decide: location of primary & secondary navigation; location and sizes of images; location of headlines, main text, annotations etc. Create Visual Hierarchy & Rhythm Present Information Clearly & Logically Users can read info more quickly. Facilitates understanding and recall. Invisible Hand guiding users and creating sense of place 2 Create Visual Hierarchy & Guide Eye Important Things = Visually Prominent (More Important = Larger / Sharp Contrast) Use headlines to guide the eye Visual Contrast Use sharp changes in size (headline), light intensity (bold), color, texture, motion to create contrast. Proximity: related things spatially close. Spatial separation = conceptual separation. Don't mix alignment styles. Use Grouping & Nesting to Increase Information Density (Short-term Memory = 3-7) Use bounding shapes. 3 Typography Heuristics Sans Serif type is easier to read on screen Type size points words per line Column width proportional to type size Bold and italic used for small blocks of text Enough contrast between type and background Design for Scanning Make text short - cut words Make page work at a glance Sufficient left margin, 640x480 = main message Create Visual Hierarchy Make obvious what you can do Make obvious what is clickable Don't make users think Get rid of question marks Each item = clear purpose Repetition & Consistency Grid Layout, Easy Navigation, Graphics, Color Coding, Typography User Behavior  Design ImplicationsUser Behavior  Design Implications  Design Specifics Scan pages - don't read them Look for anything = Search Interest Decide quickly Choose first “reasonable item” Muddle through Don't figure out how things work Resist forming models Stick to what works

Prof. Anselm SpoerriWeb Design Summary8 Requirements for Web Pages  Layout Presents Info Clearly & Logically Facilitates Understanding & Recall  Visual Hierarchy Guides Eye to Important Things Where do I start? What can I do here? What site is this? What page am I on? Options at this level? Where I am? Go higher or home? Major sections of site? Web Page needs to easily answer Web Navigation needs to easily answer  Site ID – logo, image, text  Page name  Primary Navigation Top Row or Left Column Simple text hyperlinks, icons, rollovers, image-maps, pull-downs  Secondary Navigation Below Top Line or Left Column  Expanding / Nesting Hierarchies Static or Dynamic Outlines  Color Coding, Breadcrumbs Primary / Secondary Navigation

Prof. Anselm SpoerriWeb Design Summary9 Basic Design Principles Alignment –Don't Mix Alignment Styles - Simplicity –Create Sufficient Left Margin –Constrain Total Width of Page Proximity –Related Things Close Together –Spatial Separation = Conceptual Separation Repetition & Consistency –Grid Layout, Navigation, Graphics Color Coding, Typeface –Creates Ease of Use Contrast –Bigger, Bolder, Color, Spatial Distance –Guide the Eye and Create Visual Hierarchy

Prof. Anselm SpoerriWeb Design Summary10 Writing for the Web Concise, SCANABLE and ObjectiveConcise, SCANABLE and Objective by Jacob Nielsen People scan page –Study: 79% always scanned + only 16 % read word-by-word. Make pages “scanable” –Start with conclusion –One idea per paragraph –Half the word count (or less) than conventional writing –Highlighted keywords –Meaningful sub-headings (not "clever" ones) –Bulleted lists Credibility important and increased by: –High-quality graphics –Good writing –Use of outbound hyperlinks