WireframingMethod

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.

Interaction Design Foundation

Steps

1. 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.
2. Use this opportunity to start listing what UX/UI patterns you will need.
3. Review your wireframes with specific user scenarios and personas in mind. Can users accomplish their task with the wireframe you are sketching out?
4. Use the wireframes to get the team’s feedback on feasibility and structure.