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.
-th.jpg)
