Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visualizations
•Transferir como PPTX, PDF•
1 gostou•534 visualizações
Given at as part of the IDMG Summer School at UC Berkeley 6/20/2014
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (16)
Semelhante a Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visualizations
Semelhante a Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visualizations (20)
Mais de Allison Bloodworth
Mais de Allison Bloodworth (8)
Último
Último (20)
Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visualizations
- 1. MAKE YOUR DATA COME ALIVE Visual Design's Role in Creating Compelling Visualizations Hulda Nelson, Lead Designer Laurie Frasier, Designer, Public Affairs Allison Bloodworth, Senior User Experience Designer
- 2. VISUAL DESIGN IS 1% GIFT. 99% LEARNABLE SKILL.
- 4. 4 Activity prep - find some data! http://budget.berkeley.edu/projects/calplanning http://calanswers.berkeley.edu/ http://www.berkeley.edu/about/fact.shtml
- 6. 1 Use a grid
- 7. 711/15/13 | Lorem Ipsum
- 8. 811/15/13 | Lorem Ipsum
- 10. 2 Allow for breathing room
- 13. 1311/15/13 | Lorem Ipsum
- 14. 1411/15/13 | Lorem Ipsum
- 16. 1611/15/13 | Lorem Ipsum
- 17. 1711/15/13 | Lorem Ipsum
- 19. 1911/15/13 | Lorem Ipsum
- 21. 2111/15/13 | Lorem Ipsum
- 23. 2311/15/13 | Lorem Ipsum
- 24. 2411/15/13 | Lorem Ipsum
- 25. 2511/15/13 | Lorem Ipsum kuler.adobe.com
- 26. 2611/15/13 | Lorem Ipsum colourlovers.com
- 27. 2711/15/13 | Lorem Ipsum
- 28. 2811/15/13 | Lorem Ipsum
- 30. 3011/15/13 | Lorem Ipsum
- 31. 3111/15/13 | Lorem Ipsum
- 32. 3211/15/13 | Lorem Ipsum
- 33. 3311/15/13 | Lorem Ipsum
- 35. 3511/15/13 | Lorem Ipsum
- 36. 3611/15/13 | Lorem Ipsum
- 37. 3711/15/13 | Lorem Ipsum
- 42. 42 7 Simplify, Simplify Page design, layout, and publishing Brochures, ads, posters Multi-page documents Complex typography Complex layouts Display packages with multiple charts and photos Tables Image editing and compositing Photo illustration Retouching Imagesfor web Mock-upsfor web Vector graphics and illustration Scale-able graphics Chartsand graphics Logos Large-scale designs (billboards, etc.) Maps Illustrator features abuilt-in set of chart tools 0 1 2 3 4 5 6 7 8 0 5 10 15 20 0 1 2 3 4 5 6 0 2 4 6 8 10 1 2 3 4 5 6 0 3 6 9 12 15 2 4 6 8 10 0 2 4 6 8 10 1 2 3 4 5 6
- 45. 4511/15/13 | Lorem Ipsum 1999 2001 2002 2006
- 46. 4611/15/13 | Lorem Ipsum 2007 2011 2014
- 47. 9 Look at good design
- 49. INFOGRAPHIC INSPIRATION Carl De Torres Edward Tufte Nigel Holmes TYPE INSPIRATION Jessica Hische Emigre Joshua Darden (Freight font designer) SOME GRAPHIC DESIGN LEGENDS Massimo Vignelli Tibor Kalman Paula Scher Milton Glaser
- 52. 5211/15/13 | Lorem Ipsum 1. Use a grid (line things up) 2. Allow for breathing room 3. Choose fonts carefully 4. Use colors tastefully 5. Pay attention to hierarchy 6. Use uncomplicated photography 7. Use Adobe Creative Suite 8. Simplify, Simplify 9. Look at good design 10.Practice, practice, practice! Visual Design Top 10
- 53. 10 Try something new. CREATING AWESOME INFOGRAPHICS!
- 58. 58
- 59. 59
- 61. 1 Gather & review data
- 63. 2 Find the narrative & hook
- 65. 65 • From
- 66. 4 Get creative about your info viz options
- 68. 68
- 69. 6911/15/13 | Lorem Ipsum Which would you choose & why?
- 71. 71
- 72. 6 Determine your visual design approach
- 73. 73
- 76. 76 Infographic Creation Resources • The Do’s and Don’ts of Infographic Design – http://tinyurl.com/3p5qrje • Infographic Inspiration – http://www.informationisbeautiful.net/ – http://www.pinterest.com/mashable/infographics/ • 10 Free Tools for Creating Infographics – http://tinyurl.com/q3zujke • 30 Infographic Templates & Vector Kits – http://tinyurl.com/b2gchgy • Photoshop/Adobe Illustrator Infographic Templates – http://infographics.li/ • Powerpoint Infographic Templates – http://tinyurl.com/lyvfgtj
- 77. Let’s try it! 1. Form groups of 2 (or 3) 2. Choose a dataset 3. Find a narrative & hook (10 mins) 4. Discuss your narrative & hook with your partner (5 mins) 5. Sketching! Create 6 different visual representations of 1-3 different pieces of data. (10 mins) 6. Testing & discussion! (10 mins) Does your partner understand what you’re trying to convey? Which representation of the data works the best and why? What visual design and gestalt principles did you use? Did they help convey your message?
- 78. 7811/15/13 | Lorem Ipsum 1. Use a grid (line things up) 2. Allow for breathing room 3. Choose fonts carefully 4. Use colors tastefully 5. Pay attention to hierarchy 6. Use uncomplicated photography 7. Use Adobe Creative Suite 8. Simplify, Simplify 9. Look at good design 10. Practice, practice, practice! Visual Design Top 10 Create an infographic! 1. Gather & review data 2. Find the narrative & hook 3. Determine the information hierarchy 4. Get creative about your info viz options 5. Create a wireframe 6. Determine your visual design approach 7. Test & iterate 8. Publish & share
- 79. 7911/15/13 | Lorem Ipsum
- 80. 8011/15/13 | Lorem Ipsum
- 81. 81 Infographic Examples • http://ceblog.s3.amazonaws.com/wp-content/uploads/2013/04/Infographic- of-infographics.jpg - too much stuff • http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/ 2013/10/megabeer.jpg - dense info • web http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/ 2013/10/productive.jpg - multiple narratives • The Existential Calendar on her blog http://kellianderson.com/blog/2013/10/the-existential-calculator/. - animated • http://neomam.com/interactive/13reasons/ Parallax scrolling dynamic • https://www.behance.net/gallery/Imaginary-Factory/8067551- detailed • http://www.flickr.com/photos/bayerberg/6829135095 - funny • http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/ 2013/02/kobebryant.jpg -
Notas do Editor
- It feels like we’re all suffering from information overload. The good news is that there may be a easy cure–using our eyes more. By visualizing information, we can see the patterns and connections. If we can design information so it reveals the story contained within, we can focus on what’s really important. And visual design can look really cool.
- Breathing room be in the form of an image or color.
- Breathing room be in the form of an image or color.
- Breathing room be in the form of an image or color.
- Legibility, readability tone, Sans-serif is usually used in infographics, but depending on the tone of your infographic you may decide to use other fonts.
- font websites freight, open sans http://www.webpagesthatsuck.com/
- Pick a color palette of no more than 3-4 colors, but you can use different shades or tints
- Pay attention to CONTRAST…. When using type, we need to make sure that we are using darker colors…. Or your message will get lost.
- Vibrating colors next to each other has your eye jumping around. To play it safe, we recommend sticking to 2-3 colors
- Good example of 2-3 colors for comparison
- Pick a palette
- Use Kuler
- COLOURlovers: http://www.colourlovers.com/
- Of information
- Try to stay away from busy images. Befriend an image search tool.
- font websites freight, open sans http://www.webpagesthatsuck.com/
- Try to stay away from busy images. Befriend an image search tool.
- SIMPLICITY is very difficult to achieve! Easy to say but hard to do. Let’s look at the evolution of the google home page. In a simple design, it took google 15 years to truly create a simple homepage
- SIMPLICITY is very difficult to achieve! Easy to say but hard to do. Let’s look at the evolution of the google home page.
- Most people think of Apple when they think of good design. Simple images. Good fonts. White space.
- Breathing room be in the form of an image or color.
- Try a new design approach. Try another program besides PPT and Word, e.g. Adobe Creative Suite / Keynote. http://software.berkeley.edu/adobe - you can download CS6!
- “data/info visualization,” which implies that sets of data or information will be displayed in a unique way that can be seen, rather than read.”
- These attributes are what immediately catch our eye when we look at a visualization. They can be perceived in less than 10 milliseconds, even before we make a conscious effort to notice them.
- If preattentive attributes are the alphabets of visual language, analytical patterns are the words we form using them. We immediately identify the preattentive attributes in a visualization. We then combine the preattentive attributes to seek out analytical patterns in the visual. Here are the basic analytical patterns that we identify when looking at a visual:
- Gestalt principles describe how our mind organizes individual elements into groups. We can use these principles to highlight patterns that are important, and downplay other patterns. The image below illustrates the principles of Gestalt which are relevant to visualization. Proximity: We see three rows of dots instead of four columns of dots because they are closer horizontally than vertically. Similarity: We see similar looking objects as part of the same group. Enclosure: We group the first four and and last four dots as two rows instead of eight dots. Closure: We automatically close the square and circle instead of seeing three disconnected paths. Continuity: We see one continuous path instead of three arbitrary ones. Connection: We group the connected dots as belonging to the same group. Symmetry: We see three pairs of symmetrical brackets rather than six individual brackets. Figure & ground: We either notice the two faces, or the vase. Whichever we notice becomes the figure, and the other the ground
- Make the information digestible easier to understand easier to remember Grab attention! Share
- The full picture of a story is usually found scattered through multiple materials, not in isolated charts alone.
- Infographics all start with a unique intent. It might be clarifying a complex set of data, explaining a process, highlighting a trend, or supporting some kind of argument, so keep this in mind as you review your data.
- Revisit your goals, your audience and the story you want to tell. However, the story you want to tell may not be the story you find, so you need to be flexible. BORING DATA -> GREAT NARRATIVE: What starts as boring data will become a boring infographic unless a great story can be found. Finding a great narrative is the first hurdle. Now that the data is familiar, does it seem possible to tell this story with the information at hand? Review your data closely to determine what (true) story you want to tell. If your story isn’t true, it’s propaganda! If the data doesn’t tell the story your client wants to tell, you may have an awkward discussion ahead of you. CONCLUSION CAUTION: Be careful about the conclusions you make. The truth in information takes experience to uncover. Data has a way of winning a debate, whether an argument is true or not. For example, drivers who own red cars are twice as likely to get into accidents than drivers who own blue cars. This truth may (incorrectly) imply that car somehow causes driving accidents. But the true story is found in a hidden connection, known as the confounding variable. Aggressive personality types are shown to prefer the color red. This aggressive behavior, not car color, is the undisclosed reason that accident rates are affected. PRIMARY MESSAGE: Every good infographic has a hook or primary take-away that makes the viewer say “A-ha!”
- HERO THAT MAKES YOUR JAW DROP HELPS ORGANIZE HIERARCHY: In almost any piece of research, there is a “hero” that leads the story. This piece of data will make your jaw drop. Once you find it, it becomes a way to organize the project and solidifies the hierarchical structure of the infographic. Supporting elements are then arranged to tell the rest of the story. This becomes a kind of “mood board of research points.” At this stage, the picture of a final product will begin to appear. STORY WITH BEGINNING, MIDDLE & CONCLUSION: All good stories have a beginning, middle and end. Infographics deserve the same treatment. At the beginning of the infographic, introduce the problem or thesis. From there, back it up with data. Finally, end the infographic with a conclusion.
- There are endless ways to represent information. The best approach might be with traditional charts and graphs (bar, line, pie charts). It might require a diagram or flowchart to explain a process. A map might be the best way to tell the story. Or perhaps simply showcasing the numbers is best. If the budget is available and the data warrants it, interactivity might make sense and opens a world of possibilities for data visualization. Whatever the case, this decision is guided by the data, which will lend itself to one or a combination of these formats.
- There are two overarching visual approaches to determining the look and feel of an infographic. In one camp, there are those who prefer to make the raw data beautiful (David McCandless, Nicholas Felton, and others subscribe to this view). These often take the form of charts and graphs, made visually exciting by their execution.
- The use of color, typography, and structure make the piece engaging, like an abstract work of art. Those in the second camp (Peter Orntoft, Scott Stowell), prefer to use illustration or metaphor. Here, the data is disguised, delivered to its audience in a visual narrative often bearing little resemblance to a chart or graph.
- Color palette, fonts, visual approach (charts & graphs or illustrations & metaphor or combine, e.g. charts and graphs surrounded by more illustrative elements, or a pure visual overlaid with traditional representations of data. ) COLOR - Keep the color palette cohesive & calming Dark colors and neons don’t translate well 3 color pallette, one background and two others, use shades of those colors TYPOGRAPHY Most infographics use sans serif fonts focus on title & headings title is a great place to use an eye-catching font that captures the mood SIZE doesn’t have to be the size of a paper - parallax scrolling - animation For instance, dominant dark colors and neons typically do not translate well on infographics; neon on black can be hard to read, and if there is a lot of data, taking it all in will be a challenge. Also, avoid white as a background whenever possible. Infographics are often shared on multiple websites and blogs, most of which have white backgrounds. If your infographic’s background is also white, then deciphering where it begins and ends will be difficult. A THREE-COLOR PALETTE IS EASY ON THE EYES With all of the data that goes into an infographic, make sure that the reader’s eye easily flows down the page; the wrong color palette can be a big barrier to this. Choose a palette that doesn’t attack the senses. And consider doing this before you start designing, because it will help you determine how to visualize the various elements. If picking a color palette is hard for you, stick to the rule of three. Choose three primary colors. Of the three, one should be the background color (usually the lightest of the three), and the other two should break up the sections. If you need to add other colors, use shades of the three main colors. This will keep the palette cohesive and calming, rather than jarring. All that being said, typography does have its uses, which should not be ignored when creating an infographic. Most of the time, you will want to focus your creative typographical energies on titles and headings. The title of the infographic is a perfect opportunity to use a fun and eye-catching font and to give it a treatment that fits the theme or topic. Just make sure the title isn’t so distracting that it takes away from the reason we are looking at the infographic in the first place. The truth of the matter is that some infographic topics are boring, but the right title design can engage people enough to scroll through. Similarly, headings help to break up an infographic and make the data easier to take in, giving you another chance to let your font-nerd flag fly.
- Test with your target audience, you colleagues, your clients. Do they understand your visualizations? Is the hook easy to find and understand?
- PINTEREST, TWITTER, FACEBOOK, YOUR BLOG OR WEBSITE! Aside from being shared, they are often linked to as well when republished by blogs and other websites. Whether the link is to your homepage as the infographic source or directly to the page on your website where you originally published the infographic, these links can help boost the authority of your website when it comes to search engines and rankings.
- https://calanswers-bi.berkeley.edu:9804/analytics/saw.dll?Dashboard