Mockup Is – The term “mockup” is quite rarely known by people, except for those who work in the field of design and even in the field of programming. Its existence is also very reliable, especially for companies or startups that are releasing new products. Yep, basically this mockup can be used to present the design of the product being developed. This mockup is a real picture of the product or concept being developed. The mockup shape looks like a mockup or presentation tool that gives a 3D image.
Did Sinaumed’s ever make mockups when he was in school? Even cooler, this mockup can be made using an application, you know, so the results will be more realistic. So, what exactly is a mockup? What are the functions and benefits of mockups in the design world? Despite being a realistic-looking presentation tool, do mockups have advantages or disadvantages? So, so that Sinaumed’s understands these things, let’s look at the following review!
What Are Mockups?
Basically, a mockup is a visual medium that is designed in such a way as to be given certain effects so that the results become more real. The mockup will later provide a real picture of a product design to be released, so that it will be analyzed whether the actual results will be good or not. In short, a mockup is a concept of a work or product that is made digitally to make it look more real. For example, Sinaumed’s wants to add a business logo on a mug. Instead of having to print the logo first and then attach it to the mug, it would be simpler if you just used a mug mockup.
Reporting from glints , the form of this mockup is a picture of mid-fidelity (the design still looks simple) and high-fidelity (the design has been refined and is more complex so it looks real) which will provide choices regarding design elements. Starting from color, layout, typography, iconography , visual navigation, to the overall appearance of the product or work being designed. Not infrequently, this mockup will be made in 2D and 3D variations, then given several visual effects so that the results look real and modern. Since this mockup was created by providing an overview of the product being designed, its existence is in the concept design stage. To be precise, before entering the final execution.
The use of mockups is not only applied by designers, but also architects, especially when presenting their design concepts to clients. Now, through this mockup, later designers and architects can convey design concepts easily because there is a real picture of the concepts they are developing. Then, the client can also provide feedback regarding the mockup that is being delivered.
Mockup creation can be done manually or with an application. If manually, of course, rely heavily on paper media and equipment in the form of color paints to pens. So, if you use an application, there are currently many modern design applications for creating this mockup. Call it Adobe Photoshop, Adobe Illustrator, CorelDraw, Macromedia Freehand, and others. There are even special applications for making website design mockups.
Functions & Benefits of Mockups in the Design World
Mockup Functions
- Serves as a guide when working on a design so that it doesn’t easily deviate from the initial concept.
- Become a real picture of the design.
- As a preview of a design concept before printing.
- Saves more costs because there is no need to make a dummy (copy) first.
- As a medium for presenting web design projects.
- Make it easy for clients to get an overview of the product concept being developed.
Benefits of Mockups
- Easy Revision
When displaying a mockup in front of a client, surely they will provide feedback so that revisions occur. Now, through this mockup, later revisions or improvements will be easier to do and in detail. It only shows directly which parts of the product need repair.
- Provides a More Realistic Product Picture
The purpose of making a mockup is in line with its benefits, which is to provide a realistic picture of the product being developed. Yep, the form of the mockup will of course look like the final product.
- As Media Presentation
As with its function, mockups are very useful as media presentations about projects and products that are being developed. Through this mockup, designers can show how the designs they are working on are developing to their audience or clients. Later, it will be easier for the audience or client to imagine what the original project or product will look like if it’s finished in finished form.
Aspects in a Mockup
Since this mockup is part of the design, of course there are aspects that must be considered. So, here are some aspects that must be included in a mockup.
1. Layouts
Namely the description of the placement of the content that will be displayed. There are various types of layouts, from Z-shape, F-shape, single column, split screen , and many others. Just adjust the layout to the project or product being developed.
2. Color
Not only in 2D design, but color also plays an important role in 3D design. Just a little trivia , the use of color greatly affects the psychology and feelings of a person. Therefore, in making a mockup, you must pay attention to the use of the correct colors for the convenience of the user when using the product.
3. Contrast
Almost the same as color, contrast also has a big influence on user comfort when using your product. If the contrast in the product, both in the form of a web display and an application, is not good, it will be difficult for users to use it.
4. Typography
This typography can include the type and size of the font to the spacing of the text used in your product. If the type, size, and spacing of the text match, then the design will be more interesting to look at.
5. Spacing
Spacing in a design doesn’t have to be dense all the time, right… Precisely with empty space in a design , it can enhance the appearance and become a good element.
6. Navigation
This aspect is usually implemented in products in the form of web views and applications. If this aspect of navigation is set correctly, users can easily use the application, especially when browsing the site.
Common Mockup Examples
Website Mockups
In making a website, whether it’s a corporate or personal website, there must be a UI/UX Designer who relies heavily on mockups in the process. This is so that every website that is created can be in accordance with the concept and the client will be satisfied with the end result. The purpose of making this website mockup is so that the client has an idea of the concept that has been given before about how the website will look like that will be made later.
Application Mockups
Almost the same as creating a website, an application also requires a UI/UX Designer in the process. Therefore, it is not uncommon for application mockups to have the same appearance as website mockups, because applications tend to be accessible via smartphones or the web.
Product Packaging Mockups
Before printing how the packaging of a product looks like, the designers will, of course, make a mockup first. It aims to provide a real picture of the results of the packaging concept that has been made before. Usually, this product packaging mockup will be displayed in digital form so that it can be seen and touched directly. Also through this product packaging mockup, clients can have real experience in understanding how the shape of their product packaging will be.
Logo Mockups
Making this logo mockup is suitable for Sinaumed’s who is starting a new business. Yep, even though your business is still new, of course it requires a logo as an identity. Usually, logo creation will be handed over to the designer so that the mockup will be shown digitally. In fact, not infrequently, the logo will be affixed to a certain object as if it were merchandise. Items that are often used as media for this logo mockup are mugs, bags, t-shirts, paper bags, and many others.
Advantages and Disadvantages of Mockups
Even though mockups are very useful for designers to show how their ideas are conceptualized to clients in real terms, it turns out that their existence also has drawbacks, you know… So, here are the advantages and disadvantages of a mockup.
| Pros of Mockups | Lack of Mockups |
| Provides a more realistic perspective.
Because the shape resembles the final product according to the previous concept plan. |
Lack of product flow.
Flow here means a product flow from start to finish. However, because the mockup is very different from the prototype, stakeholders cannot directly click or enjoy the features directly. Mockups can only see the visuals. |
| Save budget.
This is because through this mockup, designers can ensure that there are no errors in the concepts that have been developed before. |
Just a visual display only.
As explained earlier, the mockup only provides a visual display of the product being developed. Therefore, feedback from clients usually only focuses on visual elements rather than function. |
| Facilitate stakeholders.
Since this mockup provides an overview of the design concept in detail, stakeholders can have a good understanding of the final product. |
Raise different expectations .
Since this mockup was created using graphic software, not a coding process, it is not uncommon for stakeholders to have high expectations. |
| Facilitate Revision.
After carrying out the presentation process to the client through the mockup he made, the client can provide feedback on what things need to be improved. Well, this feedback will make it easier to revise before proceeding to the coding stage. If you have entered the coding stage, revisions will actually be more difficult to do. |
The difference with Prototype
Basically, a mockup is a detailed visual display of how the product concept is, accompanied by visual aspects such as images, colors, typography, layout, and more. While the prototype is a concept image that is clickable so that the result can respond to commands like a finished product. This prototype is an advanced process of a mockup. So, here are the striking differences between a mockup and a prototype.
| Mockups | Prototype |
| Static | Interactive |
| Focus on the visual appearance of the product design | Focusing on how easy as well as functionality of a product |
| Stages after making the product concept. | Continuation of the mockup stage after getting feedback from the client |
| Using tools in the form of graphic software, for example Photoshop, Sketch, CorelDraw, and others. | Using tools in the form of coding, for example Justinmind, Invision, and Mockplus. |
| Can identify and correct errors in product design. | Help designers to find new design ideas. |
| Shows the user to interact with existing design elements. | Shows how the user can interact with the product. |
So, that’s a review of what a mockup is and its functions, benefits, examples, advantages and disadvantages, to the difference with a prototype. Is Sinaumed’s interested in creating a mockup to make releasing new products easier for your business?