{"id":6369,"date":"2015-03-18T17:32:02","date_gmt":"2015-03-19T00:32:02","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=6369"},"modified":"2021-12-20T17:41:01","modified_gmt":"2021-12-21T01:41:01","slug":"designers-shouldnt-neglect-mockups","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/designers-shouldnt-neglect-mockups\/","title":{"rendered":"Why Designers Shouldn’t Neglect Mockups"},"content":{"rendered":"

This post is an overview of why we recommend mockups, covering some of the points in our free pocket guide Web UI Design Process: The Visual Power of Mockups<\/a>.<\/p>\n

We\u2019ll start by explaining what they are, then why they\u2019re useful, and finally where they can fit into your design process.<\/p>\n

What is a Mockup?<\/h2>\n

Before we get into what a mockup is, let\u2019s talk about what it isn\u2019t. A mockup is not a wireframe and it\u2019s not a prototype.<\/p>\n

Wireframes are a low-fidelity blueprint represented with gray boxes and placeholders for detailed content. A skeleton of the design to come, wireframes act mainly as a placeholder for structure and layout but can be shown to stakeholders for early feedback.<\/p>\n

Prototypes, on the other hand, demonstrate how the design works. Their role in the design process is more complex: they help refine usability, explore combinations of interactions, and reveal any inconsistencies in the overall experience.<\/p>\n

\"High<\/a><\/p>\n

Source:<\/i> UXPin<\/i><\/a><\/p>\n

Typically a mid- to high-fidelity representation of the product\u2019s visual appearance, mockups focus mainly on the visual look of the product but also hint at the basics of its functionality. The main role of mockups is the visual design \u2014 this phase solidifies the product\u2019s color schemes, typography, iconography, and the atmosphere created from its appearance.<\/p>\n

Mockups give viewers an idea of how the final product will appear, and the implementation of interactive elements like buttons and icons also hints at the function. Of course, mockups don\u2019t actually represent the functionality like a prototype.<\/p>\n

As such, mockups have an advantage lower-fidelity wireframes and prototypes lack: mockups are more digestible to clients stakeholders. With a well-made sample in front of their eyes, stakeholders don\u2019t have to rely so much on their imaginations.<\/p>\n

More complex than a wireframe but less functional than a prototype, a mockup fits perfectly as a transitional step between the two.<\/p>\n

Why Do Mockups Matter for UX Design?<\/h2>\n

As we mentioned before, the mockup phase is often tossed aside, especially if designers prefer the Lean UX rapid prototyping method<\/a>. But if you have the time and resources, mockups are the best way to explore visual design decisions before you need to live with the consequences of code.<\/p>\n

Avoid mockups, and you risk visual quality falling through the cracks.<\/p>\n

In his brief overview of mockups, the freelance web designer and design author Bima Arafah elaborates on why mockups are worth the effort<\/a>:<\/p>\n