Design 101: Tips & Tricks

Transcript

1. DESIGN 101 WITH ALY FLUCKEY
2. 1. PLAN AT LEAST A LITTLE BIT
3. INTENT
4. INTENT CONTENT
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
18. EMOTIONS
19. CHOOSING A COLOR SCHEME
20. TYPE
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!