An Overlooked Step in the Design Process
Lo-fi wireframes are often overlooked. Perhaps you’re pulling pre-made components from a design system or you just think lo-fit wireframes are unnecessary. Either is a fair reason!
But I’m here to talk about why myself and my team find incorporating lo-fi wireframes in our work to be a valuable step in the design process.
Spoiler: You’ll save time, frustration, and money down the road with promo code: LoFiWires.
What is a Lo-Fi Wireframe?
Well, I’m glad you asked! Think skeleton to a human body, individual ingredients to a cake, or an outline for an essay. In UI terms, lo-fi (low fidelity also written as low-fi) wireframes are straightforward outlines that show the structure/layout of a webpage or mobile application. They act as a vehicle for early communication.
Personally, this is my favorite part of the design process because they do not and should not need to be perfect. They are intentionally simple and devoid of intricate design details. Typically, they consist of basic shapes and minimal colors (black, gray, and white) and convey conceptual ideas.
Examples
Why Use Lo-fi Wireframes and When to Use Them
1. They are an important tool for generating early and valuable feedback from stakeholders, designers, and developers. It encourages honest feedback that may be censored with a more developed, polished product.
This can assist with:
2. Unlike polished hi-fi screens, the rough visuals of lo-fi wireframes encourage a focus on interaction and function, not on visual appearance.
This can assist with:
While creating lo-fi wireframes may not always be possible or suitable for every project, they serve as a valuable starting point for generating new ideas or initiating fresh designs when they can be employed.
How to Create Effective Wireframes and Share Them Out
Understand the Purpose
Understanding the client/project's goals, target audience, and key user tasks is key to creating wireframes that align with the project's or client's objectives.
Gather Requirements
This will help you determine what elements need to be included in your wireframes and what can be left out.
Start the Lo-fis:
These wireframes can be done with pen and paper, on a whiteboard, with Figma, or even with Google Slides
- Use simple shapes (boxes, rectangles) to represent elements such as navigation bars, features, etc.
- Sketch the basic layout of the page and if relevant, add placeholder content to your wireframes to indicate where text, images, and other media will appear. Use lorem ipsum text or generic labels to represent actual content.
Clearly Communicate Your Thought Process
- Use arrows or simple lines to represent the flow between pages or sections. Indicate buttons, links, and interactive elements.
- Add annotations or notes to your wireframes to explain functionality or provide additional context. For example, you can annotate buttons with labels like "Login," "Sign Up," or "Search."
After following these steps, it’s time to share your concepts with fellow team members, stakeholders, or clients for their feedback.
Here are some important things to remember:
- Think about your audience, not everyone is a designer. Explain or reiterate the purpose and goal of lo-fi wireframes.
- Your WORK is being critiqued, NOT you!
- When asking for feedback, ask pointed and specific questions focused on functionality and interaction. Do not ask open-ended questions.
Iterate your wireframes based on outside input and refine them as necessary. And if possible, conduct a few testing sessions with users using your lo-fi wireframes.
Be sure to document the decisions made in your wireframes (this might include explaining the rationale behind particular design choices or noting any specific requirements). If the software you're using does not have version control, be sure to manually maintain the different versions of your designs. And finally, once you are confident in the layout and structure, you can create higher-fidelity wireframes or prototypes.
Conclusion
In summary, lo-fi wireframes are often overlooked but are a crucial step in the design process. They facilitate early communication, honest feedback, and efficient problem-solving. By prioritizing function over aesthetics, they help detect usability issues and encourage creative exploration. Investing time in lo-fi wireframes upfront can save you time and money in the long run.
If the next project you find yourself on involves a brand-new concept, consider working with lo-fi wireframes before progressing to hi-fi wireframes.
