Professional Documents
Culture Documents
Solomon Bisker
Methodologies of Visualization (Design Drawing I)
Fall 2009, Carnegie Mellon University
All of the works in this project were created using a hybrid of 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 of my project was to explore how blending physical
and digital sketching techniques could boost my repertoire of 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 felt like it would be particularly true in interactions that have environmental context (“mobile” or built
environment scenarios) and interactions that involve posing and positioning of the the human body (touch screens, hand-held objects, and the
like.) To that end, I came up with simple scenarios of tangible interactions that I felt might benefit strongly from these hybrid techniques. Then, for
each scenario, I attempted to use both hand-sketching and digital manipulation of sketches to play to the strengths and weaknesses of both medi-
ums in developing final concept sketches for each scenario.
Before we dive into these interaction scenarios, there are few general tips worth noting that are useful to anyone creating or digitizing hand-drawn
sketches for later digital manipulation. By reading these general tips upfront, the reader will hopefully be able to follow my individual techniques at
home without making the same mistakes I did.
If possible, use a high-quality color scanner If you intend to scan your drawings Drawings of actual interfaces will not stretch or skew cleanly to match the ac-
for your work. The scanned image on the left in black and white to eliminate the tual dimensions of your screen. This means that to get an interface drawing to
was from a professional color scanner. The paper color, make sure no marker drop into a photo clearly, you will want to measure out the proper sspect ratio
colors in the image are much richer (and truer bleeds through from the other side of the device and translate that directly to the paper before sketching (perhaps
to the original sketch) than those captured by of the page. In this case, a light practicing to try to achieve dimensions close to that ratio from memory, if you
the “consumer” color scanner in the image on marker was translated to pitch are looking to digitize quick skteches from brainstorming sessions.)
the right. black, rendering the lines under
that marker unusable.
I began by capturing the signage form off of a bathroom sign, Here, I was working through how shoulder height
and then applying that form to various people I encountered. and angle influences attitude.
Once the shape began to take form, 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 found myself getting more and more nitpicky with the form as the shape entered a“uncanny valley” of idealized form.
I ultimately wound up referencing a real bathroom sign to bring it to an idealized state.
I then took my improved hand drawings and refined then in the context of projection, explor-
ing how a person would “project” their pet.
Interaction design increasingly needs to incorpate the context of physical space into
the design of digital products. It is often not the interface at all that has to be envi-
sioned, but rather the motions the body goes through - and how the digital aspects of
product relates to that physical motion - that needs to be sketched and storyboarded.
A colleague’s research on the impact of pico-projectors on the virtual pet movement
inspired me to sketch out a vision for walking a virtual dog. In this sketch, my physical
hand drawings had to capture the tactile feeling of “leading” a dog, while the digital
alterations to the sketch needed to approximate the virtuality and hyper-realism of a
“projected pet” in a realistic manner.
Finally, I explored how to frame the context itself - realizing that people would want to project the pet at a
certain size, and in proper relation to their walking.
After finding a dog in an appropriate pose on Flickr, the Photoshop “Magic Wand” tool was used to remove much of the
grass from the scene (with hand-erasing removing the rest.)
I discovered that the picture of the dog was captured at too low of a resolution to fit nicely with the resolution of the drawing. Since the drawing was a stylized image, I
lowered the resolution of the drawing so the dog would appear “realistic” in the context of the scene.
This process took some time - it turns out I had trouble imagining just how the back of ones
body looks, in terms of shape, angle and proportion.
Eventually, my sketches converged on an acceptable body form, and I explored the use of
marker to add clothing which would emphasize that form.
The part of the body figured that intersected with the scene was copied and pasted onto a new Photo-
shop file 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 fit the drwaing, as the aspect ratio was inconsistent between my UI and the drawing.
Again, Adobe Photoshop was the appropriate tool
- but this time, it was needed to digitaly modify the
sketch itself. Specifically, the portion of the per-
son intersecting the screen was digitally removed,
with areas of the sketch without body parts being
rendered transparent. This allowed me to paste my
Finally, the top of the person was reattached to his body on top of the screen, screenshot to scale directly into the scene.
as if to reconstruct the designed scene by layers.
The sketch showed me that my interface was sufficient for an urban touch
screen context, but arguably did not take enough advantage of the screenspace
I had been provided. My figure’s arm seems to have a higher precision of point-
ing than I would have expected at this scale and distance from the screen. As a
result, I suspect the entire interface could have either packed in more informa-
tion or been placed into a smaller form factor without sacrificing usability.
Most of my issues in sketching this interface came from sketching the outline of the screen.
An incorrect shape would look wrong immediately in the context of a photographed photo.
Once the shape began to take a proper form, I began to play with drawing the interface itself in a “sketchy” manner to focus on issues of layout and
size. I did this by blurring out system elements and smaller interface text.
I tried to improve the boundaries of the display screen by focusing on keeping the lines parallel, but I found that made
me pay less attention to giving the screen a proper width-height ratio.
My last envisionment tried to take an opposite approach to my typical interface sketching technique - drop-
ping a hand-drawn interface 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 useful to test out interfaces 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 fake mobile Treemap news interface for placing onto a photo of my holding an
iPhone screen.
Photoshop’s Magic Lasso tool was used to select and copy the interface sketch so it could be pasted into the photograph. Similar to the dog photo earlier,
our photo is too high resolution for our sketch to fit the scene - so I scaled down the photo resolution to match the drawing.
Then, the image was cleaned up with the Eraser tool before Free Transform was used to rotate the sketch to match the angle of the
screen in the user’s palm. An additional Free Transform on the photo itself was then used to scale it to the size of the drawing.