1. Usage

Photographs should be intentional and portray a context. The imagery should work as a whole for any project.

Except for some projects, do not use illustrations, iconography, or background patterns as imagery. Instead, work with photographs.

• Use a combination of colourful photographs

• Ideally, find images with a focal point and blurred backgrounds

• Images should be intentional: telling a story, helping words to explain a message, indicating users to perform an action

• The image should be contextual when is placed beside or wrapped around content

2. Types of photographs

People

• Photos of individuals or very few people interacting with each other
• Photos should communicate diversity
• Photographs should have a focal point
• Photographs should focus on heads or hands to enhance experience
• Emotionally, portray neutral and/or positive moods

Objects

• Use conceptual images of objects
• The image should support content (headlines, for example) to make users understand what the content of the page or section is for

Hero Images

• Use a single hero image to introduce content
• If more images and/or pieces of content are needed, display the images on a carousel component

Thumbnails

Thumbnails are small images that represent information in small spaces and they should be used to:

• suggest more information
• work as a peek of content on other platforms/websites
• help as a navigation element on user interfaces

3. Best practices

Accessibility

The images should include alternative text or captions. You can see more details about accessible images on the Web accessibility guide.

Sizing

Properly resize the photos for different displays and platforms and keep in mind their resolutions:

• 72 ppi for screens (e-learning platforms, office, and web)
• 300 ppi for quality prints

Note: ppi = pixels per inch

4. iStock

iStock by Getty Images (formerly iStockphoto) is an online resource for original royalty-free stock content, including photos, illustrations, vectors, videos and audio tracks. You can use iStock to find images suitable for your project.

At OCASI, there is an iStock account which subscription plan includes a monthly limited number of images to be purchased/downloaded based on credits.

• Go to iStock website
• Frequently Asked Questions

How to work with iStock

First at all, look for images that follow the usage, image types, and best practices indicated in this guide.

1. In case your team has access to OCASI’s account, sign in to create a ‘Board’ for your project where to save your favourite images. Create a Board

2. While working on your project, use the images with the iStock watermark.

3. Do not purchase an image until you know it is the chosen asset. How to purchase one image

4. Purchase the image with the smallest size available that works for your project. For example, photographs with the biggest size (XXL) are suitable for large print projects, not for web banners or flyers distributed online. If you have doubts, you may contact your designer.