Your SlideShare is downloading. ×
0
Design Fundamentals <ul><li>User Experience, Aesthetics, Process </li></ul>03 November 2011
Tonight <ul><li>What Is Design </li></ul><ul><li>Design Principles </li></ul><ul><li>Design Process </li></ul>
What Is Design?
Quote: <ul><li>A designer is a visually literate person, just as an editor is expected by training and inclination to be v...
The Key <ul><li>Good interface design enables increased productivity, reduces errors, and provides a “better” user experie...
Our Goal <ul><li>Obvious Design =  </li></ul><ul><li>“ Don’t Make Me Think” Design </li></ul>
Design Principles <ul><li>Schneiderman </li></ul><ul><li>Norman </li></ul><ul><li>Krug </li></ul>
We Scan, We Don’t Read <ul><li>Heat map from eyetracking research via Jakob Nielsen:  http://www.useit.com/alertbox/readin...
How We Really Use The Web <ul><li>http://www.wdvl.com/Authoring/Design/Dont/index.html </li></ul>
Ben Schneiderman <ul><li>Strive for  consistency </li></ul><ul><li>Offer informative  feedback </li></ul><ul><li>Reduce sh...
Don Norman <ul><li>Visibility  – Can we see it? </li></ul><ul><li>Feedback  - What is happening?!? </li></ul><ul><li>Mappi...
Steve Krug <ul><li>Don’t make me thin </li></ul>
Quote: <ul><li>When I ’ m looking at a page that doesn ’ t make me think, all the thought balloons over my head say things...
Kathy’s Rule:  Be Polite  aka Don’t Be Rude!
Understand who I am and why I’m here Implementing Kathy’s Rule
1. Know why I’m here and greet me appropriately <ul><li>Less than a quarter of the visible portion of the page is devoted ...
Contrast Illinois With Utah
Then there’s NSW
2. Where am I, where can I go, where have I been? <ul><li>Contrast is important for readability. So are “you are here” sig...
Contrast with CNN
Ahem. Any idea what this is? <ul><li>It’s the Washington Post redesign.  </li></ul>
3. Is that a link? <ul><li>If you have to tell someone where to click … rethink the design! </li></ul>
4. Practice appropriate consistency
5. Be personable. That means human!
Don’ t write like lawyers!
<ul><li>Let me know what others think. </li></ul>
Make it easy for me to talk to you.
Implementing Kathy’s Rule Summary <ul><li>The page/screen should be self-explanatory, obvious </li></ul><ul><li>I should b...
A Quick Check <ul><li>What is the key info people are seeking (what are they trying to do)? List 6-10 things. </li></ul><u...
 
Contact <ul><li>Kathy E Gill </li></ul><ul><li>@kegill </li></ul><ul><li>kegill at uw dot edu </li></ul><ul><li>http://fac...
Resources <ul><li>Ask Tog, First Principles of Interaction Design,  http://www.asktog.com/basics/firstPrinciples.html </li...
Upcoming SlideShare
Loading in...5
×

Intro to Web Design

1,206

Published on

