$30 off During Our Annual Pro Sale. View Details »

Design for Developers

Kevin Dees
November 03, 2016

Design for Developers

Kevin Dees

November 03, 2016
Tweet

More Decks by Kevin Dees

Other Decks in Programming

Transcript

  1. Design for
    Devlopers

    View Slide

  2. Design = Solving
    Problems

    View Slide

  3. Users First

    View Slide

  4. Steal like an artist

    View Slide

  5. Patterns

    View Slide

  6. → Menu
    → Footer
    → Header
    → Dropdown
    → Login Forms

    View Slide

  7. Typography

    View Slide

  8. View Slide

  9. Large x-height for body
    copy

    View Slide

  10. Use good line height

    View Slide

  11. View Slide

  12. lines 45 to 75 characters

    View Slide

  13. Serif for body copy

    View Slide

  14. Classic typographic scale

    View Slide

  15. View Slide

  16. http://type-scale.com/

    View Slide

  17. Font Pairing

    View Slide

  18. http://fontpair.co/

    View Slide

  19. Ligatures

    View Slide

  20. View Slide

  21. Content is King

    View Slide

  22. View Slide

  23. View Slide

  24. Color

    View Slide

  25. View Slide

  26. → Primary
    → Secondary
    → Tertairy
    → Complementary
    → Triads

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. https://color.adobe.com

    View Slide

  33. View Slide

  34. Photography

    View Slide

  35. Looking Room

    View Slide

  36. View Slide

  37. View Slide

  38. Rule of Thirds

    View Slide

  39. View Slide

  40. High small, low tall

    View Slide

  41. Take advantage of
    shadows and lighting

    View Slide

  42. Interaction

    View Slide

  43. Click vs Hover

    View Slide

  44. For every action, there is
    an equal and opposite
    reaction

    View Slide

  45. Microinteraction

    View Slide

  46. Do one task well

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. Emotion

    View Slide

  51. Design for Humans

    View Slide

  52. Consider a persons
    relationships

    View Slide

  53. Personality

    View Slide

  54. Quick Tips

    View Slide

  55. Use a global light source

    View Slide

  56. Free Icons

    View Slide

  57. Wireframe Your Ideas

    View Slide

  58. Find inspiration

    View Slide

  59. Finally, go design
    something

    View Slide