Case Study: Revolutionizing the Mobile Shopping Experience
At Sourcebits, we’ve worked w ...
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.
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.
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:
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.
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.
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.
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.
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.
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!
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.