For those of you who work in the world of design, the term mockup is certainly no stranger to you. Usually, before a design is made, graphic designers will start by creating a mockup. Then, what is the meaning of mock up? So, in this article, we will discuss in more detail about the mock up, starting from its meaning, function, and so on.
Making a mock up itself is very important to support the design that will be made for clients. From the mock up, clients will be able to see an overview of a design when it is implemented in a real field. In general, a mock up is a form of visualization that represents the design of a product before it is realized. Generally, mock ups will be used when making presentations or pitching in front of clients. Simply put, a mock up will help them to better understand the information and also the design concept that will be made.
Making this mock up can be used for almost all types of products, be it websites, applications, or food packaging products. Then, what is an example of the mock up itself? Let’s see the full explanation below.
Mock Ups Are
Mock up is a design or product design model that is made as a reference before it is realized. In other words, a mock up is a visualization to make it easier for the designer to execute the finished product. Generally, a mock up will be displayed during the presentation process, so that other people can get an overview of the product. Related to this, mock up is the most important key to determine whether a design concept is acceptable or not, especially when dealing with superiors at work or clients. The existence of this mock up can also make it easier for designers or related parties to receive suggestions.
The mock up itself consists of two categories, namely low fidelity and high fidelity. This low fidelity mock up category is a design that is still very simple. Meanwhile, the high fidelity mock up is a design that is quite complex in displaying its product.
Mockup function
Referring to its meaning, it can be said that the function of the mock up itself is to facilitate the execution process of the product design. A simple design might be helpful enough to convey a design idea, but a mock up is a real picture of the product and is the most realistic to resemble the final product. Therefore, mock ups have an important role in the new product release process. The following are some of the mock up functions, including:
1. Provide a Real Picture of the Product
This mock up design is a realistic representation of a product. Therefore, having this mock up will help related parties, such as UI/UX designers, to observe every element in the product. The design can be a reference to obtain appropriate and precise results. In addition, this mock up design is easier to convey than just a plain design display or even in the form of writing.
2. Save Costs
The function of the mock up is to save the budget for the release of a product because any deficiencies or errors that may occur can be overcome in the presentation process of this mock up. Generally, designers will submit their mock up designs and then other people will submit their criticisms, opinions, and suggestions. This is considered to be able to save costs by minimizing revisions during the process of making the finished product. Thus, if there are several things that must be changed, there is no need for refinancing to make a similar product.
3. Time Effectiveness
Besides being able to save costs, the function of the mock up is to increase the effectiveness of processing time. If errors can be minimized during the mock up design process, then the time needed will also be faster to correct errors. This is certainly different if the product is ready for the market but there are still errors that must be corrected. The time needed to make a mock up will certainly be much shorter when compared to remaking a finished product. Therefore, if there are improvements or additions from the client’s suggestions or opinions, the process will be faster.
4. Media For Presentations
Apart from the functions mentioned above, mock ups are a visualization medium used by designers to convey their designs. Without a mock up, conveying ideas or information will be much more difficult because everyone’s picture will definitely be different.
5. Facilitate the Revision Process
Besides being able to save a lot of time, a mock up will certainly make it easier to make product improvements. As we understand that in the world of design, revision is a fairly common thing to do. In fact, revisions to a product can happen many times. For example, in making a website, there are several coding processes that need to be done to add features, improve appearance, and so on. When you want to improve a website that has gone through the process of writing code, you need a budget and also more time to do it. Repairing a mock up from scratch will be easier to do when compared to having to repair a product that is already in the final stage.
Why is Mock Up Important?
Based on the function of the mock up itself, there are several reasons why it is important to create a mock up before realizing a product. Here is an explanation.
1. Attract Investors’ Attention
Mock up is the initial stage of designing a product that is also useful for convincing others, including bringing in investors. Why is that? Investors certainly will not invest capital in something that is unclear and unpromising. The existence of this mock up is one way to provide a detailed, attractive and detailed design picture to investors. In developing a product, whether in the form of an application or a product of investor funds, it is certainly important to support business development.
2. Estimation of Working Time
The mock up design is one of the references used to estimate the processing time and also the development of a product. Even though it’s only a two-dimensional design, a mock up will provide a detailed description of each element in the product. This of course will make it easier for the developer to plan the timeframe and also which parts must be worked on immediately.
3. Simplify the Coding Process
When we talk about the mock up design of an application or website, the design certainly aims to make it easier for developers to prepare what elements are needed. In addition, the mock up will also facilitate the coding process because the workflow or application algorithm has also been mapped in the design.
Anatomy Mock Ups
In a design, there are several aspects that we need to pay attention to. Each type of design has its own mockup anatomy. The following are some of the aspects in the anatomy mock up that need to be understood, including:
1. Layouts
The layout on the mockup is an illustration of the placement of the content that will be displayed on a design. Some examples of layouts are F-shape, Z-shape, single column, split screen and so on.
2. Color
Color is one of the components in the mockup. The use of color can affect the user’s feelings towards the product. This will have an impact on user comfort when using your product. Therefore, the determination of color is very important when you want to design a product.
3. Contrast
As important as color, contrast is also very influential for user comfort. This is because if the contrast in the appearance of the website or application is not good, then the user will find it difficult to read the text displayed. Therefore, contrast is a component that every designer needs to pay attention to.
4. Typography
Typography or typeface is one of the mockup anatomy components. This is because using the right font type, size, and spacing for text will make a design more attractive and comfortable to look at.
5. Spacing
A design doesn’t have to be full and solid. The existence of empty space in a design will actually enhance the appearance. In fact, empty space or space is a good element. This space will make it easier for users to read the content displayed.
6. Navigation
Navigation is one of the mockup’s anatomy components. With proper navigation, users can easily explore the site or application being developed. As with designing layouts, designing navigation in a product will make all the components or elements in the design usable by users.
Mockup Application
Basically, this mock up design can be made manually. However, in today’s era, there are many mockup applications that we can use. The following are some examples of mockup applications that you need to know, including:
1. Figma
The Figma application will help you do wireframing. Apart from being free, this application also provides various features and convenience for web designers to create their mockup designs. Not only that, Figma’s appearance and features are also quite simple. So it is very suitable for use by beginners.
2. Canva
Canva is one of the most popular mockup applications because of its ease of use. There are various templates available to help you create a website prototype or a product. Some of the assets available on Canva are both free and paid to use.
3. Mockflow
Mockflow is a mockup application that allows you to create interactive wireframes and UI prototypes. Apart from that, Mockflow also allows you to collaborate with each other in the process.
4. Proto.io
Proto.io is a prototyping platform specially designed for creating mobile application mockups. There are various features available to support the process of creating an interesting and complex mockup. Proto.io can also be accessed on many types of devices, such as iPad, iPhone, and Android.
5. Wirefy
Wirefy is one of the online wireframing software made specifically for the process of creating websites and developing tools. By using this one application, you can speed up the design process because this software will create smoother transitions between the initial sketch and the work.
Sample Mockups
After understanding what a mockup is, its benefits, functions, and also an example of its application. Now, to complete our understanding of mock ups, here are some mockup examples of various types of products, including:
1. Website or Application Mockup
In making a website or application, a mockup design is needed to see how the concept that we are compiling. This is useful so that each team and also the client can understand a real picture of the product, what it looks like, colors, the use of typography, navigation, and other elements that can support user comfort.
2.Logo Mockups
Besides being useful for making websites or applications, mockups can also be used in making logos for certain companies or businesses. Usually, designers will be asked to create a logo design that the company needs. Then, the logo will be placed on several objects, for example on letterhead, business cards, banners, or company merchandise items such as bags, t-shirts, and so on.
3. Packaging Mockups
Another mockup example is a physical product, namely product packaging. In contrast to digital products, physical products have a shape, size, and volume that can be held. Therefore, these items require a mockup to be able to display product packaging. So that can be imagined by the client.
From the explanation above, we can understand that a mock up is a visualization or draft design concept that will be applied to a product. In the world of UI/UX design, a mock up is a concept design that includes visual display elements, typography, colors, and also navigation for a product.