Games for Visual Thinking
Scott Kim • shufflebrain.com
Adobe, Feb 5, 2009

Puzzles

I design puzzles
PRINT TOYS COMPUTER

Games for visual thinking
AMBIGRAMS DESIGN EDUCATION PHOTOGRAB

AMBIGRAMS
Ambigrams
Visual wordplay

What letter is this?

Hint: it’s not L

Answer

A puzzle is a problem that is
fun to solve and has a right answer
As opposed As opposed
to everyday to a toy or a
“problems” game

A puzzle is a problem that is
fun to solve and has a right answer
As opposed As opposed
to everyday to a toy or a
“problems” game

A puzzle is a problem that is
fun to solve and has a right answer
As opposed As opposed
to everyday to a toy or
“problems” a game

Ambigrams
One type of visual puzzle I’ve explored is ambigrams — words
written so they read in more than one way. Here are some
ambigram logos (not by me).

Ambigrams I’ve created
See more of my ambigrams at http://scottkim.com

Make your own ambigrams
chump

Write this word in connected cursive, leave
bowl of P slightly open. Instant ambigram!
USA

Write this so it reads the same right side up
and upside down. S is easy. What about U/A?
Adobe

Write this so it reads the same upside down.
Can you do it?

DESIGN EDUCATION
Design Education
Puzzles that change how you think

Working within a fixed form
Most puzzle designers work within an existing form

Topic: Letter parts
I let the topic dictate the form. For instance, what
puzzle teaches the parts of letters?

Vocabulary
1. A vocabulary puzzle reinforces names, not concepts.

Multiple choice quiz
2. A visual quiz puzzle reinforces concepts.

Puzzle (adobe.com)
3. A perceptual puzzle, like this one from adobe.com,
trains thinking. Match each detail with a letterform.

Counter Proposal (NewMedia)
Here’s a perceptual puzzle from NewMedia about fonts.
Spaces in & around letters are “counters”.

Counter Proposal (NewMedia)
Match each counter with the letter it is from.

Myst
Grayscale painting
Elevation map
3D rendered image
The artists behind Myst converted a gray scale painting
into an elevation map. White=high, black=low.

Cybermesh
I made this into a puzzle by using CyberMesh, a
Photoshop plugin by John Knoll, author of Photoshop.

Normal Face
Here’s how Cybermesh turns a grayscale image of
John’s face into a 3D mesh.

Inverted
Changing the grayscale image changes the mesh. E.g.
inverting black and white turns the mesh inside out.

Posterized
Posterizing the image creates stairsteps.

Pinch
Pinching the image enlarges the nose.

Blurred
Blurring the image creates this ghostly face.

Finished puzzle
The finished puzzle: Match each image with a 3D mesh.

Surfaces of revolution

Surfaces of revolution
Match pairs of shapes made from the same cross-section.

Color

Morphing

Animation

Logo design

Magazine puzzles
A way of writing about a topic

Regular puzzles increase loyalty

Contests increase involvement


VizAbility
Interactive puzzles let you do more with 3D.

Vase/Profile
Figure/ground is a concept that works well as a game.
The figure here is the vase, the ground is the faces.

Escher

Simplify
To make this visual illusion interactive, first simplify
the shapes by putting them on a grid.

Make Interactive
If you drag a black object, there’s white underneath.
If you drag a white object, there’s black underneath.

Figure Ground game
Play this game at http://clockworkgoldfish.com/figureground/play.php
To play this particular puzzle, click on List, then scroll down to Sky.

PHOTOGRAB
Photograb
Brain games meet social media

Three trends
1. Casual games
BEJEWELED ROCK BAND
Electronic games are now for everyone, not just teenage boys.

Three trends
1. Casual games
2. Mental fitness
SUDOKU BRAIN AGE
People want to exercise their brains, not just their bodies.

Three trends
1. Casual games
2. Mental fitness
3. Social media
FACEBOOK YOUTUBE
Media is now produced by everyone, distributed everywhere.

Games for healthy lifestyle
Healthy + Stylish = On trend
The three trends add up to games as part of a healthy lifestyle.

Photograb
Our first game is Photograb. Goal is to find details in a photo.
Photograb exercises visual perception.

Photograb
Players can put in their own photos. This image is from Adobe Lightroom’s Melissa Gaul.
Play this game at http://shufflebrain.com/standalone/photograb.html?mediaSetID=1096

Photograb
Player-generated content

Syndicated games live on your site.

Rating system


Next game: Wordstream

Conclusions
Conclusions

Games for visual thinking
AMBIGRAMS DESIGN EDUCATION PHOTOGRAB
Games can be used to teach and exercise visual thinking.

Interaction design
Like interaction design, puzzle design is about creating a good
user experience. Except the path from start to end is trickier.

Thank You
shufflebrain.com