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

Design for Developers

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Kevin Dees Kevin Dees
November 03, 2016
Programming
1
180

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
120
Create Your Own Theme Page-Builder in Minutes
Avatar for Kevin Dees kevindees
0
2.2k
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
400
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
950
Busting The Loop Lies
Avatar for Kevin Dees kevindees
2
170
Pragmatic WordPress Workflow
Avatar for Kevin Dees kevindees
2
310
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
680

Other Decks in Programming

See All in Programming
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
200
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
140
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
270
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
SourceGeneratorのススメ
Avatar for tkym htkym
0
190
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
550
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
600
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.3k
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
170
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
120
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
53
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
130
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
160
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
230k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
98

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