Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design for Developers

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Kevin Dees Kevin Dees
November 03, 2016
Programming
1
180

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
120
Create Your Own Theme Page-Builder in Minutes
Avatar for Kevin Dees kevindees
0
2.2k
CSS Gird
Avatar for Kevin Dees kevindees
0
520
Forms make the web
Avatar for Kevin Dees kevindees
1
310
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
400
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
950
Busting The Loop Lies
Avatar for Kevin Dees kevindees
2
170
Pragmatic WordPress Workflow
Avatar for Kevin Dees kevindees
2
310
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
680

Other Decks in Programming

See All in Programming
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
640
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
680
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
SourceGeneratorのススメ
Avatar for tkym htkym
0
190
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
610
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6k
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
190
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.8k
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170

Featured

See All Featured
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
92
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
110
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
99
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
160
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
110
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
650
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
130
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
200
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M

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