Designing on Whiteboards

Tutorial: My workflow of designing from whiteboards and software

Now that I have a “Tutorials & Tech Reviews” playlist on YouTube, I wanted to canvas the design community to find topics that they would find interesting for me to address. Both Oleg Stirbu & Aidan Runner mentioned their interest in my white-boarding and/or design process.

My common workflow currently is pretty straightforward:

  1. Whiteboard
  2. Design UI & Flows in Software (current preference: Sketch)
  3. Repeat

Even though this is expected & over simplified, there are a couple common practices that I think are novel as well as a couple key points that came up as I talked through this in the YouTube tutorial.

Intentional White-boarding

When there are 3–4 people all at a white board, a lot of great discussion and ideas can be born, but often what ends up on the board is next to unreadable. It is easy to scribble and wave hands for the sake of speed, but within my workflow the white-board is the source of truth for my feature sets, product directions, user flows, and information architecture.

My process for brainstorming, sketching, and wire-framing is all done on the whiteboard and I’ve developed a couple of simple, yet intentional methods for white-boarding.

Photograph Everything (& use Google Photos)

I take images of every white-board I write up. Smartphone cameras have great resolutions and a easy way to document all the great work on the board. I also sync all my images to Google Photos where is super simple to search “whiteboard” and pull up your directory.

[PROTIP] Google Photos will automatically recognizes elements in your photos and make’s them searchable. Give it a whirl…i.e. I constantly search “whiteboard” and “screenshot”.

Use Color

I leverage the color of white-board marker any time I can. The color can signify a user-type, a specific type of UI category, or statefullness. With a simple legend this helps add value and context to your whiteboard when referring back to it.

Use Structure & Comments

This is simple, but it’s easy to be unorganized when getting a lot of ideas sketched out. Make sure to make lots of notes on your sketches and logically title and group your sketches for later reference.


Thanks!

I hope this was valuable insight and appreciate you swinging by. Also, if you enjoyed the video, I also post a weekly vlog…would love for you to subscribe.

If you need help on your next project, add your request to Design Inc. If you are a designer and want to Apply, we would love to see your work.