SlideShare una empresa de Scribd logo
1 de 53
Prepared by:
Paul Kahn – Experience Design Director
August 28, 2012
Mad*Pow Webinar
Twitter: #madpow
Maps, Diagrams and Timelines
INSPIRATIONFORINTERACTIVEDESIGN
Goals of this presentation
• “Too much information, not enough space” is not a New
Problem
• There are many solutions throughout the history of design
• What makes design work is in the user’s mind
• Whether you work on murals, monitors or mobile phones,
inspiration can be found in the underlying principals of good
design
2
What is a map?
3
La Carte est un secours que l'on fournit par les yeux à l'imagination
.
The map is an aid provided to the imagination through the eyes.
Henri Abraham Châtelain, Atlas historique, 1705
The map is not the territory.
Alfred Korzybski, Science and Sanity, 1933
In fact what is meant by information – the elementary unit of
information – is a difference that makes a difference.
Gregory Bateson, Form, Substance and Difference, 1970
What is information?
Henri Abraham Châtelain, Map of Canada or New France
1719
Maps That Visualize Networks: Link-Node Diagrams
Peutinger Table
• 3rd Century Roman road chart
Erhard Etzlaub Romweg map
• Intended for travelers between Northern Europe and
Rome in 1500
Some modern Link-Node Diagrams
5
Towns and Roads in Roman Territory, 3rd Century
Maps & Diagrams | August 2012 |
7
Peutinger Table
User-Centered Features:
• Icons represent services available on the network
• Distance between locations on the same road
• Remove space between cities not on the same road
England (left) and France (right), Pyrenees (bottom)
Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn
Erhard Etzlaub’s Romweg
11
• Designed for the pilgrimage
year 1500
• Representing the road
network connecting
Northern Europe to Rome
• The map is oriented from
the North Sea in the
foreground to the
Mediterranean Sea at the
top.
Circles & Dots
• 9 dots from
Lubeck to Hamborg
= 75 miles
• 14 dots from
Hamborg to Bremen =
126 miles
Cold War orientation of Europe and Asia (TIME Magazine 1952)
13
Holtzbrinck Web Map by Dynamic Diagrams (1999)
14
North
America
German
Swiss
Austrian
UK
Australasia, S. America, Africa
Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn
LinkedIn InMap
16
The Bush
Money
Machine:
Spheres of
Influence
(Wash. Post,
2004)
Karl Rove
Vizify visual biography
18
19
Try to avoid connecting everything to everything…
Deforming space to present information
20
Turgot map of Paris engraved by Bretez and Lucas (1734-39)
• Isometric projection of streets & architecture: one vertical scale
• Widen streets to expose street names & flatten land to expose
buildings
• Separate size scales for the city and the river
Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn
Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn
Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn
My office
My office
Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn
Isometric + Picture Plane
Transportation networks: maps or diagrams?
28
Harry Beck’s London Underground map (1933)
• The disappearance of above-ground details
• Stretching and compressing space to improve legibility
• Distorting geographic information to fit a regular grid
Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn
London Underground (1920)
London Underground (1933)
32
The Real Underground (2004)
• Animation created by
Sam Rich for the London
Transport Museum.
33
Eisenhower Interstate System: Realistic Geography
34
Eisenhower Interstate System by Chris Yates (2007)
35
INTERSTATE: THE U.S. Interstate System by Cameron Booth (2010)
36
Metaphor Maps
The exterior shape of the map exists as a metaphor in the mind of the
viewer.
French & German national stereotype maps of Europe (1870)
• The map as geographic metaphor containing ideas
37
38
Europe from the French perspective (1870)
39
Europe from the German
perspective (1870)
Metaphor Maps
Fritz Kahn “Man as an Industrial Palace” (1920s)
• The human body as a diagram
• Homunculus (little man) as vector/actor
• Explaining biological process through mechanical metaphor
40
41
Man as Industrial Palace animated by Henning Lederer
42
Invention of the Timeline
Joseph Priestley’s invention of the timeline (1765)
• History: alignment of cultures, categories and chronology
• Biography: alignment of lifespan and chronology
Alfred Barr’s Art History (1935)
• Timeline + influence vectors
Herbert Bayer’s diagram of the universe (1953)
• Cosmology, geology, biology in a single diagram
• Spirals, lines, flows and trees
43
44
time
geography/culture
45
time
geography/culture
Joseph Priestley: biographical timeline
46
47
48
49
Herbert Bayer, World Geographic Atlas (1953)
50
Data Journalism:
Olympics Race Against History (New York Times 2012)
51
Techniques used
Metaphor
Olympic pool as inverted data grid
Alignment
Swimmer’s horizontal position = year of race
Swimmer’s vertical position = time converted to distance from fastest finish
Information overlay on the data grid
Spotlight on individual swimmer in lane (year)
Time barriers as horizontal lines (1 minute, 48 seconds)
52
Thank You!
53
Twitter: #madpow
Paul Kahn
pkahn@madpow.com
@pauldavidkahn
Contact Information

Más contenido relacionado

La actualidad más candente

Cartography lec #4
Cartography lec #4Cartography lec #4
Cartography lec #4Nazir Ahmed
 
Surveying II ajith sir class 1
Surveying II ajith sir class 1Surveying II ajith sir class 1
Surveying II ajith sir class 1SHAMJITH KM
 
The importance of map
The importance of mapThe importance of map
The importance of maparceyes
 
Distribution maps
Distribution mapsDistribution maps
Distribution mapsivisdude82
 
Continuing Our Look At Primary And Secondary Data
Continuing Our Look At Primary And Secondary DataContinuing Our Look At Primary And Secondary Data
Continuing Our Look At Primary And Secondary Dataguest2137aa
 
