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