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 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.
Let’s take a look at what a screen mockup should comprise, and how best to create screen mockups that complement your design process.
What is a screen mockup?
It’s easy to get confused between wireframes, prototypes and mockups. In fact, we wrote a whole post about the differences over here. But to get a handle on the 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 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. 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 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.
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 mockups aren’t interactive, an experienced app or web investor will be able to glean some functionality just by examining a visually faithful screen mockup.
“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
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, tools 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.
Check out Justinmind’s free UI libraries here!
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 mockup to communicate functionality: Remember, 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 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!