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

Design for Developers

Avatar for Kevin Dees Kevin Dees
November 03, 2016
Programming
1
160

Design for Developers

Avatar for Kevin Dees

Kevin Dees

November 03, 2016
Tweet

More Decks by Kevin Dees

See All by Kevin Dees
The Hidden Features Of CSS
Avatar for Kevin Dees kevindees
1
100
Create Your Own Theme Page-Builder in Minutes
Avatar for Kevin Dees kevindees
0
2.1k
CSS Gird
Avatar for Kevin Dees kevindees
0
450
Forms make the web
Avatar for Kevin Dees kevindees
1
280
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
380
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
830
Busting The Loop Lies
Avatar for Kevin Dees kevindees
2
150
Pragmatic WordPress Workflow
Avatar for Kevin Dees kevindees
2
300
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
660

Other Decks in Programming

See All in Programming
Understanding Kotlin Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
230
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
Avatar for ktr ktr_0731
3
660
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）The Basics of Agent Development with ADK — A Demo-Focused Introduction
Avatar for RisaTube risatube
PRO
5
1.2k
Git Sync を超える！OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
Avatar for Tetsuya Kikuchi tkikuc
4
470
11年かかって やっとVibe Codingに 時代が追いつきましたね
Avatar for yimajo yimajo
0
190
SwiftでMCPサーバーを作ろう！
Avatar for giginet giginet
PRO
2
210
知って得する@cloudflare_vite-pluginのあれこれ
Avatar for chimame chimame
1
120
状態遷移図を書こう / Sequence Chart vs State Diagram
Avatar for Kuniwak orgachem
PRO
3
290
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
Avatar for 幡ヶ谷亭直吉 hiliteeternal
0
290
Android 16KBページサイズ対応をはじめからていねいに
Avatar for mine2424 mine2424
0
740
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
Avatar for yakenji yakenji
0
810
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
Avatar for Tomohisa Takaoka tomohisa
0
190

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
850
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
189
11k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
390
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Done Done
Avatar for chrislema chrislema
184
16k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k

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