discover define
fluffy edges
project canvas
research
pre-mortem
Slide 39
Slide 39 text
assumptions
Slide 40
Slide 40 text
assumptions
expectations
biases
+
=
Slide 41
Slide 41 text
values
Slide 42
Slide 42 text
purpose
Slide 43
Slide 43 text
purpose
principles
Slide 44
Slide 44 text
purpose
principles
patterns
Slide 45
Slide 45 text
purpose
principles
patterns
Slide 46
Slide 46 text
design principles
Slide 47
Slide 47 text
principles.adactio.com
Slide 48
Slide 48 text
principles.adactio.com
Google
Ten Things We
Know To Be True
Slide 49
Slide 49 text
principles.adactio.com
Google
Ten Principles
That Contribute
To A Googley
User Experience
Slide 50
Slide 50 text
principles.adactio.com
Dieter Rams
Ten Principles
For Good Design
Slide 51
Slide 51 text
Design Principles
For Design Principles
Slide 52
Slide 52 text
Make it usable!”
“
Slide 53
Slide 53 text
Usability is more important than profitability.”
“
Slide 54
Slide 54 text
______, even over ________”
“
Slide 55
Slide 55 text
“ usability, even over profitability”
Slide 56
Slide 56 text
“ usability
, even over
profitability ”
Slide 57
Slide 57 text
The Priority of Constituencies
Slide 58
Slide 58 text
The Priority of Constituencies
In case of conflict, consider users over
authors over implementors over
theoretical purity.”
“
Slide 59
Slide 59 text
universal principles?
Slide 60
Slide 60 text
Hofstadter’s law
Slide 61
Slide 61 text
Hofstadter’s law
It always takes longer than you expect,
even when you take into account
Hofstadter’s Law.”
“
Slide 62
Slide 62 text
Sturgeon’s law
Slide 63
Slide 63 text
Sturgeon’s law
Ninety percent of everything is crap.”
“
Slide 64
Slide 64 text
Murphy’s law
Slide 65
Slide 65 text
Murphy’s law
Anything that can go wrong, will go wrong.”
“
Slide 66
Slide 66 text
Cole’s law
Slide 67
Slide 67 text
Cole’s law
Shredded raw cabbage with a
vinaigrette or mayonnaise dressing.”
“
Slide 68
Slide 68 text
Hanlon’s razor
Slide 69
Slide 69 text
Hanlon’s razor
Never attribute to malice that which can
be adequately explained by incompetence.”
“
Slide 70
Slide 70 text
Occam’s razor
Slide 71
Slide 71 text
Occam’s razor
Entities should not be multiplied
without necessity.”
“
Slide 72
Slide 72 text
design principles
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
worldwideweb.cern.ch
Slide 78
Slide 78 text
worldwideweb.cern.ch
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Axioms of web architecture
Slide 81
Slide 81 text
execute deliver
Slide 82
Slide 82 text
Principles such as simplicity and
modularity are the stuff of
software engineering;
“
Slide 83
Slide 83 text
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
Slide 84 text
tolerance
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
Postel’s law
Slide 87
Slide 87 text
Postel’s law
Be conservative in what you send,
be liberal in what you accept.”
“
Slide 88
Slide 88 text
Be conservative in what you send
Slide 89
Slide 89 text
1.
2.
3.
4.
Slide 90
Slide 90 text
1.
2.
3.
4. Web fonts
Slide 91
Slide 91 text
1.
2.
3. Images
4. Web fonts
Slide 92
Slide 92 text
1.
2. Your JavaScript
3. Images
4. Web fonts
Slide 93
Slide 93 text
1. Other people’s JavaScript
2. Your JavaScript
3. Images
4. Web fonts
Slide 94
Slide 94 text
JavaScript
Slide 95
Slide 95 text
Atwood’s Law
Slide 96
Slide 96 text
Atwood’s Law
Any application that can be written in JavaScript,
will eventually be written in JavaScript.”
“
Slide 97
Slide 97 text
The principle of least power
Slide 98
Slide 98 text
The principle of least power
Choose the least powerful language
suitable for a given purpose.”
“
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
In the web front-end stack —
“
Slide 101
Slide 101 text
In the web front-end stack —
HTML, CSS, JS, and ARIA —
“
Slide 102
Slide 102 text
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
Slide 103 text
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
Slide 104 text
Government Design Principles
Slide 105
Slide 105 text
Government Design Principles
Government should only do what
only government can do.”
“
Slide 106
Slide 106 text
Any particular technology should only do what
only that particular technology can do.”
“
Slide 107
Slide 107 text
JavaScript should only do what
only JavaScript can do.”
“
Slide 108
Slide 108 text
button
Slide 109
Slide 109 text
button
+ CSS
+ JavaScript
+ ARIA
Slide 110
Slide 110 text
+ CSS 🙂
+ CSS
+ JavaScript
+ ARIA
button
Slide 111
Slide 111 text
dropdown
Slide 112
Slide 112 text
dropdown
+ CSS
+ JavaScript
+ ARIA
Slide 113
Slide 113 text
+ CSS 😐
dropdown
+ CSS
+ JavaScript
+ ARIA
Slide 114
Slide 114 text
date picker
Slide 115
Slide 115 text
date picker
+ CSS
+ JavaScript
+ ARIA
Slide 116
Slide 116 text
+ CSS 🙁
date picker
+ CSS
+ JavaScript
+ ARIA
Slide 117
Slide 117 text
+ CSS
+ JavaScript
+ ARIA
Slide 118
Slide 118 text
+ CSS
+ JavaScript
+ ARIA
Slide 119
Slide 119 text
+ CSS
+ JavaScript
+ ARIA
access
Slide 120
Slide 120 text
+ CSS
+ JavaScript
+ ARIA
access control
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
The web does not value consistency.
“
Slide 123
Slide 123 text
The web does not value consistency.
The web values ubiquity.”
“