Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Stuffs

5f0da09fb57b86f885f6869c1c5e155d?s=47 Aly Fluckey
March 05, 2015

Design Stuffs

Design lecture for DBC

5f0da09fb57b86f885f6869c1c5e155d?s=128

Aly Fluckey

March 05, 2015
Tweet

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

  21. None
  22. emotions and choosing a color scheme

  23. tools

  24. Kuler

  25. Paletton

  26. TYPE

  27. None
  28. None
  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!