How to Create a UX Mock-up

User Experience (UX) mock-up is a high-profile visualisation of an app, website, or design, that is used to demonstrate the basic functionality and information/content structure.  

In the UX and User Interface (UI) design process, there are three main steps that you need to follow before you have your finalised UX mock-up. To help aid in remembering the order of the process, I refer to them using a Frankenstein analogy: 

  • Wireframes – The skeleton and structure of the product.
    Wireframes shape the way that your product operates and are the page schematic or screen blueprint. Wireframes are created as low-fidelity designs (with stripped back detail) and help to create the layout and flow of the product.
Create UX Mockup - Booking Screen
(Fig 1 - Wireframe example)
  • High-fidelity mock-up – The skin and look of the product.
    High-fidelity mock-ups capture the look and feel of the product. High-fidelity mock-ups incorporate the UI elements into the design, including actual content, typefaces, colour schemes and images.
Create UX Mockup - High Fidelity Mock-up Example
(Fig 2 - High-fidelity mock-up example)
  • Prototyping – Bringing your product to life.
    Prototypes are used to demonstrate behaviours and allow animations and interactions to be injected into the design. Prototypes simulate the product’s functionality and design details, helping the user to understand how the final product will function. Prototypes can be created using tools such as Adobe XD, Figma, and InVision or through hardcoding an offline version of the product. 

(Fig 3 - Prototyping example)

High-fidelity mock-up stylising

Once you have a finalised workflow, page structure, and have completed and approved wireframes, you can start thinking about stylising your mock-up. The high-fidelity mock-ups needs to portray the overall presentation of the product. Therefore, you need to ensure that the mock-ups reflect the design choices for:

  • Colour schemes
  • Layouts
  • Typography
  • Iconography
  • Visuals of navigation
  • The overall look of the product

The mock-ups need to sell your product to the client, so they need to look realistic and polished. Your thought process should be clear, explaining why you have made the important theming and design decisions. The mock-ups will provide a realistic perspective into the life of the final product.

Mock-up Anatomy

The anatomy of the mock-ups should be identical to the make-up of the page/product that the mock-up is trying to represent. The mock-ups will be used by developers to understand colours, sizing, spacing, font and elements. Make sure you have created a real representation of the final page/product. Any other changes or amendments after the mock-up has been approved have to be relayed back to the client, creating a new iteration cycle and potentially delaying the project.

Colour schemes need to be consistent throughout a product. Make sure you follow any branding guidelines that are already in place, including all primary, secondary and accent colours that the client uses in their designs. If branding guidelines do not exist, you need to communicate with the client to make sure you are applying the right branding.

If, for any reasons, you are making a change to the choice of colour, as yourself, “why have I made this choice?” and “should this be consistent with the other areas of the brand?“. This ensures that you understand the reasoning behind your design change, and you can confidently explain the change when pitching the mock-up to the client.

The main focus of UX design is how the users interact with the computer (human-computer interaction). Therefore, whenever you have been set a brief (which could be as simple as adding a new button to a screen), you need to consider the page flow, including:

  • Readability –
    Is the button legible, and does it meet accessibility standards?

  • Placement –
    Does the placement of the button make sense for the use case?

  • Consistency –
    Are the button styling and positioning consistent with the overall theme of the product?


Finally, ensure that you consider the fonts that have been used in the design and be consistent with your font choice. The font in the final design must match the mock-up approved by the client. The font should be included in the branding guidelines or confirmed by the client.

Conclusion

Mock-ups are extremely important in the product design process. Mock-ups help to demonstrate the final product to the client and are used to sell the overall idea. To achieve the best result possible, makes sure you remember the following:

  • Take your time – don’t rush through the design process
  • Be consistent with your styling choices
  • Pay attention to detail in the anatomy of your designs
  • Make your mock-up as realistic as possible
5 3 votes
Article Rating
Find out more about our services, products or read more about us.





0
Would love your thoughts, please comment.x
()
x