Making a Great Wireframe: A Q&A

Example of a wirefame.

Wireframing is the basic blueprint of your site or application. Wireframes show not only where your content and text will live on-screen, but which content is most important, how it’s all related, and how your user will interact with that content. Wireframes are often key to communication with clients and lets them visualize the complexities of the idea as it starts to morph into something usable. In short: wireframes are one of the most important building blocks of your app or website.

But if your experience with design projects isn’t extensive, it can be tough to tell what makes a set of wireframes great vs. just mediocre. Drawing on her years of experience with interaction design, this 9 question interview with one of our Creative Directors, Bhargavi, educates you on the importance of wireframes, and how to evaluate wireframes to make sure they’re as efficient, comprehensive, updateable, and easily understandable as possible.

1. What are some tools that Sourcebits uses for wireframing? What resources do you recommend?

Bhargavi: The best tool to start off with is pencil and paper to understand the layout. Once we have the layout defined, we create high definition wireframes using Omnigraffle. Omnigraffle sports many features which makes wireframing a cake walk. We especially enjoy their library of vector stencils, easy-to-assign action for UI elements, and layer organization within canvases. Proto.io, another wireframing tool, provides comprehensive UI libraries which make collaboration easy. Proto.io also allows prototyping on actual devices, so we can quickly check the sizes and usability of elements while wireframing and provide a more interactive experience for clients and stakeholders.

2. What are the questions you ask yourself when wireframing?

Bhargavi: To avoid visual bias, wireframes are usually black-and-white. Every screen is clearly illustrated, indicating the overall flow of the application and positioning of each UI element. This includes establishing a clear information hierarchy within a screen by using typography and element sizes. Remember: wireframes are not about the aesthetics, but more about the usability and the functional architecture of the whole.

The thought process behind creating good wireframes comes from a design-thinking approach. Designers seek to understand the overall vision (the core idea), platform and medium usability (mobile vs. web, Android vs. iOS) and the user requirements (empathy). We also follow the Fitts’s law to make sure elements are accessible for users. Throughout this process, the team is constantly asking questions like:

Questions to ask while wireframing: Is this element tappable? Is it accessible? Does the most important information stand out? Is the navigation intuitive? Is there anything intriguing in this screen for the user?

3. What are the steps to building a wireframe?

Bhargavi:

  • To give a fresh perspective to the layout, most designers start on paper
  • Once we sketch the key screens, we port them to Omnigraffle and build on them, drawing out the screen real estate and fitting in the UI elements.
  • We use stencils (such as these ones for iOS7) to drag and drop elements to speed up the process.
  • We then customize/resize these elements depending on the space requirements.
  • Next, we annotate the screen by linking elements to the respective screens. This helps establish the overarching screen flow of the application and understanding the subtle transitions between screens.

4. What should wireframe notes include?

on mobile

Bhargavi: Notes should include details of what the element does, the different states, any transition or action it must perform, and the destination screen details.

5. What are the key differences between wireframes and visual screenshots?

Bhargavi: Wireframes define the functional layout, actual placement, and usability of elements in a screen. The visual design phase covers the aesthetic attributes, such as the colors, styling, textures, iconography and typography, which are all finalized in the mock-up stage.

6. Do wireframes need to be pixel perfect, or will they change?

Bhargavi: Wireframes follow a grid, so the size and placement of the UI elements is far more important to the user experience than the element or how it’s depicted.

7. How should a wireframe be “read”?

Bhargavi: Wireframes should be cohesive, intuitive and self-explanatory while also defining the simplicity of the UI being designed. To remove ambiguity, we provide detailed annotations and screen flow diagrams to help the reader understand the big idea.

8. What makes a wireframe good or bad?

Bhargavi: A good wireframe is a communication tool which provides details about element actions, navigation structure, overall architecture, and the core idea; failing which, the wireframes become incomprehensible. Ideally wireframes should be easy to understand, quick to create, easy to update, comprehensive, and cover all prominent use cases.

9. Do you need a wireframe for EVERY screen?

Wireframe diagram and navigation between app's pages.

Bhargavi: Absolutely, yes. Content discoverability is key, and wireframes determine navigation options which makes exploring this content both easy and intuitive. The complete flow and screen transitions can’t be determined without wireframing every screen. Our wireframes make sure every error message and action element states are covered, providing a holistic view to the reader.

Have a question about wireframing that Bhargavi didn’t answer? Let us know in the comments!

About Bhargavi:

Bhargavi, one of our Creative Directors at Sourcebits, experimented with filmmaking and audio in college before she discovered her true passion, interaction design. She highlights both curiosity and empathy as keys to great user design, and sees everything as a design inspiration and an opportunity to improve the world around her. Find out more about her background and design philosophy here.