Posted 2 months ago

Generative Placeholders

Use generative art as your image placeholders.

<img src="https://generative-placeholders.glitch.me/image?width=600&height=300">

Visit the project page for instructions and more examples.

The project page showcases several styles plus their variations, and lets you also generate new previews — while receiving a very high PageSpeed score thanks to a few clever tricks. For example, the initial thumbnails, which are lazy-loaded, are static, and only created dynamically when you click the images.

And the image thumbnail used on social media is generated randomly as well.

One constant issue in design is how to represent a half-finished design. It has to be representative enough to get the idea across, but if it looks too polished or finished people will mistake it for the final design and have expectations that the mockup can’t live up to.

[…]

Enter Generative Placeholders. Instead of using a temp image, you can just link to the generative-placeholders service and get a procedurally-generated temp image. It looks good (making your designs look good) but also looks generated (making people less likely to mistake it for the finished product). It’s like lorem ipsum for images.

procedural-generation.tumblr.com

This project was also featured in: