Photography styleguide

We want our photos to tell a cohesive story about the people who live, work and play in Minneapolis. Here's how to follow our website guidelines and choose the right photos for a page.

Learn how to use images in Terminal 4

This photography styleguide outlines our goals and guidelines for choosing photos for the public website. To learn how to size images and use them properly in Terminal 4, see our website guidelines for images.
How to use images

Our photography goals

As you work with photos, keep the following three goals in mind.

Insert an image with an alt tag

The aspect ratio of an image is the width compared to the height. Many of the content types on our website support images with different aspect ratios. Before you use an image from the Media Library, you should be sure to select an image that is the correct size for your need.

Inserting an image

  1. Once you have clicked into a content type that needs an image, you will click Select media. This will open a new pop-up window.
  2. Use the left-hand navigation to expand the dropdowns and go to Categorised > minneapolismn.gov > Content Assets > Images.
  3. Now on the right-hand size you can search for a photograph by keyword in the Filter field.
  4. Be sure to check the full name of the image if you see duplicates of the same photo. The Name field should have " - Tile" or " - Hero" or " - Thumbnail" at the very end of the photo name, to help you see different aspect ratios.
  5. On the Select Variant page, you will select the Original image on the page that asks you which variant to select.

Adding alternative text (alt text) for an image

Web accessibility guidelines require that we include alt text for all images that we add to our website.

Do not include the words "photo of" or "image of" in the description. Just use a few simple words to describe the image, e.g., firefighter by a house on fire.

Use this detailed alt text guide to how to properly make images accessible.  It includes:

  • How to write effective alt tags
  • When it is necessary to include text on the page and/or captions in addition to an alt tag

How to add alt text

  • From an image content type
    If you use an image content type to add an image to a page (e.g., Feature Image/Video, Hero Image, Row of Images or Image in Tile), the content type screen will include an image alt box, where you can include a short description of the image. 

  • From a scannable paragraph content type
    If you add an image to a scannable paragraph, you will need to double-click the image itself to add alt text. A box titled "Set media attributes" will appear. Add the alt text to the Description field on this box. Note: The Description field looks like it will only allow you to type a few characters. You can type past the end of the small field that appears.

Be honest and authentic

Shoot photos of everyday people doing everyday things. The best photos aren’t staged.

 

Be inclusive and diverse

Include everyone. Our visitors are more engaged when they see themselves.

  • All physical abilities
  • All races, religions and ethnicities
  • All ages
  • All locations and seasons
  • All activities
  • All forms of transportation
  • All types of energy use

Be friendly and welcoming

Show our residents in places they love, doing things they love.

Image composition

Light

  • Use natural light.

 

 

Color

  • Use bright full color.

 

Angle

  • Use angles and perspectives to help the viewer feel like part of the scene.

People

  • Include people whenever possible.

What to avoid

Avoid vertical orientation

  • Do not use images with vertical (portrait) orientation.

Avoid excessive blur

  • Do not use photos that have excessive lens blur.

Avoid black-and-white images

  • Do not use black-and-white photography.

Avoid filters and effects

  • Do not use photo filters or color effects.

 

Avoid extreme angles

  • Do not use photos that have extreme or unnatural angles.

 

Avoid harsh light

  • Do not use photos with harsh light or flash photography, when possible.

Avoid posed photos

  • Do not use photos where people look posed.