A presentation at An Event Apart: Front-End Focus by Jeremy Keith
Design Principles For The Web
analytics
1.2MB
1.2MB 98KB
2 minutes
20 minutes 2 minutes
expectations
survivorship bias
gaps & overlaps
role mapping
fluffy edges
discover define execute deliver
ve rg e di ve rg e di ge er nv co ge er nv co discover define execute deliver
discover define execute deliver
discover define fluffy edges
project canvas discover define fluffy edges
discover define project canvas pre-mortem fluffy edges
discover define project canvas pre-mortem research fluffy edges
assumptions
expectations biases + assumptions =
values
purpose
purpose principles
purpose principles patterns
purpose principles patterns
design principles
principles.adactio.com
principles.adactio.com Ten Things We Know To Be True Google
principles.adactio.com Ten Principles That Contribute To A Googley User Experience Google
principles.adactio.com Ten Principles For Good Design Dieter Rams
Design Principles For Design Principles
“ Make it usable!”
“ Usability is more important than profitability.”
“ ______, even over ________”
“ usability, even over profitability”
“ profitability, even over usability”
The Priority of Constituencies
“ In case of conflict, consider users over authors over implementors over theoretical purity.” The Priority of Constituencies
universal principles?
Hofstadter’s law
“ It always takes longer than you expect, even when you take into account Hofstadter’s Law.” Hofstadter’s law
Sturgeon’s law
“ Ninety percent of everything is crap.” Sturgeon’s law
Murphy’s law
“ Anything that can go wrong, will go wrong.” Murphy’s law
Cole’s law
“ Shredded raw cabbage with a vinaigrette or mayonnaise dressing.” Cole’s law
Hanlon’s razor
“ Never attribute to malice that which can be adequately explained by incompetence.” Hanlon’s razor
Occam’s razor
“ Entities should not be multiplied without necessity.” Occam’s razor
design principles
worldwideweb.cern.ch
worldwideweb.cern.ch
Axioms of web architecture
execute deliver
“ Principles such as simplicity and modularity are the stuff of software engineering;
“ Principles such as simplicity and modularity are the stuff of software engineering; decentralization and tolerance are the life and breath of the internet.”
tolerance
Postel’s law
“ Be conservative in what you send, be liberal in what you accept.” Postel’s law
Be conservative in what you send
Other people’s JavaScript Your JavaScript Images Web fonts
JavaScript
Atwood’s Law
“ Any application that can be written in JavaScript, will eventually be written in JavaScript.” Atwood’s Law
The principle of least power
“ Choose the least powerful language suitable for a given purpose.” The principle of least power
“ In the web front-end stack —
“ In the web front-end stack — HTML, CSS, JS, and ARIA —
“ 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.
“ 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.”
Government Design Principles
“ Government should only do what only government can do.” Government Design Principles
“ Any particular technology should only do what only that particular technology can do.”
“ JavaScript should only do what only JavaScript can do.”
button
button <div> + CSS + JavaScript + ARIA
button <button> + CSS 🙂
<div> + CSS + JavaScript + ARIAdropdown
dropdown <div> + CSS + JavaScript + ARIA
dropdown <select> + CSS 😐
<div> + CSS + JavaScript + ARIAdate picker
date picker <div> + CSS + JavaScript + ARIA
date picker <input type=”date”> + CSS 🙁
<div> + CSS + JavaScript + ARIA<input type=”date”> <select> <button>
<div> + CSS + JavaScript + ARIA<input type=”date”> <select> <button>
<div> + CSS + JavaScript + ARIAaccess <input type=”date”> <select> <button>
<div> + CSS + JavaScript + ARIAaccess control <input type=”date”> <select> <button>
<div> + CSS + JavaScript + ARIA“ The web does not value consistency.
“ The web does not value consistency. The web values ubiquity.”
“ ubiquity, even over consistency”
“ consistency , even over ubiquity ”
Flash “ consistency , even over ubiquity ”
World Wide Web “ ubiquity, even over consistency”
World Wide Web
Thank you
Designing and developing on the web can feel like a never-ending crusade against the unknown. Design principles are one way of unifying your team to better fight this battle. But as well as the design principles specific to your product or service, there are core principles underpinning the very fabric of the World Wide Web itself. Together, we’ll dive into applying these design principles to build websites that are resilient, performant, accessible, and beautiful.
The following resources were mentioned during the presentation or are useful additional information.
The full transcript of this talk.
Links to articles referenced in the talk.
for free. You
can too.