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
170

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.1k
CSS Gird
Avatar for Kevin Dees kevindees
0
510
Forms make the web
Avatar for Kevin Dees kevindees
1
300
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
390
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
920
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
Cell-Based Architecture
Avatar for Luram Archanjo larchanjo
0
150
從冷知識到漏洞，你不懂的 Web，駭客懂 - Huli @ WebConf Taiwan 2025
Avatar for Huli aszx87410
2
3.1k
SwiftUIで本格音ゲー実装してみた
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
510
JETLS.jl ─ A New Language Server for Julia
Avatar for abap34 abap34
2
460
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
400
Navigation 3: 적응형 UI를 위한 앱 탐색
Avatar for Sungyong An fornewid
1
500
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
4
1k
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
Avatar for HideyukiKitao panda728
PRO
39
26k
GoLab2025 Recap
Avatar for kuro kuro_kurorrr
0
780
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
7
2.4k
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
690
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
150

Featured

See All Featured
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.2k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
29
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Designing for Performance
Avatar for Lara Hogan lara
610
70k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
32
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
74
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
32
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k

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