Design Principles For The Web

The opening presentation from An Event Apart Online Together: Front-End Focus held online in August 2020.

https://adactio.com/articles/17733

Transcript

1. Design Principles For The Web
6. analytics
8. 1.2MB
9. 1.2MB 98KB
11. 2 minutes
12. 2 minutes 20 minutes
13. expectations
17. survivorship bias
21. gaps & overlaps
27. role mapping
28. fluffy edges
32. discover define execute deliver
33. diverge diverge converge converge discover define execute deliver
34. discover define execute deliver
35. discover define fluffy edges
36. discover define fluffy edges project canvas
37. discover define fluffy edges project canvas pre-mortem
38. discover define fluffy edges project canvas research pre-mortem
39. assumptions
40. assumptions expectations biases + =
41. values
42. purpose
43. purpose principles
44. purpose principles patterns
45. purpose principles patterns
46. design principles
47. principles.adactio.com
48. principles.adactio.com Google Ten Things We Know To Be True
49. principles.adactio.com Google Ten Principles That Contribute To A Googley User Experience
50. principles.adactio.com Dieter Rams Ten Principles For Good Design
51. Design Principles For Design Principles
52. Make it usable!” “
53. Usability is more important than profitability.” “
54. ______, even over ________” “
55. “ usability, even over profitability”
56. “ usability , even over profitability ”
57. The Priority of Constituencies
58. The Priority of Constituencies In case of conflict, consider users over authors over implementors over theoretical purity.” “
59. universal principles?
60. Hofstadter’s law
61. Hofstadter’s law It always takes longer than you expect, even when you take into account Hofstadter’s Law.” “
62. Sturgeon’s law
63. Sturgeon’s law Ninety percent of everything is crap.” “
64. Murphy’s law
65. Murphy’s law Anything that can go wrong, will go wrong.” “
66. Cole’s law
67. Cole’s law Shredded raw cabbage with a vinaigrette or mayonnaise dressing.” “
68. Hanlon’s razor
69. Hanlon’s razor Never attribute to malice that which can be adequately explained by incompetence.” “
70. Occam’s razor
71. Occam’s razor Entities should not be multiplied without necessity.” “
72. design principles
77. worldwideweb.cern.ch
78. worldwideweb.cern.ch
80. Axioms of web architecture
81. execute deliver
82. Principles such as simplicity and modularity are the stuff of software engineering; “
83. Principles such as simplicity and modularity are the stuff of software engineering; decentralization and tolerance are the life and breath of the internet.” “
84. tolerance
86. Postel’s law
87. Postel’s law Be conservative in what you send, be liberal in what you accept.” “
88. Be conservative in what you send
89. 1. 2. 3. 4.
90. 1. 2. 3. 4. Web fonts
91. 1. 2. 3. Images 4. Web fonts
92. 1. 2. Your JavaScript 3. Images 4. Web fonts
93. 1. Other people’s JavaScript 2. Your JavaScript 3. Images 4. Web fonts
94. JavaScript
95. Atwood’s Law
96. Atwood’s Law Any application that can be written in JavaScript, will eventually be written in JavaScript.” “
97. The principle of least power
98. The principle of least power Choose the least powerful language suitable for a given purpose.” “
100. In the web front-end stack — “
101. In the web front-end stack — HTML, CSS, JS, and ARIA — “
102. In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. “
103. In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works.” “
104. Government Design Principles
105. Government Design Principles Government should only do what only government can do.” “
106. Any particular technology should only do what only that particular technology can do.” “
107. JavaScript should only do what only JavaScript can do.” “
108. button
109. button <div> + CSS + JavaScript + ARIA
110. <button> + CSS 🙂 <div> + CSS + JavaScript + ARIA button
111. dropdown
112. dropdown <div> + CSS + JavaScript + ARIA
113. <select> + CSS 😐 dropdown <div> + CSS + JavaScript + ARIA
114. date picker
115. date picker <div> + CSS + JavaScript + ARIA
116. <input type="date"> + CSS 🙁 date picker <div> + CSS + JavaScript + ARIA
117. <input type="date"> <select> <button> <div> + CSS + JavaScript + ARIA
118. <input type="date"> <select> <button> <div> + CSS + JavaScript + ARIA
119. <input type="date"> <select> <button> <div> + CSS + JavaScript + ARIA access
120. <input type="date"> <select> <button> <div> + CSS + JavaScript + ARIA access control
122. The web does not value consistency. “
123. The web does not value consistency. The web values ubiquity.” “
124. “ ubiquity, even over consistency”
125. “ ubiquity , even over consistency ”
126. “ ubiquity , even over consistency ” Flash
127. “ ubiquity, even over consistency” World Wide Web
128. World Wide Web
130. Thank you