Dynamic Profile Photos for Interface Mockups with Diverse UI

When you’re designing a mockup, you want to focus on the interface first and less on the aesthetics. The same holds true for wireframing and coding a web layout from scratch.

Many different mockups require profile photos, such as social networks, blog comments, and profile pages. With Diverse UI, you can easily embed these photos into your mockup with a few clicks.

The site lets you either download the selected photos or embed them directly through their Sketch plugin.

Diverse UI homepage

All of these images were submitted by real users with full approval for use. This means you have the rights to reuse these photos for personal or commercial works without permission.

Diverse UI is actually part of the Craft suite of plugins, made by InVision. This means it’s the best engine for finding a wide range of faces regardless of what you need.

The reason I like this collection is that it comes with a pretty loose licensing agreement that should apply to all works except “evil” purposes(defamatory or hateful content).

Image sizes range from 32px up to 180px and you can dynamically alter the images right in the browser. From the homepage, you can either download a .zip of all images or just grab the ones you want by clicking individual photos.

Granted I haven’t personally used the native Sketch plugin but it looks easy enough to set up.

Diverse UI example animation

To learn more about the plugin, check out the official GitHub repo.

And, if you’re comfortable with coding you can even pull images directly from the API which lets you grab profile pics by gender or by a fixed amount of images, all through JavaScript.

Show Comments