Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Visual Design Applied- Principles in Practice
- 1. @kevinmccartney hello@kevinmccartney.is Visual Design Applied Principles in Practice Kevin McCartney
- 6. @kevinmccartney hello@kevinmccartney.is I do other things too
- 11. @kevinmccartney hello@kevinmccartney.is “Simplicity, wit, and good typography.” Michael Beirut
- 12. @kevinmccartney hello@kevinmccartney.is “Styles come and go. Good design is a language, not a style.” Massimo Vignelli
- 13. @kevinmccartney hello@kevinmccartney.is “Design is not just what it looks like and feels like. Design is how it works.” Steve Jobs
- 14. @kevinmccartney hello@kevinmccartney.is “Great design is a multi- layered relationship between human life and its environment.” Naoto Fukasawa
- 15. @kevinmccartney hello@kevinmccartney.is “Design is the rendering of intent” Jared Spool
- 18. @kevinmccartney hello@kevinmccartney.is Design is not visual design
- 19. @kevinmccartney hello@kevinmccartney.is Why talk about design?
- 20. @kevinmccartney hello@kevinmccartney.is • Understanding • Empathy • Problem-solving
- 29. @kevinmccartney hello@kevinmccartney.is • Contrast • Scale • Dominance • Hierarchy • Balance • Unity
- 31. @kevinmccartney hello@kevinmccartney.is • Juxtaposition of opposing elements. • Color, value, size, direction, etc. • Contrast should be used to direct attention.
- 32. @kevinmccartney hello@kevinmccartney.is • Juxtaposition of opposing elements. • Color, value, size, direction, etc. • Contrast should be used to direct attention.
- 34. @kevinmccartney hello@kevinmccartney.is • Relative size of elements. • Can be used to draw attention. • Exaggerated differences in scale adds interest & drama.
- 35. @kevinmccartney hello@kevinmccartney.is • Relative size of elements. • Can be used to draw attention. • Exaggerated differences in scale adds interest & drama.
- 37. @kevinmccartney hello@kevinmccartney.is • Focus on a single element. • This can be achieved through color, size, position, etc. • Dominance must not be at the expense of balance & unity.
- 38. @kevinmccartney hello@kevinmccartney.is • Focus on a single element. • This can be achieved through color, size, position, etc. • Dominance must not be at the expense of balance & unity.
- 40. @kevinmccartney hello@kevinmccartney.is • Differences in importance of all elements. • Good hierarchy leads the user through the experience. • Can be established through size, color, position, etc.
- 41. @kevinmccartney hello@kevinmccartney.is • Differences in importance of all elements. • Good hierarchy leads the user through the experience. • Can be established through size, color, position, etc.
- 43. @kevinmccartney hello@kevinmccartney.is • A state of equilibrium & tension. • Visual weight. • Symmetry & asymmetry.
- 44. @kevinmccartney hello@kevinmccartney.is • A state of equilibrium & tension. • Visual weight. • Symmetry & asymmetry.
- 46. @kevinmccartney hello@kevinmccartney.is • Harmony between all elements. • Visual & conceptual unity. • Unity must be balanced with variety.
- 47. @kevinmccartney hello@kevinmccartney.is • Harmony between all elements. • Visual & conceptual unity. • Unity must be balanced with variety.
- 48. @kevinmccartney hello@kevinmccartney.is How do I apply this knowledge?
- 49. @kevinmccartney hello@kevinmccartney.is Don’t get discouraged
- 51. @kevinmccartney hello@kevinmccartney.is Make observation a practice
Editor's Notes
- UX consultant at Cardinal Solutions Group. We wear a lot of hats on our team, so we do- Design research (or user research) Visual design Interaction design Building interfaces
- Co-organizer IxDA Cbus We focus on design & UX (including interaction design) IxDA is an international group with over 100,000 member across 200 groups We have 3 monthly events This is a truly wonderful group of people that I am really lucky to be a part of
- Co-organize here at Westerville Web We are a young group, but I am really excited about the community we are building here Westerville Web is YOUR group. The organizers want to know what you’re passionate about & understand your vision to help guide us. So basically what I’m trying to say is we love to chat & we love feedback. If you would like to present here, come talk to me!
- Advise start-ups, do some freelance work, & do speaking events around town I’m also starting a weekly blog, so look out for that Hiking or just being outside in general I’m trying read more Drinking on patios is cool But really the most important thing to know about me…
- I really want to have a cat. I’m going to name my cat Rory after Rory Gilmore.
- Rory was a great kid. She was smart, compassionate & talented. She didn’t deserve to get her heart broken by an endless parade of FUCKBOYS & end up a total hot mess. So I’m going to be a great dad to my cat & make sure she grows up happy. Because really I’m just trying to undo the emotional trauma that Amy Sherman-Palladino inflicted on me over the course of 7 seasons & a mediocre Netflix series. So now that you have a very personal window into my life, let’s talk about design!
- Before we get started, I want to quickly define our terms. What is design?
- Design is not “making things look good”, copying awwwwards.com or Dribble, & “punch it up” is not a valid design direction. I could give you my definition of what design is, but I think there are some people who have said it way better than I can.
- Michael Beirut Partner at Pentagram (one of the oldest agencies & currently the world’s largest independent design consultancy) Done work for Princeton, Yale, NYU, Disney, & recently the Hillary Clinton campaign. Ohio Native- He’s from Cleveland
- Massimo Vignelli Truly one of the founding fathers of modern design One of the most awarded designers, holding multiple honorary doctorates Designed the NY subway map Passed away in 2014 His dedication to the craft shaped a generation.
- Steve Jobs I don’t have to tell you who he is Revolutionized home computing through his work at Apple He did this through thoughtful user-centered design before it was a buzzword
- Naoto Fukasawa Japanese designer who headed the IDEO office in Japan in the 80s Received over 50 design awards Co-directs Japan’s first design museum Named by Bloomberg Businessweek as one of the world's most influential designers
- Jared Spool Has worked in the field of usability since 1978, long before usability was a thing Founding principle at UIE, the largest usability research organization of its kind in the world Essentially one of the progenitors of modern UX
- Design thinking is a framework or series of heuristics that help outline how designers think. Gather inspiration: Inspire new thinking by discovering what people really need. Generate ideas: Push past obvious solutions to get to breakthrough ideas Make ideas tangible: Build rough prototypes to learn how to make ideas better Share the story: Craft a human story to inspire others toward action.
- I’m not being tautological here. The point is that visual design is a part of the larger entity & practice of design.
- So let’s establish why this topic is valuable to you. You have invested your time, what’s your return on this? Why is understanding design valuable?
- Through design thinking or whatever design framework or heuristic you use, I think there are few main positive outcomes that you experience. Understanding: Who are they & what do they want? How does this person operate? What are their struggles & pain points? Empathy. This understanding builds empathy. Empathy allows you to step into someone else’s shoes. You & I becomes we. Problem-solving: This empathy in service of a new modality of problem solving. You might find problems you didn’t even know you needed to solve.
- These benefits are realized from You to your organization to the users of the products you build It’s it slowly expands out in concentric circles.
- These benefits are realized from You to your organization to the users of the products you build It’s it slowly expands out in concentric circles.
- These benefits are realized from You to your organization to the users of the products you build It’s it slowly expands out in concentric circles.
- These benefits are realized from You to your organization to the users of the products you build It’s it slowly expands out in concentric circles.
- Just like George Costanza
- Contrast should be used to direct attention to the focal points of your design.
- Example: https://www.freshbooks.com/ Value: The lightness or darkness of a color The blues & greens stand out against the white space as well as the black & gray text. Notice how the lighter buttons stand out against the darker value blue, black, & gray text. You can see this when you squint your eyes. In the hero section, the “Small business accounting…” copy is larger than the description text. The CTA button is also larger than the description copy. As we scroll down the page, we see sections of vertical & horizontal directional contrast.
- The differences in relative size establishes relationships between the elements. Use this captured attention to emphasize focal points.
- Example: https://www.apple.com/ Notice the typography. Every section has the name of the product with short copy communicating something about the product. The images are much larger than the titles & copy. Apple is a company that is very attuned to visual & industrial design, so they want you to visually experience their products. The differences in scale between the product titles & copy & the image feels very dramatic & certainly draws attention.
- Example: https://www.airbnb.com/ The Search bar CTA is obviously the element that Airbnb’s designers want us to focus on This element is at the top of the page & much larger than all other page elements. As we scroll down the page, we notice that this element is the only element besides the header that uses the Airbnb brand red.
- Scale establishes relationships between two elements Dominance establishes relationships between one element & the rest of the elements in the design. Hierarchy is concerned with the differences of importance between all elements in the design.
- Example: https://www.everlane.com/ Notice the progression of the page. This hierarchy is expressed through size. Establishes the intent of the creators of the page- they obviously have elements (or in this case product categories or campaigns) they want you to pay attention to first, then a set of content they deem slightly less important, & finally a set of elements they want you to see, but not as much as the other two.
- Balance is a state of equilibrium & tension. Equilibrium: a state in which opposing forces or influences are balanced. Tension: a balance maintained in an artistic work between opposing forces or elements OR the longitudinal deformation of an elastic body that results in its elongation. You can think about it as two or more elements using their visual weight to pull against each other. Visual weight can be achieved by scale, value, position, etc. One good way to achieve balance is to determine the focal point & work around it.
- Example https://evernote.com/ Both symmetrical & asymmetrical exists on this page Asymmetry- Images are slightly larger than the text Their visual weight balances out Symmetry- the sections toward the bottom of the page which can be divided equally across an axis running down the center
- Unity can be achieved by grouping elements together visually or conceptually Visual unity methods Similarity: ability to seem repeatable with other elements. Continuation: the sense of having a line or pattern extend. Rhythm: is achieved when recurring position, size, color, and use of a graphic element has a focal point interruption. Repetition: elements being copied or mimicked numerous times. Using a grid is a good way to achieve visual unity A good way to think about conceptual unity is “Why is this element here? Does it align with the goals of my user?”
- Example https://www.nytimes.com/2018/02/05/business/stocks-equities-dow-markets.html The typography, color palette, images are all similar (sans-serif type, b&w color palette, images) Strong sense of continuation with the lines & pattern of the column of type. Rhythm: Columns are broken up by images & CTAs Repetition: Go to another page & notice the repeated elements & patterns.