Using Placehold.it For Smarter Prototyping

I’m defining a smart prototype as one that effectively communicates what is happening in the design and how the finished product will function and look when it is completed.

One of the ways we can do that is by using descriptive text for body copy that actually says what’s going on (lorem ipsum, don’t worry I still love you). Por ejemplo:

This is a Heading That May Wrap to the Next Line

Hopefully you’re rolling your eyes at me right now because this is common sense and you’re already doing it. Well good, let’s do the same thing with images.

Tell Me Which Placeholder Image is More Professional and Informative

This:

Or this:

If you said the fighting baby cheetahs, you are a good person with a keen sense for awesome things, but no. We’re professionals, so let’s use placeholders that are professional, even with your own dev team. Don’t pass up the opportunity to easily inform your client and the rest of your team on the function of images in the design.

Enter Placehold.it

Placehold.it is a free service that lets you generate placeholder images in your markup with customizations available for text, background color, text color, size, and file type. Just reference a placehold.it URL with the attributes you want in the src of your img tag.

Some Use Cases for Customized Placeholder Images

1.Support Branding with Background/Color

Customize the background and text color to bring a little life into your prototype and show the client how different colors are going to come into play in the design.

3. Show Different Sizes and Classes

If you’re mocking up a blog post, it might be a good idea to show off how different sized images will interact with the content. Use the text attribute to explain what’s going on also in terms of classes and sizes for your dev team or savvy clients.

4. Dynamically Generate Text

This one is huge. If you’re already in the CMS development stage but don’t have production images yet, combine the text attribute with dynamically generated text from your CMS. This method could potentially be used in production as a fall back image in certain cases. Think a loop of company logos, portfolio pieces, staff bio images – if you don’t have an image yet, why not generate one automatically with an appropriate title (and background color) in place.

Loop of Custom Field Names

Performance

If you’re gonna use placehold.it, keep in mind that hitting the server for a ton of images when one default image will suffice is not always the best solution. These should be used sparingly on a production site. And if you do find the service useful, be sure to visit their site and donate to keep their servers going.

I’m curious to hear some other ways you use plcehold.it or about similar services. Reach out and let me know.

The Collective

You found us, you inquisitive soul. The Collective is a small team of marketers, developers, and digital strategists that work together to create agile, cost-effective, and results-driven campaigns for fast-growing brands.