Why I choose low-fidelity wireframes

A wireframe is the combination of elements that will be present on a given web page or mobile application. They act as an early representation for what a final website or app may look and feel like. They are by no means perfect, but can allow designers to quickly generate and experiment with different solutions and manipulate page elements in seconds.

Fidelity in terms of wireframes, prototypes and mockups relates to the level of detail given to the particular item. In turn, it is much faster to produce a low-fidelity wireframe than it is to create a pixel-perfect Photoshop mockup of a website. Both have their perceived benefits, but if you are more into usability principles and the theory behind HCI, low-fidelity wireframes should be a part of your regular routine.

Personally, I try to use low-fidelity wireframes until I am relatively satisfied with my solution, and the accompanying prototype has passed a few usability tests. Only after several iterations am I confident with shifting my designs off to a visual designer to work their magic.

Pizza Palace Example Wireframe- Crossed-out rectangles represent image placeholders

This wireframe was created in Balsamiq Mockups, but you can use anything from Powerpoint, Keynote, Visio to dedicated software such as Mockingbird, Axure RP, Sketch. Every organisation has a preference, so it’s always good to try out a few different things to learn the strengths and weaknesses of each tool.

Additionally, I feel that low-fidelity wireframes are more useful when it comes to usability testing as it removes the possibility of users commenting on different design elements such as colour and typography which can often defeat the purpose of bringing them in. You are testing to make sure the user understands how the product works, not whether it is inherently pretty.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.