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
990
Busting The Loop Lies
Avatar for Kevin Dees kevindees
2
210
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に “答え“を書かせるのを やめてみた
Avatar for akari ___akari11
0
120
見えないものを探る要求要件定義に必要な基本的思考 / invisible-requirement-thinking
Avatar for MinoDriven minodriven
15
8.6k
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
410
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
790
Kotlinize Is Not Just Converting to Kotlin
Avatar for Kazuki Chigita chigichan24
1
160
半永久的に提供し続けられるプライベートクラウドを目指して ― 利用者の認知負荷を抑えるAPI抽象化とハードウェア世代交代の基盤設計
Avatar for Tomofumi Kondo tomokon
0
510
APNsからLive Activityを開始する話
Avatar for Ryotaro Onoue yumnumm
0
170
Rでドレミ/Do-Re-Mi_with_R
Avatar for florets1 florets1
0
130
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
220
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
180
R8 の設定見直しでアプリサイズ削減
Avatar for ANDPAD inc andpad
0
220
AmebaブログはKMPから卒業します
Avatar for 伊藤光次郎 kmars0605
0
210

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
460
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
1k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
184
10k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
2.9k
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
320
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
HDC tutorial
Avatar for Michiel Stock michielstock
2
960
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
2
330

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