You may 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 sort out the concepts and show how they are used.
When we work with our digital projects, we use different tools and methods depending on which elements are relevant. Initially, we start with wire sketches which are then supplemented with design sketches - often also a prototype as a compliment. But what is what really? We like to work as transparently and clearly as possible together with our customers - 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 you have a finished design. A wireframe thus shows where different components should be and sometimes also what they should contain, rather than showing what color and shape they should have.
Since wireframes are used at the beginning of the design process, they serve as a visual requirements specification and a communication basis between the customer and the design team. The sketches are based on the customer's goals and users' needs and ensure that we include all the components that must be available.
To further explain what a wireframe is, you could draw similarities to a house drawing where you present the house's structure, without an interior. Just as a blueprint works for an architect, wireframes work for a UX designer to design a website or web application. You sketch, plan and map where we stand and where we are going. You simply lay the foundation for the house or website. Ignoring the wireframing phase of the design process and going straight to the look is like ignoring making the drawing a house.
Wireframes often initially consist of simpler sketches made with paper and pencil, to later turn into digital rough sketches. The sketches are produced by the UX designer and they are iterated, improved, and developed continuously during the design process. When the basic structure is in place, the sketches become more detailed in the form of design sketches and it is now the graphic designers who take over in the design process.
Benefits & Limitations
- Quick, easy, and cheap
An advantage of using wireframes is that it is a fast, easy and inexpensive way to test and develop ideas. It is better to test, iterate and have the opportunity to detect any errors early in the process before you have a finished product.
- Focus on user-friendliness and basic structure
Since we use wireframes to peel away the design, the focus is first and foremost on putting together a good basic structure and user-friendliness. If we had instead included design in our sketches right from the start, it would easily happen that you get caught up in discussions about, for example, different color choices. The risk is then that you forget important functions, flows or user needs that we need to meet.
- Hard to imagine the final result
A disadvantage of wireframes is that they are sometimes so stripped down and simple in their design that it can sometimes be difficult to imagine the final result. One way to counteract this, as we have discovered through our way of working, is to include as much authentic content as possible.
What is a design sketch?
Unlike a wireframe, a design sketch is more detailed. The design is based on what has been developed in wireframes but includes color, shape, and more real content. A design sketch thus shows what the finished product will look like, but usually, no interaction is included. It is therefore not a clickable prototype.
Like wireframes, the design serves as a visual requirements specification and communication basis between the customer, design team, and developer. The design can be based on the customer's existing graphic profile or a completely new concept adapted for digital channels is developed.
If we return to the house construction, we can resemble a design sketch with the interior where you choose wallpaper and color for the walls. In the same way, the graphic designers develop the graphic design for the components that will be on the website. Sometimes it can be about influencing the user to the desired behavior with the help of the right kind of colors and shapes in a smart placement. It can also be about strengthening the brand with a certain message, tonality in text, or specific imagery in photos.
Benefits & Limitations
- A clearer picture of the finished product
The advantages of design sketches are that they give a sense of what the finished product will look like. 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 shape
How things look and are experienced evokes emotions, which makes it easy to get caught up in discussions about color choices and fonts instead of looking at the core - i.e. user-friendliness. To counteract this, you often start by specifying the requirements with the help of wireframes, which then gradually grow to a finished design sketch.
What is a prototype?
Unlike a wireframe or design sketch, a prototype includes interaction. You could say that 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 it works when using the product. You should simply be able to perform user tests to see how users interact with the page or application. In this way, you get a good insight into the 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
Benefits & Limitations
- Test and detect any defects before development
An advantage of using prototypes is that you can test a product before it is fully developed. In this way, you save both time and money on detecting any errors or adjustments that need to be changed before the actual development takes over.
- The time aspect
Developing a prototype is usually a bit more time-consuming, which affects the time and budget you have to deal with. 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 exactly is the difference?
If we summarize it a little briefly, one could say that wireframes, design sketches, and prototypes are different steps or different tools and methods during different phases of the design process. They all fulfill their own important function for delivering a finished digital product.
- Wireframes show the basic structure. Where things should be placed and what components should be present.
- Design sketches are based on wireframes but are more detailed. They include color and shape and give a clearer picture of what the finished product will look like.
- Prototypes Are clickable and include interactions that give us a good sense of functionality and usability.