visual thinking: working with pictures

127

Upload: christina-wodtke

Post on 22-Jan-2018

521 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Visual Thinking: Working with Pictures
Page 2: Visual Thinking: Working with Pictures

Visual Thinking

Working with Pictures

Christina Wodtke

Page 3: Visual Thinking: Working with Pictures

Why draw?Think of a chair

Page 4: Visual Thinking: Working with Pictures
Page 5: Visual Thinking: Working with Pictures

1. Communic

ate

Page 6: Visual Thinking: Working with Pictures

2. Problem Solving

Page 7: Visual Thinking: Working with Pictures

3. Listening

and Remember

ing

Page 8: Visual Thinking: Working with Pictures

Who Draws?

Page 9: Visual Thinking: Working with Pictures
Page 10: Visual Thinking: Working with Pictures

Zaha Hadid

Page 11: Visual Thinking: Working with Pictures

Chefs Jason Chan and Grant Achitz

Page 12: Visual Thinking: Working with Pictures
Page 13: Visual Thinking: Working with Pictures
Page 14: Visual Thinking: Working with Pictures
Page 15: Visual Thinking: Working with Pictures
Page 16: Visual Thinking: Working with Pictures

Don’t Worry

Page 17: Visual Thinking: Working with Pictures

Pareidolia

Page 18: Visual Thinking: Working with Pictures

Warm Up

Page 19: Visual Thinking: Working with Pictures
Page 20: Visual Thinking: Working with Pictures
Page 21: Visual Thinking: Working with Pictures

Draw together

Page 22: Visual Thinking: Working with Pictures
Page 23: Visual Thinking: Working with Pictures

What can we make?Let’s start with story….

Page 24: Visual Thinking: Working with Pictures

MIND MAPS

Gather your Thoughts

Page 25: Visual Thinking: Working with Pictures
Page 26: Visual Thinking: Working with Pictures

I feel like drawing slows me down to give me thinking time.

-Andrew Reid

Page 27: Visual Thinking: Working with Pictures

ANDREW REID, GAME DESIGNER

MIND MAPS FOR GAME DESIGN

Page 28: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

HEADER

OF THIS

PAGE

From Rolf Faste’s MindMapping article

The basic principles of mind mapping are:

1 Create a Center Statement.

2 Develop ideas radially outward.

3 Capture ideas quickly.

4 Use lines to show connections.

5 Create train-of-thought structures.

6 Follow an idea as far as it will go.

7 Work from the known to the unknown.

8 Return to the center when ideas are exhausted.

9 Increase density to create richness.

10 Avoid being judgmental.

11 Have fun with the form.

Page 29: Visual Thinking: Working with Pictures

HOW I FEED MYSELF

5 Minutes

Page 30: Visual Thinking: Working with Pictures

STORY

Page 31: Visual Thinking: Working with Pictures
Page 32: Visual Thinking: Working with Pictures
Page 33: Visual Thinking: Working with Pictures
Page 34: Visual Thinking: Working with Pictures
Page 35: Visual Thinking: Working with Pictures
Page 36: Visual Thinking: Working with Pictures
Page 37: Visual Thinking: Working with Pictures
Page 38: Visual Thinking: Working with Pictures
Page 39: Visual Thinking: Working with Pictures

1o minutes: Using your drawing skills, Tell your story

Page 40: Visual Thinking: Working with Pictures

Lunch

Page 41: Visual Thinking: Working with Pictures

1o minutes: Using your drawing skills, Tell your story

Page 42: Visual Thinking: Working with Pictures

One minute pitch.

Page 43: Visual Thinking: Working with Pictures

Dotmocracy

Page 44: Visual Thinking: Working with Pictures
Page 45: Visual Thinking: Working with Pictures

Dan roam

Page 46: Visual Thinking: Working with Pictures

MODEL EVERYTHING!

Five SIX models for making sense

Page 47: Visual Thinking: Working with Pictures

Scott Bernatino

Page 48: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

•Maps, Models,

Canvases

Page 49: Visual Thinking: Working with Pictures

“VISUAL MODELS ARE ALL ABOUT MEANING THROUGH SPATIAL

ARRANGEMENT”- STEPHEN P ANDERSON

Page 50: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

DAVE GRAY

ILLUSTRATION MODEL

Page 51: Visual Thinking: Working with Pictures

