Intro to Web Design


Published on

Intro to Web Design guest lecture

Published in: Design, Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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: </li></ul>
    9. 9. How We Really Use The Web <ul><li> </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> </li></ul>
    31. 32. Resources <ul><li>Ask Tog, First Principles of Interaction Design, </li></ul><ul><li>OneExtraPixel, 10 principles of navigation design, </li></ul><ul><li>Smashing Magazine, 10 principles of effective web design, </li></ul><ul><li>WebDesign, Understanding visual hierarchy, </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.