UX Wireframing: Try to Go from High to Low

The Task

User flow with subtasks described

Start: High to Low by Hand

  1. Wireframe to quickly sketch a user flow. Making changes is easy at this point. Hence using the icon placeholders is fine as it allows for fast non-detailed sketching. Fail fast is what we want at this point because it’s cheap. Rather re-do a simple sketch than a detailed piece of art.
  2. A wireframe initiates a conversation with the stakeholders. It is vital not to distract them with lots of unimportant details. My first sketch is fine for my low-fi design process, but the stakeholders should be presented with a mid-fi version, I guess.
  3. A wireframe shows prioritized content. Hence the answer to my question about the position of the input form. It’s fine to have it centered as it gives the information a certain priority.
  4. A wireframe focuses on functionality and behavior. This touches the copy as well. Omit unimportant text by replacing it with lines for example. For the important text figure out if its appearance contributes to the understanding of the functionality and user flow (e.g. leave “show earlier options”). Change to general meaning if necessary (e.g. “Amsterdam” to “Location 1”).

High to Mid by Hand

Simple hand-drawn UI guide for consistency
Low and mid-fi hand-drawn wireframe

High to Mid in Sketch

Wireframe Consistency

Mid-Fi version made in the Sketch app.

Wire-Flow

Final word

Amsterdam based designer. A cheerful fellow that listens to others with heart, innovator, structure nerd, father, partner, skate rider, dancer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Reflection #2

Misunderstanding Multiscattering

Gestalt psychology, Aspergers, and… pasta?

4 Curves, Infinite Glassware

CoLab Fellows: Where are they now?

From Sketch to Model

Making a Custom Pardot Form with CSS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jan B Mwesigwa

Jan B Mwesigwa

Amsterdam based designer. A cheerful fellow that listens to others with heart, innovator, structure nerd, father, partner, skate rider, dancer.

More from Medium

UX Audit. How to Conduct — Experts Zone #19

10 Application Faux Pas

Yourney a new way of traveling

Tab Indexing for Complex Sites