Cross Device Mockups

Before a design concept is developed enough in your mind to warrant hacking together a prototype, what is the easiest way you’ve found to communicate a seamless, unified, familiar app experience across a variety of different devices?

I always start with sketches – just pen and paper. Sketching is a great medium for exploring a bunch of ideas quickly. Sketches however are not always ideal when trying to communicate concepts to others (especially within a distributed environment like at Automattic).

I’m a big fan of Balsamiq. Of all the available options it’s become my go to solution when trying to communicate in that “middle ground” between sketching and prototyping.

If you’ve not tried Balasamiq, I’d encourage you to take it for a spin. One tip that is sort of hidden in Balsamiq is the existence of a secondary skin:

By default, Balsamiq uses the slightly more sketchy/scrappy Balsamiq skin. Alternatively, you can select the straighter/cleaner wireframe skin for mockups. I much prefer the wireframe skin.

As for mocking up designs across devices, here’s a hacked together balsamiq starting point that I’ve begun using to communicate designs:

Balsamiq source file

The idea is that each device in a single row shows the same state. Multiple rows/states can be shown on top of each other to communicate interactivity, or a certain flow.