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.
<img src="https://placehold.it/350x210/58839E/FFFFFF&text=Brand Blue" alt=""/>
<img src="https://placehold.it/350x210/2FA796/FFFFFF&text=Brand Green" alt=""/>2. Explain Image Purpose with Text
Use text to explain what the hell an image is doing just floating there in the sidebar of your blog post. Placehold.it’s text attribute is definitely the most powerful part of the service.
<img src="https://placehold.it/200x200/EEEEEE/2F4759&text=Author Image" alt="" />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.
<img src="https://placehold.it/200x200/EEEEEE/2F4759&text=300x200 alignleft" alt=""/>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 Post Titles
<img src="https://placehold.it/230x120/EEEEEE/2F4759&text=<?php the_title();?>" alt="<?php the_title();?>"
Combining Titles and a Custom Field
Remember the first hex code value is the background color, the second is the text color.
<img src="https://placehold.it/200x200/<?php echo get_post_meta($post->ID, 'your_hex_code_field', true);?>/FFFFFF&text=<?php the_title();?>" alt="<?php the_title();?>"/>
Loop of Custom Field Names
<img src="https://placehold.it/200x200/EEEEEE/2F4759&text=<?php echo get_post_meta($post->ID, 'your_staff_member_name', true);?>" alt=""/>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.
