Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Using Photographs in Layout

When designing layouts, designers often look for photos to visualize information in a realistic way. There are a few best practices that will help designers use photos more effectively in layouts.

Select Photos With Good Composition, Natural Lighting and Saturation

The first step of using photos in layout design is to select the right photo first. As a designer, you will either be provided with photos to use from clients or instructed to source them yourself based on client directions.

If you are provided with photos from your clients, it is important that you act as an advisor in terms of photo selection. Some clients may provide bad quality photos that are low in resolution, blurry or don’t have great composition. In these situations, you may advise clients to either source better photos or allow you to source them based on the creative direction.

When sourcing photos yourself, you have several options. The easiest one is to go to a stock photo website like Shutterstock, provided that your clients approved the budget for stock photos.

There are at least 3 considerations when considering if a photo has great quality. One is composition. Does the photo look interesting? Is the subject of the photo clear? Is it too busy for your layout choices?

The second consideration is lighting. Does the photo look overexposed or too dark? Natural lighting that reflects the reality is best. Overly dramatic light is only appropriate when artistic effects is necessary and intended.

The third consideration is saturation. There are some photos on stock photo sites that are overly saturated. For example, if you see a photo with unnaturally blue sky and extremely saturated green grass, you might want to avoid selecting it because it does not represent the reality.

Avoid Cliche and Unrealistic Stock Photos

When you can ensure that the photo has good quality, the next step is to make judgments on whether the photo is cliche.

For example, if you find photos with lots of doctors folding their arms and smiling directly at the camera, or photo with lots of coworkers fist bumping each other, you might want to look elsewhere. These types of poses are unnatural and overused.

On the other hand, photos that look unrealistically computer-generated should also be avoided. If you search for “smart cities” on stock photo sites, you may find photos like look like these where computer generated lines are all over city skies. Concepts like these are overly literal and does not have great visual appeal. Avoid selecting any photos with unrealistically computer generated components. 

Use Photos to Inform Layout

Sometimes, you can get creative and use photos to inform your layout. This series of magazine designs by Alexey Brodovitch, art director at Harper’s Bazaar from 1934 to 1958, are examples of how subjects in photographs can inspire creative typography layouts.

In the first spread, the text is shaped into the form of the woman’s body on the right. In the second spread, the text is abstractly shaped like the pose of the woman on the left. In the third spread, the text is arranged in the shape of the woman’s body as well as following her pose.

Be Mindful of Accessibility When Overlaying Text with Photos

Finally, designers need to be mindful of accessibility when deciding to overlay text on top of photos. This is especially important in digital design, where violations of accessibility rules can get companies into trouble with the law.

It is also an obligation of designers to provide equal access to people with disabilities, which is the ultimate goal for accessibility in design.

For example, if you want to overlay text on top of a photo, the photo must either provide clear white space for the text to sit on or the designer has to come up with layout treatments to compensate for the fact that the photo does not.

If a photo is busy and designers still desire to overlay text on top of it, there are several options.

One is to create a 0% black to 100% black gradient overlay that looks like a vignette effect to provide a buffer for text to sit on the photo and still be readable.

Be mindful that solid dark overlays, unlike gradient dark overlays, can make the photo too dark and cloud the most interesting part of it. It can work for some photos where visual interest isn’t a main part of it, but for most photos where designers actually want readers to see the majority of it, using a dark gradient overlay is more effective.

Remember to always use black to black, and not black to white or black to gray gradient overlay. The latter will create an undesirable “washed-out” effect.

In most scenarios, white semi-transparent overlay is not recommended because it may create an outdated and washed out look.

Another option is to use a color box behind text to frame and separate it from the photo. This option can also create a unique visual style for the design if it is carried throughout.

Scroll to Top