Inspiration: Blender

Blender is the Free/Open Source Software community’s contribution to 3D computer art and animation. It fills the same niche as commercial products such as Maya and 3ds Max.


While the feature set offered by Blender is far larger than needed for prototyping purposes, there are some very useful features that can be used to quickly develop 2D and 3D representations of animated user interfaces. Many pre-made meshes are available for free on the web, and simple animation is can be achieved relatively easily. The skill level required for prototyping purposes is similar to that of learning something like Photoshop or Illustrator. Photorealistic movies are quite difficult to make, but this level of skill is unnecessary for prototyping.

The main difficulty in using Blender is that the user interface is rather different from that used for 2D image editing software. There are so many functions that learning keyboard shortcuts is very important to achieve any kind of development speed. Because there are so many functions, it can be difficult to find what you need if you don’t already know where it is. Fortunately, Blender’s user interface had a major overhaul a few years ago, and functions are organized much better than they used to be.

One big benefit of using Blender is that it’s got an extremely active community of artists and technicians around it. It’s extremely easy to find a video demonstration of the functionality you’re looking for, and there are some websites, such as CG Cookie, that specialize in training courses. Video demonstrations have become so common that recent releases of Blender include built in screencasting of the user interface.

For my prototypes, I needed a way of illustrating how the date/time selector works, since that’s outside of the functionality of pretty much every prototyping tool. In Blender, I added a bunch of individual text blocks, and animated them using the graph editor. The graph editor is a representation of object attributes over time. Time is represented by individual frames of a movie, and the object attributes, location in my case, are represented by curved lines – one for X position, one for Y position, and one for Z position. Instead of directly manipulating the curves, it’s easy to set a frame in the graph editor, move the objects to the desired position for that frame, and set a key frame. Blender automatically creates a curve to interpolate the position for each frame between key frames.


Once all the animations are finished, Blender can render a movie. If an animated GIF is desired, a 3rd party tool such as ImageMagick can be used to convert the movie frames into GIF frames.

Inspiration: Blender

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s