Three Dimensional Sketching, Story-boarding, and Wire-framing

A prototype is the visual articulation of an idea; the image of a concept. We use these designs for a myriad of tasks. Architects produce elaborate and detailed sketches of buildings, movies are laid out as scenes and shots along a series of story boards, website designs are framed out before they are implemented online. Technology has lowered the barrier of entry to a number of these activities: there are a number of sites where one can sketch, story-board, or wireframe without paying for the privilege.

These tools do not make users into experts, nor can they teach design skills, or help someone who simply does not have the eye for it, to produce beautiful designs. They can, however, allow new users to get a feel for the activity, and early iterations can look more professional and be more easily manipulated than that produced with pen and paper. This tutorial will introduce some tools which allow users to produce sketches in 3D, to story-board, and to wire-framing as a means of illustrating and idea or making an academic argument.

Beginning Your Work

There are a number of different programs that can be used to draw online. One of the most fun is Google SketchUp. SketchUp allows you to draw in 3D by pulling the face of basic shapes (circles, squares, rectangles), into cylinders, cubes, and cuboids. By linking these basic shapes, much like one would in basic drawing, any number of shapes can be produced. Users can also turn to graphics suites like Blender Tools. Users might be surprised at how quickly they pick up the basic techniques, and just how long it takes to develop the complex three dimensional objects we have become used to seeing in movies and massive multi-player environments.

When it comes to storyboarding a script or wire-framing a website, there are also a number of free and easy to use tools available. Because the objects being modeled are far less complex, the barrier to entry on this type of work is considerably lower. The Pencil Project allows you to sketch using your browser or as a stand-alone application. There are a number of applications that provide a limited free service for wire framing, such as Cacoo, Lovely Charts, and Giffly. Browser-based applications, like Pencil, can also allow you to open the tool and begin the design.



Additional Reading

Brown, Polly. “CAD: Do Computers Aid the Design Process After All?” Intersect, 2.1 (2009).

Jim O'Donnell. “Creating VRML Worlds.” Eric Ladd and Jim O'Donnell, eds. Using HTML 3.2, Java 1.1, and CGI
http://www.kiv.zcu.cz/~ledvina/vyuka/books/HTMLnya/ch53.htm#InlineVRMLSc....

Rajakumar, Shylu. “Emotions and User Interface Design focused on Web pages.”
Master of Computer Science. California State University, 2010.


Related Tools:

Mocking Bird : https://gomockingbird.com/

The Pencil Project : http://pencil.evolus.vn/en-US/Downloads/Application.aspx

Giffly: http://www.gliffy.com/wireframe-software/

Lovely Chatts http://lovelycharts.com/