Wireframe, design sketch and prototype - what is the difference?

Perhaps you have heard of the terms wireframe, design sketch or prototype - but what is the difference between them? And when in the design process are they used? Here we will try to clarify the terms and show how they are used.

When we work on our digital projects we use different tools and methods depending on which steps are relevant right now. Initially we start with wireframes that are then supplemented with design sketches - often also a prototype as a complement. But what is what, really? We like to work as transparently and clearly as possible together with our clients - here we describe it a little more closely.

What is a wireframe?

Wireframes, or wire sketches, are sketches for a digital product or service (for example for a website or mobile app) that show the basic layout, navigation and structure before there is a finished design. A wireframe therefore shows where different components should be and sometimes also what they should contain, rather than showing which color and shape they should have.

Because wireframes are used at the start of the design process they function as a visual requirements specification and a basis for communication between the client and the design team. The sketches are based on the client's goals and the users' needs and ensure that we include all the components that must be present.

To further explain what a wireframe is, you could draw parallels to a house blueprint where the building's structure is presented without the interior. In the same way that drawings serve an architect, wireframes serve a UX designer who is designing a website or web application. You sketch, plan and map where we are and where we are going. You simply lay the foundation for the house or the website. To skip the wireframing phase in the design process and go straight to appearance is like neglecting to make the blueprint for a house.

Wireframes often initially consist of simple sketches made with paper and pen, later transitioning into rough digital sketches. The sketches are produced by the UX designer and are iterated, improved and developed continuously throughout the design process. When the basic structure is in place the sketches become more detailed as design sketches, and it is now the art director who takes over in the design process.

Advantages & limitations

• Quick, simple and inexpensive
  An advantage of using wireframes is that they are a quick, simple and inexpensive way to test and develop ideas. It's better to test, iterate and have the opportunity to discover any errors early in the process, before you have a finished product.

• Focus on usability and basic structure
  Because wireframes allow us to strip away the design, the focus is primarily on creating a solid basic structure and usability. If we had instead included design in our sketches from the start, it's easy to get stuck in discussions about, for example, different color choices. The risk then is that important features, flows or user needs that we need to address are forgotten.

• Difficult to imagine the final result
  A drawback of wireframes is that they are sometimes so stripped-down and simple in their design that it can be difficult to imagine the final result. One way to counter this, which we have discovered through our way of working, is to include as much authentic content as possible. That is therefore something we at Limetta always strive for.

What is a design sketch?

Unlike a wireframe, a design sketch is more detailed. The design builds on what was developed in the wireframes but includes color, form and more realistic content. A design sketch therefore shows how the finished product will look, but interaction is usually not included. In other words, it is not a clickable prototype.

Like wireframes, the design functions as a visual specification and a communication tool between the client, the design team and developers. The design can be based on the client's existing graphic profile, or a completely new concept tailored for digital channels can be created.

If we return to the house-building analogy, we can liken a design sketch to the interior, where you choose wallpaper and paint for the walls. In the same way, the art director produces the graphic design for the components that will appear on the website. Sometimes it can be about influencing the user toward a desired behaviour by using the right kinds of colors and shapes in a smart placement. It can also be about strengthening the brand with a specific message, tone of voice in text, or a particular photographic style in images.

Benefits & limitations

• A clearer picture of the finished productDesign sketches have the advantage of giving a sense of how the finished product will look. We have the opportunity to test different design choices before we have a finished product, which is more cost-effective than changing something later in the process. 
  

• Discussions about color and form
  How things look and are perceived evoke emotions, which makes it easy to get stuck in discussions about color choices and fonts instead of focusing on the core — i.e. usability. To counteract this, one often starts by specifying the requirements using wireframes that then gradually evolve into a finished design sketch.

What is a prototype?

Unlike a wireframe or design sketch, a prototype includes interaction. You could say it is a simulation of a product or service. It does not always have to be a pixel-perfect version of the finished product, but the prototype should be able to show how the product is used. You should be able to carry out user tests to see how users interact with the site or application. This way you gain a good insight into functionality and usability before the actual development work begins. This can be done in different ways and at different levels.

Examples of different prototypes:

• Simple clickable design sketches
• HTML prototypes
• Animated prototypes

Advantages & limitations

• Test and discover potential errors before development takes place
  An advantage of using prototypes is that you can test a product before it is fully developed. This way you save both time and money by discovering any errors or adjustments that need to be made before actual development begins 

• The time factor
  Developing a prototype is usually somewhat more time-consuming (than, for example, wireframes), which affects the time and budget you have to work within. At the same time - if you choose to build the prototype in HTML, it often becomes the seed for the code used in the final solution 

What is the difference, really?

If we summarize it briefly, one could say that wireframes, design sketches and prototypes are different steps or different tools and methods used in different phases of the design process. They each play their own important role in delivering a finished digital product

• Wireframes show the basic structure. Where things should be placed and which components should be included
• Design sketches build on wireframes but are more detailed. They include color and form and give a clearer picture of how the finished product will look

• Prototypes are clickable and include interactions that give us a good sense of functionality and usability

What happens to the sketches next? 

You may now be starting to get a handle on what the different methods involve and how they are used. But what happens to the sketches then? Both wireframes, design sketches and prototypes are iterated, improved and continuously developed throughout the design process. They are also used as a basis for communication between the client, the design team and the developers. When the design phase is finished the actual development begins. The house that has received its foundation now starts to be built. Walls are raised and the roof is put on. Here the sketches serve as a template for those who will develop the product or service. By following the sketches you know how everything should look and behave and, in the end, we have a product ready to be launched.

How we at Limetta work with Wireframes, design sketches and prototypes

At Limetta we use all three methods when working with our clients. Since every project is unique we base our approach on each individual client and their needs when deciding what should be done and how we do it. Depending on time constraints, budget and the type of assignment, sometimes all three methods are used and sometimes only wireframes and design sketches. Regardless of which methods we use, it ultimately comes down to finding solutions to the client’s problems in the best possible way.

Also read