Wireframing – the key steppingstone from idea to prototype

Lucia Gore 24th June 2021

Wireframing has been for me the most useful tool that I’ve used whilst a UX Designer and it feels as though it is something I am continuously looking to improve my skills in. Too often problems arise from jumping to conclusions on an idea or design without following the wireframing process correctly – straight to high fidelity is not the answer.

This blog outlines what a wireframe is, why it is important and how to identify the key aspects of a wireframe to take with you to the prototype.

 

What is a wireframe?

A wireframe is a series of digital interfaces that demonstrates what interface elements will exist on the page and the specific layout of these elements. It’s commonly used to visualise content and functionality on a page, taking into account user needs and user journeys.

The importance of wireframing is most crucial in agile enterprises and start-ups where there is collaborative and an iterative nature of product design and development. Wireframes play invaluable roles in keeping everyone on the same page and aligning ideas of how the information, user journey and layout of the application is structured.

Put simply, wireframes serve the purpose of a blueprint for design. They lay down the path for conceptual structuring of the application, whether its visually or functionally. They are also super helpful for UX designers in communicating the following points:

  • Content: It helps us to know what contents are displayed on the page.
  • Structure: How the pieces of the application can fit together.
  • Information hierarchy: How the information is organised and displayed.
  • Functionality: How the interface will work.
  • Behaviour: How the users will interact with the interface and how it behaves.

The actual purpose of wireframes varies depending on the people creating or using them. In every case however, it conveys the information UX designers need others to know to get the clear vision of the product and grasp the concepts involved. Wireframes range from rough sketches through to high fidelity mock-ups of an idea and user journey. But the process of creating them at each level is equally important, and the journey each wireframe goes through is also important for stakeholders and developers to understand, to get a real idea and flavour of the design techniques and concepts involved.

There are so many people that take inspiration from wireframes, many of these people are also involved in the creation of them. Interaction designers, UX designers, Information Architects, Illustrators, Graphic Designers, Developers, Business Analysts, Stakeholders, Usability Experts, Project Managers, Executives, Partners, Clients – the list goes on. In short, everyone involved in the making of the product uses and benefit from wireframes.

 

Principals of Wireframing:

Start with users and know what they need:

The first responsibility is to understand who is going to use the product/service and what they most want to get out of the experience. Designing user flows to satisfy any user needs is key and so beginning to identify these is the first step. UX Designers need to develop a sense of empathy for the user and apply it into the product.

Questions you may want to ask yourself when starting out creating wireframes:

  • Who are the main users?
  • What are the user needs and goals?
  • What are the business needs and goals?
  • What existing product or design patterns work for the users and the business?
  • What are the gaps in what’s currently out there?
  • What are your constraints? (i.e. time, resources, money, skills)

 

Setting expectations:

When creating a wireframe, think about who is involved and what the steps are in the design process. This should consider the deadlines for each step and what level of fidelity is necessary to properly communicate with the other members of the team (stakeholders, developers etc).

 

Everything has meaning:

Every piece of text, colour, gradient, shadow, shape and image you put down has a meaning, just like there are definitions for every word. These can all be interpreted differently and the importance of elements will be interpreted differently by different people, so it’s key to put emphasis on the important things and annotate where necessary.

 

Be consistent, not uniform:

Ideally, using the same design language and patterns to communicate allows users to familiarise and enjoy the experience of using the product. We can’t imagine every scenario and write rules for it like a design style guide, every circumstance is different and should be addressed on its own terms. What unites things, therefore, should be a consistent approach – one that users will hopefully come to understand and trust.

 

Experiment and Collaborate:

The best way to build an effective product is to grow something small and evolve it quickly and iterate widely. With the help of iterations, UX designers can create something quickly and easily that is widely accepted as the best possible solution for all parties.

Low-fidelity design helps designers and teams to explore many potential solutions quickly, before focusing in on one solution and refining it into the final product. Initially, it may appear there are many solutions to a design challenge. However, you can only decide which will work best after exploring a few of them. Inexperienced designers may over-commit to their initial ideas and fall in love with what is likely the wrong solution – good designers know better. I’m still trying to learn this!

Ultimately, designers are working in the wrong fidelity if they can’t produce concepts quickly. And you’re wasting precious time if your wireframes are just grayscale versions of a design you already have your mind set on.

All designers will create wireframes in their careers, however, learning to appreciate the skills and fully get to grips with the concepts and techniques that make wireframes so useful is something not everybody will decide to spend time on. Arguably the most important part of the design process, wireframing deserves attention and I think it is interesting to continue to learn about new techniques and ideas for creating more intuitive wireframes for clients and to show stakeholders and developers.

If you’ve already cracked the wireframing nut and are interested in learning more about how to scale up your project at pace, check out the benefits of Design Systems here.

****

About the author:

Lucia Gore has worked in the Digital Engineering Practice at ECS for 2.5 years on a number of client site projects, including The Times, HSBC and Vodafone. After 2 years working as a developer, she trained as a UX/UI Designer and has since been working to improve her skills in this field and deliver outstanding user experience for ECS’s clients.

Found this interesting? Why not share it: