Website Mock-ups: Save Time With Placeholder Images

I waste so much time hunting through our Photo archive here at Notre Dame trying to find placeholder images to plug into Mock-Ups for site designs.

Where content images are called for in designs, the best way to present the Mock-up is with simulated content images in place. Showing a Mock-up with FPO boxes (neutral toned spaces that outline where a picture would go) makes the entire site appear unresolved. I’m always hesitant to do this. I don’t want clients to look at a Mock-up and make a general decision on the strength of the entire concept because the lack of example content images makes the Mock-up look unresolved.

At the same time, you don’t want to spend hours looking for images that “fit” either. Clients latch on to odd things in design review meetings. Almost as bad as “it doesn’t look finished” is “these images don’t make sense for our content.” (Note: Repeatedly screaming “THEY’RE JUST PLACEHOLDERS!!!” while banging your fists on the table and sobbing is not the way to handle this).

So here’s a suggestion

Spend the time to find 1 really good image that fits the page’s content and place that image into your Photoshop file as a Smart Object.

Smart Object functionality will allow you to resize this image to your heart’s content, which means you can make it smaller AND larger without sacrificing resolution.

Now position this image in all of your placeholder spaces but resize it to emphasize different areas of the image. Make one really small, zoom way in with another, rotate one slightly, etcetera. A really complex image will have a lot of different areas of contrast in it that you can use to focus attention in the image.

This solves a bunch of different issues. It makes your Mock-up look “finished,” but at the same time it’s clearly communicated that content images will come later, and it doesn’t rely on over repetition of the same treatment of the same image which is another thing that can distract a client’s focus from the over all concept.

3 Comments

avatar
April 21, 2009

wadsworth

Great post, Oak. First, i never knew about photos as smart objects—always thought it was for vector links—this is crazy valuable. Second, I’m always way more interested in *how* people work and what methods work for them, as opposed to “here’s how to make a picture look ‘grungy’.” Keep more coming like this.

avatar
April 21, 2009

Chas Grundy

Great post! I’ve noticed this in several of our mockups recently and this makes perfect sense.

avatar
April 22, 2009

A Tim Called Oak » One Placeholder Image

[...] The image above is an example of what I was talking about in this post from earlier this week. [...]

Leave a Comment