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
320
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
410
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
970
Busting The Loop Lies
Avatar for Kevin Dees kevindees
2
180
Pragmatic WordPress Workflow
Avatar for Kevin Dees kevindees
2
320
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
680

Other Decks in Programming

See All in Programming
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
Avatar for 開発室Graph studio_graph
0
420
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
Avatar for hadashiA hadashia
2
590
Agentic Elixir
Avatar for Andrea Leopardi whatyouhide
0
390
Running Swift without an OS
Avatar for Kishikawa Katsumi kishikawakatsumi
0
850
Swift Concurrency Type System
Avatar for Yasuhiro Inami inamiy
1
540
ハーネスエンジニアリングにどう向き合うか 〜ルールファイルを超えて開発プロセスを設計する〜 / How to approach harness engineering
Avatar for r-kagaya rkaga
24
14k
2026_04_15_量子計算をパズルとして解く
Avatar for HideakiTakechi hideakitakechi
0
110
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
Avatar for JaiChangPark itsmedreamwalker
0
550
The Less-Told Story of Socket Timeouts
Avatar for Misaki Shioi(塩井美咲/しおい) coe401_
3
590
ドメインイベントでビジネスロジックを解きほぐす #phpcon_odawara
Avatar for Takuma Kajikawa kajitack
3
790
「Linuxサーバー構築標準教科書」を読んでみた #ツナギメオフライン.7
Avatar for akase244 akase244
0
1.4k
Claude CodeでETLジョブ実行テストを自動化してみた
Avatar for yoshiki kasama yoshikikasama
0
670

Featured

See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.2k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
270
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
900
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.1k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
810
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
510
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
280
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
440

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