Day 2: Creating my first wireframe
If I fail to plan, I plan to fail. The necessity that is wireframes.
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
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.
Mid-Fidelity Wireframe: I use these to get feedback and to make prototypes.
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
First things first, I need to get my creative juices flowing by creating a mood board.
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.
Thirdly, using usability conventions, spacing, layout, and information architecture, I define the details of my solution.
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
"What Is A Wireframe? Your Best Guide: CareerFoundry." https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/.
"Wireframing by a Product Designer | by Senthil Kumar - Bootcamp." https://bootcamp.uxdesign.cc/wireframing-by-a-product-designer-79c249f6d162.
"What Are Wireframes? - Balsamiq." https://balsamiq.com/learn/articles/what-are-wireframes/.
Thank you for reading my article.