Data graphics - CAMP
Data graphics - CAMPData graphics - CAMP
Data graphics - CAMPsconnin
 
Ignite Denver - The Greatest Statistical Graphic Ever
Ignite Denver - The Greatest Statistical Graphic EverIgnite Denver - The Greatest Statistical Graphic Ever
Ignite Denver - The Greatest Statistical Graphic Ever360|Conferences
 
Distribution of maps
Distribution of mapsDistribution of maps
Distribution of mapsNaga Muruga
 
GEOGRAPHIC SKILLS: CHOROPLETH MAPS
GEOGRAPHIC SKILLS: CHOROPLETH MAPSGEOGRAPHIC SKILLS: CHOROPLETH MAPS
GEOGRAPHIC SKILLS: CHOROPLETH MAPSGeorge Dumitrache
 
Cartographic symbology. By proj jasper
Cartographic symbology. By proj jasperCartographic symbology. By proj jasper
Cartographic symbology. By proj jasperAgbajiJacob
 
地図と認知プロセス -人間は地図を使って認知地図を獲得できるか-
地図と認知プロセス -人間は地図を使って認知地図を獲得できるか-地図と認知プロセス -人間は地図を使って認知地図を獲得できるか-
地図と認知プロセス -人間は地図を使って認知地図を獲得できるか-Hirosaji
 
Presentation to design year zero
Presentation to design year zeroPresentation to design year zero
Presentation to design year zeroLes Bicknell
 
Using OpenStreetMap Building Footprints Data for Population Distribution Mode...
Using OpenStreetMap Building Footprints Data for Population Distribution Mode...Using OpenStreetMap Building Footprints Data for Population Distribution Mode...
Using OpenStreetMap Building Footprints Data for Population Distribution Mode...Feye Andal
 
1.Maps.Different Types
1.Maps.Different Types1.Maps.Different Types
1.Maps.Different Typesvb66
 

La actualidad más candente (19)

Maps and GIS
Maps and GISMaps and GIS
Maps and GIS
 
Cartography lec #4
Cartography lec #4Cartography lec #4
Cartography lec #4
 
Surveying II ajith sir class 1
Surveying II ajith sir class 1Surveying II ajith sir class 1
Surveying II ajith sir class 1
 
The importance of map
The importance of mapThe importance of map
The importance of map
 
Distribution maps
Distribution mapsDistribution maps
Distribution maps
 
Cartography
CartographyCartography
Cartography
 
Continuing Our Look At Primary And Secondary Data
Continuing Our Look At Primary And Secondary DataContinuing Our Look At Primary And Secondary Data
Continuing Our Look At Primary And Secondary Data
 
Data graphics - CAMP
Data graphics - CAMPData graphics - CAMP
Data graphics - CAMP
 
Ignite Denver - The Greatest Statistical Graphic Ever
Ignite Denver - The Greatest Statistical Graphic EverIgnite Denver - The Greatest Statistical Graphic Ever
Ignite Denver - The Greatest Statistical Graphic Ever
 
Roughmaps
RoughmapsRoughmaps
Roughmaps
 
Distribution of maps
Distribution of mapsDistribution of maps
Distribution of maps
 
Maps Ppt
Maps PptMaps Ppt
Maps Ppt
 
GEOGRAPHIC SKILLS: CHOROPLETH MAPS
GEOGRAPHIC SKILLS: CHOROPLETH MAPSGEOGRAPHIC SKILLS: CHOROPLETH MAPS
GEOGRAPHIC SKILLS: CHOROPLETH MAPS
 
Cartographic symbology. By proj jasper
Cartographic symbology. By proj jasperCartographic symbology. By proj jasper
Cartographic symbology. By proj jasper
 
1017 Maps and mapping
1017 Maps and mapping1017 Maps and mapping
1017 Maps and mapping
 
地図と認知プロセス -人間は地図を使って認知地図を獲得できるか-
地図と認知プロセス -人間は地図を使って認知地図を獲得できるか-地図と認知プロセス -人間は地図を使って認知地図を獲得できるか-
地図と認知プロセス -人間は地図を使って認知地図を獲得できるか-
 
Presentation to design year zero
Presentation to design year zeroPresentation to design year zero
Presentation to design year zero
 
Using OpenStreetMap Building Footprints Data for Population Distribution Mode...
Using OpenStreetMap Building Footprints Data for Population Distribution Mode...Using OpenStreetMap Building Footprints Data for Population Distribution Mode...
Using OpenStreetMap Building Footprints Data for Population Distribution Mode...
 
1.Maps.Different Types
1.Maps.Different Types1.Maps.Different Types
1.Maps.Different Types
 

Destacado

Designing an Ecosystem of Care' at Human Factors and Ergonomics Society - HXR...
Designing an Ecosystem of Care' at Human Factors and Ergonomics Society - HXR...Designing an Ecosystem of Care' at Human Factors and Ergonomics Society - HXR...
Designing an Ecosystem of Care' at Human Factors and Ergonomics Society - HXR...Mad*Pow
 
Social Media Content Strateg- Dan Berlin - UPA International 2012
Social Media Content Strateg- Dan Berlin - UPA International 2012 Social Media Content Strateg- Dan Berlin - UPA International 2012
Social Media Content Strateg- Dan Berlin - UPA International 2012 Mad*Pow
 
Beyond Just Usability: Desirability & Usefulness Testing - UXPA 2014 - Susan...
 Beyond Just Usability: Desirability & Usefulness Testing - UXPA 2014 - Susan... Beyond Just Usability: Desirability & Usefulness Testing - UXPA 2014 - Susan...
