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

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

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

1. 1. 1. Web fonts

1. 1. Images 4. Web fonts

1. Your JavaScript 3. Images 4. Web fonts

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 🙂