1. Graphic designer Mario Mengaldo putting together a layout of the weekly magazine Epoca. Italy, 1960s by Angelo Cozzi 2. Adobe Pagemaker 3. HW Free Can Mockup by Bendito Mockup in Photoshop
Mockups have been a crucial part of the creative process for as long as design has existed. They offer a way to visualize the final outcome when words just won’t cut it (as they often don’t towards the end of a project). Designers use them to get client approval, buy-in from internal stakeholders, and to add a sense of life to case studies. Mockups are everywhere these days, and with the help of countless tools that generate polished mockups in seconds, even folks outside the design world have the means to showcase their ideas.
How did designers create mockups before easy access to design programs? Paul Rand didn’t use Photoshop. Muriel Cooper never logged into Figma.
Let’s take a look.
Before the 1980s and the advent of computers, designers were armed with rulers, glue, and a trusty pair of scissors. (1) Mockups were painstakingly made by hand, paper cuts and all. It was professional-level arts-and-crafts, where designers created hand-drawn layouts and paste-ups to present to clients and prepare for offset printing. Every visual element was physically assembled and rearranged on a board. It was just as laborious as it sounds and extremely limited in terms of flexibility—in the absence of the “delete” key, revisions or mistakes often required starting over. While this method was time-consuming, there’s something to be said about the simplicity of working with physical elements, free from the temptation to open Instagram and doomscroll.
Then the first versions of the doomscrolling machines emerged, giving designers a new set of tools. Pagemaker (2, may it rest in peace) debuted in 1985, followed by Adobe Illustrator in 1987 and Photoshop in 1990, marking an important shift towards digital design. With these tools, designers could ditch the scissors and lay out pages, create brand visuals, and mockup final products before printing. This meant more accurate mockups that were easy to edit, which led to faster iteration and approvals.
After that, we survived Y2K. Computers didn’t betray us and the world didn’t end. Instead, we got chain emails and the opportunity to create photorealistic mockups. In the early 2000s, designers began using photorealistic mockups to further illustrate their ideas, like how a logo might look on a business card, a sweatshirt, or a bag of coffee. After 2005, tools like Photoshop Smart Objects (3) made it easy to insert mockups into 3D-style environments (like that same bag of coffee on a grocery store shelf).
The level of detail we can instill and the programs we use to create high-quality mockups have continued to evolve. Since 2010, we’ve seen the rise of interactive and real-time mockups for digital product design that extend far beyond static visuals, allowing for greater interaction and clickable prototypes. You're likely already familiar with Figma, but tools like Sketch and InVision exist to expand the graphic design toolkit and help designers quickly create realistic mockups that closely resemble the final look and function. 3D rendering tools like Blender and Adobe Dimension let designers create even more robust package design mockups. Because interactive prototypes have become a standard for iteration and approval, designers and developers have grown closer, working together to create prototypes (which is a welcome change for any designer who has felt the specific pain of watching their designs get distorted after a siloed development process). We’ve also seen the introduction of marketplace mockup generators like Placeit, Envato Elements (4), MockupWorld, and many others—plus beloved boutique specialty mockup shops like Bendito Mockup and Mockup.Maison—which offer countless ready-made templates. They significantly shorten the process, letting designers create client-ready mockups without manually building elements themselves. It’s a far cry from the days of glue and rulers. We love mockups and use them all the time—there’s no better way to prove a concept or refine an idea until it’s ready to share. A design that works well floating on a gray background might not hold up in the context of the real (or digital) world, and mockups are the best method for spotting this. If history tells us anything, though, it’s that the tools we use today will be much different tomorrow. It’s only a matter of time before designers don VR headsets and move pixels around with their hands.
Sources:
