2. PROJECT 01 VISUALIZE HISTORY
Hasso Plattner Institute of Design
WHAT YOU ARE GOING TO DO? DELIVERABLES OVERVIEW
Long before Facebook and O’Reilly trademarked the Web 2.0 term,
people were using both digital and physical artifacts to create shared 2 Posts to the website by 9am on Thursday January 19th *
meaning and enable collaboration. “Social media” has existed for
decades, but never before at this scale and with this ubiquity. What 1. A inspirational screenshot of the visualization you choose
can we learn from the past to help us design better media solutions in with link plus a 1 paragraph written critique.
the future? 2. A written point of view (1 sentence) plus your exploratory
sketches and your iterated info viz prototype. (Think headline.)
Over the next 2 weeks, you will dig into the history of social media and
create a compelling information visualization that illuminates a pattern 1 Post to the website by 9am on Thursday January 26th *
or anomaly that you uncover and feel matters. The visualization should
be both immediately enticing and ultimately insightful. Hook us with the 3. A high-resolution (at least) 1024 x 768 image of a digital
visual design then give us something to discuss. information visualization to present in class. It will be interpreted on it’s
own, you will not be allowed to explain it in class. Also include your
refined point of view (1 sentence).
* additional details on deliverables are on the next two pages.
WHAT’S THE POINT?
This assignment has 3 goals:
Uncover the long and local history of social media. ADVICE FOR SUCCESS
Gain experience visualizing informational patterns, overlaps, &
anomalies. Do several cycles.
We’re forcing you to do 2rounds just to complete the assignment. Do
Gain experience putting visual design principles into use to more. The more quick iterations you create the better your final project
communicate meaning and emotion to an audience. will be and the more you will learn.
Go deep OR go broad.
The world of social media is vast. You might choose to hone in on one
particular area and provide some deep understanding. Alternatively you
TOOLS & RESOURCES could take a broad view and present a shallower response.
(In ascending order of ease of learning curve. In our estimation, Apple
Keynote is the best combination of ease of use and capabilities.) There is no “correct” answer to this assignment.
Follow your creative instincts to a fruitful area and start visualizing!
Various Grids Ideally your visualization will inform and inspire the class in
http://thegridsystem.org unanticipated ways. Don’t be afraid to try to learn a new skill or master a
new tool. Use of on-line digital tools is encouraged.
Prezi Tutorials
http://prezi.com/learn/
Apple Keynote Tutorials CRITIQUE GUIDELINES
http://www.apple.com/iwork/tutorials/#keynote-hero
The teaching team and your peers will be critiquing your work along the
following three guidelines.
Adobe Illustrator Beginner Tutorials (Simple Icon, General Tutorials, Pen
Tool, Pathfinder Panel)
http://blog.spoongraphics.co.uk/tutorials/beginner-illustrator-tutorial- Did it work?
create-a-vector-rss-icon Did your audience understand your point of view? Were they
http://vectips.com/ inclined to learn more?
http://vector.tutsplus.com/tutorials/tools-tips/illustrators-pen-tool-the-
comprehensive-guide/ Why or why not?
http://vector.tutsplus.com/tutorials/tools-tips/a-comprehensive-guide- Did you effectively employ visual design principles? (see visual
to-the-pathfinder-panel/ design principles pdf)
Does it matter?
Does it reveal novel human-to-human connections?
Does it inspire an emotional response?
3. PROJECT 01 VISUALIZE HISTORY
Hasso Plattner Institute of Design
ASSIGNMENT PART 1
Posted to the website by 9am on Thursday, January 19 for in
class feedback.
First, read the following: Second, find a model & figure out why it works (or doesn’t):
Where the Counterculture Met the New Economy: The WELL Find an information visualization that catches your eye.
and the origins of Virtual Community, By Fred Turner
Examine and critique it based on the depth of it’s insight & the
http://www.stanford.edu/~fturner/Turner%20Tech%20& visual design principles reviewed in class.
%20Culture%2046%203.pdf
The following links can be used for inspiration but you are
Chapter 2 of The Virtual Community , by Howard Rheingold welcome to choose your own.
http://www.rheingold.com/vc/book/2.html http://www.inspiredm.com/20-essential-infographics-data-
A description of the MOMA’s recent acquisition of the “@” visualization-blogs/
symbol http://www.good.is/infographics
http://www.moma.org/explore/inside_out/2010/03/22/at- http://www.smashingmagazine.com/2008/01/14/monday-
moma/ inspiration-data-visualization-and-infographics/
The Fundamental Principles of Analytical Design from Beautiful http://stamen.com/datavisualization
Evidence by Edward Tufte
http://flowingdata.com/2011/12/21/the-best-data-visualization-
To be distributed. projects-of-2011/
http://www.visualcomplexity.com/vc/
Plus at least one additional source from this list (or one of your http://visual.ly/#gc_filter
choosing):
http://jess3.com/
As We May Think, by Vannevar Bush http://informationisbeautiful.net
http://www.theatlantic.com/magazine/archive/1969/12/as-we-
may-think/3881/ http://pinterest.com/source/infographics.blog.hu/
Paul Saffo on the Creator Economy
http://whatmatters.mckinseydigital.com/internet/get-ready-for-
a-new-economic-era Deliverable 1 of 3 : Post to the website by 9am on Thursday,
January 19th:
Clay Shirky on Institutions vs. Collaboration (video)
A inspirational screenshot of the visualization you choose with
http://www.ted.com/talks/ link plus a 1 paragraph written critique.
clay_shirky_on_institutions_versus_collaboration.html
Andy Rutlege : Gestalt Principles of Design &/ or Design Lesson 1
of 1 Third, Create a Prototype to test your point of view and your
core communication device:
http://www.andyrutledge.com/gestalt-principles-1-figure-ground-
relationship.php
Articulate your point of view (what you are trying to communicate
http://www.andyrutledge.com/the-design-lesson.php about the history of social media). Think of your point of view as a
concise statement of intent. What is your visualization
communicating? What is it about? What tension are you trying to
show? What story are you trying to tell? What connections are
you trying to make? What patterns are you trying to reveal?
Explore at least 3 options via physical or digital sketches.
Choose one and create one slightly more refined
Deliverable 2 of 3 : Post to the website by 9am on Thursday,
January 19th:
A written point of view (1 sentence) plus your exploratory
sketches and your iterated info viz prototype. (Think headline.)
4. PROJECT 01 VISUALIZE HISTORY
Hasso Plattner Institute of Design
ASSIGNMENT PART 2
Posted to the website by 12 9am on Thursday, January 26 for in
class presentation.
First, Synthesize the feedback you received in class on January 19th Third, Create Your Final Design:
Point of View Prepare a visual representation of your findings. Use any medium you
How was your point of view or intent received? prefer and use any tools you would like. We recommend Keynote if you
have a Mac. But use whatever you are familiar with. The visualization
Was your audience able to understand it in the way that you had must be presentable in a digital form. (e.g. a beautiful hand drawn mind
hoped? Was it deep enough to generate a thoughtful dialogue? map must be converted to a digital format like .png, .jpg, .tiff etc.).
Visual Design & Clarity
How was your visual design interpreted? Was your audience able to Deliverable 3 of 3 : Post to the website by 9am on Thursday January
make comparisons, see connections, and generate interpretations? 26th:
How well did you employ the design principles articulated in class? A high-resolution (at least) 1024 x 768 image of a digital information
visualization to present in class. It will be interpreted on it’s own, you
will not be allowed to explain it in class. Also include your refined point
of view (1 sentence).
Second, Refine Your Point of View Prototype:
Narrow or Re-Tool your point of view based on the feedback you
received. Try creating a few new variations to try out possible
directions than honing in one one.
Iterate your prototype based on the feedback you received. Simplify
the overall and amplify the specifics that help articulate your point. Aim
for something that is both initially compelling and subsequently
intriguing.