Design 101

Design 101

An introduction to design principles and how to apply them.

3993dbd973f71e3f2a9dd155155accc4?s=128

Glynnis Ritchie

April 20, 2016
Tweet

Transcript

  1. An introduction to design principles and how to apply them.

    Design 101 Glynnis Ritchie
  2. Alignment

  3. Alignment creates order. Aligning elements allows them to create a

    visual connection with each other, and makes it easier for the eye to know where to look next.
  4. http://www.thinkingwithtype.com/contents/grid/

  5. http://www.thinkingwithtype.com/contents/grid/

  6. http://www.thinkingwithtype.com/contents/grid/

  7. None
  8. None
  9. http://www.thinkingwithtype.com/contents/grid/

  10. http://www.thinkingwithtype.com/contents/grid/

  11. Hierarchy

  12. “A typographic hierarchy expresses the organization of content, emphasizing some

    elements and subordinating others. A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to pick and choose among its offerings.” –Ellen Lupton, Thinking With Type
  13. None
  14. None
  15. http://www.thinkingwithtype.com/contents/text/#Line_Spacing/

  16. http://www.thinkingwithtype.com/contents/text/#Line_Spacing/

  17. Contrast

  18. Contrast can help direct attention, call out differences in meaning

    or information, or make a design more interesting.
  19. http://www.makeuseof.com/tag/5-basic-principles-graphic-design-take-granted-everyday/

  20. http://www.makeuseof.com/tag/5-basic-principles-graphic-design-take-granted-everyday/

  21. None
  22. “Combining typefaces is like making a salad. Start with a

    small number of elements representing different colors, tastes, and textures. Strive for contrast rather than harmony, looking for emphatic differences rather than mushy transitions. Give each ingredient a role to play: sweet tomatoes, crunchy cucumbers, and the pungent shock of an occasional anchovy.” –Ellen Lupton, Thinking With Type
  23. http://www.thinkingwithtype.com/contents/letter/#Mixing_Typefaces

  24. http://creativepro.com/dot-font-seven-principles-of-typographic-contrast/

  25. http://www.thedieline.com/blog/2015/12/29/qfat4hhynqitxyroo84h9l9jk1o8xo

  26. Repetition

  27. The principle of repetition simply means the reusing of the

    same or similar elements throughout your design. Repetition of elements in a design will bring a clear sense of unity, consistency, and cohesiveness. https://visscom.wordpress.com/2013/04/16/principle-of-repetition-pattern/
  28. http://maddisondesigns.com/2009/03/the-5-basic-principles-of-design/

  29. M. C. Escher Goose Tessellation

  30. Andy Warhol’s Marilyns

  31. http://www.edgee.net/the-principles-of-graphic-design-how-to-use-repetition-effectively/

  32. http://www.edgee.net/the-principles-of-graphic-design-how-to-use-repetition-effectively/

  33. Proximity

  34. Objects or shapes that are close to one another appear

    to form groups. Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close together. https://en.wikipedia.org/wiki/Principles_of_grouping
  35. The law of proximity states that humans perceive stimuli that

    are close to each other by grouping them and recognizing them as part of the same object. Meanwhile, stimuli that stand far from one another are parts of two or more different objects. https://visscom.wordpress.com/2013/04/16/principle-of-repetition-pattern/ –Gestalt Principle of Proximity
  36. None
  37. None
  38. None
  39. Putting it all together

  40. None
  41. None
  42. None
  43. Saul Bass

  44. Saul Bass

  45. None
  46. None
  47. None
  48. But how do I like… make stuff?

  49. • Raster images (don’t scale well) • Good for photo

    composites, including photographic elements • Harder to recycle work in the future because it does scale Common file outputs: .psd, .jpg, .png
  50. • Vector images (infinite scaling of mathematical points) • Great

    for illustration • Easy to recycle or resize work in the future because it scales Common file outputs: .ai, .svg, .pdf, .eps
  51. • Type-centric, perfect for multi-page documents • Easy to deal

    with “masters” or repeating elements and change lots of styles at once • Great for print projects Common file outputs: .indd, .pdf
  52. None
  53. • Keep your drafts/revisions as separate files • Keep all

    assets or images you’re incorporating into your design • Keep original design files (not just output) • Create a folder structure that helps you find old things (I start file names with dates) • Don’t be afraid to recycle work or elements • Be aware of software versions or file types depending on who you’re sharing with
  54. None
  55. None
  56. My process

  57. 1. Understand requirements, size, budget, materials, etc. 2. Look at

    similar work, find inspiration 3. Decide what’s been overdone (exercise taste) 4. Gather inspiration in one place (Pinterest or mood board) 5. Artfully steal (colors, themes, typeface combos, materials) 6. Sketch ideas, thumbnails, make notes 7. Refine sketches and ideas 8. Photograph sketches or find assets 9. Vectorize 10. Layout 11. Prototype for approval
  58. Good questions to ask yourself or others: • What info

    needs to be included? • What info is the most important? • Can I cut anything? • What mood do I want to set? • Color? Black and white? • Format/deliverable? • How much time to work on this? (build in time for revisions) • What other formats of this work might be needed?
  59. Inspiration

  60. Ouija invites: overdone

  61. Artful Stealing: Theirs

  62. Featuring Michael Cunningham, Michael Lewis, Dave Eggers, George Saunders &

    more Artful Stealing: Mine
  63. Artful Stealing: Theirs

  64. Artful Stealing: Mine

  65. A spirited evening of cocktails & ghost stories benefitting Big

    Class’s free writing programs for New Orleans youth ages 6-18. Big Class is a nonprofit organization dedicated to cultivating and supporting the voices of New Orleans’ writers ages 6-18 through creative collaborations with schools and communities. Learn more at bigclass.org. 532 Louisa St., New Orleans, LA 70117 504.308.1423 Jeremy Blum Mary Carlton Alvin David Jayeesha Dutta Natalie Girard Sarah Grainer José Guadarrama Kelly Harris-Deberry Nicole Hershey Jez Luckett Nora McConnell-Johnson Kurston Melton Heather Muntzer Sam Randolph Glynnis Ritchie Josie Scanlan Emma Schain Cherie Teamer Kathleen Whalen Emily Wilkerson Hosts & Ghostwriters Hosted by Wayne Amedee and Julie & Ted George Special thanks to our media sponsor The New Orleans Advocate and a A spirited evening of cocktails & ghost stories benefitting Big Class’s free writing programs for New Orleans youth ages 6-18. Big Class is a nonprofit organization dedicated to cultivating and supporting the voices of New Orleans’ writers ages 6-18 through creative collaborations with schools and communities. Learn more at bigclass.org. 532 Louisa St., New Orleans, LA 70117 504.308.1423 Jeremy Blum Mary Carlton Alvin David Jayeesha Dutta Natalie Girard Sarah Grainer José Guadarrama Kelly Harris-DeBerry Nicole Hershey Jez Luckett Nora McConnell-Johnson Kurston Melton Heather Muntzer Sam Randolph Glynnis Ritchie Josie Scanlan Emma Schain Cherie Teamer Kathleen Whalen Emily Wilkerson Hosts & Ghostwriters Hosted by Wayne Amedee and Julie & Ted George Special thanks to our media sponsor The New Orleans Advocate and a Revisions
  66. Illustrator Demo

  67. Resources

  68. bezier.method.ac Master the pen tool with this game

  69. Interaction of Color Josef Albers http://www.wired.com/2013/08/josef-albers-classic-interaction-of-color-gets-a-21st-century-upgrade/ iPad App

  70. None
  71. Thinking With Type Ellen Lupton http://www.thinkingwithtype.com/

  72. skillshare.com Video Tutorials and Classes Referral link: http://skl.sh/1S0kyTQ colourlovers.com Color

    palettes
  73. skillshare.com Video Tutorials and Classes Referral link: http://skl.sh/1S0kyTQ color.adobe.com Color

    picker and palettes
  74. creativemarket.com Pre-fab design assets

  75. skillshare.com Video Tutorials and Classes Referral link: http://skl.sh/1S0kyTQ

  76. lynda.com Video Tutorials and Classes

  77. youtube.com Video Tutorials

  78. dribbble.com Searchable design inspiration