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
150

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
430
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
360
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
820
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
650

Other Decks in Programming

See All in Programming
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
Avatar for Mufrid Krilic mufrid
0
380
Devinで実践する！AIエージェントと協働する開発組織の作り方
Avatar for Masahiro Nishimi masahiro_nishimi
6
2.7k
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
Avatar for Mutsuha Asada momeemt
1
140
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
Avatar for mizdra mizdra
PRO
3
3k
Feature Flag 自動お掃除のための TypeScript プログラム変換
Avatar for azarashi azrsh
PRO
4
660
AI Coding Agent Enablement in TypeScript
Avatar for Yuku Kotani yukukotani
17
7.8k
#QiitaBash TDDでAIに設計イメージを伝える
Avatar for sigma ryosukedtomita
2
1.6k
Doma で目指す ORM 最適解
Avatar for Toshihiro Nakamura nakamura_to
1
170
イベントストーミングから始めるドメイン駆動設計
Avatar for おだかとしゆき jgeem
3
680
SODA - FACT BOOK
Avatar for SODA inc. sodainc
1
180
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
Avatar for tomohiko.kuzuba tomohiko9090
0
120
UPDATEがシステムを複雑にする？ イミュータブルデータモデルのすすめ
Avatar for a.shimomura shimomura
0
400

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
269
20k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
30
970
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
760
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.6k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
15
900
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.8k

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