Wireframes are the backbone of any product design project. They serve as a middle ground between low-fidelity sketches and the first interactive prototypes—they’re where product teams make their ideas tangible.
Similar to any other part of your design process, wireframing can have its pitfalls if not done properly. The difference between good and bad wireframes takes root during the process designers follow when creating design artifacts. Let’s explore several common missteps in this wireframing process, as well as some recommendations on how to avoid them.
10 wireframing issues and how to fix them
1: Wireframing every page
The problem: Wireframing is all about speed. In most cases, you want to invest the least amount of time and effort possible in visualizing your idea to share with your team members as quickly as possible. When you try to visualize every single page you have, you increase the time required to complete the task and postpone receiving valuable feedback early on.
The solution: It’s better to create wireframes for only the key pages in the user flow. Before you start wireframing, gain a solid understanding of the problem you want to solve and focus on these specific aspects of your design. Map out a target user flow (a series of steps a user takes to achieve a specific goal) and sketch out the core part of it. For every screen you design, ask:
- What is the purpose of this page?
- How does this page help a user/business achieve its goal(s)?
2: Deprioritizing well-defined information architecture
The problem: Information architecture dictates how you structure and present content to the user and is especially important for products that have many different features, a lot of content, or complex aspects of interaction with that content. Designers often use a website wireframe tool to illustrate the navigation between screens, but it’s important that information architecture be completed before you start to wireframe; otherwise, you will have a lot of unnecessary iterations between your visual design and the logical organization of your content.
The solution: Start wireframing only after you’ve completed all tree testing and card sorting activities and once you have a solid understanding of what content organization you want to use in your product.
3: Skipping paper-based sketching
The problem: Many designers prefer to use digital tools for creating wireframes. While this approach works well when you have a proper understanding of what you want to build, it’s not the most effective when you’re at the beginning of your design process and need to experiment to see what works and what does not.
The solution: In most cases, it’s better to start by sketching your wireframes on paper and conducting side-by-side comparisons each time you have multiple variants of design and are unsure which one is the best.
Paper wireframes might look rough, but in many cases they are the fastest way to visualize your ideas. Image credit careerfoundry.4: Adding too many details
The problem: At the beginning of a design process, your goal is to find a proper design direction. Too often, designers think that by adding more content and/or visual details into wireframes, they will simplify the decision-making process. However, in many cases, designers invest too much time creating wireframes that go right into the garbage bin after the design review because they do not have the team or stakeholder’s approval.
The solution: At the ideation stage, it’s much better to use simple and straightforward wireframes rather than ones that look like real screens or pages. It’s always possible to add more detail later when you have an approved concept. Until then, keep the fidelity low and focus on looking for interesting solutions.
Vadim Kendyukhov uses grey boxes instead of content blocks in his banking app wireframe. This helps reviewers focus on the structure of content. Image credit Vadim Kendyukhov. 5: Starting with hi-fi wireframing
The problem: High-fidelity wireframes might look nice, but they require a lot of time to create. Most product designers have limited time for creating design assets; the more time they invest in creating beautiful visuals, the less time they will have to spend on ideation and validating their design concepts. No matter how nice the design looks from a visual perspective, if it doesn’t provide a good experience, the final result will be far from successful.
The solution: Never start with a high-fidelity website wireframe. These are better suited for later stages of the creative process, when overall creative direction has been established.
Vadim Kendyukhov uses grey boxes instead of content blocks in his banking app wireframe. This helps reviewers focus on the structure of content. Image credit Vadim Kendyukhov. The problem: Sharing a rough wireframe of a user interface with stakeholders will likely cause more harm than good because it will be difficult for stakeholders to imagine how black and white squares will transform into pixel-perfect layouts.
The solution: This doesn’t mean that you should altogether avoid low-fidelity wireframes during meetings with stakeholders, but never rely on them to singularly express your ideas. Ideally, you want to present a polished design in the form of a prototype or mock-ups to the client so they can evaluate the visual design of the product.
7: Using text placeholders
The problem: Designers use text placeholders in an effort to speed up the design process—no need to wait for the real copy, simply use a placeholder and focus on the visual hierarchy of elements on a page. While this does give designers a better idea of what the design will look like once real content is included, this layout can be misleading. When you copy and paste the same Lorem Ipsum into content containers, they all line up and the UI looks clean. But as soon as the UI has real content, many wireframing issues can occur, such as text overflow or bad text alignment in containers, which breaks the visual hierarchy of the user interface.
Fernando Aleta relies on Lorem Ipsum (placeholder text) for his Podline app. Image credit Fernando Aleta. The solution: Content plays a pivotal role in product design, and it needs to be reflected in your wireframe design process. As you fill your wireframes with real detail, you may notice the layout you have is not working well. In this case, iterate and find a better way to represent the information. This helps you spot the trouble areas of your design as early as possible. The cost of an early fix will be much lower in comparison to issues being spotted during the high-fidelity design phase.
8: Focusing on visual details
The problem: The objective of wireframing is not to create pixel-perfect artifacts but rather to create the minimum necessary artifacts to communicate your ideas. When stakeholders see a design that looks finished, they start to judge it because they believe that what they see will be implemented in a final product. For that very reason, wireframes typically do not include any styling, colors, or graphics. So how do you create a clear, compelling wireframe that also establishes all the relevant information?
The solution: Designers use black and white wireframes because it requires less time to create them. This format also makes reviewers focus on the relationship of elements rather than on visual design decisions, a distinction that is especially important when you share your design with stakeholders. It’s also possible to use color to highlight specific areas or elements on the wireframe.
9: Designing for large screens first
The problem: It’s relatively easy to design bad website wireframes if you start with large-size screens. Why? When the content and navigation are prioritized for the larger screen, it becomes hard to adapt it to smaller screens.
The solution: Follow the mobile-first mindset and design for the smallest possible screen. This strategy will help you eliminate unnecessary content and visual elements and prioritize what remains. Another suggestion: Use the mobile frame of a real device. While it’s possible to use a simple rectangle as a frame for your mobile design, it’s much better to select a frame that has dimensions of an actual device you design for. The frame will act as a natural constraint, preventing you from putting too many elements on the screen, and create an illusion of an actual design.
10: Disincluding annotations
The problem: Having your ideas misunderstood is perhaps the most dangerous wireframing issue. Since wireframes are static design artifacts, reviewers need to use their imagination to understand how the user will interact with design. When design is not obvious, it can easily lead to incorrect assumptions.
By adding annotations to your design, you minimize the chance for potential misunderstanding. Image credit Edric Lapniramai.The solution: Ensure the logic of your design is clear for everyone who will review the wireframes by adding annotations. This will help stakeholders and team members alike to comprehend the rationale and provide you with more relevant feedback.
Conclusion
Wireframing is a crucial step in product design. Doing it effectively can help you identify potential flaws in a design and create a solid foundation for future prototypes. By avoiding the common pitfalls listed above, you can help ensure you get the most out of your wireframes and improve your final outcomes.