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