Image for post
Image for post

A Visual Vocabulary for Concept Models

Part One: Rendering Relationships

Christina Wodtke
Mar 25, 2017 · 12 min read
Image for post
Image for post
Concept Sketches by Brian Gulassa, Toy Designer and fellow CCA professor
Image for post
Image for post
My drawing Scott Berninato’s chart of charts
Image for post
Image for post
The Design Squiggle http://cargocollective.com/central/The-Design-Squiggle

Like language, visual communications abstract and schematize; unlike language, they use properties of the page (e.g., proximity and place: center, horizontal ⁄ up–down, vertical ⁄ left–right) and the marks on it (e.g., dots, lines, arrows, boxes, blobs, likenesses, symbols) to convey meanings. — Barbara Tversky

This is what makes up a visual vocabulary. Proximity, place & marks.

System Concept Model

Image for post
Image for post
Image for post
Image for post
Exploded View Diagram, by Brian Gulassa, toy designer.
Image for post
Image for post
Learn more http://study.com/academy/lesson/bubble-diagrams-in-architecture-interior-design.html
Image for post
Image for post
http://dis.bobulate.com/work/ted/
Image for post
Image for post
https://www.behance.net/susanmoller
Image for post
Image for post
https://doriantaylor.com/characterizing-the-information-architecture-institute

Process Concept Model

Image for post
Image for post
Image for post
Image for post
me, notes from culinary school
Image for post
Image for post
http://www.lostgarden.com/2012/04/loops-and-arcs.html
Image for post
Image for post
https://virtualeconomists.myshopify.com/blogs/news/tagged/mobile-games
Image for post
Image for post
http://mentalfloss.com/article/69213/creative-flowchart-used-walt-disney
Image for post
Image for post
Image for post
Image for post
https://medium.com/@davidjbland/7-things-i-ve-learned-about-lean-startup-c6323d9ef19c#.jyay2ikp0
Image for post
Image for post
http://grahamtodman.co.uk/blog/category/wireflow/
Image for post
Image for post
Loops within arcs! Arcs within loops! good times! https://conversionxl.com/customer-journey-maps-better-website-retention/

Models for Comparison

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Learn to use it here http://www.xplaner.com/visual-thinking-school/
Image for post
Image for post
You know SWOT, but do you recall it’s helpful-harmful, internal-external? Position in space has meaning.
Image for post
Image for post
http://feedbackacademy.dk/en/joharis-window/
Image for post
Image for post
http://www.businessballs.com/johariwindowmodel.htm
Image for post
Image for post
http://casualgamerevolution.com/about/what-is-a-casual-game
Image for post
Image for post
http://chasingdelicious.com/kitchen-101-coffee-roasting-brewing/

Combinations & Metaphors

Many of the ideas we wish to communicate have more than one type of relationship happening. For example, if we want to describe how people change over time, we need to use both Process+Comparison.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
  1. Pyramids narrow as you move up, which suggests not everyone makes the climb. Some people will stay at the bottom of the pyramid, through choice or circumstance.
Image for post
Image for post
https://www.slideshare.net/stephenpa/place-in-space-aka-how-to-design-a-concept-model
Image for post
Image for post
http://precoil.com/
Image for post
Image for post
From Laura Klein’s Build Better Products
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
I want to point out I’m completely making stuff up at this point, and it is my theory and mine alone that sales and market can expand your market share. Still, I suspect sales and marketing is the right name for those bridges.
Image for post
Image for post
Giorgia Lupi explores

Building a Visual Vocabulary

When I first started to make models, I reached for whatever model I felt comfortable with. It means I made a lot of Venn diagrams and 2x2’s.

Image for post
Image for post
http://extremepresentation.typepad.com/blog/2015/01/announcing-the-slide-chooser.html
Image for post
Image for post
http://sachachua.com/blog/2012/04/visual-metaphors-change/
Image for post
Image for post
http://www.christophniemann.com/portfolio/my-life-in-illustration/
Image for post
Image for post
One of my many pages of copying other people.

Why?

The payoff is clarity, efficiency, and on a good day, humor.

Image for post
Image for post
How’d that thing get in here?
Image for post
Image for post

Addendum

I got the original steve blank reference from David J Bland, and boy was I off! But as I said, I wanted to demonstrate exploring metaphors, and that I did.

Image for post
Image for post
Image for post
Image for post

More on Visual Thinking

How to Make a Concept Model
Five Models for Making Sense of Complex Systems
Alphabets and Ideographs
Books on Drawing
More …

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store