Wireframing an App

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.

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.

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.

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.

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.

‍