SYSTEM MODELS

Map the System

Page 52: Visual Thinking: Working with Pictures

Microwave system model

http://sce.uhcl.edu/whiteta/sdp/createSystemModel.html

Page 53: Visual Thinking: Working with Pictures

BBC Weather

Sitemap http://www.bbc.co.uk/blogs/bbcinternet/2011/11/b

bc_weather_design_refresh.html

Page 54: Visual Thinking: Working with Pictures

From Stone Librande’s One Page Designs

Page 55: Visual Thinking: Working with Pictures

MENTAL MODELS

Understand the Customer’s

Point of View

Page 56: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

Center for research on Environmental Decisions

http://guide.cred.columbia.edu/guide/sec1.html

A mental model represents a person’s thought process for how something works (i.e., A person’s understanding of the surrounding world). Mental models, which are based on often-incomplete facts, past experiences, and even intuitive perceptions, help shape actions and behavior, influence what people pay attention to in complicated situations, and define how people approach and solve problems.

Page 57: Visual Thinking: Working with Pictures
Page 58: Visual Thinking: Working with Pictures
Page 59: Visual Thinking: Working with Pictures

Draw Toast

“Draw a picture of how to make toast. That is, darkened crispy

bread.

Use no words in your diagram.

Try to illustrate the important actions to someone who has never made toast before.”

Page 60: Visual Thinking: Working with Pictures

CONCEPT MODELS

Visual Explanations

Page 61: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

Sunni Brown

Doodle Revolution

Page 62: Visual Thinking: Working with Pictures

ELEMENTS & RELATIONSHIPS

(Systems, a la Brown)

Page 63: Visual Thinking: Working with Pictures

Chris Crawford explains different kinds of playhttp://www.scottkim.com.previewc40.carrierzone.com/thinkinggames/whatisapuzzle/index.html

http://www.erasmatazz.com/library/the-journal-of-computer/jcgd-volume-4/my-definition-of-game.html

Page 64: Visual Thinking: Working with Pictures

Don Norman, Drawn by me.

Page 65: Visual Thinking: Working with Pictures

Dan Roam

Page 66: Visual Thinking: Working with Pictures
Page 67: Visual Thinking: Working with Pictures

Drawn by me, @cwodtke

Page 68: Visual Thinking: Working with Pictures
Page 69: Visual Thinking: Working with Pictures

Freelist all the Elements of a Performance Review

5 minutes

Page 70: Visual Thinking: Working with Pictures

PROCESSES

Page 71: Visual Thinking: Working with Pictures
Page 72: Visual Thinking: Working with Pictures

Today Team explains their offering

Page 73: Visual Thinking: Working with Pictures

Innoenergy Process

Page 74: Visual Thinking: Working with Pictures
Page 75: Visual Thinking: Working with Pictures
Page 76: Visual Thinking: Working with Pictures

Andrew Reid

Page 77: Visual Thinking: Working with Pictures
Page 78: Visual Thinking: Working with Pictures
Page 79: Visual Thinking: Working with Pictures
Page 80: Visual Thinking: Working with Pictures

How to Poach an egg,

by @cwodtke

Page 81: Visual Thinking: Working with Pictures

Draw the process of a performance

review,

Five minutes

Page 82: Visual Thinking: Working with Pictures

ShareHow should it be?

Page 83: Visual Thinking: Working with Pictures

WireFlowsSimple thumbnails to represent the flow of the experience

Page 84: Visual Thinking: Working with Pictures

Wireflow

• Shows how the product works. Screens are sketchy.

• Nodes and Connectors

Page 85: Visual Thinking: Working with Pictures

Draw a flow….5 minutes

Page 86: Visual Thinking: Working with Pictures

One minute pitch.

Page 87: Visual Thinking: Working with Pictures

Dotmocracy

Page 88: Visual Thinking: Working with Pictures

Key ScreenUpsell page, or key value moment

Page 89: Visual Thinking: Working with Pictures

Landing page OR Page demonstrating key value.

Page 90: Visual Thinking: Working with Pictures

Draw the Box

• What’s it called?

• Who’s it for?

• What’s its tagline or slogan?

• What are its most compelling features? Benefits?

• What imagery would make it stand out to you?

Page 91: Visual Thinking: Working with Pictures

DRAW: Key Screen or Box5 minutes

