Design Stuffs

Design lecture for DBC

Transcript

1. DESIGN STUFFS Aly Fluckey @wtfluckey
2. 1. Plan at least a little bit
3. CONTENT
4. keep it simple
5. why so superfluous?
6. establish hierarchy
7. Hierarchy is also about storytelling; it’s about our user’s journey through the website and the user flow we create — Rachel Shillcock
8. some ways to help establish hierarchy • color • contrast • size • alignment • repetition • whitespace
9. create a sitemap
10. set the tone
11. sketch
12. wireframes balsamiq.com
13. COLOR
14. the basics
15. primary red, blue and yellow, also known as base colors
16. secondary green, purple and orange, made when you mix 2 primary colors together
17. tertiary created when you mix 1 primary color and 1 secondary color
18. warm family
19. cool family
20. complementary colors
22. emotions and choosing a color scheme
23. tools
24. Kuler
25. Paletton
26. TYPE
29. serif fonts have the little feet (embellishments) more classic easier to read in print
30. sans-serif fonts don't have the feet more modern easier to read on web
31. so which one do I use?
32. one size does not fit all but there are some rules of thumb
33. 1. don't use more than 3 fonts on a single page 2. don't switch fonts mid-sentence without a very good reason 3. use sans serif fonts for online body text and serif fonts for headlines and print 4. Use monospace fonts for typewriter text and code blocks 5. Use script and fantasy fonts for accents more bad fonts
34. choosing fonts
35. font families pairings
36. resources • google fonts • typekit • typecast
37. size contrast and space
38. modular scale
39. common ratios 2:3 (perfect fifth) 3:4 (perfect fourth) 1:1.618 (golden section) 3:5 (major sixth) type-scale
40. trust your eyes
41. responsive type
42. IMAGERY
43. 1. Plan at least a little bit 2. Iterate a lot
44. frameworks
45. cheat sheet
46. @media screen and (max-width: 1280px) { .desktop-to-tablet-class { width: 75%; } } @media screen and (max-width: 768px) { .tablet-to-mobile-class { width: 85%; } } @media screen and (max-width: 320px) { .mobile-and-below-class { width: 100%; } }
47. use relative units
48. questions?
49. • design school for developers • balsamiq wireframes • characteristics of color and color schemes • kuler • paletton • google fonts • typekit • typecast
50. • free stock photos • font-family pairings • test type contrast • modular type-scale • twitter bootstrap • zurb foundation • responsive design gifs • responsive cheat sheet
51. THANK YOU!