Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visualizations

338 views

Published on

Given at as part of the IDMG Summer School at UC Berkeley
6/20/2014

Published in: Design
  • Be the first to comment

  • Be the first to like this

Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visualizations

  1. 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. 2. VISUAL DESIGN IS 1% GIFT. 99% LEARNABLE SKILL.
  3. 3. 4 Activity prep - find some data! http://budget.berkeley.edu/projects/calplanning http://calanswers.berkeley.edu/ http://www.berkeley.edu/about/fact.shtml
  4. 4. VISUAL DESIGN TOP TEN
  5. 5. 1 Use a grid
  6. 6. 711/15/13 | Lorem Ipsum
  7. 7. 811/15/13 | Lorem Ipsum
  8. 8. 2 Allow for breathing room
  9. 9. 1311/15/13 | Lorem Ipsum
  10. 10. 1411/15/13 | Lorem Ipsum
  11. 11. 3 Choose fonts carefully
  12. 12. 1611/15/13 | Lorem Ipsum
  13. 13. 1711/15/13 | Lorem Ipsum
  14. 14. 1911/15/13 | Lorem Ipsum
  15. 15. 4 Use colors tastefully.
  16. 16. 2111/15/13 | Lorem Ipsum
  17. 17. 2311/15/13 | Lorem Ipsum
  18. 18. 2411/15/13 | Lorem Ipsum
  19. 19. 2511/15/13 | Lorem Ipsum kuler.adobe.com
  20. 20. 2611/15/13 | Lorem Ipsum colourlovers.com
  21. 21. 2711/15/13 | Lorem Ipsum
  22. 22. 2811/15/13 | Lorem Ipsum
  23. 23. 5 Pay attention to hierarchy.
  24. 24. 3011/15/13 | Lorem Ipsum
  25. 25. 3111/15/13 | Lorem Ipsum
  26. 26. 3211/15/13 | Lorem Ipsum
  27. 27. 3311/15/13 | Lorem Ipsum
  28. 28. 6 Use uncomplicated photography
  29. 29. 3511/15/13 | Lorem Ipsum
  30. 30. 3611/15/13 | Lorem Ipsum
  31. 31. 3711/15/13 | Lorem Ipsum
  32. 32. http://search.creativecommons.org/ gallery.berkeley.edu
  33. 33. 7 Use Adobe Suite
  34. 34. 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
  35. 35. 8 Simplify, simplify
  36. 36. 4511/15/13 | Lorem Ipsum 1999 2001 2002 2006
  37. 37. 4611/15/13 | Lorem Ipsum 2007 2011 2014
  38. 38. 9 Look at good design
  39. 39. 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
  40. 40. 10 Practice, practice, practice!
  41. 41. 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
  42. 42. 10 Try something new. CREATING AWESOME INFOGRAPHICS!
  43. 43. Info Visualization
  44. 44. 55 Preattentive attributes
  45. 45. 56 Analytical Patterns
  46. 46. 57 Gestalt Principles
  47. 47. 58
  48. 48. 59
  49. 49. Why Infographics?
  50. 50. 1 Gather & review data
  51. 51. 62 Data examples http://budget.berkeley.edu/projects/calplanning http://calanswers.berkeley.edu/ http://www.berkeley.edu/about/fact.shtml
  52. 52. 2 Find the narrative & hook
  53. 53. 3 Determine your information hierarchy
  54. 54. 65 • From
  55. 55. 4 Get creative about your info viz options
  56. 56. 67 The Feltron Annual Report: http://feltron.com/ar 12_02.html
  57. 57. 68
  58. 58. 6911/15/13 | Lorem Ipsum Which would you choose & why?
  59. 59. 5 Create a wireframe
  60. 60. 71
  61. 61. 6 Determine your visual design approach
  62. 62. 73
  63. 63. 7 Test & iterate!
  64. 64. 8 Publish & share
  65. 65. 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
  66. 66. 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?
  67. 67. 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
  68. 68. 7911/15/13 | Lorem Ipsum
  69. 69. 8011/15/13 | Lorem Ipsum
  70. 70. 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 -

×