Pozit.com — A design process retrospective

Pozit.com — A design process retrospective

A designer’s process is a personal approach to solving design problems. This is a walkthrough of my design process for Pozit, a recent project here at thoughtbot.

Sketching - stay loose in the beginning

Sketching can be fun as well as useful — I’ve found that using watercolor is a great way to be in a creative state of mind while being forced to stay loose because of the nature of the medium. Pencil sketches tend to be tight line drawings with little or no shading, but watercolor allows you to block in large areas of tone effortlessly. I paint with a tube of sepia watercolor paint on a pad of 90 lb. watercolor paper.

Pozit Design Retrospective

Watercolor is easy! Try it!

Wireframes

For Pozit I used Balsamiq Mockups which I love for it’s sketchy style however there are a few bugs which may get me to switch to OmniGraffle or something similar. A project’s scope determines how much wireframing is needed - for smaller projects I may only do a few key screens and work the rest out in-app.

Pozit Design Retrospective

Balsamiq’s sketchy style helps to avoid making style considerations during the wireframe phase.

The visual design

This is the point where I begin working in Photoshop. I usually go through 5-10 experiments before I result in one that I like and which is pleasing to everyone else. I’ve heard some designers' tricks on how to minimize this phase (our version of blank canvas syndrome), such as starting the new design inside a Photoshop document of a design you already like. Creating so many early versions can feel like a waste of time, but the benefit is a labored understanding of the design while rejecting the fast, cheap and out of control approach.

Pozit Design Retrospective

These are 4 of about 10 mockups done before the final version.

The final mockup

This is a vignette of the final design, before it went out for revisions, comments, HTML and a finally the full, working app. In a real sense this is the purest form of the design, not unlike a student before they experience life in the working world. Reality is something different, however, and a successful design will be flexible enough to handle the transition in to something real.

Pozit Design Retrospective

View full mockup

How is your design process different?

Every designer’s approach is a personal process they’ve developed through experience and internal observation. What is your process like? Do you skip any of these steps or have extra steps that can help the process?

Kevin Burg Designer

Hound reviews Ruby and CoffeeScript code for style violations and comments on your GitHub pull requests. Free for open source repos.