Beyond Just Usability: Desirability & Usefulness Testing - UXPA 2014 - Susan...Mad*Pow
 
Designing an Ecosystem of Care - Health 2.0 Fall 2014 Conference - Amy Cueva
Designing an Ecosystem of Care - Health 2.0 Fall 2014 Conference - Amy CuevaDesigning an Ecosystem of Care - Health 2.0 Fall 2014 Conference - Amy Cueva
Designing an Ecosystem of Care - Health 2.0 Fall 2014 Conference - Amy CuevaMad*Pow
 
Rebounding with Web Animation - Nick Snyder, 2014
Rebounding with Web Animation -  Nick Snyder, 2014Rebounding with Web Animation -  Nick Snyder, 2014
Rebounding with Web Animation - Nick Snyder, 2014Mad*Pow
 
Building a Culture to Motivate and Inspire Creative Teams - 2012 Webinar - Bu...
Building a Culture to Motivate and Inspire Creative Teams - 2012 Webinar - Bu...Building a Culture to Motivate and Inspire Creative Teams - 2012 Webinar - Bu...
Building a Culture to Motivate and Inspire Creative Teams - 2012 Webinar - Bu...Mad*Pow
 
Using Design Psychology for Evil - UXPA 2014 - Susan Mercer
Using Design Psychology for Evil - UXPA 2014 - Susan MercerUsing Design Psychology for Evil - UXPA 2014 - Susan Mercer
Using Design Psychology for Evil - UXPA 2014 - Susan MercerMad*Pow
 
PatientDoctor Relationships & Social Media - Himss Virtual Conf 09 - Amy ...
PatientDoctor Relationships & Social Media - Himss Virtual Conf 09 - Amy ...PatientDoctor Relationships & Social Media - Himss Virtual Conf 09 - Amy ...
PatientDoctor Relationships & Social Media - Himss Virtual Conf 09 - Amy ...Amy Cueva
 
Designing Design Workshops
Designing Design WorkshopsDesigning Design Workshops
Designing Design WorkshopsAdam Connor
 
Usability Testing Medical Devices - UPA International 2012.-Chris Hass and Da...
Usability Testing Medical Devices - UPA International 2012.-Chris Hass and Da...Usability Testing Medical Devices - UPA International 2012.-Chris Hass and Da...
Usability Testing Medical Devices - UPA International 2012.-Chris Hass and Da...Mad*Pow
 
Working Better Together: Characteristics of Productive, Creative Organization...
Working Better Together: Characteristics of Productive, Creative Organization...Working Better Together: Characteristics of Productive, Creative Organization...
Working Better Together: Characteristics of Productive, Creative Organization...Mad*Pow
 
Meeting at the Intersection of Content Strategy and UX
Meeting at the Intersection of Content Strategy and UXMeeting at the Intersection of Content Strategy and UX
Meeting at the Intersection of Content Strategy and UXMarli Mesibov
 
Service Design in Experience Design
Service Design in Experience DesignService Design in Experience Design
Service Design in Experience DesignPaul Kahn
 
Let's Get Real: Creating Tangible Experiences - Content Strategy Summit 2015 ...
Let's Get Real: Creating Tangible Experiences - Content Strategy Summit 2015 ...Let's Get Real: Creating Tangible Experiences - Content Strategy Summit 2015 ...
Let's Get Real: Creating Tangible Experiences - Content Strategy Summit 2015 ...Mad*Pow
 
Customer Journey Mapping: Illustrating the Big Picture
Customer Journey Mapping: Illustrating the Big PictureCustomer Journey Mapping: Illustrating the Big Picture
Customer Journey Mapping: Illustrating the Big PictureMegan Grocki
 
Preference and Desirability Testing: Measuring Emotional Response to Guide De...
Preference and Desirability Testing: Measuring Emotional Response to Guide De...Preference and Desirability Testing: Measuring Emotional Response to Guide De...
Preference and Desirability Testing: Measuring Emotional Response to Guide De...Paul Doncaster
 
Moral Issues in Behavior Change - SXSW 2017 - Amy Bucher
Moral Issues in Behavior Change - SXSW 2017 - Amy BucherMoral Issues in Behavior Change - SXSW 2017 - Amy Bucher
Moral Issues in Behavior Change - SXSW 2017 - Amy BucherMad*Pow
 

Destacado (17)

Designing an Ecosystem of Care' at Human Factors and Ergonomics Society - HXR...
Designing an Ecosystem of Care' at Human Factors and Ergonomics Society - HXR...Designing an Ecosystem of Care' at Human Factors and Ergonomics Society - HXR...
Designing an Ecosystem of Care' at Human Factors and Ergonomics Society - HXR...
 
Social Media Content Strateg- Dan Berlin - UPA International 2012
Social Media Content Strateg- Dan Berlin - UPA International 2012 Social Media Content Strateg- Dan Berlin - UPA International 2012
Social Media Content Strateg- Dan Berlin - UPA International 2012
 
Beyond Just Usability: Desirability & Usefulness Testing - UXPA 2014 - Susan...
 Beyond Just Usability: Desirability & Usefulness Testing - UXPA 2014 - Susan... Beyond Just Usability: Desirability & Usefulness Testing - UXPA 2014 - Susan...
Beyond Just Usability: Desirability & Usefulness Testing - UXPA 2014 - Susan...
 
Designing an Ecosystem of Care - Health 2.0 Fall 2014 Conference - Amy Cueva
Designing an Ecosystem of Care - Health 2.0 Fall 2014 Conference - Amy CuevaDesigning an Ecosystem of Care - Health 2.0 Fall 2014 Conference - Amy Cueva
Designing an Ecosystem of Care - Health 2.0 Fall 2014 Conference - Amy Cueva
 
