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.

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
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 &
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"
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">
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">
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">
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
56. antipattern <a href="javascript:..."> <a href="#" onclick="...">
57. dark patterns
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
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
86. principles. adactio.com
87. html5for webdesigners .com