Doodle Ipsum: A New Illustration Tool for Developers

It's the Lorem Ipsum of illustrations, and developers are going to love it. Introducing Doodle Ipsum, a tool for placeholder illustrations.

Jay Perlman

I've spent a lot of time working with developers, and far too often we encountered the same nagging problem: there was no easy tool for finding placeholder illustrations for projects.

Regardless of skill-level or experience, my devs friends and I noticed that existing libraries were either lacking in quality doodles that fit well with projects, or on the other end of the spectrum, findig the right illustration took way too long.

In other words, it was annoying. Sometimes it grew so frustrating that it'd make you want to pull your hair out.

Then one day, an idea hit me like 💥POW💥: what if there was a tool that could help developers easily and quickly find placeholder illustrations?

The more I thought about it, the more obvious it became: just like Lorem Ipsum populates projects with placeholder text, developers needed the same power for their projects but with doodles.

That's how the team and I came up with the tool that's going to change the way developers integrate illustrations into their app, site, or project: Doodle Ipsum powered by Blush.

How it Works

Blush presents Doodle Ipsum. An example of the website UI

Adding illustrations to your projects should be as simple as picking a style, taking a line of code, and pasting it onto your website, landing page, mockup, or whatever cool project! This is the basis of Doodle Ipsum, and using it is straightforward.

Choose a Style

Placeholder illustrations should match the feel and theme of the project. That's why with Doodle Ipsum, devs can choose between illustrations styles. Selecting the right doodle for your needs is as easy and quick as clicking a few buttons.

Different illustrations styles available on Doodle Ipsum

First, head to the Doodle Ipsum page, and a preview of the placeholder illustration will appear. Next, it's up to you the developer to pick your favorite illustration.

Here's the different styles developers can choose from:

  • 🔶 Flat
  • ✏️ Hand drawn
  • 🗯️ Outline
  • 🌀 Abstract
  • 🤠 Avatars
  • Or get random with it!

There's thousands of different placeholders to choose from, so if you're not feeling a certain doodle, you can always scroll until you find the one that fits best for your project. Plus, if you've run into an inspirational block, just remember that the random image button is always there to help find the right doodle for you.

Put Proportions on Your Placeholders

Choosing proportions on Doodle Ipsum

By default, the dimensions will be automatically set so it adjusts to the container of the project. However, there's also more specific dimensions to choose from:

  • 1:1 for a lovely square shape
  • 16:9 for a horizontal look
  • 9:16 for those who want something vertical
  • 4:3 or 3:4

Dimensions can be customized too! You can input a specific size that matches the exact proportions needed for the project, so there's no need to feel constrained to the provided proportions.

Background Color

Choose custom background colors for your dev projects

The default background for your placeholder illustration is transparent, but there's always the option of clicking the "Random" button that'll generate a sweet color you can use as your background.

However, with Blush and Doodle Ipsum, customization is key. That's why we added a feature to allow you to choose a custom color for your background, and keep your projects on-brand from start to finish.

Once again, it is super easy to generate your own background color: just enter in your own hex code, and voilà! You have the color of your choice.

Get Your Code!

Copy and paste our link in your code!

With all the specifications selected, a piece of code is generates and is ready to be pasted on your website. Just like that, you have a beautiful placeholder illustration on your app, website, landing page, alien technology, or whatever!

What's even cooler is that for developers who want to go even further, there are advanced features as well.

Next Level Doodle Ipsum

Advanced features on Doodle Ipsum

The advanced features allows for even more customization. Here are just a few ways that developers can expand their creativity on their placeholder illustrations:

  • Multiple random images
  • Further color customization with the bg=[hex] query parameter
  • Changing the background shape to a circle
  • Grayscale illustrations in place of full color
  • Blurred images if that's your thing

Advanced features and the process of adding more custom details is still lightning quick and easy to use. What it all comes down to is how far developers want level up projects with Doodle Ipsum!

Develop With Doodle Ipsum

It's the moment to say goodbye to those frustrating days of finding the perfect placeholder illustrations. Doodle Ipsum is here to save you time and a whole lot of headaches while giving you a bunch of cool ways to make projects pop with visual flare.

Remember, it's all about how you want it! Doodle Ipsum is just an example of what you can do with the Blush API, so open up your mind and start envisioning the dope things you'll do with your new favorite tool.

Use the Blush API on your own project. Try it here!