Markus Schröppel


Informaation visualisointi I

Envisioning Information I

Unterricht · lectures


Linklist according to the 1st part of our lecture on 31. mar.: »Animated infographics and online storytelling«

Script to the 1st part: »Animated infographics and online storytelling«
     from Alberto Cairo: »The terror of the south« a practical guide


Alberto Cairo »Carno Saurus«     animation
Alberto Cairos motion of a »Carno Saurus«     animation
Alberto Cairos how to animate the »Carno Saurus«     animation
Example to »How to Create Infographic for the Web« by Alberto Cairo     animation
»The Future is Now« - A brief introduction to online infographics by Alberto Cairo      Design Journal 97/2005     online article
Examples of: ›Alberto Cairo's‹ work      El Mundo     animation
Example: ›Assassination in Berriozar (Sp)‹ by Alberto Cairo      El Mundo     animation
Example: ›Terrorist attack in Sallent de Gallego (Sp)‹ by Alberto Cairo      El Mundo     animation

BLACK BOX OF SECRETS · EDR (Event Data Recorder)      MG-Media     animation
YOUR GUIDE TO TUT · King Tut and Egypt      Chicago Tribune     animation
REBUILDING NEW ORLEANS · interactive detail of the Katrina flash back      Times-Picayune, New Orleans     animation
ELECTION 2006 · complete results graphics with Senate and House results      New York Times Company     animation
HOW CYCLONES ARE FORMED      AFP     animation
ANATOMY OF A PRACTICE · a typical NFL training camp practice      USA Today     animation
SAN FRANCISCO JAVIER - V CENTENARIO      90 grados     animation

All Info & Interactive Graphics      Interactive Narratives and the Online News Association     webpage
El Mundo: ›Gráficos Interactivos‹, Madrid (ES)  español

Online news websites:
»MSNBC« e.g.: Learn about lung cancer
»Sun Sentinel«
»Washington Post«
»El Pais«
»El Mundo«      You might remember from A. Cairo

Examples for Classification of Interactives:
»Litvinenko« The Last Days of a Secret Agent

Category Narratives
    »The Family Tree of Michelle Obama, the First Lady«      The New York Times
    »Sea Ice in Retreat«      The New York Times
    »Faces of the dead« NY-Times     The New York Times

Category Instructives
    »Esqui Alpino (Alpine Skiing)«     El Pais
    »Train Accident«     El Pais
    Manuals in Motion     Motorola

Category Exploratives
    »Beer basics: How beer is brewed, beer varieties, etiquette and how to pour.«     The Sun
    »Building Bodies«
    »Computer Ports«
    »India-Pakistan Rivalry«

Category Simulatives
    »Baggage Screening«
    »Design a Cell Phone.« Use market research to design a popular phone that will fit a certain budget.     sound
    »The Great Flu« Choose a flu and try to prevent it from becoming a global pandemic.     sound
    »Explore the garden«

Mixes: ec. Category Instructives + Simulatives
    »What is Print?«


Adam, Pegie Stark, Conneen, Anne: »Contrast, and Dimension in News Design.« Interactive Course
     Poynter Institute, St. Petersburg      interactive

Anderson, Chris (ed.): »The American Editor« Design issue;
     a guide to newspaper design      free download

Bounford, Trevor: ›Digital Diagrams: How to Design and Present Statistical Information Effectively ‹;
     ISBN-13: 978-0823015726

Cairo, Alberto: »Sailing to the Future« excellent book about ›Infographics in the Internet Era‹;
     created for the Multimedia Bootcamp 2005 in the University of North Carolina at Chapel Hill      free download

Denton, Craig: ›Graphics for Visual Communication.‹;      ISBN-13: 978-0697085405
George-Palilonis, Jennifer: ›A Practical Guide to Graphics Reporting:
     Information Graphics for Print, Web & Broadcast‹;      ISBN-13: 978-0240807072
Harris, Robert L.: ›Information Graphics.‹ A Comprehensive Illustrated Reference;      ISBN-13: 978-0240807072
Heller, Steven: »Nigel Holmes on Information Design« the origins of information graphics
     Jorge Pinto Books Inc., ISBN 097747240X      online book

Holland, D.K.: ›Design Issues: How Graphic Design Informs Society‹;      ISBN-13: 978-1581152029
Meyer, Eric K.: ›Designing Infographics.‹;      ISBN-13: 978-1568303390
Reagan, Denise M. (ed.): »Update« Infographics Quick Course
     SND - The Society for News Design - Newspaper Design and Visual Journalism Society      free download

