Wireframing Method
Wireframes are basic visual guides in which designers propose elements for screens and webpages and show how experimental solutions would flow for target users. Wireframing is invaluable early in the interaction design process for design teams to explore how concepts accommodate user and business needs.
Good wireframing is the skill of creating realistic-looking, lean layouts so your team and stakeholders can quickly determine if concepts are worth developing. Wireframing is distinct from prototyping in the sense that prototyping deals more with testing interactivity and, when done at the highest level of fidelity, sophisticated versions that might closely resemble the released products.
Wireframing is similar to prototyping, however, in that you can also do wireframing by hand (e.g. using boxes and lines to represent pictures, text, etc.) or with software and make low- to high-fidelity versions. In low-fidelity wireframing, you use placeholders to mark content and pictures in grayscale. In high-fidelity wireframing, you introduce more realism, including pictures and perhaps even some interactivity. Well-crafted wireframes can far more easily be adapted into prototypes for usability testing.
Preparation
Wireframing is often more effective when it is informed by these complementary methods.
-
Card Sorting
Card sorting is a method used to help design or evaluate the information architecture of a site
-
Task Analysis
Observe users in action to understand how they perform tasks to achieve goals
-
Category Design
Creating structures and schemes that make the location and use of content clear.
-
Stakeholder Interviewing
Understanding the perspective and influence of those invested in a project's success
-
Taxonomy Design
Define a system for labeling and classifying content to make it easier to find, understand, and use
-
Contextual Interviewing
Observation of users performing tasks in their own environment
Steps
- Build preliminary blueprints that show structure, placement, and hierarchy for your product. Steer clear of font choices, color, or other elements that would distract both the researcher and the reviewer.
- Use this opportunity to start listing what UX/UI patterns you will need.
- Review your wireframes with specific user scenarios and personas in mind. Can users accomplish their task with the wireframe you are sketching out?
- Use the wireframes to get the team’s feedback on feasibility and structure.
Outcomes
Wireframing typically produces insight and solutions focused on these areas:
-
Page Layout Design
A high level recommendation of how content and functionality is laid out in an interface.
-
Content Structure
A recommendation for structuring content, for example in a CMS or other digital store.
-
Navigation Design
A recommendation for navigation affordances in a website or application.
Next Steps
-
Navigation Design
The system of links that allows users to move between pages of a website.
-
A-B Testing
Evaluate two variants of a design find out which of them is more effective
-
Prototyping
Prototyping is an experimental process where design teams implement ideas into tangible forms
-
Accessibility Evaluation
Ensure an accessible and inclusive experience for users across the spectrum of abilities
-
Usability Testing
Observation of users performing a series of tasks to gather feedback on flows, design, and features
-
First Click Testing
Discover what users interact with first when they land on your web page
References
Wireframing Method details last edited on 2021-02-01