Back to articles Back to articles

DIY Wireframes and Storyboards for your App

Shawn Parrotte January 19, 2017

In our last blog post, we looked at 9 techniques for doing UX Research. These techniques can craft a compelling, engaging app experience for your target audience.

People’s expectations of digital products continue to rise. Apps keep getting more intuitive to use and are providing more delightful experiences than ever. So, by understanding and practicing these techniques, you’ll be better equipped to develop something that your customers will love.

This time, let’s take a closer look at one of the techniques we mentioned briefly towards the end of our last post: Wireframing.

When making an app, you need to wireframe it early on – after you’ve done some research, of course – because this is how you start to bring your ideas to life. Without wireframing, making an app that people want to use (and that developers want to build) may as well be like hitting the lottery.

So, in this post, I want to dive deep into what wireframing is and how you can do it. We’ll look at what skills you’ll need and what processes make it easy. Doing this work will iron out any kinks in your app idea and will result in a spiffy document that you can give to your designers and/or developers.

If you need further proof why Wireframing is an essential practice, just read Michael Flarup’s comment in his article for Smashing Magazine:

“The single reason why most apps I’m pitched don’t get off the ground is because it is entirely more compelling to talk about the overall idea of an app instead of asking the tough questions and getting into the gritty details of how to execute it.”

If you’re serious about making your app, this is where the real work starts.

What is Wireframing?

Wireframing is simple, really. It’s outlining the overall structure of the various screens of your app. It’s a blueprint for each screen. This makes it easy for both graphic designers and developers to understand what your app does and how everything is supposed to look. Think of it as sketching out how the different kinds of data (text, images, buttons, navigation, etc.) will be rendered on each screen. When wireframing, you want to avoid the details and focus on the big picture, the gestalt.

Whether you’re doing this with a team or by yourself, the central focus of this activity should be about the layout and navigation of each screen, not the colors, font choice, images, or graphics.

When you look at other people’s wireframes you’ll see big empty boxes used in place of real images. By doing this, you can succinctly communicate the high-level functions of your app and how each important piece of information will be laid out for the user.

Storyboarding, what?

Going hand in hand with wireframing is another activity: storyboarding. Though this isn’t like storyboarding for movies and animations as digital products aren’t linear experiences, they don’t usually have a beginning or an end.

So for an app, storyboarding is drawing out how your user is able to navigate to and from the different functions and screens that you have.

Often, you can pair storyboarding with “user journeys.” Consider what intent your users have when launching your app. If a person intends on updating their account information, how would they navigate to the right spot, and how many steps does it take? If a person wants to discover new content, how will they be about to find it and is it easy to find? Do this for all the different things a person could do in your app and you’ll end up with a nice map.

Now, let’s spend the rest of this post putting these ideas into practice.

The Tools You’ll Need: Paper & Pencil

It’s best to use the simplest tools available to get this process started and there’s nothing simpler than paper and pencil. We don’t want any applications or other sophisticated software getting in the way or adding friction to what we need to do. Sticking with these readily available tools is best.

If you want, you can also download and print out some blank phone screens to make this a bit easier too.

Reverse Engineer Apps for Practice

So let’s say you’ve never storyboarded or wireframed an app before. Don’t worry, most people haven’t. A good exercise, then, is to reverse engineer an app you already know.

Choose a familiar app (and ideally one that’s not too complicated), sketch out the screens, and create a storyboard for how a user would navigate around them.

If you do enough of this, you’ll be able to understand the common practices and UX patterns that apps have and people expect. Many apps share the same patterns and visual systems because it makes it easy for new users to understand how everything works. Think of it as a common language – they don’t have to learn anything new to do what they want.

You’ll notice things like:

    • how the navigation is often on the bottom of the screen, the easiest spot to tap with your thumb
    • how tap-able areas are usually at least a certain size, because people’s fingers or thumbs can only be so accurate

You’ll also get familiar with the common screen types that you’ll likely need for your app: a login screen, user profiles, content feeds, account information, search results, etc.

Once You’re Ready, Begin with the Story

If you’re ready to start on your own app, it’s best to begin with the storyboard. That way, you can know how many screens you’ll need to wireframe out. Imagine how a user of your app will get from tapping your icon to all the different places they need to go.

Here, another good exercise is to list out the various functions and actions that your app performs and group them together in ways that make the most sense. Be as nitty gritty and detailed as possible.

For example, if your app is able to take photos, how will you save them? How will you delete them? Can you share them? Can you edit them? How will you access them later? Collect these functions together in groups so you can figure out what kinds of things you’ll need to have on each screen.

Also consider, what’s the main objective of your app? What is the thing you want your users to spend most of their time doing? For instance, there’s a small but significant difference between SnapChat and Instagram – two apps that share many of the same functions.

When you first open SnapChat, you’re immediately presented with a screen for taking photos. If you think about it, it’s clear that capturing and sharing pictures is the main activity that the UX designers wanted you to do.

On Instagram, however, the photo-feed is the first thing you’re presented with. So, the main activity here is scrolling and viewing pictures. You actually need to navigate over to a different screen to take and share pictures.

Knowing all the different functions, and which ones you want to guide your users to, will make storyboarding smoother and wireframing much easier.

Screens and Variations

Now that you’ve grouped the functions of your app into their various screens, it’s time to sketch out how to present all that information. Get your paper and pencil pencil ready, because at this juncture, yet another exercise may be incredibly valuable!

For each screen, try to sketch out five or more ways everything could fit together. In true brainstorming fashion, set a timer and churn through variations of each layout so you don’t lock yourself into anything too soon. Don’t judge them now, you’ll have plenty of opportunities to be critical later.

If you’ve reverse engineered wireframes earlier, draw upon that knowledge and experience. Or if you’re inspired by a certain app you love, find out if you can borrow some of the elements that capture why you love it.

Say you create a minimum of 5 variations for 10 screens, that’s going to be 50+ wireframes that you’ll have once you’ve finished. This can seem like a daunting task, but the benefit of doing this many versions is that you’ll finish with a truly unique and thoughtful design.

Once you’re done brainstorming on each screen, it might be healthy to step away from them for a little while. Later you can come back to each screen with fresh eyes and a fresh perspective.

In some cases, one variation will turn out to be the clear winner. In others, you may need to smash two or three ideas together to create the best design that fits your needs.

Once you’ve nailed down the wireframes for each screen, it’s time to annotate them for designers and developers.

Notate for Design and Development

We’re reaching the end of our wireframing journey. Each screen is wireframed and the storyboard is laid out. The last step is to add annotations to each screen that describes what each element is and how it functions. However, if you’ve done a thorough job with the wireframes, you may not need to add too many notes to them.

Here, many professionals use a piece of software to create a higher-fidelity version of their wireframes and add notes to them. But really, doing that is not necessary, especially when you’re only presenting them to designers and developers.

A good work-around might be to scan your sketches, upload them to your computer, and then create your notations. There’s plenty of ways to annotate PDF documents. Plus, it will be easier for those receiving your documents to read them and make further annotations.

If you want a crash course in writing notes for your wireframes, Boxes and Arrows has a great article called “Writing Smart Annotations

Deliver the Goods

Finally! Now that you have a complete set of wireframes you can present them to you designer or developer (like Designli) so they can start building your app.

Doing this, again, proves that you’ve done the hard work of figuring out exactly what you want your app to do. While it’s very common that people just bring us ideas, those that do this upfront work have it much easier when it comes time for development.

When you have your wireframes ready, we’re ready to design and develop your app! Contact us and we can help you bring your app to life!

You might also like:

Let's build together.

We'd love to hear about your product or idea.

Get in touch