Wire framing
Darshika Srivastava
Associate Project Manager @ HuQuo | MBA,Amity Business School
If you’ve ever tried designing a website or app without a wireframe, you’ll know why the wireframing process matters. Without wireframes, how can you and your team visualize what you're trying to do? How do you sequence user flows, or know what content goes on which?screens?
“It's frustrating if people are commenting on visuals when what you actually need is high-level feedback, like ‘Is this the most important thing?’” says Tom Lowry, Director of Advocacy at Figma. Excellent product and site design starts with smart wireframe design – read on to ace every wireframing stage with Figma’s pro tips and wireframing tools.
What is a wireframe?
Wireframes are basic blueprints that help teams align on requirements, keeping UX design conversations focused and constructive. Think of your wireframe as the skeleton of your app, website, or other final product. Your wireframe shows the design team and stakeholders the bare-bones outlines of essential webpages, components, and features, including:
At the early stages of design, low-fidelity wireframes rely on lorem ipsum text and simple boxes as placeholders for images and videos. This helps the design team, copywriters, and other team members to focus on basic functionality to align around the right direction.
Starting with a clean, spare wireframe design also gives UI/UX designers room to iterate. They can collect early feedback from user testing on core UX/UI elements, without distracting users with visual design details. Design teams try out different concepts, user flows, and templates as they work toward the ultimate user experience.
Start your wireframe with Figma
3 types of wireframe designs
The UX design possibilities may seem infinite, but most wireframe designs fall into three basic levels of fidelity. You may work through all three kinds of wireframe design on the way to your final?product.
When to skip wireframe stages
Many design teams assume they have to start with a low-fidelity wireframe and evolve from there. That makes sense when you're exploring new product concepts, so you can align on key components, iterate, then add visual design details later. But according to Tom, there is a case for jumping straight into high-fidelity wireframe design.
“If you have an established design system, and the design you're exploring is like others that already exist, conversations probably won't get too derailed by visual design details,” Tom explains. “In these cases, exploring a design idea at a higher fidelity can be just as fast and just as?effective.”
7 best practices in wireframe design
An effective wireframe can be as simple as a napkin sketch or as complex as a static product mockup. By applying these? best practices in wireframe design, you can align on directions with your team faster, and move forward with the best?approach.
1. Identify your design?goals.
Before you start sketching or tinkering with wireframe templates, name your design goals. Consider user needs, and what actions you want them to take to achieve them. Maybe you can help the user to solve a problem by buying a helpful product, or by signing up for an educational newsletter. Align your design team around this goal, so that your wireframe designs advance that?cause.
2. Choose the right size for your?wireframe.
Your wireframes should match the size of the screen your target audience will be using. Naturally, a website or application will look different on a laptop than it would on a mobile device. With that in mind, standard wireframe sizes for screen types are?as?follows:
领英推荐
3. Keep your wireframe design?simple.
Start your wireframe using grayscale colors, limiting fonts, and replacing graphics with boxes. Make sure your blueprint meets the user requirements at the most basic level. If you focus on details like misspellings or color schemes, you might overlook a flaw in the user experience.For simple early-stage designs, truncated previews or cards may suffice. But for content-rich interfaces, Tom recommends using real content instead of “lorem ipsum” placeholder text. “When you start to apply information architecture on a user interface, listing menu items 1-2-3-4 isn't very useful,” he explains. “Then you want to use real?content.”
4. Maintain design consistency.
Wireframes shouldn’t cause distraction or confusion. Similar components should look the same across all wireframes, so they're easy to grasp, iterate on, and code. Even if there’s a slight variation between two related components, different designs can create uncertainty for developers across pages and?iterations.
5. Make navigation obvious.
Your user flows should be fluid and intuitive.? As you apply information architecture to your wireframe, consider where you might need to support it with navigation and wayfinding cues. If users have to consult a sitemap, your navigation and information architecture need?improving.
6. Don’t get too attached to your?wireframe.
Even a high-fidelity wireframe is still a rough draft that needs changes to become a final product. Once your design team finalizes the wireframe design, it’s time for collaboration with developers and other creative team members to add functionality.
7. Leverage wireframing tools.
Design teams need wireframes they can share, save, and turn into mockups online. Figma's wireframe kit comes with drag-and-drop design tools that make it easy for beginners and design pros alike to create customized, high-fidelity wireframes.
Wireframe design checklist
The wireframing process helps you plan, build, and collaborate throughout the design and development cycles—but how do you know when you're done? Once you can check off these action items from your wireframing to-do list, your wireframe is ready for mockups and higher-fidelity prototypes.
Once your wireframe is done, look back at your initial scope of work. Now that you've outlined your final product, you may be able to refine your estimate. Even if it’s just a sketch with placeholders, your wireframe should?show:
When your design team starts the design process, you might not know exactly how your final product should work or look. Beginners may be tempted to skip wireframing and lean on existing models for designs—but that can result in an uninspired, unhelpful user experience. Wireframes focus creative attention on user needs, and help teams align throughout the design and development process.“The wireframe gives people an early window into the project, before you've invested a lot of time polishing something,” Tom says. “Anytime you can align more people in the organization early saves time?later.”
Chances are that your final product will look dramatically different from the initial wireframe— and that’s a positive thing! Wireframing gives you the freedom to experiment, make changes, try new concepts, and take risks. With a skeletal framework in place, you can easily tinker with workflows and design elements that would be difficult to adjust later in the design process. Your final design will look and feel better, thanks to the trial-and-error wireframing process.
Wireframes put usability first, focusing creative attention on elements that are essential to the user experience, including:
How to tell when you've nailed your wireframe
Gauging wireframe success is tricky without quantitative data, but Tom says there are several qualitative metrics you can apply. He recommends running moderated user testing to see if users can get through the user experience without instructions—instead of getting "tripped up or not knowing what to?do?next.”
Another sign of wireframe success is alignment with stakeholders. “If you’re coming out of a creative session feeling like you got the type of feedback you wanted, and that you can move forward to next steps confidently, then I would say that your wireframe was really successful,” Tom?says.
But if stakeholders are focusing on minor details or aesthetic considerations instead of core user needs, he says, "that might be an indication you should lower wireframe fidelity. Remove some of that polish on the artifacts that you're sharing, until you get the feedback that?you?need.”
Create and customize wireframe designs with?Figma
Teams need wireframes to connect and brainstorm UX/UI designs together—and Figma's wireframe kit gets you started. You can validate ideas and speed up design workflows on Figma's collaborative design platform —and jumpstart web design projects with Figma's free website wireframing kit .