What is a mockup that you can’t hear anymore?
It’s a “mockup” that you often hear when it comes to website and application development, but you may think that “I know it somehow, but I can’t explain it properly.”
In this article, I will explain in detail the meaning and importance of “mockup” that I cannot hear anymore. We will also explain the differences from easily confused words such as “sketch”, “wireframe”, and “prototype”, so if you are uncertain about understanding “mockup”, please refer to it.
What is a mockup?
First of all, I will explain from the basic knowledge of mockups.
What is made to check the visual
A mockup means a “model” and is a non-functional but lifelike sample. Mockups are used in various industries such as the automobile industry and the construction industry. If you are familiar with it, for example, you may have seen it once at a mobile phone shop or a home electronics mass retailer. It is made in a shape that can be easily picked up so that you can easily imagine the actual machine, and is used to grasp the design and size.
It is also used in the design production stage of website and application development, and is created as a sample to visually express the completed image that you envisioned in your head. The mockup is just a model of static design, so we do not check the function or operation.
Three workflows that are easily confused with mockups
Design flows for website and application development are subdivided and often confused. Here, we will explain the differences between “sketch”, “wireframe”, and “prototype”.
* Sketch
Sketching is the process of drawing an idea. In the design flow, it is the first work to be done, and not only the words are lined up, but the actual drawing is done to formulate the concept. Mockups devise designs in detail, but sketches are the task of expressing, organizing, and organizing ideas.
* Wire frame
The wire frame is a component of the sketch examined in the previous process. In mockups, design parts such as color schemes, shapes, and fonts are decided, but in wireframes, a rough framework for where and what to place is decided. When created by multiple people, it can be said that it is an important part in website and application development because it can eliminate the difference in image between each other.
* Prototype
Quote: [Understand in 1 minute] Let’s make a prototype | Adobe XD-The official Adobe
prototype is a prototype that adds a function to check the operation etc. to the mockup. Mockup refers to a static “model” for visually checking images such as image insertion, placement, and color scheme, while prototypes are “trials” that include dynamic functions to improve mockup and check operation. It will be “work”.
Importance of mockup creation
By creating a mockup, you can visualize issues and avoid the risk of specification changes.
I will explain each of them with specific examples.
Can visualize issues
With the mockup, you can visually check the font size, color scheme, button position, and photo arrangement, so you can visualize the issues visually.
For example, use mockups when brushing up your UI design. The goal of UI design is to make it easy for users to use, so it is an important factor when considering user first.
A mockup that can express the actual UI can be said to be a necessary flow to return to the user’s perspective.
You can avoid the risk of specification changes
By creating a mockup in advance, it is possible to avoid the risk of specification changes due to image discrepancies. In order to prevent corrections and changes that are nearing completion due to lack of communication with the other party, we will visually express and share the image with a mockup created in advance.
By following this flow, smooth communication can be achieved and work can be carried out efficiently.
Recommended service for creating mockups
When creating a mockup, use material sites and tools that suit your needs to improve work efficiency.
Material site for mockup
On the material site for mockups, you can obtain materials that can be used in a wide variety of situations, such as materials that express the display on digital devices such as web pages and application screens, as well as materials for printed matter such as product packaging and business cards.
It is possible. The material is often distributed as PSD data, and is used in combination with arbitrary data on compatible editing software. There are other services such as Mockup Photos that can be combined with materials on the homepage and output in image formats such as jpg and png.
However, depending on the material site, there are provisions such as:
- Copyright notice is required
- Only for individuals and not for commercial use.
All of them are described in the terms of use, so be sure to check and use them correctly.
Mockup creation tool
A mockup creation tool is a design tool that can be easily created without any knowledge of coding or design.
Regarding the operating environment, there are those that work on the browser and those that are downloaded and used.
Functions vary depending on the tool, but in addition to the basic design functions, a comment function that allows feedback, a function that allows
teams to share created mockups with a URL and edit them at the same time, etc. are convenient when multiple people are involved in a project. One of the features is that it is equipped with various functions. Most of them can be downloaded for free, although there are restrictions, so it is recommended that you first use the free version and consider a paid plan.
