In 10 years I've published over 20+ apps and one process I'm always looking to improve is wireframing. Some people believe that you need to use Flinto, Origami or some other market solution but I often find that it's overkill and all you really need is a sheet of paper and a pencil.

As an app maker, I am constantly working to be as resourceful as possible and therefore spending a lot of time crafting beautiful wireframes is a waste time and money. Yes, waste. The reason is because wireframes oftentimes go through so many revisions that it makes no sense to make them look beautiful. Also, wireframes often require annotations and it's really hard to annotate stuff within Photoshop or InDesign. Therefore, I often just use a sheet of paper and start creating sketches until things start showing shape. Once I have something concrete on paper, I can then share it with a designer who can use Photoshop, Sketch or Origami to make it look beautiful.

Examples

Below are examples of sketches I've drawn and handed over to designers. By choosing pencil and paper over software programs, I was able to save thousands of dollars on hourly design time.

I hope these sketches show you that it's not necessary to be a good sketch artist, what matters is that your sketches can convey meaning to your designer.

Custom UIX (2011)

I try really hard to simply sketch things out on paper because it allows designers the flexibility to decide when to create a custom skin or simply use the out-of-the-box native design offered by Apple or Google.

wireframe-soundsnips

Design by Grant Kindrick

Here are a few examples of work that started off with a pencil and immediately went to Photoshop or Sketch.


Simple Login (2013)

wireframes-custom-login

Design by Grant Kindrick


Custom Mapping (2013)

wireframes-custom-map

Design by Grant Kindrick


Item Detail View (2014)

This is a simple item detail view. It has a name, some text, a youtube video call out, HEADERS are generally made as uppercase and this is all you really need to convey to a designer. From there, they can make your work look dreamy.

wireframes-gibson

Design by Eckardt Kasselman


Search Results (2016)

The #112304305 is actually the reference number Pivotal Tracker generates when you create a task. I started using PT numbering system as a way to organize my wireframes and work them into a Scrum process.

wireframe-comp

Design by Eckardt

It goes without saying, finding a good designer is 80% of the challenge and Grant and Eckardt, in particular, are the best.


My Current Toolbox

Lately I've been using worksheets often used for film storyboarding. I think they are a step up from blank sheets of paper because they offer room for notes and annotations.

10K Foot Overview

The thumbnail PDF is great for big picture storyboarding. It helps me see the flow of an app.

storyboard-art-thumbs

Download

Detail View

The storyboard below is excellent for drawing and annotating.

template-full

Download

Mini Detail View

The storyboard below is great when you don't need to go into super detail

template-mini-1

Download

More PDF's