Introduction to Wireframing

Sep 30 2020- POSTED BY projecth 0 Comment

Wireframing is a drawing which visualizes the elements of a website or mobile app.
They are an effective way to uncover the best solutions, an efficient way to brainstorm ideas, and a helpful tool for collaborating with others.

Characteristics of Wireframing

  • They contain simple shapes.
  • They are used for quick exploration.
  • In them, you disregard the inspiration art completely and focus on planning the foundation.
  • Wireframing is an iterative process, not a one-shot task.

It’s overwhelming thinking about designing wireframes for an entire elaborate project. When that happens, remember: iterating on low-fidelity wireframes is easy and less intimidating and quickly generates the besd ideas.

Benefits:

  • Quickly brainstorm ideas before polishing and refining the visual design.
  • Get feedback on the concept, without the visual design creating bias.
  • Get stakeholder feedback and approval early on.
  • Save time. Instead of dedicating too much time taking an idea through the pixel perfecting stage, you find out sooner if the idea isn’t going to work.
  • It’s low pressure.

Wireframe Types

Thumbnail Wireframes

Quick small-scale sketches. They are small representations of a screen. They allow you to quickly try out different layout ideas and visualize the hierarchy of content.

Low-fidelity

An early stage, barebones drawing with minimal polish. It is typically more loosely drawn and hints at the specific elements on the page – hand-drawn or digitally drawn.

High-fidelity

It is more polished, and displays more specific or realistic renderings of content. It fleshes out more details (e.g. use images, gradients, rounded corers, better fonts, etc.)

Note: All wireframe types should be in grayscale to avoid visual bias or confusing with the actual mockup.

The Wireframing Process

  1. First, review the user research and business goals – designing a successful UX requires understanding your users and the business goals.
  2. Iterate on low-fi wireframes. Keep iterating until you can’t come up with any more ideas.
  3. Get internal feedback (e.g. team, stakeholders, etc.)
  4. Iterate on low-fi wireframes, again.
  5. Select best low-fi wireframes.
  6. Polish selected low-fi wireframes into hi-fi wireframes.
  7. Get internatl feedback hi-fi wireframes.
  8. Get user feedback (e.g. product customers and prospective customers)
    User Testing:
    • It’s best to meet users and test in-person, but you can test via video call.
    • Emphasize that this is an early exploration.
    • Ask them for feedback and their expectation of what they can do with it.
    • Have them talk through how they interpret the content and how they might navigate the screens.
  9. Continue along in the design process (e.g. create mockups)