justinmind-logo

What is a screen mockup? The UI design stage you just can’t skip

March 03, 2020
what is a screen mockup

Think you don’t have time to make a screen mockup? Think again, because we’ve come up with a few ways to make mockups faster with less hassle

We’ve heard it (we may even have said it ourselves) before. “I don’t have time to add yet another design stage to my design process. Wireframe, prototype, wrap it up!”

When you’re designing app or web interfaces it’s tempting to try to skip the website mockup phase and just get stuff MVPed already. But mockups aren’t just the ugly sister to prototyping’s Cinderella; screen mockups are actually an integral part of awesome digital product design. That’s true even in projects that follow Lean principles or rapid prototyping.

Want to make a UI screen mockup? Justinmind can get you there within minutes.
Download Free

Let’s take a look at what a screen mockup should comprise, and how best to design mockups that complement your design process.

What is a screen mockup?

It’s easy to get confused about the difference between wireframes, prototypes and mockups. To get a handle on these differences quickly, it’s best to think about how each fits into the design process.

Between idea and development, there are usually three or four design stages. At a glance the stages break down something like this:

  • UI sketching allows designers to work through all their bad ideas and single out the ideas with potential
  • Wireframes are where the information hierarchy, content grouping and core functionality are worked out
  • Mockups contain the visual details
  • Prototypes bring together visuals and interactivity in a real-free version of the final product

These stages allow UI designers to test and iterate on their ideas quickly and cheaply, and to get sign off from stakeholders. And this isn’t solely applicable to brand new products. These four stages can be applied to interface updates or new versions too.

Let’s focus on the mockup stage. As screen mockups are made right after basic wireframing and before interaction is added, they’re often referred to as mid-fidelity. Screen mockups can be identified by their visual sophistication but total lack of interactivity. If you’re presented with an amazing looking set of screens that are 100% static, you’re looking at a screen mockup.

Decisions about fonts, color schemes, brand assets, content layout and navigation pattern styles will be worked out in a screen mockup. Basically, the mockup takes the bare-bones wireframe and dresses it up in some fancy looking clothes.

screen-mockup-designers-guide-2

So why bother with just making the app or web look pretty at this stage? Because mockups are one of the most effective ways of communicating visual requirements clearly. That’s especially true for stakeholders, who would probably freak out if you presented them with an early stage mockup. And while screen mockups aren’t interactive, an experienced app or web investor will be able to glean some functionality just by examining a visually faithful one.

“While the mockup furthers the wireframe’s purpose of documentation and organizing the team’s vision, it has an extra advantage that the wireframe does not: with its superior visuals, the mockup is more useful to stakeholders and investors.” Marcello Graciolli

Basically, mockups are the glue that binds the wireframing and prototyping stages together.

How to mock up a screen – a couple of methodologies

There are probably a few UI designers out there thinking “Another design stage? I don’t have time for that!” Initially the idea of adding yet another pre-development task to the to-do list can seem like crazy talk.

Luckily, there are a few ways to make the mockup-making process faster without losing efficiency. The methodology you choose will obviously depend on you as a UI designer and on the project you’re working on. Take your pick from the following screen mockup approaches

Coding mockups

Code-savvy UI designers could get their hands dirty building coded mockups as well. The good part about a coded mockup is that, obviously, you’re saving time at the development end by coding early on. The bad part is that unless you’re super proficient your code may well be unusable and, worse, your coding limitations could end up limiting your product.

Making screen mockups with your trusty design tool

Many designers would turn to their favorite design tool to make a UI mockup. Tools such as Photoshop and Sketch are all about creating pixel perfect static images after all.

The downer about building mockups in a design tool is that when it comes to turning them into prototypes you’ve got to build the design assets again from scratch, right? Happily, a mockup tool like Justinmind are fully integrated with Photoshop, Illustrator and Sketch. Build the mockup in your favorite design tool, import assets and keep working on them while you prototype. If you’re working with Justinmind all SVG files and artboards are fully editable.

Find out what Justinmind’s Sketch integration can do for your design process!

Making screen mockups with a prototyping tool

If you’re keen to cut out the hassle of tool hopping completely, you can also create mockups in a full spectrum product design tool. Try to pick a tool that has a good selection of pre-made UI elements that you can drag and drop into the mockup for instant fidelity. You also want something that gives you freedom with typography and fonts (Justinmind is integrated with Google fonts), and one that comes equipped with a ton of device-specific icons, buttons and navigation patterns.

screen-mockup-designers-guide-1

Watch out for these common screen mockup mistakes

“The mockup can either sell your design or plummet you into a cyclical tunnel of churn. That’s why, like it or not, interface designers often live and die by the mockup.” Luke Wroblewski

UI designers new to mockups might make these all too common blunders.

  • Expecting a screen mockup to communicate functionality: Remember, screen mockups look great, but they’re just a series of isolated images at the end of the day. They can’t capture the complexity of a website or app’s experience. Present a mockup to inexperienced stakeholders at your peril. Google’s Luke Wroblewski gives some tips on how to avoid this.
  • Feature bloat: It’s super easy to keep adding whistles and bells to a static mockup. A button here, a button there and before you know it you’ve got feature bloat.
  • Failing to solve the problem: Mockups can be pretty while failing to fulfil the true purpose of any design – to solve a problem. Don’t fall into the trap of viewing the mockup as isolated from the problem context.

Screen mockups – the designer’s guide wrap-up

Once you start to think of static screen mockups as the connective tissue between wireframes and prototypes, their importance becomes clear. By using screen mockups to iron out visual niggles, UI designers free themselves up in other design stages to focus on functionality, hierarchy and UX.

Used right, screen mockups can also play a role in getting stakeholders on board with your idea, as long as you don’t rely on them to communicate interactivity or user flow.

Choose whichever mockup methodology works for you – design tool, integrated mockup/prototyping tool or code – and get started!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Joseph Downs
In-house UX copy-slinger, foodie and classic motoring enthusiast