A good wireframe is an essential step in any new digital product. Here’s how you can harness the power of wireframing to take your UX design up an extra notch.
Spontaneity is a wonderful thing. A swiftly-made decision can be blissfully liberating, and a spur-of-the-moment cooking venture or camping trip can bring much joy and add some excitement to our lives. But of course these unplanned decisions don’t work in every situation. Just as you wouldn’t write a book without planning an outline (fans of Virginia Woolf’s The Waves, please excuse me), neither would you create a website or develop an app without first creating a well thought-out backbone on which to base your product. Or in other words, a wireframe.
A basic tool in UX design, wireframes are an essential part of the product design process. Here’s a guide to wireframes, from what they are, to why you need them and which principles to take into account when creating a wireframe:
What is a wireframe?
The overriding goal of a wireframe is to describe the structure and functionality of a user’s flow – functionality being anything that the user interacts with, such as buttons, menus and dropdowns. This is achieved by creating a visual representation that communicates the product’s structure, information hierarchy, behavior, navigation and placement of content. Without touching on the visual details or the UI design, a wireframe demonstrates the product’s general layout and states which elements need to be included on each page. There are many available wireframe tools for UX designers to choose from.
Why is wireframing important?
A wireframe is necessary in mapping out the essential parts of an interface. It helps everyone involved gain a full understanding of the product near the beginning of the process. Without this foundation, it’s next to impossible to continue with the coding or design of the product. It also provides you with a relatively easy and low-cost method, with which your team can compare a few design concepts and take decisions early on. Additionally, being a visual tool, wireframes are also much more accessible than written ideas that can seem abstract. Showing a wireframe to developers or to your clients will help them clearly understand your intentions, enabling you to receive the relevant feedback and implement it into your design.
What types of wireframes are there?
Like any good friend, wireframes stick by your side throughout the process. As you gain a better idea of your product, you can gradually implement more advanced forms of wireframes, building them up from all perspectives as you move from one stage to the next. Here’s a brief explanation of the different types of wireframes:
– Low fidelity wireframes: You should always start the process with rough hand drawn sketches. Only then move on to low fidelity wireframes. Some programs that can assist you for this are Axure and Balsamiq. Low fidelity wireframes enable you to create relatively quick sketches that present the product’s main screens and clarify which screen leads to which. This will give you a better feel for the product.
– High fidelity wireframes: At this point, your wireframe should show the full lifecycle of the flow, covering the complete range of cases a user can find themselves in – from errors, to empty states, first time users and returning users.
– You can also create an interactive prototype that acts as the ‘live’ version of your wireframe. It brings the product to life, showing the full flow, alongside real content and the final copy. Prototypes range in their level of sophistication, from elaborate website mockups to UX prototypes created with code, that truly behave and feel like the actual product.
A few words of advice when creating wireframes
Before diving head-first into the world of wireframes, there are a few things to take into account to ensure the most efficient process. Here are our thoughts:
– Don’t skip the wireframing phase! Other than giving us the chance to focus on developing an all-round positive user experience, wireframes help save time, as we can identify and deal with any usability issues early on in the process. Of course, like with everything in life, there are exceptions to the rule. You may come across instances in which it’s unnecessary to create a whole wireframe, such as when tweaking a pre-existing feature or adding a simple screen to a product that already has a defined language.
– Wireframes are not supposed to describe the UI. In fact, they should look like a draft design-wise. This doesn’t mean they have to be flat-out ugly (although some would argue they should), but they shouldn’t delve into the UI design side of things. Instead, keep everything grayscale, other than one single color to mark any functionalities or interactive areas. Also stick to one generic font, using different text sizes to communicate hierarchy.
– Make sure your client understands that this is not what the final product will look like, but rather just explains its structure and functionality. Working with clients can be tricky – they often end up falling in love with your wireframe, or alternatively, they can get freaked out that this is what the final product will look like. That’s why you should make sure to avoid any misunderstandings beforehand and clearly explain to them what the purpose of a wireframe is.
– Create a few iterations for the same screen at the low fidelity stage. At this point, you should still keep your options open. As you move on, you will have a better understanding of the product and your choices will be more informed. Once you decide on one of the flows, you can go into detail with that.
– Finalize the text early on, so that you can incorporate the final copy in your wireframe. It’s a huge part of the product’s flow, directly impacting the user’s understanding – just like your UX design. This also means you should avoid, at all costs, any use of “lorem ipsum.” It might sound like a good idea, but in reality, the phrase “lorem ipsum” does not reflect the amount of space your actual content will take up. And it definitely does not serve to convey a sense of character or understanding of what’s going on on that particular screen or page.
– Wireframes should clarify the user flow. Use this tool to tell your product’s story, indicating what the user’s next step is and how they get there, while avoiding any dead ends in the flow.
– Work in an organized way by naming each screen in the way that makes the most sense to you. Generally, the name will describe the main intent of the screen, or the specific state the user finds themselves in on that page, for example ‘Login – Incorrect Password’ or ‘Your Cart – One Item’.
– Use placeholders for images, such as simple draft-level icons that convey your intended message. Otherwise, you can risk getting attached to the images that you chose at an early stage, which may not be the ones that serve you the best.
– Describe hierarchy in terms of spacing, sizes and layout, while being careful not to design the UI while doing so. Pinpoint the most important message to pass on and consider what the user will be looking out for on that particular page. Is their intent to subscribe to a newsletter, add a filter to their photo or make a purchase? Whatever it is, simply state is, as opposed to designing it.
– Stay consistent by ensuring that individual components look the same on each of your screens or pages. Let's take a look at this wireframe example. if a button is presented as a circle and a heading as a blank rectangle, make sure these elements are repeated in the same way throughout the wireframe, so as to avoid any confusion.
– Last but not least, don’t start working on the UI before you have the full functionality and life cycle of the flow. Otherwise, you could end up having to make compromises because you didn’t consider all the details beforehand.
Want to continue exploring the world of UX? Here are the major UX topics being discussed this year.