Why Use Placeholder Images?

As a small business owner handling your own web needs, or a small business webmaster, you may find value in using placeholder images. Web designers find that placeholder images can save time in the early stages of drafting and iterating on designs: they don’t have to find and re-size images from public sources or pay to license images that clients may not want anyway. And they don’t have to waste time trying to find multiple images that produce a coherent visual effect that’s consonant with the brand.

Even if your stakeholders want to see specific images in a draft design, they may not have images ready for you. With placeholder images you can begin working on designs immediately. You simply type in the pixel size of the image that you need and you’re done.

Using Placeholder Images in Wireframes

Placeholder images are commonly used in the most fundamental of design drafts: wireframing. What is wireframing? It’s a rough sketch of a digital product such as a website or app. Wireframes are often clickable and include all pages of a design. They allow for quick iterations on initial ideas. And they’re often monochromatic.

Wireframes commonly adhere to a restricted set of fonts like Arial, use only blue for hyperlinks, and include no logos or actual images. This focuses attention on the big picture elements of design: namely the size, organization, placement, navigation, functionality, and interaction of elements.

As we noted in our explanation of Lorem ipsum dummy text, the use of actual text, real images, logos, and colors immediately distracts stakeholders and clients from the design itself. Web designers we interviewed agree: stakeholders will immediately become fixated on the colors or images you used in the draft design and begin asking questions about them or voicing their conflicting personal preferences. Soon everyone’s focus is on something other than the design itself.

Placeholder images are bland visually, which makes it easier for viewers to focus solely on the design. You can think of wireframing as a architectural floor plan draft: it may show proposed placement, shape and size of rooms, stairways, doors, hallways, and foyers, but not the color, materials, or finish that those will be made of. The floor plan is sufficient for clients to understand how they would navigate through the house and what the functions of the various rooms are. It’s also sufficient to surface top-level design questions, like “Is there a garage? Can we add a garage? What purposes do we need the garage to serve?” Likewise your monochromatic wireframe is sufficient and designed to help the viewer see the top-level features of your design, how they would navigate through it, and what the functions of the various areas are.

We mentioned that wireframes are often monochromatic or use a very restricted palette. Be aware that wireframing software often gives you the option to iterate all the way to final high-fidelity design prototypes.