Alexis Abakasanga

Day 2: Creating my first wireframe

If I fail to plan, I plan to fail. The necessity that is wireframes.

Alexis Abakasanga's photo
Alexis Abakasanga
·

2 min read

What is a wireframe?

This is a sketch of a digital interface used to define and plan the information hierarchy of a solution. It is the blueprint of what the final product will look like, backed by user research.

As a product designer, I use wireframes to provide a clear overview of the page structure, layout, information architecture, user flow, and functionality. This is the bridge between researching and designing stunning visuals backed by user data.

Types of wireframes

  1. Low-Fidelity Wireframe: I use this to create new concepts, focusing solely on ideas and not necessarily the details as of yet, as that can come much later.

  2. Mid-Fidelity Wireframe: I use these to get feedback and to make prototypes.

  3. High-Fidelity Wireframe: After I have made the barebones (lo-fi) of my solution, I use this to provide detailed instructions.

    P.S. I assumed wireframes were just sketches on paper or digitally created using Balsamiq. Man, was I wrong?

Creating my first Wireframe

  1. First things first, I need to get my creative juices flowing by creating a mood board.

  2. Secondly, I identify the intended user's and business goals when interacting with my solution. Now, I must decide how I will organize the content to support these goals.

  3. Thirdly, using usability conventions, spacing, layout, and information architecture, I define the details of my solution.

  4. Now for the fun part: utilizing pen and paper, or Balsamiq, to bring life to my idea.

Key Takeaways

Simplicity is all about keeping out the noise. I would not want to waste time going back and forth on deliverables with a client or stakeholder because I have worked them through the wireframes and changes have been made early on.

References

Thank you for reading my article.

Product Design60daysUXchallengeux designfigma