Design 101: Tips & Tricks

Transcript

1. DESIGN 101 WITH ALY FLUCKEY

2. 1. PLAN AT LEAST A LITTLE BIT

3. INTENT

4. INTENT CONTENT

5. None

6. INTENT CONTENT HIERARCHY

7. SOME WAYS TO HELP ESTABLISH HIERARCHY > color & contrast

   > size > alignment > repetition > whitespace

8. SKETCH

9. 1. PLAN AT LEAST A LITTLE BIT 2. ITERATE A

   LOT

10. COLOR

11. the basics

12. primary red, blue and yellow

13. secondary green, purple and orange

14. tertiary basically all other colors

15. warm family

16. cool family

17. None

18. EMOTIONS

19. CHOOSING A COLOR SCHEME

20. TYPE

21. None
22. None
23. None
24. None

25. SO WHICH ONE DO I USE?

26. ONE SIZE DOES NOT FIT ALL BUT HERE ARE SOME

    SUGGESTIONS

27. > Don't use more than 3 fonts on a single

    page

28. > Don't switch fonts mid-sentence unless you have a very

    good reason

29. > Use sans-serif fonts for online body text and serif

    fonts for headlines and print

30. > Use monospace fonts for typewriter text and code blocks

    def like_this puts 'I am code' end

31. > Use script and fantasy fonts for accents

32. FINDING THE PERFECT FONT

33. FONT FAMILIES

34. FONT ICONS

35. RESPONSIVE DESIGN

36. @media screen and (max-width: 1280px) { .desktop-to-tablet-class { width: 75%;

    margin: auto; } } @media screen and (max-width: 768px) { .tablet-to-mobile-class { width: 85%; margin: auto; } } @media screen and (max-width: 320px) { .mobile-and-below-class { width: 100%; } }

37. USE RELATIVE UNITS

38. THE INSPECTOR YOUR BEST FRIEND

39. CSS ANIMATIONS

40. 1. PLAN AT LEAST A LITTLE BIT 2. ITERATE A

    LOT 3. PROFIT $$$$$$$$

41. THANK YOU!