Rebounding with Web Animation - Nick Snyder, 2014
Rebounding with Web Animation -  Nick Snyder, 2014Rebounding with Web Animation -  Nick Snyder, 2014
Rebounding with Web Animation - Nick Snyder, 2014
 
Building a Culture to Motivate and Inspire Creative Teams - 2012 Webinar - Bu...
Building a Culture to Motivate and Inspire Creative Teams - 2012 Webinar - Bu...Building a Culture to Motivate and Inspire Creative Teams - 2012 Webinar - Bu...
Building a Culture to Motivate and Inspire Creative Teams - 2012 Webinar - Bu...
 
Using Design Psychology for Evil - UXPA 2014 - Susan Mercer
Using Design Psychology for Evil - UXPA 2014 - Susan MercerUsing Design Psychology for Evil - UXPA 2014 - Susan Mercer
Using Design Psychology for Evil - UXPA 2014 - Susan Mercer
 
PatientDoctor Relationships & Social Media - Himss Virtual Conf 09 - Amy ...
PatientDoctor Relationships & Social Media - Himss Virtual Conf 09 - Amy ...PatientDoctor Relationships & Social Media - Himss Virtual Conf 09 - Amy ...
PatientDoctor Relationships & Social Media - Himss Virtual Conf 09 - Amy ...
 
Designing Design Workshops
Designing Design WorkshopsDesigning Design Workshops
Designing Design Workshops
 
Usability Testing Medical Devices - UPA International 2012.-Chris Hass and Da...
Usability Testing Medical Devices - UPA International 2012.-Chris Hass and Da...Usability Testing Medical Devices - UPA International 2012.-Chris Hass and Da...
Usability Testing Medical Devices - UPA International 2012.-Chris Hass and Da...
 
Working Better Together: Characteristics of Productive, Creative Organization...
Working Better Together: Characteristics of Productive, Creative Organization...Working Better Together: Characteristics of Productive, Creative Organization...
Working Better Together: Characteristics of Productive, Creative Organization...
 
Meeting at the Intersection of Content Strategy and UX
Meeting at the Intersection of Content Strategy and UXMeeting at the Intersection of Content Strategy and UX
Meeting at the Intersection of Content Strategy and UX
 
Service Design in Experience Design
Service Design in Experience DesignService Design in Experience Design
Service Design in Experience Design
 
Let's Get Real: Creating Tangible Experiences - Content Strategy Summit 2015 ...
Let's Get Real: Creating Tangible Experiences - Content Strategy Summit 2015 ...Let's Get Real: Creating Tangible Experiences - Content Strategy Summit 2015 ...
Let's Get Real: Creating Tangible Experiences - Content Strategy Summit 2015 ...
 
Customer Journey Mapping: Illustrating the Big Picture
Customer Journey Mapping: Illustrating the Big PictureCustomer Journey Mapping: Illustrating the Big Picture
Customer Journey Mapping: Illustrating the Big Picture
 
Preference and Desirability Testing: Measuring Emotional Response to Guide De...
Preference and Desirability Testing: Measuring Emotional Response to Guide De...Preference and Desirability Testing: Measuring Emotional Response to Guide De...
Preference and Desirability Testing: Measuring Emotional Response to Guide De...
 
Moral Issues in Behavior Change - SXSW 2017 - Amy Bucher
Moral Issues in Behavior Change - SXSW 2017 - Amy BucherMoral Issues in Behavior Change - SXSW 2017 - Amy Bucher
Moral Issues in Behavior Change - SXSW 2017 - Amy Bucher
 

Similar a Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn

History of Data Visualization
History of Data VisualizationHistory of Data Visualization
History of Data VisualizationManimaran A
 
The History of Graphic Design
The History of Graphic DesignThe History of Graphic Design
The History of Graphic DesignMatt Erickson
 
HistoryOfGraphicDesign_01.pptx
HistoryOfGraphicDesign_01.pptxHistoryOfGraphicDesign_01.pptx
HistoryOfGraphicDesign_01.pptxJebbieEneroBarrios
 
What are data and information, why they matter (v. ITA 2020)
What are data and information, why they matter (v. ITA 2020)What are data and information, why they matter (v. ITA 2020)
What are data and information, why they matter (v. ITA 2020)Frieda Brioschi
 
What are data and information, why they matter
What are data and information, why they matterWhat are data and information, why they matter
What are data and information, why they matterFrieda Brioschi
 
Mapping The City Maps And Plans
Mapping The  City  Maps And  PlansMapping The  City  Maps And  Plans
Mapping The City Maps And Plansm christine boyer
 
Mapping The City Maps And Plans
Mapping The City Maps And PlansMapping The City Maps And Plans
Mapping The City Maps And Plansguesta591e5
 
Understanding through Visualization
Understanding through VisualizationUnderstanding through Visualization
Understanding through VisualizationStephan Thiel
 
What are data and information, why they matter (v. ITA 2021)
What are data and information, why they matter (v. ITA 2021)What are data and information, why they matter (v. ITA 2021)
What are data and information, why they matter (v. ITA 2021)Frieda Brioschi
 
inbetween war architecture
inbetween war architectureinbetween war architecture
inbetween war architectureNehal Patel
 
Senųjų žemėlapių katalogas
Senųjų žemėlapių katalogasSenųjų žemėlapių katalogas
Senųjų žemėlapių katalogasoldmaps
 
Challenges in the Digital Humanities
Challenges in the Digital HumanitiesChallenges in the Digital Humanities
Challenges in the Digital HumanitiesAndrew Prescott
 
