Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing with Data

Designing with Data

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

Todd Zaki Warfel

May 18, 2012
Tweet

More Decks by Todd Zaki Warfel

Other Decks in Design

Transcript

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

    View Slide

  2. Info graphics
    have been around
    for ages.

    View Slide

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

    View Slide

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

    View Slide

  5. http://bit.ly/L48JXA

    View Slide

  6. 3 guiding principles
    6 characteristics

    View Slide

  7. Everything is
    visual noise.
    I

    View Slide

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

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. Emphasize
    everything and
    emphasize
    nothing.
    II

    View Slide

  13. Cognitive Overload

    View Slide

  14. View Slide

  15. COLOR
    1

    View Slide

  16. View Slide

  17. MD5

    View Slide

  18. View Slide

  19. designing with data
    =
    ff03d475c78d326f04478
    2464fbe9353

    View Slide

  20. designing with data
    =
    ff03d475c78d326f04478
    2464fbe9353

    View Slide

  21. designing with data
    =
    ff03d475c78d326f04478
    2464fbe9353

    View Slide

  22. designing with data
    =
    ff03d475c78d326f04478
    2464fbe9353

    View Slide


  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

    View Slide

  24. 0to255.com

    View Slide

  25. CONTRAST
    2

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. SI
    ZE
    3

    View Slide

  34. http://bit.ly/Jlac05

    View Slide

  35. WEIGHT
    4

    View Slide

  36. View Slide

  37. SHAPE
    5

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. ANIMATION
    6

    View Slide

  42. http://bit.ly/ydFYsu

    View Slide

  43. Be selective and
    intentional.
    III

    View Slide

  44. http://bit.ly/JbOtaB

    View Slide

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

    View Slide

  46. View Slide

  47. Bonus material...

    View Slide

  48. ds3.js

    View Slide

  49. Chartwell Web Font

    View Slide

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

    View Slide

  51. http://

    View Slide