What is a Wireframe?
A wireframe is generally a low-fidelity representation of the major features and function of a web page or app screen. The idea is to start with a ‘blue print’ to ensure the important factors are in place from one step to another in a product flow, before considering UI design (ex colors, fonts, layout, etc).
UX designers and other product designers are usually in charge of developing wireframes. However, they work with the product team and other stakeholders in prioritizing functionality and refining these sketches. Sometimes Product may convey rough wireframe sketches to a UX designer as a way to convey how they’ve thought about a possible solution. When this is done it is typically just an input into UX design process (not in lieu of).
How is Wireframing Useful?
A major way in which a wireframe is helpful is in how it promotes visual insight early in a project. It shows the various aspects of a website or product and how the team expects users to interact with it. Wireframes offer stakeholders something to review early in a project before the real productive work starts.
This is advantageous because it allows tinkering until you have a version that is pleasing to stakeholders. The design team can be confident that the solution meets users’ needs and promotes the achievement of business objectives.
Wireframes serve as a communication tool for the project team. They help teams to clarify decisions on what content or functionality to prioritize. The drafts convey how different facets of a website or application will come together.
The Wireframing Process
In your efforts to come up with designs that result in winning products, the following steps suggested by Balsamiq’s Leon Barnard should prove valuable:
1. Articulate – This means you should endeavor to understand the problem you’re trying to solve. Who are you designing a solution for and what will they likely do with it? This highlights the need for user research before starting anything.
2. Generate – This step is one in which you brainstorm ideas (as many as possible) and possibly start to sketch them using a wireframing tool. If you aren’t impressed by what you have created, simply move to another idea to work on it. Don’t worry so much about how good an idea is at this time; follow it all the same even if what you draft with it isn’t that great.
3. Iterate – At this point, you can begin to review the ideas from the previous step. You should aim to identify and combine the things that are great about those ideas. Involve other stakeholders as you evaluate and order the conceived parts that address the needs of the user more perfectly. Add in missing details and try to envision how the concepts come together, so you can begin creating your wireframe.
4. Communicate – Developing what you consider a great design is only a part of what wireframing is about. You also need to be able to communicate it effectively to stakeholders. This is a key requirement for ensuring the design sees the light of day. Barnard suggests that this communication should take two forms: the story behind the wireframe and instructions for developers.
5. Validate – This entails, on one hand, getting feedback after communicating your design on whether it can solve the identified users’ problem. The other thing that this step is about is ascertaining whether the technical team can use the wireframe to develop the final solution within the allocated time.