Otl aicher essay
Otl aicher essayOtl aicher essay
Otl aicher essayElyshaTsai
 
Great Maps_The Worlds Masterpieces (DK Smithsonian) (1).pdf
Great Maps_The Worlds Masterpieces (DK Smithsonian) (1).pdfGreat Maps_The Worlds Masterpieces (DK Smithsonian) (1).pdf
Great Maps_The Worlds Masterpieces (DK Smithsonian) (1).pdfLETICIAQUEIROZ23
 

Similar a Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn (20)

History of Data Visualization
History of Data VisualizationHistory of Data Visualization
History of Data Visualization
 
The History of Graphic Design
The History of Graphic DesignThe History of Graphic Design
The History of Graphic Design
 
HistoryOfGraphicDesign_01.pptx
HistoryOfGraphicDesign_01.pptxHistoryOfGraphicDesign_01.pptx
HistoryOfGraphicDesign_01.pptx
 
What are data and information, why they matter (v. ITA 2020)
What are data and information, why they matter (v. ITA 2020)What are data and information, why they matter (v. ITA 2020)
What are data and information, why they matter (v. ITA 2020)
 
Big Ideas: The shape of time
Big Ideas: The shape of timeBig Ideas: The shape of time
Big Ideas: The shape of time
 
What are data and information, why they matter
What are data and information, why they matterWhat are data and information, why they matter
What are data and information, why they matter
 
Mapping The City Maps And Plans
Mapping The  City  Maps And  PlansMapping The  City  Maps And  Plans
Mapping The City Maps And Plans
 
Mapping The City Maps And Plans
Mapping The City Maps And PlansMapping The City Maps And Plans
Mapping The City Maps And Plans
 
Understanding through Visualization
Understanding through VisualizationUnderstanding through Visualization
Understanding through Visualization
 
Frank Pick
Frank Pick Frank Pick
Frank Pick
 
Historiographica
HistoriographicaHistoriographica
Historiographica
 
What are data and information, why they matter (v. ITA 2021)
What are data and information, why they matter (v. ITA 2021)What are data and information, why they matter (v. ITA 2021)
What are data and information, why they matter (v. ITA 2021)
 
Fppt brochure
Fppt brochureFppt brochure
Fppt brochure
 
inbetween war architecture
inbetween war architectureinbetween war architecture
inbetween war architecture
 
Senųjų žemėlapių katalogas
Senųjų žemėlapių katalogasSenųjų žemėlapių katalogas
Senųjų žemėlapių katalogas
 
Chapter 13 lecture
Chapter 13 lectureChapter 13 lecture
Chapter 13 lecture
 
Challenges in the Digital Humanities
Challenges in the Digital HumanitiesChallenges in the Digital Humanities
Challenges in the Digital Humanities
 
Historie pi en
Historie pi enHistorie pi en
Historie pi en
 
Otl aicher essay
Otl aicher essayOtl aicher essay
Otl aicher essay
 
Great Maps_The Worlds Masterpieces (DK Smithsonian) (1).pdf
Great Maps_The Worlds Masterpieces (DK Smithsonian) (1).pdfGreat Maps_The Worlds Masterpieces (DK Smithsonian) (1).pdf
Great Maps_The Worlds Masterpieces (DK Smithsonian) (1).pdf
 

Más de Mad*Pow

Webinar: What Did I Miss? The Hidden Costs of Depriortizing Diversity in User...
Webinar: What Did I Miss? The Hidden Costs of Depriortizing Diversity in User...Webinar: What Did I Miss? The Hidden Costs of Depriortizing Diversity in User...
Webinar: What Did I Miss? The Hidden Costs of Depriortizing Diversity in User...Mad*Pow
 
Webinar: Intro to Strategic Foresight & Futures Thinking
Webinar: Intro to Strategic Foresight & Futures ThinkingWebinar: Intro to Strategic Foresight & Futures Thinking
Webinar: Intro to Strategic Foresight & Futures ThinkingMad*Pow
 
Let’s Get Meta: Applying Service Design To Improve Employee Experiences… and ...
Let’s Get Meta: Applying Service Design To Improve Employee Experiences… and ...Let’s Get Meta: Applying Service Design To Improve Employee Experiences… and ...
Let’s Get Meta: Applying Service Design To Improve Employee Experiences… and ...Mad*Pow
 
Behavior Change Design: A Comprehensive Yet Practical Approach to Improving H...
Behavior Change Design: A Comprehensive Yet Practical Approach to Improving H...Behavior Change Design: A Comprehensive Yet Practical Approach to Improving H...
Behavior Change Design: A Comprehensive Yet Practical Approach to Improving H...Mad*Pow
 
Webinar: When Nothing is Fine
Webinar: When Nothing is FineWebinar: When Nothing is Fine
Webinar: When Nothing is FineMad*Pow
 
Design More Innovative Solutions with a Holistic Understanding of the Chronic...
Design More Innovative Solutions with a Holistic Understanding of the Chronic...Design More Innovative Solutions with a Holistic Understanding of the Chronic...
Design More Innovative Solutions with a Holistic Understanding of the Chronic...Mad*Pow
 
Accessibility Workshop July 2020
Accessibility Workshop July 2020Accessibility Workshop July 2020
Accessibility Workshop July 2020Mad*Pow
 
FXD 2019 Keynote: Joseph Smiley, E*TRADE
FXD 2019 Keynote: Joseph Smiley, E*TRADEFXD 2019 Keynote: Joseph Smiley, E*TRADE
FXD 2019 Keynote: Joseph Smiley, E*TRADEMad*Pow
 
