Photo by Sigmund via Unsplash
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.
Wireframing is often more effective when it is informed by these complementary methods.
Define the concepts and relationships that inform effective structured content design
Creating structures and schemes that make the location and use of content clear
Observe users in action to understand how they perform tasks to achieve goals
Understanding the perspective and influence of those invested in a project's success
Define a system for labeling and classifying content to make it easier to find, understand, and use
Understand the tasks and motivations of the user group for whom you are designing
- 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.
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.
A recommendation for structuring content, for example in a CMS or other digital store.
A recommendation for navigation affordances in a website or application.