Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Principles of Design, Applied to the Open Web

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Thomas Bradley Thomas Bradley
June 02, 2012
Design
210
2

Principles of Design, Applied to the Open Web

Avatar for Thomas Bradley

Thomas Bradley

June 02, 2012

Other Decks in Design

See All in Design
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
510
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
210
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
220
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.5k
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
590
設計と制作 意図を形に表す / Design and Making: Intent Made Form
Avatar for usagimaru usagimaru
3
1.6k
デザインするために「多様性」について考える
Avatar for なつ iflection
0
270
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
520
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
260
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.1k
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
860
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
790

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Design in an AI World
Avatar for tapps tapps
0
190
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
99
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.8k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
110
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
180
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
170
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
770
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k

Transcript

  1. Principles of Design Applied to the Open Web

  2. Design e process of consciously optimizing a solution to help

    humans achieve a goal

  3. Open Web Technologies anybody can contribute to that work together

    as the World Wide Web

  4. e Principles Ideas that help us talk about design and

    why it works

  5. 4 Principles Coined by Robin Williams Non-Designer’s Design Book

  6. Contrast Repetition Alignment Proximity

  7. Contrast Repetition Alignment Proximity

  8. Contrast · Distinguish elements on the page · Guide your

    user’s eye
  9. None

  10. Current page highlighted New tweet button stands out

  11. Repetition · Create design cohesiveness · Make your user comfortable

  12. None

  13. Same style for all navigation Navigation stays at the centre

    top

  14. Alignment · Everything in its place · Help your user

    manage connections
  15. None

  16. Navigation on the left User controls on the right

  17. Proximity · Group related things together · Help your user

    understand
  18. None

  19. Navigation grouped together User controls grouped together

  20. None

  21. Contrast Repetition Alignment Proximity

  22. 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