• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Visual Design Day 1
 

Visual Design Day 1

on

  • 380 views

 

Statistics

Views

Total Views
380
Views on SlideShare
346
Embed Views
34

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 34

http://dschool.stanford.edu 34

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Visual Design Day 1 Visual Design Day 1 Presentation Transcript

    • Hasso Plattner Institute of Design
    • day 1: january 12, 2012 media maps class overview project 1 visual design principles
    • day 1: january 12, 2012 media maps class overview project 1 visual design principles
    • 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?
    • Switch Partners
    • 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?
    • Debrief What surprised you? What was your partner trying to accomplish? What were they motivated by?
    • day 1: january 12, 2012 media maps class overview project 1 visual design principles
    • “The wheel is an extension of the foot, the book an extensionof the eye, clothing an extension of the skin, electric circuitry an extension of the central nervous system” - Marshall Macluhan
    • “You see, Dad, Professor McLuhan says the environment that man creates becomes his medium for defining his role in it. The inventionof type created linear or sequential thought, separating thought from action. Now, with TV and folk singing, thought and action are closerand social involvement is greater. We again live in a village. Get it?” - New Yorker, 1966
    • “Design is the realization of ideas”
    • Realizing ideas in the digital domain
    • 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? 910
    • Project Cycle day 1 Project Launch Content Lecture or Activity day 2 Guest Practitioner Collaborative Critique day 3 Final Project Presentation
    • day 1: january 12, 2012 media maps class overview project 1 visual design principles
    • part 1 : due Thursday, Jan 19th part 2 due Thursday Jan 26th
    • Hasso Plattner InstituteHISTORY PROJECT 01 VISUALIZE of Design
    • 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?
    • http://www.statisticsblog.com/wp-content/uploads/2010/05/TufteNapoleon.png
    • 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.)
    • 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.
    • day 1: january 12, 2012 media maps class overview project 1 visual design principles
    • CONTRAST.Visual design is all about contrast. Differences breed drama andadd meaning and visual interest. Contrast can take several forms.Contrast is especially useful to emphasize bits and guide the eye.
    • 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 beexpressive.
    • CLARIFY TO AMPLIFY.“Less is more.” - Mies Van Der RoheThe more you leave out details that don’t illuminate your main point the moreyour point will shine through.
    • ADD AN ANALOGY.Analogies are doubly beneficial. A good analogy gives you a theme to followand helps you narrow in on what treatment and colors to use. Additionally, itprovides a viewer with backstory and a set of ideas to start to make sense ofwhat you are presenting.
    • 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 thehow 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.
    • 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.
    • 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
    • Hasso Plattner Institute of Design