FXD 2019 Keynote: Stephen Gates, InVision
FXD 2019 Keynote: Stephen Gates, InVisionFXD 2019 Keynote: Stephen Gates, InVision
FXD 2019 Keynote: Stephen Gates, InVisionMad*Pow
 
FXD 2019: Brian McLaughlin, Bottomline Technologies
FXD 2019: Brian McLaughlin, Bottomline TechnologiesFXD 2019: Brian McLaughlin, Bottomline Technologies
FXD 2019: Brian McLaughlin, Bottomline TechnologiesMad*Pow
 
FXD 2019 Keynote: Rob Gifford, Mad*Pow
FXD 2019 Keynote: Rob Gifford, Mad*PowFXD 2019 Keynote: Rob Gifford, Mad*Pow
FXD 2019 Keynote: Rob Gifford, Mad*PowMad*Pow
 
FXD 2019 Interactive Session: Behavior Based Design
FXD 2019 Interactive Session: Behavior Based DesignFXD 2019 Interactive Session: Behavior Based Design
FXD 2019 Interactive Session: Behavior Based DesignMad*Pow
 
FXD 2019 Keynote: Marti Gold, SiriusXM
FXD 2019 Keynote: Marti Gold, SiriusXMFXD 2019 Keynote: Marti Gold, SiriusXM
FXD 2019 Keynote: Marti Gold, SiriusXMMad*Pow
 
FXD 2019 Keynote: Christine Berglund, CapitalOne
FXD 2019 Keynote: Christine Berglund, CapitalOneFXD 2019 Keynote: Christine Berglund, CapitalOne
FXD 2019 Keynote: Christine Berglund, CapitalOneMad*Pow
 
FXD 2019 Keynote: Andy Vitale, SunTrust Bank
FXD 2019 Keynote: Andy Vitale, SunTrust BankFXD 2019 Keynote: Andy Vitale, SunTrust Bank
FXD 2019 Keynote: Andy Vitale, SunTrust BankMad*Pow
 
FXD 2019 Leadership Round Table
FXD 2019 Leadership Round Table FXD 2019 Leadership Round Table
FXD 2019 Leadership Round Table Mad*Pow
 
HXD 2019 Leadership Round Table
HXD 2019 Leadership Round TableHXD 2019 Leadership Round Table
HXD 2019 Leadership Round TableMad*Pow
 
Aline Holzwarth, Pattern Health
Aline Holzwarth, Pattern HealthAline Holzwarth, Pattern Health
Aline Holzwarth, Pattern HealthMad*Pow
 
Vanessa Mason, Institute for the Future
Vanessa Mason, Institute for the FutureVanessa Mason, Institute for the Future
Vanessa Mason, Institute for the FutureMad*Pow
 
Trina Histon, Aubrey Kraft, W. Scott Heisler, Kaiser Permanente Care Manageme...
Trina Histon, Aubrey Kraft, W. Scott Heisler, Kaiser Permanente Care Manageme...Trina Histon, Aubrey Kraft, W. Scott Heisler, Kaiser Permanente Care Manageme...
Trina Histon, Aubrey Kraft, W. Scott Heisler, Kaiser Permanente Care Manageme...Mad*Pow
 

Más de Mad*Pow (20)

Webinar: What Did I Miss? The Hidden Costs of Depriortizing Diversity in User...
Webinar: What Did I Miss? The Hidden Costs of Depriortizing Diversity in User...Webinar: What Did I Miss? The Hidden Costs of Depriortizing Diversity in User...
Webinar: What Did I Miss? The Hidden Costs of Depriortizing Diversity in User...
 
Webinar: Intro to Strategic Foresight & Futures Thinking
Webinar: Intro to Strategic Foresight & Futures ThinkingWebinar: Intro to Strategic Foresight & Futures Thinking
Webinar: Intro to Strategic Foresight & Futures Thinking
 
Let’s Get Meta: Applying Service Design To Improve Employee Experiences… and ...
Let’s Get Meta: Applying Service Design To Improve Employee Experiences… and ...Let’s Get Meta: Applying Service Design To Improve Employee Experiences… and ...
Let’s Get Meta: Applying Service Design To Improve Employee Experiences… and ...
 
Behavior Change Design: A Comprehensive Yet Practical Approach to Improving H...
Behavior Change Design: A Comprehensive Yet Practical Approach to Improving H...Behavior Change Design: A Comprehensive Yet Practical Approach to Improving H...
Behavior Change Design: A Comprehensive Yet Practical Approach to Improving H...
 
Webinar: When Nothing is Fine
Webinar: When Nothing is FineWebinar: When Nothing is Fine
Webinar: When Nothing is Fine
 
Design More Innovative Solutions with a Holistic Understanding of the Chronic...
Design More Innovative Solutions with a Holistic Understanding of the Chronic...Design More Innovative Solutions with a Holistic Understanding of the Chronic...
Design More Innovative Solutions with a Holistic Understanding of the Chronic...
 
Accessibility Workshop July 2020
Accessibility Workshop July 2020Accessibility Workshop July 2020
Accessibility Workshop July 2020
 
FXD 2019 Keynote: Joseph Smiley, E*TRADE
FXD 2019 Keynote: Joseph Smiley, E*TRADEFXD 2019 Keynote: Joseph Smiley, E*TRADE
FXD 2019 Keynote: Joseph Smiley, E*TRADE
 
FXD 2019 Keynote: Stephen Gates, InVision
FXD 2019 Keynote: Stephen Gates, InVisionFXD 2019 Keynote: Stephen Gates, InVision
FXD 2019 Keynote: Stephen Gates, InVision
 
