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





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.)



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.



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.



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.



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.



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.



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.



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.



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.

Documents

Pencils and Pixels : Drawing Final Project