Intro to Web Design guest lecture

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,206
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://www.flickr.com/photos/frauleinschiller/4343425717/
  • Transcript of "Intro to Web Design"

    1. 1. Design Fundamentals <ul><li>User Experience, Aesthetics, Process </li></ul>03 November 2011
    2. 2. Tonight <ul><li>What Is Design </li></ul><ul><li>Design Principles </li></ul><ul><li>Design Process </li></ul>
    3. 3. What Is Design?
    4. 4. Quote: <ul><li>A designer is a visually literate person, just as an editor is expected by training and inclination to be versed in language and literature… </li></ul><ul><li>Douglas Martin, Book Design, </li></ul><ul><li>quoted in Designing Visual Interfaces (8) </li></ul>
    5. 5. The Key <ul><li>Good interface design enables increased productivity, reduces errors, and provides a “better” user experience </li></ul>
    6. 6. Our Goal <ul><li>Obvious Design = </li></ul><ul><li>“ Don’t Make Me Think” Design </li></ul>
    7. 7. Design Principles <ul><li>Schneiderman </li></ul><ul><li>Norman </li></ul><ul><li>Krug </li></ul>
    8. 8. We Scan, We Don’t Read <ul><li>Heat map from eyetracking research via Jakob Nielsen: http://www.useit.com/alertbox/reading_pattern.html </li></ul>
    9. 9. How We Really Use The Web <ul><li>http://www.wdvl.com/Authoring/Design/Dont/index.html </li></ul>
    10. 10. Ben Schneiderman <ul><li>Strive for consistency </li></ul><ul><li>Offer informative feedback </li></ul><ul><li>Reduce short-term memory load </li></ul><ul><li>Enable shortcuts </li></ul><ul><li>Offer simple error handling </li></ul><ul><li>Make actions reversible </li></ul>
    11. 11. Don Norman <ul><li>Visibility – Can we see it? </li></ul><ul><li>Feedback - What is happening?!? </li></ul><ul><li>Mapping – Do the controls do what I think they will do? </li></ul><ul><li>Consistency – Does the widget do the same thing this time as it did last time? Is this how things work on other sites? Is that navigation element in the same place? </li></ul>
    12. 12. Steve Krug <ul><li>Don’t make me thin </li></ul>
    13. 13. Quote: <ul><li>When I ’ m looking at a page that doesn ’ t make me think, all the thought balloons over my head say things like “ OK, there ’ s the ____. And that ’ s a _____. And there ’ s the thing that I want. ” </li></ul><ul><li>Steve Krug </li></ul><ul><li>Don’t Make Me Think </li></ul>
    14. 14. Kathy’s Rule: Be Polite aka Don’t Be Rude!
    15. 15. Understand who I am and why I’m here Implementing Kathy’s Rule
    16. 16. 1. Know why I’m here and greet me appropriately <ul><li>Less than a quarter of the visible portion of the page is devoted to actions that might have triggered a citizen visit. </li></ul>
    17. 17. Contrast Illinois With Utah
    18. 18. Then there’s NSW
    19. 19. 2. Where am I, where can I go, where have I been? <ul><li>Contrast is important for readability. So are “you are here” signals. </li></ul>
    20. 20. Contrast with CNN
    21. 21. Ahem. Any idea what this is? <ul><li>It’s the Washington Post redesign. </li></ul>
    22. 22. 3. Is that a link? <ul><li>If you have to tell someone where to click … rethink the design! </li></ul>
    23. 23. 4. Practice appropriate consistency
    24. 24. 5. Be personable. That means human!
    25. 25. Don’ t write like lawyers!
    26. 26. <ul><li>Let me know what others think. </li></ul>
    27. 27. Make it easy for me to talk to you.
    28. 28. Implementing Kathy’s Rule Summary <ul><li>The page/screen should be self-explanatory, obvious </li></ul><ul><li>I should be able to easily tell where I am, where I’ve been and where I can go </li></ul><ul><li>A link should look like a link. If something looks like a link, it should be a link. </li></ul><ul><li>Practice appropriate consistency (header, footer elements in particular) </li></ul><ul><li>Be personable </li></ul>
    29. 29. A Quick Check <ul><li>What is the key info people are seeking (what are they trying to do)? List 6-10 things. </li></ul><ul><li>Rank them in importance. </li></ul><ul><li>Now go look at the website </li></ul><ul><li>Compare your rankings of information to the website </li></ul>
    30. 31. Contact <ul><li>Kathy E Gill </li></ul><ul><li>@kegill </li></ul><ul><li>kegill at uw dot edu </li></ul><ul><li>http://faculty.u.washington.edu/kegill </li></ul>
    31. 32. Resources <ul><li>Ask Tog, First Principles of Interaction Design, http://www.asktog.com/basics/firstPrinciples.html </li></ul><ul><li>OneExtraPixel, 10 principles of navigation design, http://www.onextrapixel.com/2009/07/03/10-principles-of-navigation-design-and-why-quality-navigation-is-so-critical/ </li></ul><ul><li>Smashing Magazine, 10 principles of effective web design, http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ </li></ul><ul><li>WebDesign, Understanding visual hierarchy, http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/ </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×