california app design company

Wireframing an App

July 15, 2014

You can find links to helpful resources at the bottom of the page.

What’s a Wireframe?

At its simplest, a wireframe is a visualization of how content will be displayed on a screen. Typically it is rendered in black and white or shades of grey. This is done so that the focus can be on communicating content structure and the hierarchy of information.

Sketchpad Wireframes

Why Wireframe?

Wireframes serve to fulfill multiple purposes. The team is able to ideate rapidly and internally discuss the direction of a product. Wireframes also allow us to present working content to a client so that we can get feedback and input on our progress.

Whiteboard Wireframes

From Low to High-Fidelity

Wireframes can come in varying levels of fidelity from quick napkin sketches to highly-polished, interactive digital mockups. We implement low-fidelity wireframing when we sketch with pencil and paper or draw on the whiteboard. High-fidelity wireframing comes about when we start using the computer to create digital mockups. Typically we will start wireframing on paper or whiteboard and then transition onto the screen once we have a solid grasp of the problem we are solving.

Complete Wireframe Set

Static, Click-Through or Interactive

We present wireframes in a few different ways. The most simple way is with static images or photographs of one or a few screens. We might present these screens independent of context of user flow in order to focus on big-picture issues such as organization of content.

Another way we might choose to present wireframes is with a click-through pdf. This is a collection of pages that contain wireframed images. They can be arranged in a meaningful order which represents what different user flows might look like in the finished, fully designed product. Usually these images are rendered at full size so that they can be opened and navigated on an actual device, mimicking the context of what an app experience might be like.

You can download an example click-through wireframes demonstrating basic user flow here.

The farthest we might take our wireframes is by creating an interactive prototype. Prototyping allows us to link together multiple screens and actually mock-up what a user flow will feel like. At this point we might run some guerrilla user tests or conduct more thorough user testing. Since an interactive prototype is the closest thing to an actual experience that we can produce it can lead to some extremely valuable insights into the design of the product.

Wireframe User Testing

User Flows

One important use of wireframing is to mock up what a particular user flow will look like in the finished app. This could mean something as standard as an onboarding or login process, or something very specific to the app. We wireframe out user flows in order to test our proposed solutions to design problems. Mocking up a user flow allows us to uncover problems that weren’t immediately visible when thinking through a particular solution. Since no design is independent of context we try to get as close to the real thing as soon as possible in order to test our assumptions.

Wireframes Click-Through

Agile Development

Lastly, we take advantage of the benefits Agile Development provides. We are able to prevent sunk development time and resources by presenting and discussing wireframes with the product team. Being agile allows change in the product to happen more smoothly, starting from discussing and wireframing an idea all the way through to the final programmatic implementation.

Wireframing is an all-around essential process for product development. It allows us to visualize our solutions and test their validity. While they may not be the prettiest things to look at, wireframes help us start to solve the big-picture problems of any design.

Resources:

Sketch - We use this tool for creating UI elements. We also take advantage of the iOS7 GUI that comes with Sketch, provided by Teehan+Lax.

Invision - This tool is great for creating interactive prototypes. We'll typically export wireframed screens from Sketch and then link them together with Invision.

is a Yeti Alum. He designs and builds digital products to help solve meaningful problems. You'll probably find him behind the lens of his camera. Follow Mike on Twitter.

blog comments powered by Disqus
Wireframing an App https://s3-us-west-1.amazonaws.com/yeti-site-media/uploads/blog/.thumbnails/mindmapping-2.jpg/mindmapping-2-360x0.jpg
Yeti (415) 766-4198 https://s3-us-west-1.amazonaws.com/yeti-site-static/img/yeti-head-blue.png