Mockup

You can fix it now on the drafting board with an eraser or you can fix it later on the construction site with a sledgehammer.

Frank Lloyd Wright

Between the wireframe and prototype, in the product design process there is one more step, which is to make a mockup. While during the creation of the wireframe, the project group focuses largely on Information Architecture and user experience and avoids visual details, the mockup is what is seen most often on Behance or Dribbble websites. It is a graphically refined project model, often resembling a screen from a phone. If a wireframe is the same as a blueprint for an architect, a mockup is a miniature model of a building. However, unlike the prototype, the mockup does not have designed interactions - it is not a project that faithfully imitates the future product.

What is a mockup in UI design?

The mockup is a visual, high-fidelity representation of the final product, which is prepared based on the wireframe assumptions, i.e., Information Architecture, key functionalities, navigation, and layout. The mockup complements these assumptions, verifies and supplements the draft design of the website or mobile application with a visual layer, e.g., about:

• layout
• color
• typography
• icons
• user interface elements

Mockups are characterized by focusing on fidelity and faithfully representing the project, but they are static images. At this stage, the project has no designed interactive elements - it has no dynamic elements and does not imitate the interactivity of the final product.

It can be said that at the mockup stage, more emphasis is placed on UI (User Interface) design than on UX (User Experience) design - work begins on how the page or application should look, so they take wireframes to the next level. However, it should be noted that work on UI and UX overlap and complement each other. Mockups can reveal potential errors that were not noticeable at the stage of raw wireframe form.

What’s included in the UI mockup?

To emphasize - mockups differ from industry to industry. When creating the UI of the mockup, attention is paid to the fact that the mockup should contain the following UI elements:

1. Layout.

During the design of the mockup, wireframe geometric shapes in shades of gray are replaced with specific photos and graphics. Thanks to typography, the text is also grouped, and all user interfaces are replaced with target components. The wireframe comes to life and becomes more and more like the final product.

2. Color.

An important aspect of any project. It plays an important role in building branding but also informs about the hierarchy on the site. With the help of color, you can improve the accessibility of the page - the use of appropriate contrast is of great importance in creating a good design. What's more, the color schemes also have an informative function, which is often used in the design of, for example, forms - errors are highlighted in red, and the success of sending data is usually signaled in green.

3. Typography.

It is a design element with a similar meaning to color - choosing the right font creates the brand but also the content on the page. Thanks to it, the text can build a hierarchy - highlight important information or hide information that does not play a special role. Typography also plays an important role in creating an accessible design, which you can read about in the Web Content Accessibility Guidelines (WCAG) documentation.

4. Icons.

They are a good complement to the text - they inform, thanks to which they guide the user through navigation in an even more comfortable way. Several icons have become a universal language in the world of digital media, so it is worth adding an icon to the text. It is worth remembering, however, that icons have cultural limitations.

5.  Spacing or white space.

Great attention should be paid to the emptiness between the elements. They add the necessary space to expose content and visual elements better.

Good practices to create mockups

Mockups can be tricky due to their visual complexity. Therefore, you should follow good practices and avoid those that can destroy a well-designed wireframe at an earlier stage.

1. Minimalism.

When designing, the rule "less is more" should be followed. A lot of decorative elements can confuse the user, which may cause the user to stop visiting the website or stop using the mobile application. Reducing the visual elements allows for easier access to the content. Therefore, it is worth rethinking each element of the website in terms of necessity and usability.

2. The art of observation.

Before each design, you should do research on the competition, and it is best to focus on those projects that have been successful. It's not about copying but observing which approach works best and whether users appreciate the latest trends or, on the contrary, look for similar websites or applications.

3. Adjusting the visual design to WCAG Guidelines.

More and more attention is paid to the aspect of accessibility, i.e., the best adaptation of a website or mobile application for people with disabilities. Design choices should respond to this turn of empathy. Therefore, attention should be paid to the choice of color palette, typography, and the size of all visual elements - it's about adjusting the size and contrast to the needs of users with disabilities as much as possible. What's more, such page customization works to the advantage of the entire project.

4. UI kits and components libraries.

