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

Design for Developers

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Kevin Dees Kevin Dees
November 03, 2016
Programming
180
1

Design for Developers

Avatar for Kevin Dees

Kevin Dees

November 03, 2016

More Decks by Kevin Dees

See All by Kevin Dees
The Hidden Features Of CSS
Avatar for Kevin Dees kevindees
1
130
Create Your Own Theme Page-Builder in Minutes
Avatar for Kevin Dees kevindees
0
2.3k
CSS Gird
Avatar for Kevin Dees kevindees
0
520
Forms make the web
Avatar for Kevin Dees kevindees
1
310
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
410
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
970
Busting The Loop Lies
Avatar for Kevin Dees kevindees
2
180
Pragmatic WordPress Workflow
Avatar for Kevin Dees kevindees
2
320
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
680

Other Decks in Programming

See All in Programming
Claude Codeログ基盤の構築
Avatar for giginet giginet
PRO
7
3.8k
Java 21/25 Virtual Threads 소개
Avatar for Sunghyouk Bae (Debop) debop
0
310
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.6k
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
Avatar for SUZUKI Masashi masasuzu
0
260
RailsのValidatesをSwift Macrosで再現してみた
Avatar for Takuma Shimizu hokuron
0
140
20260315 AWSなんもわからん🥲
Avatar for Chiaki Okamoto chiilog
2
180
Goの型安全性で実現する複数プロダクトの権限管理
Avatar for ishikawa-pro ishikawa_pro
2
1.4k
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
Avatar for Kuniwak orgachem
PRO
8
3.6k
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
810
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
200
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
1
190
脱 雰囲気実装！ AgentCoreを良い感じに WEBアプリケーションに組み込むために
Avatar for Takuya Yonezawa takuyay0ne
3
420

Featured

See All Featured
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
440
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
990
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
190
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
300
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
300

Transcript

  1. Design for Devlopers

  2. Design = Solving Problems

  3. Users First

  4. Steal like an artist

  5. Patterns

  6. → Menu → Footer → Header → Dropdown → Login

    Forms

  7. Typography

  8. None

  9. Large x-height for body copy

  10. Use good line height

  11. None

  12. lines 45 to 75 characters

  13. Serif for body copy

  14. Classic typographic scale

  15. None

  16. http://type-scale.com/

  17. Font Pairing

  18. http://fontpair.co/

  19. Ligatures

  20. None

  21. Content is King

  22. None
  23. None

  24. Color

  25. None

  26. → Primary → Secondary → Tertairy → Complementary → Triads

  27. None
  28. None
  29. None
  30. None
  31. None

  32. https://color.adobe.com

  33. None

  34. Photography

  35. Looking Room

  36. None
  37. None

  38. Rule of Thirds

  39. None

  40. High small, low tall

  41. Take advantage of shadows and lighting

  42. Interaction

  43. Click vs Hover

  44. For every action, there is an equal and opposite reaction

  45. Microinteraction

  46. Do one task well

  47. None
  48. None
  49. None

  50. Emotion

  51. Design for Humans

  52. Consider a persons relationships

  53. Personality

  54. Quick Tips

  55. Use a global light source

  56. Free Icons

  57. Wireframe Your Ideas

  58. Find inspiration

  59. Finally, go design something