Expand your prototyping knowledge

Low-fidelity Wireframing Vs High-fidelity Prototyping: which is better?

Presenting a wireframe to clients has become an essential part of the design process. Yet wireframes were first handed out to clients for clear, contextual translation of ideas and not just because they were requirements. With the coming of HTML prototypes, in this post we’ll discuss which questions you should ask yourself before starting the design process.

The importance of wireframing

Whether you have just a couple of boxes, sketched quickly on paper or detailed drawings with real content, every project now includes a wireframe of some kind. Wireframes provide guidance for the designer.

Some see wireframes as only simple blueprints for the general layout of the design, but the importance of wireframes should not be underestimated. Despite their sketchy and basic look, wireframes are essentially guidelines that both designers and developers will follow throughout the creation process.

Why wireframe?

In most cases, wireframes can bring valuable insights to the process before you actually start to develop the design. They’re handy when it comes to:

  • Visualizing the general layout of a website or app
  • Creating forms
  • Designing news sites

Wireframes can be approved quickly and easily by clients as they don’t usually contain visual context, thus are easier to digest. Moreover, black and white wireframes help us to get a clear picture of how the final result will look.

Why you shouldn’t wireframe

Despite their advantages, wireframes can’t always convey important design components. Grey boxes and lorem ipsum text content can’t communicate how colors and contrasts influence content, the visual impact of brand design, the visual weight of graphical elements or the visual path created by colors, contrasts and components.

Nevertheless, the purpose of a wireframe is to compliment the early stages of the design, perhaps it’s sometimes best to start with the design. In some cases, the client might not fully grasp the point of a wireframe, or simply doesn’t agree with the main objectives, not a great start! In these cases, it’s important to first agree upon a clear direction for the design and then start wireframing specific layouts.

Why Prototype?

When the time comes to create the final design, what seemed logical at first might not fit the final output. Changes often have to be made. For example, textures and images can influence relationships between elements.

And as time goes by, the further design moves away from functional requirements, the less effective the wireframe becomes. However, a wireframe can also look dull and less attractive to a client if the actual design is actually very effective and has a strong impact.

The alternative here is to create a quick HTML prototype of the future app. The prototype can integrate both a sketchy wireframe and advanced draft of design. Furthermore, the prototype is functional and as those made with Justinmind, can even feature interactions and real data behavior so that clients can test their future app before starting developing it.

Wireframes for information or promotion purposes can lose their effectiveness, especially when it comes to branding. You need the full design to assess the successful quality of the output. That’s why, in some cases, prototypes are more relevant than wireframes.

At the beginning of every project, you should always consider whether a wireframe or rather prototype will best serve your design and the needs of your client.

Xavier Renom

About the Author

How to define, validate and review applications before starting to code are his thing. He is interested in everything related to web, mobile and desktop apps and how to prototype and simulate them before development starts. After hours he’s flexing his math muscles.

Comments are closed.