What is a Mockup?

Anyone who has ever been involved in designing a website or an application knows the importance of creating a mockup.

What is a Mockup?

A mockup is a static design for a web page or an application. It includes many of the final design elements, but it is not functional. Mockups are not as polished as the final product and often include placeholder data.

Key Elements of Mockups

A mockup is a static design and does not have the functionality as a live product or a prototype. A mockup of a web page might include a colored CTA button for example, but it won't open up a form when clicked, unlike a prototype. Although it might have a cover image at top of a web page it will not contain an active carousel. Even when a mockup isn't the first stage in design development development, it is still a significant step on the way to a final product.

What's the purpose of mockups?

A mockup is a visual representation of a website or application. A mockup is used to visualize an idea or wireframe. It also allows designers to see how different visual elements interact. As such, mockups allow stakeholders to visualize the design of the product and make suggestions for layout, colors, images, styles, etc. A mockup can be used to test the effect of a change such as adding a header or centering an image might look.

How do mockups fit into web design?

Mockups are roughly at the middle of the web design process in terms of stages:

1. Idea finding
2. Wireframing
3. Mockup
4. Prototyping
5. Go live

Wireframing is about creating a rough layout of the product, whereas mockups allows you to make the layout more solid and realistic. Once stakeholders have reached an agreement on the visual elements of the mockup it will move into prototyping where real development is required to make a functional version. All of this takes place before the product goes live. It's then tested with actual users and visitors.

What's the difference between a wireframe and a mockup?

Mockups are created after the wireframe is designed. They build on the wireframe's design. A mockup is more closer to the finished product than a wireframe:

1. Mockups are in color, whereas wireframes are in black and white.
2. Mockups illustrate visual characteristics, while wireframes are useful for functionality.
3. Mockups are more detailed and show how design elements fit together visually. Wireframes represent abstracted elements.

The wireframe is an analogy for the blueprint of a house. It shows in black and white the layout of the house as well as how rooms interact. A mockup is a 2-dimensional rendering of a plan. It shows color of the walls and the floor or the textture of the wallpaper. These can be quickly altered to display different wallpapers or darker floors. It can be used to show stakeholders alternative visuals without altering its structure.

What's the difference between a Mockup and a Prototype?

Prototypes simulate how the real product works. A mockup is just a static representation; a prototype shows stakeholders the majority of the functionality by simulating it. A prototype allows stakeholders to experience the product as if they were a user.

How to make mockups

You can use a general graphic designer tool to create mockups. Often designers choose Adobe Illustrator to create them. This vector design product has been used to create a lot of mockups. It is a inofficial industry standard and there are many templates and tutorials to create mockups with Adobe Illustrator.

Conclusion

The mockup stage of development can easiliy be overlooked. It can feel less important than wireframing or prototyping. However, it is important for every development team to build mockups and iterate through several designs to help making decisions.

Get in touch with us and learn how to integrate mockups in your design process.

Source: CliqueStudios