rockpaperink

August 14, 2012

Nexus

When Starting Out, Sketch It Out

Author: Jason Tselentis

Topics: Interactive Design, Layouts

Because web design ends with a digitally rendered composition, designers may be tempted to jump right to the computer for prototyping. But starting with pencil and paper works just fine.

Adobe Creative Suite's Photoshop, Illustrator, and Fireworks have been handy for creating mock-ups with full color images, photography, and typography. But pencil and paper lets you quickly and easily place, replace, move, and edit the composition before you get too bogged down in details. Typography, textures, images, and even color can get rendered. I've known designers who use colored pencils, and even Crayola Crayons to do so. And in the end, getting a pencil sketch roughed out can take less time, allowing you to see things more instantaneously than a digital rendering could. Plus there's the added bonus of working concurrently with team members, and even the client, all of whom can make a mark in the design process with ease. And for those who fear pencil and paper, keep in mind what noted designer Jason Santa Maria says, "Sketchbooks are not about being a good artist, they're about being a good thinker."

Whenever Jason Santa Maria begins a project, he goes right to the sketchbook. Layouts begin to take shape through experimentation with placement and size. Working in tandem with Paravel, who completed the backend development, Santa Maria planned the Web Open Font Format website Moon by drawing before taking on the digital details.

The completed Moon website

Sites that have animated elements require just as much, if not more pre-visualization. In order to help explain key moments in the interactive experience, many designers use the same method established by movie directors: storyboards. Storyboarding maps out what a user will see from one experience to the next, with key instances drawn to aid in planning, development, design, and production. The drawings will visualize the concept, imagery, and movement, with notations about sound effects, dialog, and music helping to establish the mood. When the multiple drawings are viewed together, they deliver the visuals users or audience members will come in contact with over a given time, be it as an animation, motion picture, game, and/or interactive experience.

Design studio Instrument created a rich and dynamic experience for the Nike 6.0 IDNation site. But before embarking on the digital still frames, they created a thorough set of storyboards.

Written details identify graphical elements to be included at the digital composition phase.

The end result by Instrument, now digitally rendered, shows an "ideal world" experience that users would be able to have through gesture or touchscreen devices.

Ask any designer how they start a project, and they'll likely tell you that they start with a pencil sketch first. But even though drawing has its advantages, just as many designers might tell you that they jump right to the computer for planning and prototyping. There's no agreed upon method for getting started. And designers will probably agree to disagree about which way is better for years to come. But as a self-proclaimed "paper junkie," this designer will always draw first when the sketching battle begins.


{"http:\/\/www.rockpaperink.com\/content\/column.php?id=371":{"comments":{"data":[]}}}