Wireframing

What it is

The creation of a simple visual representation of a product or service interface.

Why this method

It helps prioritize substance and relationships over decoration as you define the solution. It also provides designers with an opportunity to start asking developers early questions about feasibility and structure.

How to use

  1. Develop preliminary blueprints that demonstrate the structure, placement, and hierarchy of your product. Avoid using too many distracting elements such as font choices or colour at this stage. Lightweight designs are easier to reconfigure. Helpful wireframing tools include Miro and Figma, which help provide simple elements.
  2. Use wireframing as an opportunity to identify the UX/UI patterns you will require.
  3. Evaluate your wireframes with specific user scenarios and personas in mind. Can users accomplish their tasks with the wireframe you are creating?
  4. Use wireframes to obtain feedback from the team on feasibility and structure.