Blog

Stop using perfect pictures: meaningful, realistic design is more important

As web and app designers, we’ve all been in a situation where we’re looking for the most perfect pictures to go with our beloved fonts and color palettes, only to realise later that our users are messing up our designs with overexposed profile pictures and less than average sunset pictures.

Just like me, you’ve probably avoided typing in long and obscure (but realistic) family names that don’t really fit that rectangle you just drew in Sketch or Illustrator. Entering a short name that fits and looks perfectly is so much more attractive because it’ll make your art boards shine on your iMac.

If you want to avoid surprises when launching your app, it’s best to design with real and authentic data from the get to. Sketch makes this dead-easy. I’ll try to list the plugins I’ve used over time that have helped me generate authentic data for my designs, but if you know a new plugin that isn’t listed here, please leave it in the comments and I’ll update the article.

For the past year or so I’ve done all my design work in Sketch and if you can live with the bugs that tend to come up now and then, it’s a much more light weight and more elegant solution than having to use Illustrator or another Adobe mastodon.

Content generator plugin

This is the first plugin in its genre that I found a while back. It allows you to very easily generate profile picture, names and geo data like address or city names.
Install the plugin by cloning or downloading its repository. After that, it’s as easy as selecting text or shape layers and replacing them with real generated data.

https://github.com/timuric/Content-generator-sketch-plugin

Sketch data populator

This plugin is a bit more advanced in that it lets you replace JSON in your text layers with real data. Also, you can name layers like {image} and the plugin will know that you want to replace it with a real image. You can even quickly generate a whole grid with the data of your choice.

Profile data generation in Sketch

Installation is the same as with every other Sketch plugin, just clone or download the repository into your plugins directory. It’s best to read through the docs in you want to use this plugin and all of its capabilities.

https://github.com/preciousforever/sketch-data-populator

Sketchsquares

This last plugin is the simplest of the bunch, but perhaps even the most awesome one. The plugin replaces your image shapes with real instagram pictures and you can pick whatever tag you want. In the video below I’ve typed in #beekeeping in order to replace some shapes with bee images (now that I’m a beekeeper).

SketchSquares instagram plugin

https://github.com/abynim/SketchSquares

Conclusion

Do you know of any other plugins that can help a designer create more meaningful, robust and realistic designs? Share below!

About the author

Hi there! I'm a freelancer who can help you build a great application or website - yes, also for mobile devices. If you speak Dutch, check out my eBooks.

Hire me, whether it's to help you build your next project or to organize a workshop. I teach about web design + development in college and I'd be happy to put a workshop together for you.

 
You might also like: