Your SlideShare is downloading. ×
0
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #5): Data Visualization, Infographics & IA

238

Published on

Prezentare realizată de Alecsandru Grigoriu (Grapefruit). Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Prezentare realizată de Alecsandru Grigoriu (Grapefruit). Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Design, Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
238
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Alecsandru Grigoriupxdotpt.com Data visualization, infographics and information architecture
  • 2. Me Alecsandru Grigoriupxdotpt.com “It’s all about making the data… pretty, readable and usable.”
  • 3. Alecsandru Grigoriupxdotpt.com Data Visualization
  • 4. first, let us see how others do it Alecsandru Grigoriupxdotpt.com Examples
  • 5. Alecsandru Grigoriupxdotpt.com Macrometeorites
  • 6. Alecsandru Grigoriupxdotpt.com WeFeelFine
  • 7. Alecsandru Grigoriupxdotpt.com GEOCODEARTH (ex Twitearth)
  • 8. Alecsandru Grigoriupxdotpt.com The Museum of Mario (IGN)
  • 9. Alecsandru Grigoriupxdotpt.com Worldometers
  • 10. it’s like baking a very detailed wedding cake Alecsandru Grigoriupxdotpt.com How do we do it?
  • 11. we acquire, parse, filter, mine, represent, refine, interact Ben Fry, Visualizing Data, O’Reilly (2008) Alecsandru Grigoriupxdotpt.com So?
  • 12. obtain and store the data Alecsandru Grigoriupxdotpt.com Acquire
  • 13. provide structure, meaning and order Alecsandru Grigoriupxdotpt.com Parse
  • 14. do we need all the data? remove the waste Alecsandru Grigoriupxdotpt.com Filter
  • 15. do some mathematical/statistical “voodoo” and get results/patterns Alecsandru Grigoriupxdotpt.com Mine
  • 16. make it visually stunning or at least try Alecsandru Grigoriupxdotpt.com Represent
  • 17. have an eye for the details and tune your visual Alecsandru Grigoriupxdotpt.com Refine
  • 18. add the ability to navigate or manipulate your data to browse your results Alecsandru Grigoriupxdotpt.com Interact
  • 19. it’s not rocket science to generate relationships from your data and draw some lines, circles …or ponies Alecsandru Grigoriupxdotpt.com But I’m not a designer
  • 20. I’m here Alecsandru Grigoriupxdotpt.com Have no fear
  • 21. Alecsandru Grigoriupxdotpt.com Mapping
  • 22. Alecsandru Grigoriupxdotpt.com Time series
  • 23. Alecsandru Grigoriupxdotpt.com Connections
  • 24. Alecsandru Grigoriupxdotpt.com Scatterplot maps
  • 25. Alecsandru Grigoriupxdotpt.com Hierarchies
  • 26. Alecsandru Grigoriupxdotpt.com Networks
  • 27. Alecsandru Grigoriupxdotpt.com Infographics
  • 28. infographics are meant to tell a story (on screen, on paper, on video) Alecsandru Grigoriupxdotpt.com The same Mary, but on a different ferry
  • 29. Alecsandru Grigoriupxdotpt.com Imaginary Factory
  • 30. Alecsandru Grigoriupxdotpt.com Chen Zhi Liang’s Resume http://www.behance.net/gallery/Infographics-Resume/6745371
  • 31. Alecsandru Grigoriupxdotpt.com Study: fonts and colors
  • 32. Alecsandru Grigoriupxdotpt.com App Store Wars
  • 33. Alecsandru Grigoriupxdotpt.com The Apple Tree
  • 34. create a story, keep it simple, don’t overdue it and proofread it Alecsandru Grigoriupxdotpt.com Key principles
  • 35. the simplest way: Hollywood 3-act Alecsandru Grigoriupxdotpt.com Storytelling
  • 36. Premise, Backstory, Synopsis, Theme, Setting, Plot, Realism, Cinematics, Player control, Shifting focus, Foreshadowing events, Suspension of disbelief, Balancing conflict Alecsandru Grigoriupxdotpt.com Storytelling
  • 37. Hero, Shadow, Mentor, Allies, Guardians, Trickster, Herald Protagonist, Antagonist, Shape-shifter Intrapersonal, Interpersonal, Team, Community, Humanity Alecsandru Grigoriupxdotpt.com Characters
  • 38. I learned a thing or two Alecsandru Grigoriupxdotpt.com From my experience
  • 39. Alecsandru Grigoriupxdotpt.com FX User Profile and Modus Operandi
  • 40. Alecsandru Grigoriupxdotpt.com
  • 41. Alecsandru Grigoriupxdotpt.com
  • 42. Alecsandru Grigoriupxdotpt.com Information Architecture
  • 43. the art and science of developing structures of organization to present data and information FINE Design Group Alecsandru Grigoriupxdotpt.com What is IA?
  • 44. (what I used so far) Competitive analysis + matrix Business requirements + use cases Acceptance criteria Sitemap Mobile context assessment (Yes, mobile!) Alecsandru Grigoriupxdotpt.com Tools of the trade
  • 45. Criteria: Functionality, Content, Usability, Branding, Values, Other You, your direct competitors and Leaders (best of the pack) 0, 1, 2 Alecsandru Grigoriupxdotpt.com Competitive analysis matrix
  • 46. Alecsandru Grigoriupxdotpt.com Competitive analysis matrix
  • 47. talk to the clients and find out what they want and what are the customer needs use case format: I WANT TO DO SOMETHING BECAUSE OF THIS OUTCOME Alecsandru Grigoriupxdotpt.com Business requirements and use cases
  • 48. I WANT TO BUY MY PRODUCTS WITHOUT REGISTERING BECAUSE I AM A ONE-TIME SHOPPER How? Use a radio button option at checkout to skip the registration process Alecsandru Grigoriupxdotpt.com Acceptance criteria
  • 49. horizontal, vertical, list-view static, dynamic, future, cluster elements visually or made out of cells Alecsandru Grigoriupxdotpt.com Sitemap
  • 50. Alecsandru Grigoriupxdotpt.com Sitemap
  • 51. strip your use cases to the bare minimum Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait http://alistapart.com/article/organizing-mobile Alecsandru Grigoriupxdotpt.com Mobile context assessment
  • 52. represent (pen & paper) – in a visual manner – the following set of data • • • • • • • • • • 7,188,671,803 Current World Population 55,279,742 Cars produced this year 114,432,330 Bicycles produced this year 289,560,351 Computers sold this year 636,221 TV sets sold worldwide today info 4,807,836 Cellular phones sold today 176,455,804,298 Emails sent today 3,173,404 Blog posts written today 507,636,003 Tweets sent today 3,489,437,754 Google searches today Alecsandru Grigoriupxdotpt.com exercise (bonus points)
  • 53. S. Negru, Resources for data visualization & interactive exploration: http://tinyurl.com/kr8oxg5 B. Fry, Visualizing Data, O’Reilly, 2007 S. Few, Information Dashboard Design, O’Reilly, 2006 P. Morville, L. Rosenfeld, Information Architecture for the World Wide Web, O’Reilly, 1998 D. Roam, The Back of the Napkin (Expanded Edition), Portfolio Trade, 2013 Alecsandru Grigoriupxdotpt.com Resources
  • 54. They stay the same! Think first before opening your IDE or Photoshop Alecsandru Grigoriupxdotpt.com Conclusions
  • 55. the bilete.cfrcalatori.ro uninvited redesign by Grapefruit for WIAD 2013 www.slideshare.net/GrapefruitRo/murder-on-the-ia-express Alecsandru Grigoriupxdotpt.com Do we have time for one more case study?
  • 56. Alecsandru Grigoriupxdotpt.com episodul viitor: (re)găsirea resurselor Web

×