Today’s timeline21111.ascjclass.org/wp-content/uploads/sites/18/2015/11/week12.pdf · Today’s...
Transcript of Today’s timeline21111.ascjclass.org/wp-content/uploads/sites/18/2015/11/week12.pdf · Today’s...
Today’s timeline
• In the news - 10 min
• Review Extra Credit Arts & Crafts! - 15 min
• Review Title & Credit slides - 30 min
• Infographics & DataViz - 75 minutes
• David Tepper leads discussion - last 10 minutes
• Take and review the quiz - 15 mins
Let’s see the Tier 3 sketches of website’s homepage and one Tier 3 Interactive. (A
total of two sketches).
It can be on any topic... with a news peg.
Arts, Crafts &Extra Credit
Assignment Review
Let’s see our Title & Credit slides
!http://21111.ascjclass.org/2015/11/09/
week-11-new-media-law-intro-to-design-2/
Graphics + Web + Data + Journalism
Infographics, Data Visualization and Interactives
Associate Professor of Professional Practice Robert Hernandez
email: [email protected] 213.280.5187c | 323.761.9054
Office: 310H
Data Journalism
Source: http://www.guardian.co.uk/news/datablog/video/2013/apr/04/what-is-data-journalism-video
Why are Graphics important?
• Visualizing of info/data can reveal contextual concepts
• Can communicate complex concepts effectively
• A mashup of data, design and storytelling
• Visualizing of info/data can reveal contextual concepts
• Can communicate complex concepts effectively
• A mashup of data, design and storytelling
• Can be presented in an interactive way
Why are [Web] Graphics important?
• Increases engagement and ownership
1. Be a Creative thinker(and do it early)
The Marvel Method
Stan Lee of Marvel Comics discusses the “Marvel Method” at Princeton in 1966
“I had been writing all the stories myself, and I just didn't have time. If I was writing a story for Jack Kirby, Don Heck might be sitting on his hands waiting to do something … so finally I said, look, Don, I can't give you a script … but the next story would be Iron Man goes here and he does that, and he meets that guy, you go ahead and draw it, draw it any way you can, I'll put the copy in later."
2. Organize everything(which you probably do already with words)
Design flow
Storyboards
3. Pick a Lead visual(then make everything else look less important)
Visual hierarchy
Text hierarchy
1. Be a Creative thinker
2. Organize everything
3. Pick a Lead visual
4. Presume people are Smart5. Edit mercilessly
Look for inspiration
GRAPHICS GALLERIES AND BLOGS http://garethcook.net/best-american-infographics/ http://www.snd.org http:// www.spd.org http://journalists.org/ http://www.coolhunting.com/design/information-is-beautiful-award-winners-2013.php http://www.thefunctionalart.com/ http://www.informationisbeautiful.net/ http://www.visualcomplexity.com/vc/ http://infosthetics.com/ http://www.coolinfographics.com/ http://www.creativebloq.com/design-tools/data-visualization-712402 !UNCURATED COLLECTIONS (OK FOR VISUAL INSPIRATION BUT BE WARY) http://www.buzzfeed.com/tag/infographics http://www.newseum.org/todaysfrontpages/ !AVAILABLE ONLINE AT: https://db.tt/LOSd2AWG
Defining: in·fo·gra·phic“Information graphics are visual representations of information, data or knowledge often used to support information, strengthen it and present it within a sensitive context.
They are specific, context-sensitive and often times hand-crafted.”
Source: Benjamin Wiederkehr, Editor of Datavisualization.ch http://www.quora.com/What-is-the-difference-between-a-data-visualization-and-an-infographic
• Can be static, animated or interactive.
Infographic Examples
Source: http://thumbnails.visually.netdna-cdn.com/infographics-process_509e119959153.png
Infographic Examples
Infographic Examples
Source: GOOD | http://www.good.is/post/transparency-what-is-the-easiest-way-to-power-a-lightbulb/
Infographic Examples
Source: http://www.mediabistro.com/10000words/files/2010/07/shouldilearnprogramming.png
Infographic Examples
Source: The Oatmeal | http://theoatmeal.com/comics/misspelling
Infographic Examples
Source: foursquare | https://foursquare.com/infographics/10million https://foursquare.com/2010infographic
Infographic Examples
Source: http://www.designerinfographics.com/southern-right-whales-infographic.jpg
Infographic Examples
Source: NYTimes | http://elections.nytimes.com/2012/results/president/scenarios
with light interactivity
Infographic Examples
Source: WIRED | http://www.wired.com/design/2012/07/you-suck-at-infographics/?utm_campaign=Previous&utm_source=Contextly
Infographic Examples
Source: Tomas Nilsson | http://www.youtube.com/watch?v=-LF5M9nlFQs
Infographic Examples
Source: Tomas Nilsson | http://www.youtube.com/watch?v=-LF5M9nlFQs
Defining: da·ta vi·su·al·i·za·tion
“Data visualizations are visual displays of measured quantities by means of the combined use of a coordination system, points, lines, shapes, digits, letters quantified by visual attributes.
They are general, context-free and often times created automatically.”
Source: Benjamin Wiederkehr, Editor of Datavisualization.ch http://www.quora.com/What-is-the-difference-between-a-data-visualization-and-an-infographic
• Can be static, animated or interactive.
Data Viz Examples
Source: Information is Beautiful | http://www.informationisbeautiful.net/visualizations/mountains-out-of-molehills/
Data Viz Examples
Source: Information is Beautiful | http://www.informationisbeautiful.net/visualizations/the-billion-dollar-o-gram-2009/
Data Viz Examples
Source: Information is Beautiful | http://www.informationisbeautiful.net/visualizations/the-billion-dollar-o-gram-2009/
Data Viz Examples
Source: http://www.nytimes.com/interactive/2010/06/29/magazine/rivera-pitches.html?_r=2&
Data Viz Examples
Source: http://www.nytimes.com/interactive/2012/08/05/sports/olympics/the-100-meter-dash-one-race-every-medalist-ever.html?_r=0
Data Viz Examples
Source: BBC and Hans Rosling | http://www.youtube.com/watch?v=jbkSRLYSojo
Data Viz Examples
Source: BBC and Hans Rosling | http://www.youtube.com/watch?v=jbkSRLYSojo
Defining: in·ter·ac·tiv·ity“Providing output based on input from the user. This output feeds back into the user's decision process for subsequent interaction.
Implying that the user of the software can exert some control over the software, and not just be a passive page-turner recipient.”
Source: Don Wittekind, assistant professor at the UNC at Chapel Hill
• Can this be done in other media?
NO! Only Web
Interactivity Examples
Source: Discovery | http://dsc.discovery.com/convergence/titanic/technology/technology.html
Interactivity Examples
Source: El Mundo | http://www.elmundo.es/elmundo/2005/graficos/abr/s2/casa_25.html
Interactivity Examples
Source: Sun-Sentinel| http://www.sun-sentinel.com/broadband/theedge/sfl-edge-t-canemaker,0,4142989.flash
Interactivity Examples
Source: BBC| http://news.bbc.co.uk/2/shared/spl/hi/uk/06/electricity_calc/html/1.stm
Interactivity Examples
Source: Marketplace | http://www.marketplace.org/topics/economy/budget-hero
Interactivity Examples
Source: KQED | http://blogs.kqed.org/lowdown/2013/11/12/traffic-waves
Source: NYTimes | http://www.nytimes.com/interactive/2009/07/31/business/20080801-metrics-graphic.html
Interactivity Examples
Source: NYTimes | http://www.nytimes.com/interactive/2012/08/09/sports/olympics/new-olympic-stars-of-twitter.html?hp
Interactivity Examples
Source: Google | http://workshop.chromeexperiments.com/projects/armsglobe/
Interactivity Examples
Making inforgraphics
Graphic Resources• Mindy McAdams' tutorial on Data
http://www.jtoolkit.com/data/
• 10,000 Words Blog: Databaseshttp://www.mediabistro.com/10000words/category/database
• 10 Awesome Free Tools To Make Infographicshttp://www.makeuseof.com/tag/awesome-free-tools-infographics/
• Gapminderhttp://www.gapminder.org/
• WeePlaceshttp://www.weeplaces.com/
Graphic Resources• Nathan Yau's FlowingData
http://flowingdata.com/
• Information Is Beautifulhttp://www.informationisbeautiful.net/
• Chart Pornhttp://chartporn.org/
• Data Visualizationhttp://datavisualization.ch/
• Coolinfographics.comhttp://www.coolinfographics.com/
In pairs, collect data and sketch out/create an infographic that illustrates the highlights.
Must be based on real data. (15-20 mins for data/15-20 mins to sketch).
Example topics:Social Media, Phones, New Tech vs Old Tech,
Demographics, Sports (charting USC vs UCLA rivalry), Movie/TV, Food, Voting, Pets, Health/Illness, etc.
Arts & Crafts time!In-Class Assignment
In pairs, collect data and sketch out/create an infographic that illustrates the highlights. Must
be based on real data.
“Nicely designed”
Example topics:Social Media, Phones, New Tech vs Old Tech, Demographics, Sports (charting USC vs UCLA rivalry), Movie/TV, Food, Voting,
Pets, Health/Illness, etc.
Arts & Crafts time!EXTRA CREDIT
Deadline: Tuesday, Nov 17 Noon
Continue (or start) working on your final project… you know sources are tricky!
TIP: Research to do three stories: Plan A, B and C.
Work on your FinalAssignment #1
Deadline: Tuesday, Dec 15 11AM
Bring in an idea for a domain name and a credit card for those who want to purchase a
website and building a portfolio.
Prepare for next weekAssignment #2
Please go there and fill out the simple form:
http://bit.ly/1MIaZmu
Mid-semester evalAssignment #3
Deadline: Friday, Nov 13 noon
David TepperFacilitated discussion
Ten-minute discussion
Media’s approach to reporting the identity of mass shooters
Jared Servantez and Matt Lemas
Next Week’s Facilitated discussion
Sarah Collins Jason Cheng Taylor Villanueva Noah Camarena
Associate Professor of Professional Practice Robert Hernandez
email: [email protected] twitter: @webjournalist
213.280.5187c | 323.761.9054 Office: 310H