By using ready-made components, designers often can save a lot of time when creating the basic components of a website or mobile application. It's about creating forms, buttons, and icons. This solution is especially useful for the project team that tests and iterates their ideas and uses a specific design system – Material Design or Bootstrap.

5. Trust common patterns.

Many people believe a digital product should be innovative and bring fresh air to the industry. Indeed, the design should not be a copy of another design. However, at this point, the idea is that the mockup should contain some well-worn and known interface patterns that have been around for many years. This approach allows you to navigate your website or app faster. Unusual solutions may confuse the user - an activity that was easy and pleasant on another website (e.g., finalizing an order) may turn out to be so complicated that the user will not stay on the website.

Advantages and disadvantages of mockups

Like any working method, creating mockups has advantages and disadvantages.

Pros for creating mockup:

1. Mockups are ideal for presenting the final product to stakeholders, and customers and getting user feedback. At this stage of work, the design project contains a high level of detail and realism, and it looks more and more like the final product. Moreover, the low-fidelity wireframe designed earlier gains a visual layer, making it easier to imagine how the product will work.

2. Mockups are ideal for product promotion. Because mockups show the final appearance of a website or application, they can be used to present to a wider audience.

Cons for creating mockup:

1. Mockups are not suitable for user testing. Mockups are typically used for presentation, not testing. Mockups are static, so they don't allow designers to test them with users. Testing is carried out during the creation of wireframes and at the stage of user interaction design, i.e., at the stage of prototyping.

2. Mockups are not dynamic. Mockups can be compared to screenshots. They have to present the visual side of the project. At this stage of project creation, all attention should be focused on the visual layer that will emphasize a well-designed wireframe. Dynamic design elements are only introduced at the prototype stage.

Main differences between low-fidelity wireframes, mockups, and prototypes

What's the difference between mockups, wireframing and prototyping? The first stage of project preparation, wireframing, consists in making sketches with particular emphasis on Information Architecture and functionality accepted by Product Managers and UX designers. It doesn't contain actual content. Such a project, tested by users and approved by stakeholders, receives a visual layer - a mockup is created, i.e., a very detailed but static model of the project.

The last part of the project is the creation of a functional prototype that not only has the features of a mockup but is also dynamic. This actually means the prototype is clickable and has designed interactions with which the user can interact, so it can simulate the end product. Prototypes are invaluable to the user testing process because it enables designers to observe how users interact with the features.

For more on the differences between wireframes, mockup, and prototype, see the definition of wireframe.

The importance of a mockup in the web design process

Each of the stages of creating a website or mobile application project is important. It is during the design of mockups that the idea takes the shape of the final product.

1. Design presentation to stakeholders.

This is probably the most important function of mockups. A wireframe is a sketch, often represented with grayscale and geometric shapes. On the other hand, the mockup shows not only the primary functionalities of the website and the Information Architecture but also the entire visual aspect. At this stage of work, customers have the opportunity to assess the final appearance of the product. Presentation of the model to stakeholders is also the moment when the visual layer is verified and adapted to the needs of customers.

2. Product promotion.

Mockup shows a visualization of the final product, they look like screenshots. Therefore, they are ideal for presenting the project to a wider audience on websites dedicated to portfolio presentations (e.g. Behance, Dribbble), social media, or UX/UI company websites.

3. Detection of potential errors.

Mockups allow designers to verify the original visual assumptions. At the wireframe stage, some issues may not be obvious, e.g., the wrong choice of color palette or the wrong contrast between navigation and visual elements.

4. Beginning of deployment.

The end of the mockup is the moment when developers can start their work on the code. Of course, developers are often needed from the UX design phase and the initial phase of UI design - they verify whether specific assumptions can be implemented. Mockups already allow the development team to code a website or mobile application, excluding the dynamics that are designed at the prototype stage.

Conclusion

Designing mockups is to create an image of the final product - the previously designed wireframe looks more and more like a website or a mobile application. At this stage of work, the work of UI designers is more important. They are the ones who bring black-and-white sketches to life with a color palette, graphics, and appropriate typography.

An undoubted advantage of creating mockups is the fact that they are an ideal tool for presenting the final appearance of the project to stakeholders. Stakeholders can see how their ideas are brought to life and don't have to imagine what their product will look like. Moreover, mockups are ideal for promoting the design studio and the product on social media.