What is a mockup? Mockups explained
As a non-designer, of all the jargon you’ll commonly hear in the design world, from prototypes and wireframes to high and low-fidelity designs, the term mockup is the one you are probably the most familiar with.
In truth, the term mockup is a multi-use term that is used in a whole range of situations however, within the context of design, a mockup signifies a very specific step of the design funnel, one where your concept or design idea really comes to life.
So, what exactly is a mockup? What does creating a mockup entail? And what steps do you need to take to create the perfect mockup design for your website, app, or online service? We answer all in our ultimate guide to design mockups.
What is a mockup in design?
You may see the term mockup used across various fields of product creation however, within the world of software and web design, a mockup can be best described as a visualization of a web page, web app, or mobile app. This visualization includes several of the design assets that the final product will include and may also include several other enrichments such as editorial copy, CTAs, and structured data such as FAQs.
It's important to remember that, when we discuss mockups in the world of design, we are using the term within the wider context of the design funnel. For this reason, mockups can always be thought of as static visualizations. Once a layer of functionality is added to the design (e.g., links between pages, demonstrative light boxes, and popups), the mockup becomes dynamic and should thereafter be referred to as a prototype.
What is a wireframe mockup?
You may have heard the term “wireframe mockup” used in place of “design mockup” however, for the purposes of streamlining the design process, it’s more constructive to set clear distinctions between the term “wireframe” and the term “mockup”, as “wireframe mockup” can be a little misleading.
So, what is the difference between wireframing and mockups? Well, a wireframe is a schematic that demonstrates the structure, flow, and placement of content within your design. Wireframes typically contain little to no actual content or assets and instead allow the project lead to demonstrate the overall scope and intent of a project (you can find out more in our beginner’s guide to wireframes).
Mockups, on the other hand, contain all the visual elements and content that you might want in your design to demonstrate the aesthetic intent of your project. Although mockups technically are high-fidelity wireframes, it’s easier to think of wireframes as being asset free, and mockups as being enriched wireframes.
What is a mockup in web design?
As with all design mockups, web design mockups include all the functional elements of a design, with several enrichments across both the design’s copy and the visual assets. Web design mockups are typically presented in a desktop aspect ratio of 16:9. This helps stakeholders, team members, and other parties visualize the design as it would be seen onscreen.
It’s important to remember that you may also see web design mockups in mobile screen aspect ratio as if you are viewing the design on a mobile device. As mobile accessibility for websites has become more and more important, so too has the visualization of web pages in mobile resolution. This shouldn’t be confused with app mockup design, however, which is also commonly displayed in mobile aspect ratio.
Curious to check out some real web design mockups? Our website design templates include a number of examples of web mockups that you can update and adapt for your own project!
What is a mockup in app design?
As with web design mockups, app design mockups demonstrate the structure and layout of all the screens in an app design and include visual and editorial enrichments to demonstrate the overall functionality and aesthetic of the design.
App design mockups tend to be presented in mobile aspect ratio however, some mockups may be specifically designed to represent tablet apps or browser-based web app designs.
What do design mockups usually include?
Design mockups are usually created to demonstrate both the purpose and feel of the app or web page, whilst also allowing the creator to give a flavor of the branding, color scheme, and the tone of voice of any editorial content. Most design mockups typically include the following:
- Structure of the page/pages of the app or website
- Layout of any pages and where core elements should sit
- Core functionality of the design (e.g., the user interface)
- Some use of color, including general color schemes and imagery
- Branding including typography, stylings, etc.
- Editorial copy to demonstrate the intent or focus of the various sections
Using mockups in the design process
As a non-designer, one of the most exciting things about building a design is being able to populate a wireframe with placeholder editorial copy and visual elements to truly bring your design to life. The fact is, using mockups in the design process is a fundamental part of the design funnel, regardless of whether you are a seasoned designer or a design novice.
Creating high-fidelity mockups allows you to take your rough sketches and wireframes to the next level, it allows you to share with other stakeholders, gather feedback easily, and update your design to speed up the sign-off process. Building your mockup has never been easier with the power of Uizard, which helps you effortlessly transition from wireframe to mockup, and from mockup to high-fidelity, functional prototype.
How to use app or website design mockup software
Using specialized software to build your mockups can be a great way for non-designers to get involved in the design process or lead on their own design projects. Tools like Uizard can also be great for seasoned designers who want to easily collaborate with other stakeholders.
To get started with Uizard, simply sign up and get working on your own design. If you want to streamline your design process or work with straight-out-of-the-box designs, Uizard mockup templates are the perfect way to get started. Simply choose your template and edit it to suit your own project. Try Uizard for free now!