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

Design for Developers

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
420
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
190
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
AI駆動開発勉強会 広島支部 第一回勉強会 AI駆動開発概要とワークショップ
Avatar for smz hyt hayatoshimiu
0
280
AI時代になぜ書くのか
Avatar for Mutz mutsumix
0
440
Import assertionsが消えた日～ECMAScriptの仕様はどう決まり、なぜ覆るのか～
Avatar for おおいし bicstone
2
190
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
Avatar for 開発室Graph studio_graph
3
970
PHPでバイナリをパースして理解するASN.1
Avatar for muno92 muno92
PRO
0
460
「なんか〇〇ライブラリで脆弱性あるみたいなんだけど。。。」から始める脆弱性対応 / First Steps in Vulnerability Response
Avatar for mackey0225 mackey0225
2
130
Spec-Driven Development with AI Agents (Workshop, May 2026)
Avatar for Anton Arhipov antonarhipov
4
410
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
1
270
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
380
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
360
権限チェックの一貫性を型で守る TypeScript による多層防御
Avatar for aster-mnch (kitagawa) mnch
3
290
ReactとSvelteのその先、Ripple-TS / Beyond React and Svelte: Ripple-TS
Avatar for TOMIKAWA Sotaro ssssota
2
460

Featured

See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
150
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
530
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
190
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
150
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.9k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
210
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
370
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.8k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
460

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