Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Design for Developers

Avatar for Kevin Dees Kevin Dees
November 03, 2016
Programming
190
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
140
Create Your Own Theme Page-Builder in Minutes
Avatar for Kevin Dees kevindees
0
2.4k
CSS Gird
Avatar for Kevin Dees kevindees
0
540
Forms make the web
Avatar for Kevin Dees kevindees
1
330
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
450
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
980
Busting The Loop Lies
Avatar for Kevin Dees kevindees
2
200
Pragmatic WordPress Workflow
Avatar for Kevin Dees kevindees
2
330
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
690

Other Decks in Programming

See All in Programming
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
5.3k
Androidだけじゃない、DroidKaigiで広がった私の技術スタック
Avatar for Akio Itaya akkeylab
0
110
Simple Storage Service(S3) is not simple
Avatar for Yura Iwatsuka iwatsukayura
0
120
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
490
Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
1.4k
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
Avatar for r-kagaya rkaga
6
1.5k
JPUG勉強会 OSSデータベースの内部構造を理解しよう(第２回)
Avatar for Atsushi Ogawa oga5
0
290
iOSDC Japan 2026 - Swiftで作って学ぼう！データベース自作入門
Avatar for kaseken (Kent Kaseda) kaseken
2
450
GitHubハンズオン講座 — 実務レベルのチーム開発のフローを身につけよう
Avatar for junhat6 junhat6
0
120
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
330
mrbgem 三角測量 開発
Avatar for ogom ogom
0
190
AI時代のコードレビューは人に向けるな、仕組みに向けろ
Avatar for meijin texmeijin
5
3.3k

Featured

See All Featured
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
550
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
433
67k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
720
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.8k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
730
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
250
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
560

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