Design 101

An introduction to design principles and how to apply them.

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/
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
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/
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
39. Putting it all together
43. Saul Bass
44. Saul Bass
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
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
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
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