$30 off During Our Annual Pro Sale. View Details »

Designing with Data

Designing with Data

Techniques for bringing clarity to designing with data for digital products.

Todd Zaki Warfel

May 18, 2012

More Decks by Todd Zaki Warfel

Other Decks in Design


  1. DESIGNING WITH DATA @zakiwarfel / inflection / #dwd

  2. Info graphics have been around for ages.

  3. http://bit.ly/JNHpiO Minard’s Napoleon’s March

  4. http://bit.ly/JPlMhe John Snow’s Cholera Outbreak Map

  5. http://bit.ly/L48JXA

  6. 3 guiding principles 6 characteristics

  7. Everything is visual noise. I

  8. PRIORITY & SCALE Understand which data is most important.

  9. None
  10. None
  11. None
  12. Emphasize everything and emphasize nothing. II

  13. Cognitive Overload

  14. None
  15. COLOR 1

  16. None
  17. MD5

  18. None
  19. designing with data = ff03d475c78d326f04478 2464fbe9353

  20. designing with data = ff03d475c78d326f04478 2464fbe9353

  21. designing with data = ff03d475c78d326f04478 2464fbe9353

  22. designing with data = ff03d475c78d326f04478 2464fbe9353

  23. ” Activities and Interest Knowledge Life Cycle Influencers TECHNOLOGY DOMAIN

    EXPERIENCE SALES SETUP DESIGN LAUNCH POST AUTOMATED PROCESSES SINGLE PREVIEW MODE INTUITIVE EFFECTIVE COMMUNICATION NAMING CONVENTION PRIORITIZING AND SORTING CLIENT USABLE Our job is to incorporate all the pieces that make the ad look like and function like an ad—usually on a tight deadline. Margaret just settled into her o ce and opened up an email detailing the nature of the campaign their team is to work on next. It’s a fairly substantial document containing a number of essential items, for instance: demo links for previewing creative campaigns, le paths to the relevant campaign assets, and instructions on how to assemble the creative to the client’s standards. She’ll work for the next week in a variety of tools including Flash, AdBuilder, and O erBuilder to assemble the creative according to the client’s vision. Keeping track of her progress is simple because she’s consistently updating a task that’s assigned to her. By assigning the creatives to placements and previewing them, Margaret is able to perform a bit of internal quality assurance. A er reviewing the campaign, Margaret is cleared to add in tracking code. For this campaign, she’ll need to divide the placements into speci c click regions to record users’ interactions with certain areas of the ads. Once she’s noti ed the team of the status of the creatives, she’ll be on to the next creative cycle. THE ARTISAN Margaret Current Pain Points: Has to spend two hours, per campaign, dealing with massive emails; has to add sequencing to campaigns, but this o en is inaccurate and fails; is required to create previews for the client, but has no e cient way of doing so; moving assets from the server to local machine is a multi-hour download. MANAGING BUSINESS RULES MANAGING TASKS LAUNCHING CAMPAIGNS COMMUNICATING WITH CLIENT ESTABLISHING CATEGORIES CREATING CLIENT DEMOS PREVIEWING ADS CAMPAIGN
  24. 0to255.com

  25. CONTRAST 2

  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. SI ZE 3

  34. http://bit.ly/Jlac05

  35. WEIGHT 4

  36. None
  37. SHAPE 5

  38. None
  39. None
  40. None

  42. http://bit.ly/ydFYsu

  43. Be selective and intentional. III

  44. http://bit.ly/JbOtaB

  45. DWD for small screens really forces you to prioritize.

  46. None
  47. Bonus material...

  48. ds3.js

  49. Chartwell Web Font

  50. Visual News http://bit.ly/A7z4Qi

  51. http://