Home > Prototyping and wireframing > 5 pros & cons of the UI mockup in web design

Designing for web or mobile? Check out our list of pros and cons of using a UI mockup in the web design process.

Web and mobile design enhancing tools such as mockups, wireframes and prototypes are fast becoming the web designer’s best friend, and essential tools in the web design process. With a greater-than-ever emphasis on user experience and the teams and resources tasked with building these experiences, these design tools are proving their worth. In this post, we explore the pros and cons of the UI mockup in the web design process.

But first, what is a UI mockup?

Software UI mockups can range from simple paper sketches to semi-functional user interface models built with a software development tool. Whether made with paper or with digital tools, such as Justinmind, the UI mockup is typically a static, visual representation of a website or mobile application’s user interface or screen. The UI mockup intends to help the viewer visualize the basic layout, design and content as well as demonstrate the essential functionality of the user interface before any interaction is added. In the context of the web design process, it’s the next step after you’ve created a wireframe: the ‘bare-bones’ blueprint of your design project.

Pro #1: UI mockups help you design your most effective product

One of the best things about the UI mockup is that it encourages us to design with purpose. How’s that you ask? Well, having a visually reliable impression of your end product enables you to see the bigger picture and bring the pieces of the puzzle together. And, by being able to envision your designs, you can organize the details of your project wisely and make your processes more efficient.

Building a mockup of the screen you’re designing can help to unmask visual components that don’t fit, before you arrive at the final, developed product. At the mockup stage, you are already assessing the visual hierarchy between elements. Visual hierarchy, such as the placing of labels next to relevant fields and the grouping of related topics together in lengthy input fields can make for better readability. Establishing the spatial relations between UI components whilst mocking up will allow stakeholders to review the visual aspects of the project with enough detail in place, without you having to pixel-crunch too early on. In this respect, incorporating the UI mockup into your design process can help to avoid rework, wasted time and wasted resources in the long run.

Con #1: Make sure everyone understands what your mockup can and can’t do

When building a mockup, always consider your stakeholders, clients and user testers. The UI mockup is essentially an advanced version of the low-fidelity wireframe, a step closer to the final product, both in terms of functionality and visual richness. Nevertheless, ensure that your viewers are aware of what the mockup actually provides, in terms of interactivity. For instance, if something is not yet clickable, make sure you make that clear when presenting your mockup. You don’t want to frustrate stakeholders who were expecting a fully clickable design.

Download Justinmind today and build effective designs now!

Download free


Pro #2: Gain confidence in your design before adding code to it

Starting off with paper sketches and basic wireframes can be a great way to figure out the nuts and bolts of functionality. But when you’re designing multiple screens, or even many elements within the same screen, going that little bit further can really come in handy. Wireframes are a good starting point, but spending a little more time evolving them before moving on to hard-core development will give you more confidence in what you’re making, as well as make sure that the development team is on the same page with the design team. Everyone will have a better idea of what they need to do, without getting bogged down with code. Aces!

Con #2: Too many cooks (wireframe, mockup and prototype?)

Going through the motions is generally a safe bet with web design: wireframe a basic outline of your design, create a mockup to add more detail and eventually move on to a high-fidelity prototype for an authentic model of your end product. But, what if the design is simple enough for you to jump ahead? Consider your design process in full and really think about whether the mockup step is right for your project. You may find that it doesn’t take much more time to build the real version than it does to mock it.

Pro #3: Save money and resources with paper mockups

Paper mockups are low cost and easy to iterate because they’re easy to alter. If you’re looking for a low cost, low risk design framework, mockups may be just the thing. Much like working with a wireframe, paper mockups allow for easy and quick revisions that can stack up pretty quickly, as they do not require code or programming. Find errors early on and iterate until your heart’s content! What’s more, this flexibility means that you can save resources for the nitty gritty later on in the design process.

Con #3: Consider what’s best for the project’s requirements

Paper and low-fidelity mock-ups may be favored for projects on a budget. But if a client is presented with an early version of a system – a mid-to-high-fidelity digital UI prototype – with substantial visual and functional work, they may be able to better evaluate their requirements which can be better demonstrated with fine design details and interaction in place.

Pro #4: Encourage communication and collaboration with digital mockups

Collaboration in the design process is essential and is the best way to handle big and complex projects while saving time and increasing your productivity. Mockups bridge the gap between cross-functional teams as a communication device. Serving as a discussion medium between the team members by facilitating work across disciplinary borders and bringing together teams who are working on different objectives because at the mockup stage, the project is going to start to bringing in functionality as well as the visual design. This is where the mockup has one up on the wireframe, providing a language that all can communicate with and understand.

Con #4: High fidelity provides visual confirmation for clients

When static mockups are not to scale, they can confuse and even distract clients and stakeholders, especially if that already have an idea of what to expect from the design. For clients and stakeholders, presenting a digital, high-fidelity design can be best the way to go, as simply using a flat design might not be enough in terms of visualization and translating ideation. Sometimes, it’s difficult for the client to visualize the final result just by looking at a flat graphic file, which is, more often than not, completely out of context.

Pro #5: Validate your designs with the right tools

With digital UI mockups, you can already start to think about validating your design, by creating personas and performing some initial usability testing. You’ll start to work on the initial design flow and performance characteristics of your product by looking at a mockup. You should have a good idea of how the final product will look and a rough idea of how it might function even if the full functionality isn’t yet in place.

Con #5: Mockups don’t help you demonstrate navigation flows

Although you can create a reasonably realistic device model with a mockup, UI mockups alone can’t effectively capture the flow of a system without the help of written descriptions of the functionality, or a powerful prototype that allow you to interactively map the user navigation flow through scenarios. With an interactive wireframing and prototyping tool, you can design and simulate scenarios to map out the user flow of your design.

With Justinmind, you can validate your designs with a smart, interactive prototyping suite. Start with a basic outline of your idea with a static wireframe and build it up as yours and your client’s pace. 

Emily is Marketing Content Editor at Justinmind


Your email address will not be published. Required fields are marked *