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
530
Forms make the web
Avatar for Kevin Dees kevindees
1
320
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
430
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
190
Pragmatic WordPress Workflow
Avatar for Kevin Dees kevindees
2
320
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
690

Other Decks in Programming

See All in Programming
はてなアカウント基盤 State of the Union
Avatar for cockscomb cockscomb
1
890
例外の正しい扱い方 そのエラー try-catchして大丈夫？
Avatar for Watanabe Jin jinwatanabe
0
280
作って学ぶ、 JSX (TSX) ランタイムの基本
Avatar for syumai syumai
7
1.7k
ふつうのFeature Flag実践入門
Avatar for irof irof
8
4.2k
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
210
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.3k
Hunting Vulnerabilities in Symfony with LLMs
Avatar for Vincent Amstoutz vinceamstoutz
0
560
ローカルLLMでどこまでコードが書けるか -拡張版 /　How much code can be written on a local LLM Extended
Avatar for Naoki Kishida kishida
12
4.4k
Hatena Engineer Seminar #37「言語モデルの活用に関する研究」
Avatar for SlashNephy slashnephy
0
200
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
Avatar for Naoki Kishida kishida
2
150
1B+ /day規模のログを管理する技術
Avatar for Broadleaf Co., Ltd. broadleaf
0
120
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
400

Featured

See All Featured
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
710
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
640
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
340
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.9k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
850
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
470
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
250
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.2k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
750

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