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: r.hernandez@usc.edu 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: r.hernandez@usc.edu twitter: @webjournalist

213.280.5187c | 323.761.9054 Office: 310H