Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Principles of Design, Applied to the Open Web
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Thomas Bradley
June 02, 2012
Design
210
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Principles of Design, Applied to the Open Web
Thomas Bradley
June 02, 2012
Other Decks in Design
See All in Design
個人理念(自分の言葉)の言語化ワークショップ
kakukoki
1
180
もう迷わない!“なんとなく”を卒業するフォントの選び方【村田俊英】
toshihidemurata
0
870
CULTURE DECK/Frontend Engineer
mhand01
0
1.6k
染み出し好きの、 染み出しコントロール論
mukai_takeru
0
410
設計の進め方と 品質特性品質特性
harakeishi
0
1.1k
ポートフォリオ_あやの
ngyenmazt1412
0
1.1k
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
dmattsun
2
350
つくり方を変えていく | change-how-we-build
mottox2
2
1.4k
開閉UIのアニメーション設計
hiro0218
2
990
社長の宿題への回答 「新卒×AI」が生み出す価値
saki822
2
210
「バイブコーディングって何?」から始まった、 AIとの一年間と、その先のこと
seto
0
1.1k
Signull 団体説明資料
signull
0
780
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Facilitating Awesome Meetings
lara
57
7.1k
AI: The stuff that nobody shows you
jnunemaker
PRO
9
940
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
The Spectacular Lies of Maps
axbom
PRO
1
940
From π to Pie charts
rasagy
0
320
The Art of Programming - Codeland 2020
erikaheidi
57
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Become a Pro
speakerdeck
PRO
31
6.2k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
210
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
6.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.6k
Transcript
Principles of Design Applied to the Open Web
Design e process of consciously optimizing a solution to help
humans achieve a goal
Open Web Technologies anybody can contribute to that work together
as the World Wide Web
e Principles Ideas that help us talk about design and
why it works
4 Principles Coined by Robin Williams Non-Designer’s Design Book
Contrast Repetition Alignment Proximity
Contrast Repetition Alignment Proximity
Contrast · Distinguish elements on the page · Guide your
user’s eye
None
Current page highlighted New tweet button stands out
Repetition · Create design cohesiveness · Make your user comfortable
None
Same style for all navigation Navigation stays at the centre
top
Alignment · Everything in its place · Help your user
manage connections
None
Navigation on the left User controls on the right
Proximity · Group related things together · Help your user
understand
None
Navigation grouped together User controls grouped together
None
Contrast Repetition Alignment Proximity
dailyblogtips.com/crapthe-four-principles-of-sound-design/ digital-web.com/articles/principles_of_design/ speakerdeck.com/u/thomasjbradley thinkvitamin.com/design/how-crap-is-your-site-design/ en.wikipedia.org/wiki/Design_elements_and_principles colorado.edu/AmStudies/lewis/Design/graprin.htm amazon.ca/dp/0321534042