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
1
140

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
98
Create Your Own Theme Page-Builder in Minutes
Avatar for Kevin Dees kevindees
0
2k
CSS Gird
Avatar for Kevin Dees kevindees
0
420
Forms make the web
Avatar for Kevin Dees kevindees
1
280
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
Avatar for Kevin Dees kevindees
1
350
TypeRocket 3.0 - Unleash WordPress and Be Amazing
Avatar for Kevin Dees kevindees
0
790
Busting The Loop Lies
Avatar for Kevin Dees kevindees
2
140
Pragmatic WordPress Workflow
Avatar for Kevin Dees kevindees
2
290
Pragmatic WordPress WorkFlow: Theming
Avatar for Kevin Dees kevindees
0
650

Other Decks in Programming

See All in Programming
fieldalignmentから見るGoの構造体
Avatar for kuro kuro_kurorrr
0
130
Носок на сок
Avatar for Bo0oM bo0om
0
1.1k
Serving TUIs over SSH with Go
Avatar for Carlos Alexandro Becker caarlos0
0
560
監視 やばい
Avatar for syossan27 syossan27
12
10k
20250426 GDGoC 合同新歓 - GDGoC のススメ
Avatar for Yoshimura Naoya getty708
0
110
On-the-fly Suggestions of Rewriting Method Deprecations
Avatar for Masato Ohba ohbarye
1
4.7k
파급효과: From AI to Android Development
Avatar for HyunWoo Lee l2hyunwoo
0
160
iOSアプリで測る！名古屋駅までの 方向と距離
Avatar for Ryu-nakayama ryunakayama
0
150
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
Avatar for MinoDriven minodriven
8
1.9k
ASP.NETアプリケーションのモダナイゼーションについて
Avatar for tomokusaba tomokusaba
0
240
Make Parsers Compatible Using Automata Learning
Avatar for TSUYUSATO Kitsune makenowjust
2
6.9k
Qiita Bash
Avatar for hiro mercury_dev0517
2
220

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
41
2.3k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
12k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
230
18k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
47
2.7k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
780
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.3k

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