This short insight is from our Methods series: A discussion of useful working practices and ideas for better ideation and execution. We discuss what each method is, why they are useful, and how to utilize them.
What.
A visual blueprint of a product or service. It can be thought of as a primitive design interface.
Why.
To help designers and developers communicate on the structure, the feasibility, and the function of a website, application, or other products.
How.
- Research. Firstly, you should define the use-case of your product, and create personas that would use that product. Understanding the 'why' and the 'how' of your work is vital for meaningful design execution.
- Map out your research in an accessible place. All team members should know how to access any research as this will keep everyone aligned throughout the process.
- Define a sensible user-flow for your Wireframing. We always recommend considered discussion and ideation to ensure your designs are streamlined and suitable for purpose. Essentially, you're planning out how many screens may be needed, or what the ideal flow would be—it'll make your finished wireframes much neater and compact if you've planned firstly.
- Start in low fidelity. This accelerates progress. Think of it as sketching rather than illustrating. You're creating the guidelines, the proposal, and basically the first draft. Things will likely change/develop throughout the design process, so don't get too hung up on creating something that looks like a ready-for-market final version too soon.
- Start adding detail, and start testing. Your design still doesn't need to be market-ready, but by adding in key information and working CTAs you can start testing your user-flow to ensure it works as expected.
- Once you're happy with the initial work on your wireframe, you can start upgrading the wireframes into full working prototypes. This builds upon the last step, and will allow for more valuable user testing. Start connecting up your components to showcase how the finished product will work—even if your design style is still low fidelity.
Further Discussion.
There are steps to take to make your wireframe highly productive. Anyone can create a wireframe, but the best are made from having a deep understanding of your product, whilst also having keen awareness of your target market personas.
Things to keep in mind:
Make your wireframe as clear as you can. Do not over-invest in the designs or the patterns yet as simplicity is key at this stage. Low-fidelity wireframes can be done at speed whilst still providing much needed design clarity and harmony within your team. High-fidelity wireframes are more common for client presentations as clients tend to be more result-orientated than process-orientated.
Make sure to present with confidence, to align everyone's understanding of the design and the necessary steps for success. To help confidence, we advise doing as much research and internal testing as you can.
Wireframing is a foundation layer, to help align stakeholders and the team in general—so use it as a key visual guide.