FXD 2019: Brian McLaughlin, Bottomline Technologies
FXD 2019: Brian McLaughlin, Bottomline TechnologiesFXD 2019: Brian McLaughlin, Bottomline Technologies
FXD 2019: Brian McLaughlin, Bottomline Technologies
 
FXD 2019 Keynote: Rob Gifford, Mad*Pow
FXD 2019 Keynote: Rob Gifford, Mad*PowFXD 2019 Keynote: Rob Gifford, Mad*Pow
FXD 2019 Keynote: Rob Gifford, Mad*Pow
 
FXD 2019 Interactive Session: Behavior Based Design
FXD 2019 Interactive Session: Behavior Based DesignFXD 2019 Interactive Session: Behavior Based Design
FXD 2019 Interactive Session: Behavior Based Design
 
FXD 2019 Keynote: Marti Gold, SiriusXM
FXD 2019 Keynote: Marti Gold, SiriusXMFXD 2019 Keynote: Marti Gold, SiriusXM
FXD 2019 Keynote: Marti Gold, SiriusXM
 
FXD 2019 Keynote: Christine Berglund, CapitalOne
FXD 2019 Keynote: Christine Berglund, CapitalOneFXD 2019 Keynote: Christine Berglund, CapitalOne
FXD 2019 Keynote: Christine Berglund, CapitalOne
 
FXD 2019 Keynote: Andy Vitale, SunTrust Bank
FXD 2019 Keynote: Andy Vitale, SunTrust BankFXD 2019 Keynote: Andy Vitale, SunTrust Bank
FXD 2019 Keynote: Andy Vitale, SunTrust Bank
 
FXD 2019 Leadership Round Table
FXD 2019 Leadership Round Table FXD 2019 Leadership Round Table
FXD 2019 Leadership Round Table
 
HXD 2019 Leadership Round Table
HXD 2019 Leadership Round TableHXD 2019 Leadership Round Table
HXD 2019 Leadership Round Table
 
Aline Holzwarth, Pattern Health
Aline Holzwarth, Pattern HealthAline Holzwarth, Pattern Health
Aline Holzwarth, Pattern Health
 
Vanessa Mason, Institute for the Future
Vanessa Mason, Institute for the FutureVanessa Mason, Institute for the Future
Vanessa Mason, Institute for the Future
 
Trina Histon, Aubrey Kraft, W. Scott Heisler, Kaiser Permanente Care Manageme...
Trina Histon, Aubrey Kraft, W. Scott Heisler, Kaiser Permanente Care Manageme...Trina Histon, Aubrey Kraft, W. Scott Heisler, Kaiser Permanente Care Manageme...
Trina Histon, Aubrey Kraft, W. Scott Heisler, Kaiser Permanente Care Manageme...
 

Último

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 

Último (19)

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 

Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn

  • 1. Prepared by: Paul Kahn – Experience Design Director August 28, 2012 Mad*Pow Webinar Twitter: #madpow Maps, Diagrams and Timelines INSPIRATIONFORINTERACTIVEDESIGN
  • 2. Goals of this presentation • “Too much information, not enough space” is not a New Problem • There are many solutions throughout the history of design • What makes design work is in the user’s mind • Whether you work on murals, monitors or mobile phones, inspiration can be found in the underlying principals of good design 2
  • 3. What is a map? 3 La Carte est un secours que l'on fournit par les yeux à l'imagination . The map is an aid provided to the imagination through the eyes. Henri Abraham Châtelain, Atlas historique, 1705 The map is not the territory. Alfred Korzybski, Science and Sanity, 1933 In fact what is meant by information – the elementary unit of information – is a difference that makes a difference. Gregory Bateson, Form, Substance and Difference, 1970 What is information?
  • 4. Henri Abraham Châtelain, Map of Canada or New France 1719
  • 5. Maps That Visualize Networks: Link-Node Diagrams Peutinger Table • 3rd Century Roman road chart Erhard Etzlaub Romweg map • Intended for travelers between Northern Europe and Rome in 1500 Some modern Link-Node Diagrams 5
  • 6. Towns and Roads in Roman Territory, 3rd Century
  • 7. Maps & Diagrams | August 2012 | 7
  • 8. Peutinger Table User-Centered Features: • Icons represent services available on the network • Distance between locations on the same road • Remove space between cities not on the same road
  • 9. England (left) and France (right), Pyrenees (bottom)
  • 11. Erhard Etzlaub’s Romweg 11 • Designed for the pilgrimage year 1500 • Representing the road network connecting Northern Europe to Rome • The map is oriented from the North Sea in the foreground to the Mediterranean Sea at the top.
  • 12. Circles & Dots • 9 dots from Lubeck to Hamborg = 75 miles • 14 dots from Hamborg to Bremen = 126 miles
  • 13. Cold War orientation of Europe and Asia (TIME Magazine 1952) 13
  • 14. Holtzbrinck Web Map by Dynamic Diagrams (1999) 14 North America German Swiss Austrian UK Australasia, S. America, Africa
  • 19. 19 Try to avoid connecting everything to everything…
  • 20. Deforming space to present information 20 Turgot map of Paris engraved by Bretez and Lucas (1734-39) • Isometric projection of streets & architecture: one vertical scale • Widen streets to expose street names & flatten land to expose buildings • Separate size scales for the city and the river
  • 28. Transportation networks: maps or diagrams? 28 Harry Beck’s London Underground map (1933) • The disappearance of above-ground details • Stretching and compressing space to improve legibility • Distorting geographic information to fit a regular grid
  • 32. 32
  • 33. The Real Underground (2004) • Animation created by Sam Rich for the London Transport Museum. 33
  • 34. Eisenhower Interstate System: Realistic Geography 34
  • 35. Eisenhower Interstate System by Chris Yates (2007) 35
  • 36. INTERSTATE: THE U.S. Interstate System by Cameron Booth (2010) 36
  • 37. Metaphor Maps The exterior shape of the map exists as a metaphor in the mind of the viewer. French & German national stereotype maps of Europe (1870) • The map as geographic metaphor containing ideas 37
  • 38. 38 Europe from the French perspective (1870)
  • 39. 39 Europe from the German perspective (1870)
  • 40. Metaphor Maps Fritz Kahn “Man as an Industrial Palace” (1920s) • The human body as a diagram • Homunculus (little man) as vector/actor • Explaining biological process through mechanical metaphor 40
  • 41. 41
  • 42. Man as Industrial Palace animated by Henning Lederer 42
  • 43. Invention of the Timeline Joseph Priestley’s invention of the timeline (1765) • History: alignment of cultures, categories and chronology • Biography: alignment of lifespan and chronology Alfred Barr’s Art History (1935) • Timeline + influence vectors Herbert Bayer’s diagram of the universe (1953) • Cosmology, geology, biology in a single diagram • Spirals, lines, flows and trees 43
  • 47. 47
  • 48. 48
  • 49. 49
  • 50. Herbert Bayer, World Geographic Atlas (1953) 50
  • 51. Data Journalism: Olympics Race Against History (New York Times 2012) 51
  • 52. Techniques used Metaphor Olympic pool as inverted data grid Alignment Swimmer’s horizontal position = year of race Swimmer’s vertical position = time converted to distance from fastest finish Information overlay on the data grid Spotlight on individual swimmer in lane (year) Time barriers as horizontal lines (1 minute, 48 seconds) 52
  • 53. Thank You! 53 Twitter: #madpow Paul Kahn pkahn@madpow.com @pauldavidkahn Contact Information

