A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio


I’ve been playing around with the newest addition to Google Docs, Google Drawings, and I’m quite liking it. I tried drawing a few diagrams and even a wireframe, and it turns out the basic drawing interactions are just as good – in some cases even better – than what I’m used to in Omnigraffle and Fireworks.

5 reasons Google Drawings beats Viso and Omnigraffle

We know the cloud computing arguments, and they certainly apply to wireframes

  1. It’s live. The entire team can work on the same document and see each other’s work instantly
  2. The wireframes live in the cloud, no sending files around, no outdated documents
  3. The risk of losing data is zero. It saves for every edit you make
  4. It’s free
  5. Most people already have a Google account, so no sign up required

We need stencils

One thing was missing though: Stencils. Omnigraffle has stencils coming out of its ears, and Fireworks has some excellent built-in ones. But Google Drawings in its current early and simple form simply doesn’t have it. So I made one.

Leaving the stencils in the gutter

An interesting limitation is the fact that

  • there’s no stencil library function and
  • you can’t easily copy and paste from one document to another.

One solution, it seems, is to clone one of the wireframe kits and thereby also cloning the stencils into each document. To not print or export the stencils, I’ve left them in the gutter area of the document. Seems to work quite okay.

Kind of blue

I’ve been wanting a blue kit since I left a project years ago where we used blue stencils (the idea was Peter‘s). As you may have experienced, some customers simply don’t understand wireframes. The blue color gives that well-known blueprint feel, and shouldn’t prompt questions like “I like it, doesn’t it need a splash of colour?”

The templates

To make it even easier for you (ehm, me) I’ve begun making simple starting point templates.

Main blank template

Product detail page

Landing page

Item list view

They will all appear in this template search. If you make variants or new wireframe templates, consider adding the #wfkit tag somewhere in the description.

An app that makes your phone worse as you gain weight

A parked car projector

A wall clock with an extra set of hands

A pet video phone

Calculating time difference with sky colors