Shannon, Claude Elwood; Weaver, Warren: »The Mathematical Theory of Communication«
     University of Illinois Press, 1963      ISBN: 0252725484     online book

Uebele, Andreas: ›Signage Systems And Information Graphics‹;      ISBN-13: 978-0500513798

Linklist according to the 2nd part of our lecture on 31. mar.: »What should you show in a graphic?«

Script: »What should you show?«
     with many thanks to Venkatesh Rajamanickam:
     »Infographic Design Handout«, National Institute of Design, Ahmedabad, and Industrial Design Centre, Bombay

Course task for 31. March: »What should you show?« have a closer look to newspaper infographics · be prepared to discuss your awareness during the course discussion.

     ⇒ Here the link of the 1st: »Baghdad Red Zone«      The Charlotte Observer
     ⇒ The link of the 2nd: »How Much the US-Weapons Cost«      Stern
     ⇒ an the last: »Kuwait to Baghdad«      Folha de São Paulo

Infographic to Compare:
Class Alberto Cairo, University of North Carolina at Chapel Hill

Project: »Battle of Iwo Jima«:

Rebecca Rolfe: » Battle of Iwo Jima« Sketch      jpg
Rebecca Rolfe: » Battle of Iwo Jima« final      jpg

Lawson Parker: » Battle of Iwo Jima« Sketch      jpg
Lawson Parker: » Battle of Iwo Jima« final      jpg

Jonathan Avery: » Battle of Iwo Jima« final      jpg

Understand the Financial Crisis

The Crisis of Credit Visualized from Jonathan Jarvis on Vimeo.

Infographic Design Strategies

Example of Alberto Cairo: he would make it much simpler today; case: ›Terrorist Attack in Sallent de Gallego?‹
      from DESIGN JOURNAL NO. 99, in spanish

What Alberto Cairo knew and what he didn't know; case: ›Terrorist attack in Berriozar‹
      from DESIGN JOURNAL NO. 99, in spanish

What they dont't show: ›AREVA behind-the-scenes‹
      the nuclear power company named Areva explained in ›info graphics‹ style.

May help

›A Periodic Table of Visualization Methods‹       interactive


El Pais ›Train accident june 2003 in Chinchilla, Albacete, Spain‹
DR Nyheder Online ›clima-guide‹
The ›Theorem of Pythagoras‹: Computer-Animated Mathematics
About ›stick chart maps‹ at the Marshall islands
Information Architecture used in commerce: ›McMaster-Carr‹ supplier to industrial and large commercial facilities
Information Architecture used in commerce: NikeID

A Net Art Idea Line       displays a timeline of net artworks
Ben Fry ›isometric blocks‹: comparing the genome of people into a single visual display
      Ph.D. work at the MIT Media Laboratory

Kevin Mullet, Darrell Sano: Designing Visual Interfaces Communication Oriented Techniques      ISBN: 0-1330-3389-9
      book about of graphical user interfaces (GUI)

Remember the visualization, we disussed on 30. March:

The Case study: ›Water footprints of nations‹ Research       University of Twente & UNESCO-IHE
The ›H2O Calculator‹       H2O Conserve is a project of ICCR, GRACE, Food & Water Watch,
     and the Johns Hopkins University Center for a Livable Future.

The ›Virtual Water project‹ by Timm Kekeritz       FHP (University of Applied Sciences Potsdam, Germany)


›DD4me - Student Project‹, Data designed for me was a global IIID student project; call to question how statistical data enters our lives.       Vienna (AT)

Designer, Interviews

The Vision of ›George Rorick‹       Tribute to a designer, by Poynter Institute, St. Petersburg, (Fl) USA
In beautiful balance: news graphics of ›Megan Jaegerman‹       Tribute to a news reporter at New York Times, (NY) USA
Examples from: Holmes, Nigel: ›Wordless Diagrams‹: Explaining the Everyday       ISBN-13: 978-1582345222;
Nigel Holmes Homepage
Nigel Holmes: ›VizThink'08 Interview‹
      Visual Thinking Conference, San Francisco (CA); 27, 28 and 29 January 2008       online movie

›John Grimwade‹ Online portfolio of one of the leading infographic designers
The ›visual thinking weblog‹       ISSN 1543-7477; weblog
La ética en las reconstrucciones visuales: Análisis de los gráficos impresos y multimedia del 11-M
      Gonzalez Veira Xaquin, Universidad de Santiago de Compostela in Galicia, Spain (in spanish)

John Maeda ›Laws of Simplicity‹
      world-renowned graphic designer, visual artist, and computer scientist at the MIT Media Lab

