2. day 1: january 12, 2012
media maps
class overview
project 1
visual design principles
3. day 1: january 12, 2012
media maps
class overview
project 1
visual design principles
4. Find a Partner
Share an overview of your media use. (3min)
Dig deeper... “What media experience was memorable?” (4min)
How did it make you feel?
What were you trying to accomplish? Why?
How did it facilitate a human to human connection?
6. Share with Partner
Share an overview of your media use. (3min)
Dig deeper... “What media experience was memorable?” (4min)
How did it make you feel?
What were you trying to accomplish? Why?
How did it facilitate a human to human connection?
7. Debrief
What surprised you?
What was your partner trying to accomplish?
What were they motivated by?
8. day 1: january 12, 2012
media maps
class overview
project 1
visual design principles
9. “The wheel is an extension of the foot, the book an extension
of the eye, clothing an extension of the skin, electric circuitry
an extension of the central nervous system”
- Marshall Macluhan
10. “You see, Dad, Professor McLuhan says the environment that man
creates becomes his medium for defining his role in it. The invention
of type created linear or sequential thought, separating thought from
action. Now, with TV and folk singing, thought and action are closer
and social involvement is greater. We again live in a village. Get it?”
- New Yorker, 1966
14. day
01
1 project
2
Show Me Visual design
What do they see?
3
02
4 project
5
Move Me Interaction design
How do they use it?
6
03
7 project
8
Motivate Me Emotional design
Why do they care?
9
10
15. Project Cycle
day
1 Project Launch
Content Lecture or Activity
day
2 Guest Practitioner
Collaborative Critique
day
3 Final Project Presentation
16. day 1: january 12, 2012
media maps
class overview
project 1
visual design principles
17. part 1 : due Thursday, Jan 19th
part 2 due Thursday Jan 26th
19. PROJECT 01 VISUALIZE HISTORY
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 meaning and enable collaboration. “Social 2 Posts to the website by 9am on Thursday January 19th *
media” has existed for decades, but never before at this scale and with this ubiquity. What
can we learn from the past to help us design better media solutions in the future? 1. A inspirational screenshot of the visualization you choose with link plus a 1
paragraph written critique.
2. A written point of view (1 sentence) plus your exploratory sketches and your
Over the next 2 weeks, you will dig into the history of social media and create a compelling iterated info viz prototype. (Think headline.)
information visualization that illuminates a pattern or anomaly that you uncover and feel
matters. The visualization should be both immediately enticing and ultimately insightful. Hook
us with the visual design then give us something to discuss. 1 Post to the website by 9am on Thursday January 26th *
3. 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).
WHAT’S THE POINT?
* additional details on deliverables are on the next two pages.
This assignment has 3 goals:
Uncover the long and local history of social media.
Gain experience visualizing informational patterns, overlaps, & anomalies. ADVICE FOR SUCCESS
Gain experience putting visual design principles into use to communicate meaning and
emotion to an audience.
Do several cycles.
We’re forcing you to do 2rounds just to complete the assignment. Do more. The more quick
iterations you create the better your final project will be and the more you will learn.
Go deep OR go broad.
TOOLS & RESOURCES
The world of social media is vast. You might choose to hone in on one particular area and
(In ascending order of ease of learning curve. In our estimation, Apple Keynote is the best provide some deep understanding. Alternatively you could take a broad view and present a
combination of ease of use and capabilities.) shallower response.
Various Grids
There is no “correct” answer to this assignment.
http://thegridsystem.org
Follow your creative instincts to a fruitful area and start visualizing! Ideally your visualization
will inform and inspire the class in unanticipated ways. Don’t be afraid to try to learn a new skill
Prezi Tutorials or master a new tool. Use of on-line digital tools is encouraged.
http://prezi.com/learn/
Apple Keynote Tutorials
http://www.apple.com/iwork/tutorials/#keynote-hero CRITIQUE GUIDELINES
Adobe Illustrator Beginner Tutorials (Simple Icon, General Tutorials, Pen Tool, Pathfinder The teaching team and your peers will be critiquing your work along the following three
Panel) guidelines.
http://blog.spoongraphics.co.uk/tutorials/beginner-illustrator-tutorial-create-a-vector-rss-
icon Did it work?
http://vectips.com/ Did your audience understand your point of view? Were they 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-to-the-pathfinder-
panel/ Did you effectively employ visual design principles? (see visual design principles pdf)
Does it matter?
Does it reveal novel human-to-human connections?
Does it inspire an emotional response?
27. PROJECT 01 VISUALIZE HISTORY
ASSIGNMENT PART 1
Second, find a model & figure out why it works (or doesn’t):
Posted to the website by 9am on Thursday, January 19 for in class feedback.
Find an information visualization that catches your eye.
First, read the following: Examine and critique it based on the depth of it’s insight & the visual design principles
reviewed in class.
Where the Counterculture Met the New Economy: The WELL and the origins of The following links can be used for inspiration but you are welcome to choose your
Virtual Community, By Fred Turner own.
http://www.stanford.edu/~fturner/Turner%20Tech%20&%20Culture http://www.inspiredm.com/20-essential-infographics-data-visualization-blogs/
%2046%203.pdf
http://www.good.is/infographics
Chapter 2 of The Virtual Community , by Howard Rheingold
http://www.smashingmagazine.com/2008/01/14/monday-inspiration-data-
http://www.rheingold.com/vc/book/2.html visualization-and-infographics/
A description of the MOMA’s recent acquisition of the “@” symbol http://stamen.com/datavisualization
http://www.moma.org/explore/inside_out/2010/03/22/at-moma/ http://flowingdata.com/2011/12/21/the-best-data-visualization-projects-of-2011/
The Fundamental Principles of Analytical Design from Beautiful Evidence by Edward http://www.visualcomplexity.com/vc/
Tufte
http://visual.ly/#gc_filter
To be distributed.
http://jess3.com/
http://informationisbeautiful.net
Plus at least one additional source from this list (or one of your choosing):
http://pinterest.com/source/infographics.blog.hu/
As We May Think, by Vannevar Bush
http://www.theatlantic.com/magazine/archive/1969/12/as-we-may-think/3881/
Paul Saffo on the Creator Economy
Deliverable 1 of 3 : Post to the website by 9am on Thursday, January 19th:
http://whatmatters.mckinseydigital.com/internet/get-ready-for-a-new-economic-era
A inspirational screenshot of the visualization you choose with link plus a 1 paragraph
Clay Shirky on Institutions vs. Collaboration (video) written critique.
http://www.ted.com/talks/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
http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php device:
http://www.andyrutledge.com/the-design-lesson.php
Articulate your point of view (what you are trying to communicate 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.)
28. PROJECT 01 VISUALIZE HISTORY
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 prefer and use any
How was your point of view or intent received? tools you would like. We recommend Keynote if you have a Mac. But use whatever you are
Was your audience able to understand it in the way that you had hoped? Was it deep familiar with. The visualization must be presentable in a digital form. (e.g. a beautiful hand
enough to generate a thoughtful dialogue? drawn mind map must be converted to a digital format like .png, .jpg, .tiff etc.).
Visual Design & Clarity Deliverable 3 of 3 : Post to the website by 9am on Thursday January 26th:
How was your visual design interpreted? Was your audience able to make comparisons, see A high-resolution (at least) 1024 x 768 image of a digital information visualization to present
connections, and generate interpretations? How well did you employ the design principles in class. It will be interpreted on it’s own, you will not be allowed to explain it in class. Also
articulated in class? 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.
29. day 1: january 12, 2012
media maps
class overview
project 1
visual design principles
30. CONTRAST.
Visual design is all about contrast. Differences breed drama and
add meaning and visual interest. Contrast can take several forms.
Contrast is especially useful to emphasize bits and guide the eye.
31. USE TREATMENT TO CONVEY MEANING (&
EMOTION).
Everything on the page communicates something. Color, Shape, Texture,
Directionality, and Repetition are all at your disposal. Use them to be
expressive.
32. CLARIFY TO AMPLIFY.
“Less is more.” - Mies Van Der Rohe
The more you leave out details that don’t illuminate your main point the more
your point will shine through.
33. ADD AN ANALOGY.
Analogies are doubly beneficial. A good analogy gives you a theme to follow
and helps you narrow in on what treatment and colors to use. Additionally, it
provides a viewer with backstory and a set of ideas to start to make sense of
what you are presenting.
34. CONSIDER THE WHOLE ABOVE THE PARTS.
Individual parts are important in how they construct a coherent whole and Consider all the parts in relation to each other and in how they affect the
how they inform each other. Consistency across elements, be it in color, continuity of the overall composition.
shape, scale, or texture is critical in reading a design as a coherent whole.
Variation within these constraints then allows the parts to be distinguished.
35. DESIGN WITH STRUCTURE.
Why not begin with structure? Once it is established, it is easy to violate. Grid,
for example, are a great place to start.
36. USE TYPE AS A VISUAL OBJECT.
“Combining typefaces is like making a salad. Start with a small number of mushy transitions. Give each ingredient a role to play: sweet tomatoes,
elements representing different colors, tastes, and textures. Strive for crunchy cucumbers, and the pungent shock of an occasional anchovy.”
contrast rather than harmony, looking for emphatic differences rather than - Ellen Lupton, Thinking with Type
