Design for Developers

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