Page 92: Visual Thinking: Working with Pictures

One minute pitch.

Page 93: Visual Thinking: Working with Pictures

Dotmocracy

Page 94: Visual Thinking: Working with Pictures

COMPARISONS

Page 95: Visual Thinking: Working with Pictures
Page 96: Visual Thinking: Working with Pictures

Exploring why

different services

suck in their own

special way. https://medium.com/@cwo

dtke/a-theory-of-form-for-

digital-products-

f5f605adae84#.51ie4d1vq

Page 97: Visual Thinking: Working with Pictures

Uncovering the Secrets of Mammoth Island

Page 98: Visual Thinking: Working with Pictures

Understanding

Comics

Scott McCloud

Page 99: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

2x2’s are ALL about

comparisons!

Page 100: Visual Thinking: Working with Pictures
Page 101: Visual Thinking: Working with Pictures
Page 102: Visual Thinking: Working with Pictures

Drawing Ideas

Page 103: Visual Thinking: Working with Pictures

Separately, Silently Draw a comparison5 minutes

Page 104: Visual Thinking: Working with Pictures

Share Out

Page 105: Visual Thinking: Working with Pictures

CONCEPT MODELSFOR WORK

Page 106: Visual Thinking: Working with Pictures

Kitten Farming concept by Daniel Cook, CCO of SpryfoxFor thinking

Page 107: Visual Thinking: Working with Pictures

Robin Hunicke

Page 108: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

For Communicating

• Conceptual Blueprint by

Andrew Hinton of The

Understanding Group

Page 109: Visual Thinking: Working with Pictures

Stone Librande

Page 110: Visual Thinking: Working with Pictures

Stone Librande

Page 111: Visual Thinking: Working with Pictures

HOW FANCY SHOULD THEY BE?

Page 112: Visual Thinking: Working with Pictures

Stephen p anderson

Page 113: Visual Thinking: Working with Pictures

Bill Verplank

Page 114: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

A simple model you

can draw on a

whiteboard becomes a

meme.

Is this why Lean

Startup is huge?

Page 115: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

Determine the GOAL: how will the model be used, by whom? What is the job of the model? To change minds, explain a concept, simplify complexity?

INVENTORY THE CONCEPTS: brainstorm many parts of your concept. Keep adding more in the margins as you go.

INSPECT THE CONCEPTS: are there many concepts hiding in one? Do you really understand each idea?

Determine the RELATIONSHIPS: how do the concepts interact?

Decision point: do i understand the ideas and what i’m trying to communicate?

Test: ask yourself if the model “feels” right.

If yes, then continue.

ITERATE with words and pictures: talk to yourself and draw it out!

EVALUATE with yourself/the client: keep making sure the drawings match the ideas you wish to communicate. Don’t punk out early! Rest if you need to!

Decision point: does my audience understand the ideas and what i’m trying to communicate?

Test: can my audience answer key questions with the model?

If yes, then continue.

REFINE: use color, type, line weight, and labels to make sure you are communicating clearly.

Page 116: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017Dave gray

What should I draw?

• Consider the elements

Page 117: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017Dave gray | http://www.xplaner.com/visual-thinking-school/

What should I draw?

Consider the purpose

Page 118: Visual Thinking: Working with Pictures

PARTICIPATORYCONCEPT MAPS?!?

Page 119: Visual Thinking: Working with Pictures
Page 120: Visual Thinking: Working with Pictures
Page 121: Visual Thinking: Working with Pictures

Dave gray

Page 122: Visual Thinking: Working with Pictures
Page 123: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

MIND MAPS, to gather your thoughts

CONCEPT MAPS, to organize your understanding

SYSTEM MAPS, to map the system (a tautology, but an accurate one)

MENTAL MODELS, to understand and communicate your user’s understanding

CONCEPT MODELS, to message a way to think about a complex system

Page 124: Visual Thinking: Working with Pictures

And Canvases!

Page 125: Visual Thinking: Working with Pictures

01WORLD IA DAY 2017

Thank you.

Questions?

For workshops & Other inquires:

Christina Wodtke

@Cwodtke

Cwodtke.comArt by Amelie Wodtke Sarrazin

Page 126: Visual Thinking: Working with Pictures
Page 127: Visual Thinking: Working with Pictures

http://evalotta.pancakeapps.com/