Pencils and Pixels : Drawing Final Project
Transcript of Pencils and Pixels : Drawing Final Project
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 1/11
Pencils and Pixels:
An Exploration of Physical and Digital Sketch
Techniques for Tangible Interaction Design
Solomon BiskerMethodologies of Visualization (Design Drawing I)
Fall 2009, Carnegie Mellon University
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 2/11
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 3/11
All o the works in this project were created using a hybrid o physical pencil, pen and marker sketching techniques learned in this class, and digi-
tal design tool techniques learned during my career as an Interaction Designer. The objective o my project was to explore how blending physical
and digital sketching techniques could boost my repertoire o sketching skills as I pursue my Masters degree in Tangible Interaction Design. My
hypothesis in starting this project was that sketching tangible interactions poses unique challenges that neither hand-sketching nor digital mock-
ups alone are currently suited to tackle. This elt like it would be particularly true in interactions that have environmental context (“mobile” or built
environment scenarios) and interactions that involve posing and positioning o the the human body (touch screens, hand-held objects, and the
like.) To that end, I came up with simple scenarios o tangible interactions that I elt might benet strongly rom these hybrid techniques. Then, or
each scenario, I attempted to use both hand-sketching and digital manipulation o sketches to play to the strengths and weaknesses o both medi-
ums in developing nal concept sketches or each scenario.
Beore we dive into these interaction scenarios, there are ew general tips worth noting that are useul to anyone creating or digitizing hand-drawn
sketches or later digital manipulation. By reading these general tips upront, the reader will hopeully be able to ollow my individual techniques at
home without making the same mistakes I did.
I possible, use a high-quality color scanner
or your work. The scanned image on the let
was rom a proessional color scanner. The
colors in the image are much richer (and truer
to the original sketch) than those captured by
the “consumer” color scanner in the image on
the right.
I you intend to scan your drawings
in black and white to eliminate the
paper color, make sure no marker
bleeds through rom the other side
o the page. In this case, a light
marker was translated to pitch
black, rendering the lines under that marker unusable.
Drawings o actual interaces will not stretch or skew cleanly to match the ac-
tual dimensions o your screen. This means that to get an interace drawing to
drop into a photo clearly, you will want to measure out the proper sspect ratio
o the device and translate that directly to the paper beore sketching (perhaps
practicing to try to achieve dimensions close to that ratio rom memory, i you
are looking to digitize quick skteches rom brainstorming sessions.)
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 4/11
Digital designs oten play to the
strengths o digital design tools. One
such strength is the ability to make
pixel-perect lines and shapes, which
can be used to emphasize simplicity
o orm. This is seen in public sig-
nage, where “bathroom man” gures
are recognizable and perect in orm.
And yet, the bathroom man invari-
ably eels almost *too* perect. Thisrefects the inability o digital tools to
let one sketch the subtilty o a person
in a pose.
Here, I’ve used sketching to capture
a “pose” o a “bathroom man” doing
a real action (in this case, one o my
proessors giving a speech). Then,
digital tools add precision without los-
ing the humanity o the pose.
I began by capturing the signage orm o o a bathroom sign,
and then applying that orm to various people I encountered.
Here, I was working through how shoulder height
and angle infuences attitude.
I experimented with sitting poses o students, but decided that having to then stylize
the student’s chairs would detract rom their poses.
As my proessors stood beore my classes, I realized that the signage orm let much room or capturing a pose’sspirit in arm movement and head position.
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 5/11
I attempted to recreate the purity o the “bathroom man” by overlaying basic
circles, lines and other shapes on top o my raw sketch. In this way, I was ableto recapture my original angles, both o the head tilt and o the arm gesticula-
tion. Once I brough the shapes into the right poses to capture the sketch,
the shapes had to be resized in order to better capture the idealized propor-
tions o a signage gure. In this sense, while my sketch might have captured
the *pose* more aithully, I then needed technology to help me tighten those
overly thick thighs, pull up that torso and otherwise make my person more
“idealized.” The end result is “the ideal man,” albeit in an oddly human pose.
The biggest ailing I saw was one o perspective - most sign people are drawn
head-on, and it was dicult or me to capture the pose while maintaining that
head-on eel. All digital work done in Adobe Illustrator.
I recreated the angles and positioning o the body parts in Illustrator as a series o rectangles with rounded ends,eventually adding a skewed rectangle as a torso that would capture shoulder position.
Once the shape began to take orm, I began manually correcting the proportions on my sketch by adjusting shape sizes. It was crucial working with vectors in Illustra-
tor (as opposed to bitmaps in Photoshop) to maintain the smoothness in the shapes as these scaling tweaks were made.
I ound mysel getting more and more nitpicky with the orm as the shape entered a“uncanny valley” o idealized orm.
I ultimately wound up reerencing a real bathroom sign to bring it to an idealized state.
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 6/11
Interaction design increasingly needs to incorpate the context o physical space into
the design o digital products. It is oten not the interace at all that has to be envi-
sioned, but rather the motions the body goes through - and how the digital aspects o
product relates to that physical motion - that needs to be sketched and storyboarded.
A colleague’s research on the impact o pico-projectors on the virtual pet movement
inspired me to sketch out a vision or walking a virtual dog. In this sketch, my physical
hand drawings had to capture the tactile eeling o “leading” a dog, while the digital
alterations to the sketch needed to approximate the virtuality and hyper-realism o a
“projected pet” in a realistic manner.
I started by trying to capture the shape o the hand,”clenching” the hand to emulate
holding a leash and working on thumb grip.
I then took my improved hand drawings and rened then in the context o projection, explor-
ing how a person would “project” their pet.
Finally, I explored how to rame the context itsel - realizing that people would want to project the pet at a
certain size, and in proper relation to their walking.
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 7/11
I decided to ocus on projecting
a “real” pet, using Flickr to nd
royalty-ree pictures o dogs in
approximate poses appropriate
or the story. I then used Adobe
Photoshop to digitally edit the
dog out o its original photo and
to scale it appropriately to t
into the user’s projection space
both size-wise and perspective-
wise. Finally, tweaks was added
to emulate the pico-projector’s
actual operation.
Ater nding a dog in an appropriate pose on Flickr, the Photoshop “Magic Wand” tool was used to remove much o thegrass rom the scene (with hand-erasing removing the rest.)
I discovered that the picture o the dog was captured at too low o a resolution to t nicely with the resolution o the drawing. Since the drawing was a stylized image, I
lowered the resolution o the drawing so the dog would appear “realistic” in the context o the scene.
A white blur was added to the scene where the
projector would eminate light out o the user’s grip.
The nal edited dog picture was made slightly transparent, to re-
fect potential weakness in the projector’s strength.
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 8/11
This envisionment was done with similar motivation to the pi-
co-projector sketches, except that I now wanted to see how
my existing 2D interaction design tools (OmniGrafe, Visio,
etc) could be used in sketches o a real world interaction.
Rather than a “user’s eye view”, a straight on third person
perspective was used in my sketch such that the 2D inter-ace wouldn’t need to be skewed to match the scene. My
hope was that the sketch would let me see whether a human
body’s proportions would be compatible with a touchscreen
interace or nding rideshares I had created or city use.
I started by exploring the human orm, trying to aithully sketch a person acing away rom
me, with his arm raised as i to touch the touchscreen.
This process took some time - it turns out I had trouble imagining just how the back o ones
body looks, in terms o shape, angle and proportion.
Eventually, my sketches converged on an acceptable body orm, and I explored the use o
marker to add clothing which would emphasize that orm.
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 9/11
Again, Adobe Photoshop was the appropriate tool
- but this time, it was needed to digitaly modiy thesketch itsel. Specically, the portion o the per-
son intersecting the screen was digitally removed,
with areas o the sketch without body parts being
rendered transparent. This allowed me to paste my
screenshot to scale directly into the scene.
The sketch showed me that my interace was sucient or an urban touch
screen context, but arguably did not take enough advantage o the screenspace
I had been provided. My gure’s arm seems to have a higher precision o point-
ing than I would have expected at this scale and distance rom the screen. As a
result, I suspect the entire interace could have either packed in more inorma-
tion or been placed into a smaller orm actor without sacricing usability.
The part o the body gured that intersected with the scene was copied and pasted onto a new Photo-
shop le in order to render the background transparent.
The 2D screen mockup was then dropped on where the person had previously been. The screen was
stretched slightly to t the drwaing, as the aspect ratio was inconsistent between my UI and the drawing.
Finally, the top o the person was reattached to his body on top o the screen,
as i to reconstruct the designed scene by layers.
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 10/11
My last envisionment tried to take an opposite approach to my typical interace sketching technique - drop-
ping a hand-drawn interace into a digital photo or other context (as opposed to using Visio to mock it up and
dropping that into the photo.) I thought perhaps this might be useul to test out interaces very, very early in a
sketching process, where it is unclear whether or not it’s worth the time to even mock up an idea in Visio. In
this example, I tried to create a ake mobile Treemap news interace or placing onto a photo o my holding an
iPhone screen.
I tried to improve the boundaries o the display screen by ocusing on keeping the lines parallel, but I ound that made
me pay less attention to giving the screen a proper width-height ratio.
Once the shape began to take a proper orm, I began to play with drawing the interace itsel in a “sketchy” manner to ocus on issues o layout and
size. I did this by blurring out system elements and smaller interace text.
Most o my issues in sketching this interace came rom sketching the outline o the screen.
An incorrect shape would look wrong immediately in the context o a photographed photo.
8/14/2019 Pencils and Pixels : Drawing Final Project
http://slidepdf.com/reader/full/pencils-and-pixels-drawing-final-project 11/11
I created this rendering in Adobe Photoshop o my interace projected onto a
photo to see how the interace might eel in the palm o my hand. This seems to
quickly let me see how interace elements might relate to, say, the shape o my
hand and my thumb. It seemed clear rom this composite sketch that buttons on
a Treemap interace would be clickable on this scale, and this might have encour-
aged me to explore the concept or a design urther in Visio. However, I realized
quickly that or hand-drawn interaces, it becomes that much more important to
draw the interace aspect ratio correctly. Visio-created interaces - especially
those done in vector - might stretch to t your drawings, but your drawn interaces
will not stretch as cleanly to match your photographs.
Above: An attempt at shrinking the photo to match the drawn
screen’s aspect ratio.
Below: An attempt opposite o that above - trying to stretch the
interace drawing itsel to match the photograph. In this case,
stretching the interace works better than shrinking the picture,
but neither looks ideal.
Photoshop’s Magic Lasso tool was used to select and copy the interace sketch so it could be pasted into the photograph. Similar to the dog photo earlier,our photo is too high resolution or our sketch to t the scene - so I scaled down the photo resolution to match the drawing.
Then, the image was cleaned up with the Eraser tool beore Free Transorm was used to rotate the sketch to match the angle o the
screen in the user’s palm. An additional Free Transorm on the photo itsel was then used to scale it to the size o the drawing.
The rst attempt (the upper o the two nal results shown at right) looked too
squished, so I tried again, this time using the original photo and applying a second
Free Transorm to the drawing to match the device screen’s actual aspect ratio.