Notas del editor

  1. Some of these examples are centuries old, some are recent inventions. But regardless of when they were created the most effective are the ones that serves the user’s needs. All of them illustrate ways we can think about, visually manipulate and shape information to make our designs attractive and effective on any form of display, be it a large monitor or a small mobile phone.
  2. Châtelain, Henri Abraham, 1684-1743. Carte du Canada ou de la Nouvelle France & des découvertes qui y ont été faites, dressée sur les observations les plus nouvelles, & sur divers mémoires tant manuscrits qu'imprimez. -- Scale [ca. 1:12 000 000] (W 110º--W 40º/N 78º--N 39º). -- [Amsterdam : Chez Châtelain, 1719].1 map ; 41 x 53 cm.LOCATION: G3400 1719 C5 RBD Maphttp://digital.library.mcgill.ca/pugsley/Pugsmaps21-25.htmhttp://www.mapsofpa.com/antiquemaps21.htm1719.7 CARTE DU CANADA OU DE LA NOUVELLE FRANCE, & DES DECOUVERTES QUI Y ONT ETE FAITES, Dresseesur les observations les plus Nouvelles, & Sur divers Memoires tantManuscritsqu'imprimez, Tom. VI, No. 20, Pag:82; a map of Canada from Atlas Historique by Henri Abraham Chatelain published in Amsterdam circa 1719 (McCorkle #719.1). It includes virtually all of eastern Canada from Baffin Bay to Chesapeake Bay down to 39d, so all of Pennsylvania is included. A boundary line confines the English colonies to the sea coast; Pennsylvania, Maryland, New York, New Jersey, and New England are named, as well as Philadelphia. There are many other boundaries apparently separating Indian nations. The Great Lakes have their present names except Michigan, which is called "Lac de Ilinois." The map extends west to include the upper Mississippi. An inset at upper left gives some "Remarque Historique," naming Verrazzano, Cartier, la Salle, among others. This image shows only the lower half of the map that includes Pennsylvania. Blank verso, longitude apparently east from Ferro. Scale: 1 inch = 220 miles. Size: 16 x 20 inches. http://www.mapsofpa.com/18thcentury/1719chatelain.jpg
  3. This contemporary map shows the area of the Roman world represented on the Peutinger table.The colored dots show the large number of locations recorded on the map, and the lines show the roads represented.To represent this area in a portable format, something that could be easily folded and unfolded by an overland traveler, (click) space is compressed into a chart that 21 feet long (click) but only 1 foot wide.This is done by essentially removing the space covered by water – of no interest to a person traveling by land – and reducing the space between the network of roads.
  4. Click: Here is Canterbury in Southern England separated from the Continent by narrow water.Click: Here is Rennes in Brittany. The dark narrow water below this is the French coast folded up to better show the road and river network.Click: Here is Toulouse in the South of France.Click: Since there are no roads or destinations in the Mediterranean, the sea is a narrow band. And here is Dellys on the Algerian coast.
  5. Distance from Lubeck to Hamborg = 75 miles = 9 dotsDistance from Hamborg to Bremen = 126 miles = 14 dots
  6. Network cloudLayout pulls together nodes with most connectionsAlgorithm produces “groups” represented by colorSize of node = number of connectionsEmphasis on border conditions
  7. “When we understand that slide, we’ll have won the war.”Gen. Stanley A. McChrystal, the leader of American and NATO forces in Afghanistan, April 26, 2010
  8. We begin thinking about the patterns and elements that we’ll need to create our experiences.
  9. When placed on a grid or a carpet, Gestalt principles bring individual elements into a cohesive whole. Aligned and grouped items are linked without the need for additional lines.Groups are established by color and proximity on the grid.
  10. The design can combine different scales and perspectives for different kinds of information.