Save 37% off PRO during our Black Friday Sale! »

Design Principles

5ad82c5ba0264363974af89deb743c20?s=47 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.

5ad82c5ba0264363974af89deb743c20?s=128

Jeremy Keith

December 14, 2011
Tweet

Transcript

  1. principles. adactio.com

  2. design principles how?

  3. design goals why?

  4. design patterns what?

  5. goals principles patterns

  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
  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
  8. patterns one person, one vote checks and balances

  9. None
  10. Soware, like all technologies, is inherently political. Code inevitably reflects

    the choices, biases and desires of its creators. —Jamais Cascio
  11. rough consensus running code &

  12. None
  13. CSS maintainability modularity readability longevity interoperability simplicity implementibility minimum reduncancy

    learnability extensibility efficiency device-independency accessibility
  14. selector { property: value; }

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

    you accept.
  16. HTML

  17. ...guidance for the design of HTML in the areas of

    compatibility, utility and interoperability. —HTML Design Principles
  18. solve real problems

  19. <h2><a href="/path/to/resource">Headline text</a></h2> <p><a href="/path/to/resource">Paragraph text.</a></p> (X)HTML HTML5 <a href="/path/to/resource">

    <h2>Headline text</h2> <p>Paragraph text.</p> </a>
  20. degrade gracefully

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

    input type="url"
  22. input type="number"

  23. input type="search"

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

  25. None
  26. None
  27. goal backwards compatibility

  28. principle progressive enhancement

  29. pattern

  30. What’s your favourite browser? <select> <option value="safari">Safari</option> <option value="chrome">Chrome</option> <option

    value="opera">Opera</option> <option value="firefox">Firefox</option> <option>Other</option> </select> If other, please specify: <input type="text">
  31. None
  32. None
  33. What’s your favourite browser? <datalist id="browsers"> <option value="safari">Safari</option> <option value="chrome">Chrome</option>

    <option value="opera">Opera</option> <option value="firefox">Firefox</option> </datalist> <input type="text" list="browsers">
  34. None
  35. None
  36. What’s your favourite browser? <select> <option value="safari">Safari</option> <option value="chrome">Chrome</option> <option

    value="opera">Opera</option> <option value="firefox">Firefox</option> <option>Other</option> </select> If other, please specify: <input type="text">
  37. What’s your favourite browser? <datalist id="browsers"> <select> <option value="safari">Safari</option> <option

    value="chrome">Chrome</option> <option value="opera">Opera</option> <option value="firefox">Firefox</option> <option>Other</option> </select> If other, please specify: </datalist> <input type="text" list="browsers">
  38. None
  39. Flash HTML5 plug-in video

  40. <video src="movie.mp4"> </video> <!-- fallback content -->

  41. <video src="movie.mp4"> </video> <object data="movie.swf"> <!-- fallback content --> </object>

  42. <video src="movie.mp4"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a> </object>

  43. <video> <source src="movie.mp4"> <source src="movie.ogv"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a>

    </object>
  44. <video> <source src="movie.mp4"> <source src="movie.ogv"> <source src="movie.webm"> </video> <object data="movie.swf">

    <a href="movie.mp4">download</a> </object>
  45. <video> <source src="movie.mp4"> <source src="movie.ogv"> <source src="movie.webm"> </video> <object data="movie.swf">

    <a href="movie.mp4">download</a> </object> 1 2 3 4 5
  46. e value of a network is proportional to the square

    of the number of connected users of the system (n²). —Robert Metcalfe principle
  47. JavaScript

  48. principle unobtrusive JavaScript

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

  50. selector { property: value; }

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

  52. pattern

  53. None
  54. None
  55. None
  56. antipattern <a href="javascript:..."> <a href="#" onclick="...">

  57. dark patterns

  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. goals principles patterns

  71. ...to organize the world’s information and make it universally accessible

    and useful. —Google Corporate Information goals
  72. Simplicity is powerful. Every millisecond counts. —Ten principles that contribute

    to a Googley user experience principles
  73. ...to empower and engage people around the world to collect

    and develop educational content. ...to disseminate it effectively and globally. —Wikimedia Foundation goals
  74. Have a neutral point of view. Interact in a respectful

    and civil manner. —Wikipedia:Five pillars principles
  75. ...allow anyone to easily publish, manage and organize a wide

    variety of content on a website. —About Drupal goals
  76. Privilege the Content Creator. Design for the 80%. —Drupal 7

    User Experience Project principles
  77. A web of data. —Semantic Web goals

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

  79. Humans first, machines second. —Microformats principles

  80. None
  81. principles progressive enhancement unobtrusive JavaScript be conservative in what you

    send; be liberal in what you accept.
  82. goal universal access

  83. pattern one web

  84. None
  85. None
  86. principles. adactio.com

  87. html5for webdesigners .com