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
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
330
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
440
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
320
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
690

Other Decks in Programming

See All in Programming
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
3.2k
PHP初心者セッション2026　〜生成AIでは見えない裏側を知る：今だからLAMPを通して仕組みを学ぶ〜
Avatar for Hideo Kashioka kashioka
0
720
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
170
なぜ関数型プログラミングで「型」と「証明」が語られるのか #fp_matsuri
Avatar for Takuma Kajikawa kajitack
3
1k
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
410
Android CLI
Avatar for Sungyong An fornewid
0
190
20260722_microCMSで考える、AI時代のコンテンツ運用設計
Avatar for Yoshihisa Kaino yosh1
0
140
今さら聞けない .NET CLI
Avatar for tkym htkym
0
140
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
3
250
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
Avatar for Ryo Tomidokoro hanhan1978
4
1.4k
ルールを書いて終わらせないハーネスエンジニアリング
Avatar for Yuji Yamaguchi yug1224
4
1.8k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
430

Featured

See All Featured
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
420
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
330
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.8k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
310
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
340
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k

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