Save 37% off PRO during our Black Friday Sale! »

Design 101: Tips & Tricks

5f0da09fb57b86f885f6869c1c5e155d?s=47 Aly Fluckey
November 04, 2015

Design 101: Tips & Tricks

5f0da09fb57b86f885f6869c1c5e155d?s=128

Aly Fluckey

November 04, 2015
Tweet

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!