The Difference Between Sketch, Wireframe, Mockup, and Prototype in UX Design

When embarking on a UX design for an app or website, there are many stages involved before coming up with the final product. After all of the researching and planning has taken place, the designer will first draw a sketch of the design, then make a wireframe of that sketch, followed by a mockup and then finally the prototype.

Sketch

A sketch is a very simple representation of an idea. It’s quick and rough, usually handmaid, and often done during a brainstorming session with the team. The most common sketch practice is the 6–8–5 design, where the designer creates 6 to 8 sketches in 5 minutes to get down initial ideas, generate many ideas, and iterate on the best ones. In UX, the sketch’s main goal is to outline the product’s layout before more details are added in future steps of the design process.

Wireframe

In this stage, the designer will plan out the layout of the elements. The designer can add simple shapes that represent where they want to implement images, headings, text, or icons, along with comments of how the interactions will work. This stage is typically completed using a UX tool like Sketch or Figma, and it is the beginning of the construction of the design. This stage will be in grayscale and iterated on many times before moving on to the next stage.

Mockup

The mockup is a mid to high fidelity representation of your idea. It gives a realistic perspective of how things are going to look in the final design. It could be in a detailed grayscale or it could be taken to the UI stage and have color implemented. In this step the designer will have portrayed all the visual details of the digital product, including layout, spacing, text, icons, buttons, typography, and graphics.

Prototype

The final stage in designing a digital product is the prototype. Prototype is a high-fidelity representation of the final product. It is interactive with clickable buttons and links. It behaves and acts like the actual app or website. The prototype is typically created using online tools such as Invision. Using a prototype is almost like using the real product, so once all of the stakeholders are happy with the final design, you can then start developing the product bringing your idea into life.