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
110
Create Your Own Theme Page-Builder in Minutes
Avatar for Kevin Dees kevindees
0
2.1k
CSS Gird
Avatar for Kevin Dees kevindees
0
450
Forms make the web
Avatar for Kevin Dees kevindees
1
290
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
380
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
870
Busting The Loop Lies
Avatar for Kevin Dees kevindees
2
160
Pragmatic WordPress Workflow
Avatar for Kevin Dees kevindees
2
310
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
670

Other Decks in Programming

See All in Programming
CSC305 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
210
Devoxx BE - Local Development in the AI Era
Avatar for Kevin Dubois kdubois
0
120
XP, Testing and ninja testing ZOZ5
Avatar for seki at druby.org m_seki
3
580
The Flutter Journey of Building a Live Streaming App — With a Side of Performance Tuning
Avatar for Sugiy u503
1
110
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
Avatar for もっち mottyzzz
10
6.4k
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
Avatar for えいえい ei_ei_eiichi
0
420
CSC305 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240
なぜGoのジェネリクスはこの形なのか？ Featherweight Goが明かす設計の核心
Avatar for Ryotaro ryotaros
7
1.1k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
Avatar for Takeru Hayasaka takehaya
8
1.6k
明日から始めるリファクタリング
Avatar for ryounasso ryounasso
0
130
開発生産性を上げるための生成AI活用術
Avatar for starfish719 starfish719
3
370
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
Avatar for masato hommaru mbook
0
800

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
51k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
232
18k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
189
55k
Making Projects Easy
Avatar for Brett Harned brettharned
119
6.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
32
2.3k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

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