Mockup
What is a mockup?
A mockup is a preview of what the layout of a website or product will look like before it is finally designed. Its main use is to show the client what the final product will look like before it is completed.
In web design, mockups are used in the initial design phase to define the concepts and ideas on the basis of which the site will be created and include the navigation structure and other elements that form part of the design in detail.
In general, mockups are created using predefined templates and elements from graphic design programs, as well as specific tools that allow webmasters to add some control elements and simple navigation features.
1. difference between wireframe and mockup
It’s very common to confuse the two terms, wireframe and mockup, so it’s worth clarifying each one.
A wireframe is a low-quality sketch. It’s a set of gray boxes and text that are used to see, at a glance, how the information is organized on the screen. It helps you get an idea of what each section of the site will contain and its structure at a basic level.
On the other hand, a mockup offers more quality and detail, the layout is much more detailed with various graphic elements, correct typography and the use of colors is applied. It is an advanced stage of design.
2. stages for creating a mockup
The process normally used to create a mockup consists of several phases, which are:
- Define the use and objectives of the site. Understand your target user and what you expect from your website.
- Observe similar companies. Competition is good and makes us improve, even when creating our website. Take a look at their websites and try to find inspiration.
- Create the complete site structure. Create a possible site structure in which the sections, pages, colors, fonts, etc. are clear.
- Draw up the layout of the content on each page. Once the structure has been defined, it’s time to create each page and section as precisely and specifically as possible.
3. Applications for creating mockups
The general design applications that are normally used to create mockups are:
Specific applications for creating mockups include:
- Balsamiq
- Invisionapp
- Mockflow
- Gomockingbird
- Hotgloo