The power of mock-ups

Getting your design or visual idea across to your customer isn’t always an easy task. And sometimes it seems as if it doesn’t matter how well you prepared your customer project presentation or how many times you explained how the customer's brochure will be folded. If you don’t build a mock-up or prototype there’s a good chance all your hard work will be in vain, simply because the customer lacks the imagination to really see the end result. And there's a chance you'll lose your customer pitch.

Of course you can’t blame him for lacking imagination, after all that was the reason he contacted a designer in the first place. But often you only have one shot to sell your design idea, one shot to get that wow-effect and slap your customer in the face with that awesome first impression of your work. I’ve seen my share of rejected projects due to lack-of-imagination-customers. I’ve seen entire brochure designs been rejected because there was still a watermark in the low-res stock images. I’ve had customers complain about crop marks inside of a hi-res PDF, despite telling them it was needed for print output (they didn’t like crosses and lines on the outside of their design). Or a customer that just could never imagine how what his packaging would look like once folded. So there are cases where your hard work can be rejected because of a lack of imagination. But one of the things that will help you get your design across and impress your customer is a good mock-up. You can look at a mock-up as a simulation, or prototype. Something that presents your work as what it will be, if only the customer would approve it. And presenting your work as a mock-up can greatly increase your chances of success. It offers a unique way to present your work as if it was finished, showing your design in a real life situation. That idea alone excites the customer because it presents him with a real life image. The image the customer couldn’t visualise on his own. And you can ride that wave of excitement by getting your ideas through a lot quicker.

A mock-up offers a unique way to present your work as if it was finished, showing your design in a real life situation. That image alone will excite the customer because it presents him with something he could never imagine on his own.

Of course, the type and style of mock-up depends entirely on the project you’re working on. But thanks to a few smart options and template workflows in Creative Cloud it’s never been easier to build your own mock-ups. Let’s take a look at a few examples.

Building mock-ups

Creating a print mock-up

I feel lucky to have started my career in the world of print. Print is a highly underestimated field since it’s not really possible to distract the viewer from a mediocre design by adding flashy animations, video or other sorts of interactivity. So you can only rely on good composition, color, typography and other static elements. The final “product” is a PDF. And since a PDF is the worldwide digital document standard we don’t always think about presenting that PDF in a different manner. But presenting your print design as a mock-up in a real world situation doesn’t only make it look better, it also gives the customer a sense of size and scale. I actually used mock-ups to present my personal portfolio when applying for a job since I didn't just want to use downloadable PDF files of my work.

Leverage Adobe Stock and Creative Cloud libraries

If you need good images to present your work with, remember to use Adobe Stock templates. These are available in all print and video applications. They come with layers, smart objects, masks, and sometimes even a step-by-step manual on how to use them. Every design app comes with a series of free templates you can use, but if you ever need more you can purchase and download them from the Adobe Stock page. Also, remember that you can drag and drop your entire design from, say, Adobe InDesign into the Creative Cloud libraries. This way you can re-use your artwork in a Photoshop template and maintain a live link to your InDesign file. If you ever update your design, your mock-up will follow. These libraries offer a unique way of transportation for inter-app travel, often bypassing the limitations of classic file types. In the print example above, I dragged my poster design from Adobe InDesign to Adobe Photoshop, using the Creative Cloud libraries. And I’ll be able to present my work a lot better compared to just a PDF. The low-res PDF is good for finding typos and other details, but the mock-up will be the image that sells and visualises the idea so make sure the customer sees that image first.

Static web and app mock-ups

Remember those templates I just spoke of? You can use these in the exact same way for other mock-ups. In this example I used another template in Photoshop to present the mobile version of my web site concept. The site is still under construction in Adobe Muse but I was already able to give a good impression of the look and feel by creating a static mock-up of it.

Interactive web and app mock-ups

Nothing sells better than a design that you can interact with. This hands-on experience truly paints the prettiest of pictures and is not hard to create. Adobe recently released the 1.0 version of Adobe XD CC. A brand new UX/UI design app that allows you to design, prototype and share your work. It’s a pre-production app that guarantees a fast workflow, fast approval and a fast go-to-market. When you create your design using Adobe XD CC, it’s only a matter of dragging and dropping connecting lines from/to objects and artboards to set up navigation. Once completed you'll have a working prototype that you can share with your customer. The cool thing about this, is that you can have your mock-up also available on your mobile device like your tablet or smartphone. This makes the mock-up feeling even more real.

Packaging, branding and goodies

For this last category, people would also often use tools like Adobe Photoshop to overlay pictures of dummy products with corporate logos and graphics, trying to give them a 3D look. Or even place these objects into another scene, by often having to pull corners and trying to match the perspective of the background image. This often leads to unrealistic results since there’s so much that can go wrong. The perspective is easily distorted, the shading on the imported graphic looks off, the lighting or shadows don’t make any sense, etc. And these things often expose the image as being fake, defeating the purpose of your wow-effect-mock-up. Luckily for use we can now use the brand new Adobe Dimension CC to quickly build our mock-ups by using 3D objects and compositing them into a 2D background. It's almost always a matter of dragging and dropping objects, textures and background images into the scene. And luckily for us, Dimension's built in Adobe Sensei machine learning will take care of the perspective and realistic lighting for us. Once you're finished, just click the Render button to render and export your work to Adobe Photoshop layers, for further refinement. Seriously, you should try this.

Happy mock-up building!

Useful links

• More information about Creative Cloud libraries.
• More information about Adobe Stock templates.
• More information about Adobe XD CC.
• More information about Adobe Dimension CC.