Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Design for Developers

Avatar for Kevin Dees Kevin Dees
November 03, 2016
Programming
190
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
140
Create Your Own Theme Page-Builder in Minutes
Avatar for Kevin Dees kevindees
0
2.4k
CSS Gird
Avatar for Kevin Dees kevindees
0
540
Forms make the web
Avatar for Kevin Dees kevindees
1
330
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
450
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
980
Busting The Loop Lies
Avatar for Kevin Dees kevindees
2
200
Pragmatic WordPress Workflow
Avatar for Kevin Dees kevindees
2
330
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
690

Other Decks in Programming

See All in Programming
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Rails World 2026, Austin, Texas
Avatar for Marco Roth marcoroth
0
130
WebRTC映像をAirPlayに対応させる挑戦.pdf
Avatar for monolithic-adam monolithic_adam
0
330
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
Avatar for Atsuki Seo atsuki_seo
0
210
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
270
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
30
13k
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
1
1.2k
Verilogで学ぶCPU自作入門.pdf
Avatar for uyuki uyuki234
7
3.8k
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
280
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
Avatar for bash0C7 bash0c7
0
460
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
5.2k
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
300
SREの越境 / SRE Collaboration
Avatar for y-ohgi y0hgi
2
290

Featured

See All Featured
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
560
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
250
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
850
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
510
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
53k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
250
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k

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