Skip to content
This repository has been archived by the owner on Mar 5, 2020. It is now read-only.

Photography

sabrinang edited this page Feb 19, 2016 · 7 revisions

Content

Select photography that is engaging visually and tells a story to engage the user. The photo can help inform your viewers of the content and context. Depending on the content the photo accompanies, use visuals that persuade or exemplify activities that invite users to participate more than words can do alone. We want to set a participatory, diverse, inclusive tone that is also playful within the appropriate contexts.

Additional Tips:

  • ensure photo is relevant to content section
  • ensure that the background setting is appropriate and isn't cluttered or distracting from the main content
  • select photos that do not include distracting text or other logos
  • photo-journalistic style of photography is effective for including people that appear genuinely engaged
  • include a diverse group of individuals (look for a range of age, gender, ethnicity, size etc.)
  • strategically choose photos that contribute to informing users of content than just for aesthetic appeal or decoration

Composition

Choosing photographs with various depths of field that focuses on the subject can help isolate and highlight the subject matter. It is also effective to choose photographs with areas that are out of focus if you want to overlay text above them.

22885214851_e9163408ce_z

Quality

If you are using photographs for larger purposes, like hero banners, ensure the resolution of the photo is large to not appear pixelated. It is recommended to export @2x (at two times the size) for retina displays.

Also, you can use a photo editing program to adjust the contrast and sharpness of the photograph to fine tune its visual quality.

Copyright

Please refer to Creative Commons best practices for attributions here

Hero banners

Photography for hero banners have a dark overlay over image so white text is legible. Ensure that white typography is legible on the images. You may need to burn some areas to increase contrast.

In-page photos

Photography seen throughout the site will have a corner radius of 4px and are rectangular shaped.