---
title: Pozit.com — A design process retrospective
teaser:
tags: design
author: Kevin Burg
published_on: 2010-04-27
---

A designer's process is a personal approach to solving design problems. This is
a walkthrough of my design process for [Pozit](http://pozit.com), 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](http://images.thoughtbot.com/ui/1.jpg)

Watercolor is easy! Try it!

## Wireframes

For Pozit I used [Balsamiq Mockups](http://www.balsamiq.com/) which I love for
it's sketchy style however there are a few bugs which may get me to switch to
[OmniGraffle](http://www.omnigroup.com/products/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](http://images.thoughtbot.com/ui/2.jpg)

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](http://twitter.com/pter/status/8424145126). 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](http://images.thoughtbot.com/ui/3.png)

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, <abbr title="HyperText Markup Language">HTML</abbr> 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](http://images.thoughtbot.com/ui/4.png)](http://images.thoughtbot.com/ui/full.png)

[View full mockup](http://images.thoughtbot.com/ui/pozit_retrospective/full.png)

## 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?