Impressive results in no time at all
A few months ago, I saw a post about Prototypr’s Toolbox. It’s a curated selection of tools and resources for UX designers.
One of the surprises I found on there was Artboard Studio. Taking a look over the website, I was really excited — mock-ups are a huge painpoint for me as a designer, as I always struggle to find or make templates that I truly love.
Enter Artboard Studio; a browser-based mockup creation tool that uses a mixture of really beautiful photography and some really smart features to help you make great looking mock-ups and product shots.
The promotional video on their website gives you a great idea of what the product is all about:
When I got the email letting me know I was into early access, it couldn’t have come at a better time. I’d just started rejigging my (very outdated) portfolio, so I was keen to make some neat images to show off my work.
Each of your images are called ‘Projects’, and starting a new project gives you a selection of really gorgeous templates to start with. Of course, I decided this would be a fun way to start with the product, so I arbitrarily picked a template and jumped in.
The editing tools are super simple. Highlight any object on the artboard and you’ll get all the usual controls: size, rotation, opacity, etc.
Clicking an item with a content area, like a phone or notebook, shows you a button to insert your artwork. Doing so opens a new art board in a tab where you place the content. It’s a lot like how Photoshop handles smart objects.
So far so good! I jumped out and decided to build a few shots from scratch.
Who needs templates
After starting a new project, a series of tools on the left allow you to add new content. I was really quickly able to mock up the image below.
I simply chose a background, chose a device, and added the candle. I particularly liked how the objects all drop shadows that are consistent with their height and the composition of the image.
I was keen to see how the mock ups that weren’t technology based worked, and they’re pretty much exactly the same, with the only real difference being items with two or more content areas having multiple art boards for those, how you’d expect.
Getting it together
Experimentation done, I decided to try and create something a little more complex.
This image contains multiple elements — The background, the coffee, the flowers, some yellow spots on the wood, the book, the pen, the keys, and the phone.
If this was a photoshop comp, it’d be relatively simple. You’d place these objects, adjust all the shadows and lighting, and insert your images. Assuming you already had the photos, and you’d already masked them, you’d probably be up for maybe a 15–20 minute job if you knew what you were doing.
Thankfully, I didn’t need great photographs or a complex editing tools. Instead, it just feels like you’re dragging and dropping a composition together. Here’s the 5–10 minutes I spent working on this composition:
I’m keen to see how my experience with Artboard Studio goes in the next few weeks. It’s clear that the product has a really excellent foundation, but there are some drawbacks:
- The output is raster, and at this point is not quite as high-resolution as I’d have liked. The assets seem optomized for 1080×720 or so at the moment.
- The integration with 3rd party applications could be better. They advertise Figma integration, which I simply couldn’t figure out how to work. Things like a Sketch or Adobe XD plugin would go a long way.
- I did have an issue where a number of my compositions, when reopened, had lost the artwork I uploaded. It meant I had to reupload those assets, which is not a major issue, but very annoying.
Overall, I am beyond impressed with Artboard Studio. It’s certainly the quickest, easiest way to put simple product shots together, and I think the output speaks for itself.