Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Principles

Jeremy Keith
December 14, 2011

Design Principles

All software is inherently political, reflecting the biases and beliefs of the people behind it. These beliefs can be made explicit through the publication of design principles: pragmatic rules of thumb that underpin a shared endeavour. Find out how important good design principles are to any project, whether it’s a website, a framework, or the World Wide Web itself.

Jeremy Keith

December 14, 2011
Tweet

More Decks by Jeremy Keith

Other Decks in Design

Transcript

  1. principles.
    adactio.com

    View full-size slide

  2. design
    principles
    how?

    View full-size slide

  3. design
    goals
    why?

    View full-size slide

  4. design
    patterns
    what?

    View full-size slide

  5. goals
    principles
    patterns

    View full-size slide

  6. ...to form a more perfect Union, establish Justice,
    insure domestic Tranquility,
    proide for the common defence,
    promote the general Welfare, and secure the Blessings of
    Liberty to ourseles and our Posterity
    —e United States Constitution
    goals

    View full-size slide

  7. ...that all Men are created equal,
    that they are endowed by their Creator with
    certain unalienable Rights,
    that among these are
    Life, Liberty and the pursuit of Happiness.
    —e Declaration Of Independence
    principles

    View full-size slide

  8. patterns
    one person, one vote
    checks and balances

    View full-size slide

  9. Soware, like all technologies, is inherently political.
    Code inevitably reflects the choices, biases and desires
    of its creators.
    —Jamais Cascio

    View full-size slide

  10. rough consensus
    running code
    &

    View full-size slide

  11. CSS
    maintainability
    modularity
    readability longevity
    interoperability
    simplicity
    implementibility
    minimum reduncancy
    learnability
    extensibility
    efficiency
    device-independency
    accessibility

    View full-size slide

  12. selector {
    property: value;
    }

    View full-size slide

  13. be conservative
    in what you send;
    be liberal in
    what you accept.

    View full-size slide

  14. ...guidance for the design of HTML in the areas of
    compatibility, utility and interoperability.
    —HTML Design Principles

    View full-size slide

  15. solve real
    problems

    View full-size slide

  16. Headline text
    Paragraph text.
    (X)HTML
    HTML5

    Headline text
    Paragraph text.

    View full-size slide

  17. degrade
    gracefully

    View full-size slide

  18. input type="number"
    input type="search"
    input type="range"
    input type="email"
    input type="date"
    input type="url"

    View full-size slide

  19. input type="number"

    View full-size slide

  20. input type="search"

    View full-size slide

  21. input type="search"
    placeholder="e.g. salad or fish"

    View full-size slide

  22. goal
    backwards
    compatibility

    View full-size slide

  23. principle
    progressive
    enhancement

    View full-size slide

  24. What’s your favourite browser?

    Safari
    Chrome
    Opera
    Firefox
    Other

    If other, please specify:

    View full-size slide

  25. What’s your favourite browser?

    Safari
    Chrome
    Opera
    Firefox


    View full-size slide

  26. What’s your favourite browser?

    Safari
    Chrome
    Opera
    Firefox
    Other

    If other, please specify:

    View full-size slide

  27. What’s your favourite browser?


    Safari
    Chrome
    Opera
    Firefox
    Other

    If other, please specify:


    View full-size slide

  28. Flash
    HTML5
    plug-in
    video

    View full-size slide







  29. download

    1
    2
    3
    4
    5

    View full-size slide

  30. e value of a network is proportional to the square
    of the number of connected users of the system (n²).
    —Robert Metcalfe
    principle

    View full-size slide

  31. principle
    unobtrusive
    JavaScript

    View full-size slide

  32. Find stuff and do stuff to it.
    —juery

    View full-size slide

  33. selector {
    property: value;
    }

    View full-size slide

  34. $(selector).event ({
    action;
    });

    View full-size slide

  35. dark
    patterns

    View full-size slide

  36. goals
    principles
    patterns

    View full-size slide

  37. ...to organize the world’s information and make it
    universally accessible and useful.
    —Google Corporate Information
    goals

    View full-size slide

  38. Simplicity is powerful.
    Every millisecond counts.
    —Ten principles that contribute to a
    Googley user experience
    principles

    View full-size slide

  39. ...to empower and engage people around the world to
    collect and develop educational content.
    ...to disseminate it effectively and globally.
    —Wikimedia Foundation
    goals

    View full-size slide

  40. Have a neutral point of view.
    Interact in a respectful and civil manner.
    —Wikipedia:Five pillars
    principles

    View full-size slide

  41. ...allow anyone to easily publish, manage and organize
    a wide variety of content on a website.
    —About Drupal
    goals

    View full-size slide

  42. Privilege the Content Creator.
    Design for the 80%.
    —Drupal 7 User Experience Project
    principles

    View full-size slide

  43. A web of data.
    —Semantic Web
    goals

    View full-size slide

  44. Decompose any type of knowledge into small pieces.
    —RDF
    principles

    View full-size slide

  45. Humans first, machines second.
    —Microformats
    principles

    View full-size slide

  46. principles
    progressive enhancement
    unobtrusive JavaScript
    be conservative in what you send;
    be liberal in what you accept.

    View full-size slide

  47. goal
    universal
    access

    View full-size slide

  48. pattern
    one web

    View full-size slide

  49. principles.
    adactio.com

    View full-size slide

  50. html5for
    webdesigners
    .com

    View full-size slide