Selected works by John Maeda       Prof. John Maeda, MIT Media Lab, Cambridge, Massachusetts USA
Gerlinde Schuller is working on projects in the field of Information Design       Information Design Studio, Amsterdam (NL)
Milestones of information design       by Gerlinde Schuller
Richard Saul Wurman: ›Understanding USA‹
      ISBN-13: 978-0967453606, comprehensive reference book: infographics about statistical data of the USA.
      webpage and download

Matthew Vescovo: ›Instructo Art‹       webpage


Argentina: Universidad de Buenos Aires; Facultad de Arquitectura, Diseño y Urbanismo: Infographic  español
Austria: FH Joanneum: Bachelor course: Information Design
Finnland: Helsinki University of Technology: Faculty of Information and Natural Sciences: Informaation visualisointi
Italy: University of Bologna: online course: Inform-active Learning Environment
Netherland: Art & Design College - grafisch lyceum utrecht
UK: University of Reading: MA Information design
USA: Ohio University in Athens, OH: Visual Communications program
USA: Institute of Design, IIT, Chicago
USA: University of California, Berkeley: School of Information Management & Systems
USA: School of Information Studies at Syracuse University
USA: Georgia Institute of Technology, Atlanta: MS degree: Information Design and Technology
USA: Illinois Institute of Technology: MS degree: Technical Communication and Information Design
USA: School of Journalism and Mass Communication: University of North Carolina: Chapel Hill: class Alberto Cairo


Emerson, John: ›Visualizing Information for Advocacy‹
      Tactical Technology Collective, 2008       book for free download

Gray, Dave: ›El futuro de la comunicacion visual‹ (Tulevaisuus visuaalisen viestinnän)
      Zero Factory S.L., Barcelona (SP)       Google online translation

Greenfield, Adam: ›Everyware: The Dawning Age of Ubiquitous Computing‹
      ISBN-13: 978-0321384010, Future of Ubiquitous Computing       book for free download

Poovaiah, Ravi: Application of Signage Systems       interactive

a schizophrenic design conversation from Seton Beggs on Vimeo.

Hans Rosling op Emerce eDay 2009 from Redactie Emerce on Vimeo.

The examples for our 3rd part of our lecture on 31. mar.:
     ›how to create »dimetric« and »isometric« perspective in Adobe Illustrator‹
     are on the university server: smb://kairi/works/0315 Envisioning Information I/Tutorial_perspective

e.g.: Buenos Aires

infografia: »Buenos Aires «   interactive

»Habbo Hotel«
Introduction: »Habbo Hotel«   movie
samantapainen: »Hotelli Habbo« suomeksi
another comunity: »Icontown«
real project: »3-D model of Berlin«

Tutorial: »Adobe Illustrator for Urban Planning«   University of Illinois
examples for technikal perspectivic illustrations: »Dimetric technical illustrations«
the art-historican I talked about »John Berger«

This and That:

The guys who pushed over 60 million pixels: »iconfactory«
How to get rich by doing so: »stockicons«
»PixelDam«, webcomunity containing many examples of isometric graphics
something to think about: »different perspective« even though the story is unconfirmed

Visualisation of telecommunications data: ›A Week in the life‹
     The data sculpture represents the movement and communication made with a cell phone in one week.

      by Andreas Nicolas Fischer  The sculpture was shown in the DAM Gallery Berlin from 08/02/05 - 08/03/08

Tutorial: »Inside Adobe Illustrator«, online   College of Architecture and Urban Planning, University of Washington
Video tutorials: »Adobe Video Workshop«, online   Adobe Systems Incorporated.


Berger, John: ›Ways of seeing‹;  ISBN: 0-14-021631-6
  Lapin yliopiston kirjaston / Lapland University Library · Taidekirjasto, yleiskokoelma · TAID 75 Berger John
Hudson, Paul: ›Introduction to 3 Dimensional graphics‹  Explanation and tutorial from the University of Hertfordshire
Spissler, Hanno: ›Infografiikka julkaisijan työvälineenä‹;  ISBN: 952-5344-17-7
  Lapin yliopiston kirjaston/Lapland University Library: Taidekirjasto, kurssikirjat · TAID K Spissler Hanno
Spissler, Hanno: The ›Infografic online‹  new Infographic examples from Hanno Sprissler  german


Franklin, Robin ›Isometric construction‹;  1 videokas. 33 min. + liit. s
  Lapland University Library · Format: motion picture: Taidekirjasto, videot · TAID Videokasetit Franklin Robin

Muutama kysymys? · Any Questions?

• takaisin • back •