A Beginner's Guide to Wireframing

Designers think of and see the world differently. As a young designer, I have frequently encountered difficulties pitching my ideas to the outside world. Designers prefer using visuals over the narrative to give the focus group or clients the most compelling and memorable presentation. Because I love writing and drawing things from hand it is sometimes difficult for me to pitch other designers who rely upon computer-generated concepts.

But as product designers, we have to collaborate with multi-functional teams so we can create meaningful products addressing complex problems.

‍

What are wireframes?

Wireframing is a method of designing a product or service at the structural level, and it helps designers and stakeholders to understand the information hierarchy of the application. Wireframes are built around the concepts discovered when creating user personas and journey maps, and they come in both high fidelity and low fidelity versions.

‍

What are high fidelity (hi-fi) wireframes?

High fidelity wireframes are a complete representation of the product or service. Often high fidelity wireframes are clickable and interactive. High fidelity wireframes often mimic an authentic UI interaction.

‍

What are low fidelity (lo-fi) wireframes?

Low fidelity wireframes act as the outline of the product. They are generally not interactive and are considered static elements. Lo-fi mockups help map out the shell of the user interface and the underlying information architecture.

‍

Problems are everywhere

I enjoy solving problems and consider it a hobby of mine. I love when people look at my work to aid in the completion of their tasks..  But I find it difficult to create ideas on a computer device. When I want to solve a particular issue I take a pen and a paper and start drawing out a solution.  I first start with the interaction of the user and then chart, from start to finish, an application. That process helps me to understand how the user gets to their end goal.

We start by brainstorming ideas for solving the problem at hand. In the initial stage, we might have different ideas about how to approach the problem and how to create the solution. But I use graphic flow-charts to achieve consensus about how the focus groups can achieve their goal. Let's dive into how I start solving problems using only a pen and paper.

‍

Solving Problems

Step 1: Create an outline

‍I compose a rough outline of what I am going to be using in the application design.

‍

Step 2: Add key elements

These elements form the basis for the wireframe design and might consist of buttons, form features and images.

‍

Step 3: Add the supporting features

After adding the basic elements, I compose a design which has all the functions in their proper order or hierarchy. This will work as a blueprint for the application. The next task is to add comments parenthetically where I think the application needs clarification. That helps the viewer to avoid misconceptions in the wireframe design.

‍

Step 4: Expand with additional flows

‍With several workflows in front of you,  then you and the team can weigh the pros and cons of each to achieve consensus.  That process gives the team a chance to brainstorm their ideas which creates buy-in and improves the bond between the development team and the design team.

‍

Step 5: Gather feedback from stakeholders

‍With their feedback I take a few hours to refine the prototype.  Bringing the client into the developmental process will give them clarity on the product direction, allow them to give meaningful feedback and reduce the possibility of getting distracted by the application's aesthetics.

Benefits of Paper Wire Framing

• Paper prototypes are easy to work with and take little time to create a departure point for discussion.
• Paper prototypes are less expensive than other prototyping methods.
• It takes less commitment to creating a paper prototype than a visual design that takes hours of man-hours.
• With less investment of time and money, the designer is less inclined to become attached to a  paper prototype versus a resource-intensive visual design.
• People are more comfortable with giving feedback, even tearing apart,  paper prototypes.
• Paper prototypes help to improve team-building and consensus by allowing early input.

‍

Conclusion

Paper prototyping is a great way to show the client or the focus group your approach to the project, prevent distractions and focus the user on product effectiveness, better ensuring their commitment to it.  The paper prototyping achieves focus early on, thus shortening the design process.