The Web design industry is filled with terms such as wireframe and high-fidelity mockup. The fidelity level is a scale used to indicate how closely the final product will ressemble the visual presented. A low-fidelity mockup is the initial sketch, rough design idea while the high-fidelity one is a lot closer to the developed solution.

(This article was originally publish in French here)

Example of a low fidelity sketch for La Belle Blanche, exploring image placement, rhythm and text size.
Example of a low fidelity sketch, exploring image placement, rhythm and text size.

The Sketch

The sketch is the earliest version of a mockup, where the designer wants to identify elements and lay out the page. I will use a quick pen and paper drawing to confirm ideas and to make sure we share the vision. Some global site elements such as the headings, titles or navigation can be validated with a good sketch. When discussing a feature with a developper, a few sketches might clear up the feasibility of an idea and get everyone on the same page.

The Wireframe

A low fidelity mockup (or a wireframe) will then help give the design a solid structure. The grid that is used will be integrated and we can start thinking about responsive design. Lorem Ipsum comes to the rescue to fill out titles and paragraphs and finishing touches on the stylesheet. Placeholders are used in lieu of images and icons to help visualize their size, ratio and positions.

Example of wireframe for La Belle Blanche

The Mockup

A high fidelity mockup will add the final layer of fonts, colors and brand elements to the design. This stage of the design is generally more time consuming and tends to go through a lot of changes. In waterfall mode, this mockup is the one that needs approval before the development starts.

Another way to do it

Not every project needs every screen made out in high fidelity mockups. Depending on the team, the cohesion between the design and developer and their seniority levels, we have to study and carefully choose which high fidelity mockups should be produced. Sometimes, they are needed to dig deep into a functionality, but at other moments, only a few sketches and the style guide are needed to fully bring the vision to life.

Before diving deep into pages and pages of high fidelity mockups for your next project, take a step back to examine, with the team, where and when more efforts are needed. What are the most innovative, never-seen before aspects of your design? Where is it the same old model, only rebranded? Would your team consider working from some lower fidelity sketches and unlimited conversation time?

Are you ready to embrace Agility’s principle of not seeing something designed before it is actually made?

Leave a comment

Your email address will not be published. Required fields are marked *