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
840
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
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
Avatar for はる lemonade_37
2
480
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
Avatar for Kazuki Fujikawa kfujikawa
0
960
Scale out your Claude Code ~⁨⁩自社専用Agentで10xする開発プロセス~
Avatar for Yuku Kotani yukukotani
9
2.2k
あのころの iPod を どうにか再生させたい
Avatar for orumin orumin
2
2.5k
Google I/O recap web編 大分Web祭り2025
Avatar for kponda kponda
0
2.9k
マイコンでもRustのtestがしたい その２/KernelVM Tokyo 18
Avatar for Toshifumi NISHINAGA tnishinaga
2
2.3k
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
Avatar for アカツキゲームス_Tech akatsukigames_tech
0
140
QA x AIエコシステム段階構築作戦
Avatar for Osu osu
0
270
フロントエンドのmonorepo化と責務分離のリアーキテクト
Avatar for Takuma Kajikawa kajitack
2
110
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
Avatar for SEGADevTech segadevtech
3
890
Amazon Q CLI開発で学んだAIコーディングツールの使い方
Avatar for matsukada licux
3
180
兎に角、コードレビュー
Avatar for mitohato14 mitohato14
0
130

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
462
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.4k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k

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