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 Slide

  2. design
    principles
    how?

    View Slide

  3. design
    goals
    why?

    View Slide

  4. design
    patterns
    what?

    View Slide

  5. goals
    principles
    patterns

    View 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 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 Slide

  8. patterns
    one person, one vote
    checks and balances

    View Slide

  9. View Slide

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

    View Slide

  11. rough consensus
    running code
    &

    View Slide

  12. View Slide

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

    View Slide

  14. selector {
    property: value;
    }

    View Slide

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

    View Slide

  16. HTML

    View Slide

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

    View Slide

  18. solve real
    problems

    View Slide

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

    Headline text
    Paragraph text.

    View Slide

  20. degrade
    gracefully

    View Slide

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

    View Slide

  22. input type="number"

    View Slide

  23. input type="search"

    View Slide

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

    View Slide

  25. View Slide

  26. View Slide

  27. goal
    backwards
    compatibility

    View Slide

  28. principle
    progressive
    enhancement

    View Slide

  29. pattern

    View Slide

  30. What’s your favourite browser?

    Safari
    Chrome
    Opera
    Firefox
    Other

    If other, please specify:

    View Slide

  31. View Slide

  32. View Slide

  33. What’s your favourite browser?

    Safari
    Chrome
    Opera
    Firefox


    View Slide

  34. View Slide

  35. View Slide

  36. What’s your favourite browser?

    Safari
    Chrome
    Opera
    Firefox
    Other

    If other, please specify:

    View Slide

  37. What’s your favourite browser?


    Safari
    Chrome
    Opera
    Firefox
    Other

    If other, please specify:


    View Slide

  38. View Slide

  39. Flash
    HTML5
    plug-in
    video

    View Slide




  40. View Slide






  41. View Slide




  42. download

    View Slide






  43. download

    View Slide







  44. download

    View Slide







  45. download

    1
    2
    3
    4
    5

    View Slide

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

    View Slide

  47. JavaScript

    View Slide

  48. principle
    unobtrusive
    JavaScript

    View Slide

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

    View Slide

  50. selector {
    property: value;
    }

    View Slide

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

    View Slide

  52. pattern

    View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. antipattern


    View Slide

  57. dark
    patterns

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. goals
    principles
    patterns

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  77. A web of data.
    —Semantic Web
    goals

    View Slide

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

    View Slide

  79. Humans first, machines second.
    —Microformats
    principles

    View Slide

  80. View Slide

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

    View Slide

  82. goal
    universal
    access

    View Slide

  83. pattern
    one web

    View Slide

  84. View Slide

  85. View Slide

  86. principles.
    adactio.com

    View Slide

  87. html5for
    webdesigners
    .com

    View Slide