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
460
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
390
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
880
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
20251016_Rails News ～Rails 8.1の足音を聴く～
Avatar for Masato Mori morimorihoge
3
900
Node-REDのノードの開発・活用事例とコミュニティとの関わり(Node-RED Con Nagoya 2025)
Avatar for 404background 404background
0
110
ビルドプロセスをデバッグしよう！
Avatar for Yuta Tomiyama yt8492
0
160
Temporal Knowledge Graphで作る！ 時間変化するナレッジを扱うAI Agentの世界
Avatar for po3rin po3rin
5
1.1k
Researchlyの開発で参考にしたデザイン
Avatar for arakawa adsholoko
0
100
社会人になっても趣味開発を続けたい！ / traPavilion
Avatar for mazrean mazrean
1
120
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
Avatar for uMa uma31
0
480
Inside of Swift Export
Avatar for giginet giginet
PRO
1
250
AIのバカさ加減に怒る前にやっておくこと
Avatar for k2moons blueeventhorizon
0
130
釣り地図SNSにおける有料機能の実装
Avatar for nokonoko1203 nokonoko1203
0
200
CSC305 Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
Avatar for mazrean mazrean
0
130

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k
It's Worth the Effort
Avatar for 3n 3n
187
28k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
161
23k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
650
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k

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