Tools & Media

This section is about application: the tools of the trade and the tangible resources to execute design and creative work.

Mockups

Mockups are everywhere, but most aren't that great. Here are my top recommendations to present your work in the best light:

For photography, start with The Mockups, a production of the fantastic site The Brand Identity. It's an aggregation of some of the best mockups, including those featured individually below. Fantastic quality and broadly usable (not too opinionated, so the emphasis is on the work and they're flexible) with a medium price point in my opinion. Check out the heavily-discounted bundles.

LS Graphics is my go-to for isolated device renders, both static (PS) animated (AE). A wide array of devices and platforms. Buy ala carte or in an unlimited-access subscription (a great value). They also have a fantastic Figma plugin with a subset of their products available as a (confusingly, different) subscription, which is highly recommended. A bunch of equally high quality free stuff, too.

Mockups Directory has great minimal imagery with a very polished feel. Mostly devices held in minimalist environments but also some print. Free stuff, too.

Mockup Maison has a huge library of photographed mockups across a wide array of cities worldwide. Particularly good for city-specific outdoor signage (especially billboard and subway ad placements), clothing, and print generally, all with artful shadows and a realistic, trendy feel. Some devices available, too. Expensive, individually and especially in a $1.3k/year subscription, but you get what you pay for with this.

Bendito Mockup, based out of Spain, is similar. Lifestyle photography is grouped in photoshoots, each with a consistent feel all their own. Particularly great at capturing a certain kind of cool, trendy, fashion-y, modern millennial/gen-z lifestyle vibe. As with a lot of lifestyle photography, heavy emphasis on print (which is also much more evergreen than devices). Great value—very fairly priced.

Art Directed (ARTD) is also similar to the photo ones above. IRL photography in a style that I think is really versatile.

Mockup Republic is another fantastic one. Photography with a great mood, but a pretty small collection so far.

Akoya Studio has a bunch of nice photography-based mockups. Minimalist and modern.

Beyond Forms is a gorgeous mockup project by the very talented Daniel Lepik. Also a tiny collection so far.

099's Minimal Mockups all have a single aesthetic: single devices, packaging, and merch on a granite-esque cube. You can customize the lighting, angle, device color, etc. before purchasing. Interestingly, the site's name comes from the commitment to having only 99 products (though each have variations) in the catalog; items will be archived to make room for new, better things.

Mr. Mockup can be a solid option. Great scene composition packs for branding, especially food packaging. Straightforward and very affordable.

Mockuuups Studio is a web-based drag-and-drop dead-simple tool. Some of them can work but not nearly at the quality of the other options here—runs a bit stock-image-y.

Sketch & Figma

Bulletproof Row Symbols in Sketch
By Raphaël Guilleminot, Principal Designer at Deliveroo

Designing a Top Nav in One Symbol
By Jon Moore in UX Power Tools on Medium

This is, without a doubt, the coolest Sketch technique you’ll see all day
By Jon Moore in UX Power Tools on Medium

Why Your App Looks Better in Sketch
By Nathan Gitter

Prototyping with Sketch and Principle
By Marc Andrew for Prototypr.io

Embed GIFs in Sketch: GIF.me plugin

Stock photo & video

This section wouldn't be complete without starting with Unsplash. Unless you live under a rock you know this is the world's best source of free stock photography.

Death to the Stock Photo has great photography organized by shoot by various photographers. Subscribe to their free newsletter and get a monthly free drop in your inbox, and subscribe to their paid subscription to get much more, or pay ala carte per image.

Filmsupply is probably the best stock video—actually, the word film feels more apt given how cinematic and narrative-driven these shots are—site out there. Also check out their sister site for music, Musicbed.

Fine tuning

Storybook is a fantastic JS tool to ensure parity between your design system and eng implementation

Easings.net is a useful cheat sheet for various ease functions to smooth animations

Contrast is a great app—Mac menu bar app and Figma plug-in—to check WCAG contrast ratios quickly