Imagery
Images in customer communications play a very important role in conveying messages about our brands and our target market. As a result, the style of images we use must meet a refined but flexible brief which ensures we produce a strong point of difference between our brands and that of our competitors. We use imagery to facilitate humanised, comfortable and confident interaction between our members and nib's digital products and services.
Usage
This documentation covers guidelines for practical usage of imagery across our digital spaces and experiences, including whitelabel partners. These guidelines are an important foundation for onboarding and empowering our Designers, Developers and project teams to develop projects easily, effectively, creatively and efficiently.
For further guidelines around aligning photography and illustration selection with nib's digital brand, refer to our Brand Imagery documentation.
Formats
Photography
Photography should use .jpg format, with appropriate resolution and compression to meet the guidelines in the table below.
Logos, graphics & illustrations
Use .png or .svg format for logos, graphics & illustrations, to preserve alpha-channel (transparent) backgrounds. Note that .png files can only be scaled down while preserving detail, so in situations where images may be responsively scaled, .svg is preferred. These assets should not contain filled backgrounds, unless it is a pre-defined feature of the asset (e.g. boxed logos).
When exporting .png files, aim to meet the resolutions and file sizes denoted in the table below. Note that .png files do not support variable or lossy file compression, consider the impact of large images on page-load times.
Resolutions
The following table is drawn from our Hero Panel component - as our most common full-width component that uses photographic imagery, it can be used as a guideline for approximating resolutions and file sizes for image assets. To ensure image quality across responsive viewports, we recommend creating assets at @2x (Retina) resolution and scaling down for non-retina displays.
| Image | Dimensions | File size limit |
|---|---|---|
| Desktop@2x | 4000x1920 | 400kb |
| Desktop | 2000x960 | 150kb |
| Tablet@2x | 1600x1160 | 150kb |
| Tablet | 800x580 | 60kb |
| Mobile@2x | 800x600 | 50kb |
| Mobile | 400x300 | 25kb |
Library access, ownership & licensing
nib's Design Communications Team maintains a database of brand-aligned photography and miscellaneous images, sourced and housed through nib's GettyImages account. Getty provides useful, in-built export tools to generate context-specific crops in a variety of pre-loaded and custom sizes and formats, or alternatively, full-resolution images can be downloaded for flexible use within your projects.
Approved teams or individuals will have a dedicated login for our image library. To gain access, or if you can't find an image appropriate for your context, email [email protected].
Whitelabel partners
In contexts where we are providing content for nib's whitelabel partners, we should ensure that imagery choices reflect each respective partner's brand guidelines. Where this imagery has not been supplied, contact your team leader or liaison for direction on sourcing appropriate imagery for whitelabel projects.
Using text and imagery together
To ensure accessibility and readability, text copy should never be placed directly over imagery - including headings. In situations where this is unavoidable, use card-style containers with a solid background color to enclose text copy. Refer to our color guidelines for documentation on how to ensure accessibility when determining text and background color combinations.
Sign-off & approval
Any usage of illustrations and photography (excluding iconography*) across non-whitelabeled projects needs to be approved by nib's brand team before development or deployment. This is to ensure that selected imagery is appropriate for context, is validated against other usage of any particular image across our network, and is in line with our brand guidelines and proposition. Once your design(s) are ready for approval, please submit your Figma link or mockups to [email protected] for review.
*For guidelines specific to iconography, refer to its Mesh documentation.
Diversity and inclusion
The primary intent of how we use imagery is to create a touchpoint for our members and prospects, allowing them to project themselves into the lifestyle and outcomes we promote through our products and services. With that in mind, it's critical we consider the breadth of identity and lived experiences within our member base, and our imagery choices should reflect that diversity.
nib's Diversity and Inclusion Action Plan recognizes Diversity and Inclusion as follows:
To engage with these definitions, it's important that our selections consider both the visible and invisible markers of peoples' culture, heritage, gender, sexuality, identity or disability, and embrace a diversity of lived experiences and idealised outcomes. It is equally important to recognise and consider intersectionality when selecting imagery, ensuring it reflects the mutiple factors of identity that make up the diverse fabric of the communities in which we operate.
For further insight relating to diverse imagery and adopting an inclusive mindset when making visual selections, refer to ForumOne's How to Choose Diverse and Inclusive Photos.
- Ensure your image selections collectively represent both visible and invisible markers of subjects' and users' culture and heritage, gender and sexuality, ability or disability, and lived experiences.
- Consider the cumulative effect of imagery selections across parallel pages or sequentially through end-to-end experiences and user flows.
- Embrace intersectionality in your selections, considering multiple identity touchpoints for each image
- Consider unconscious bias when making your selections
- Don't rely solely on visible or obvious markers to denote a subject(s)' culture, heritage, identity or background.
- Avoid context or usage that leans on cultural generalisations or stereotypes.
- Avoid one-dimensional representation of identity markers
- Don't rely on majority demographics or implied identity 'defaults'
Alt text
As well as being an importance practice for accessibility reasons, considering alt text for your image choices is an excellent method of validating what you are depicting, ensuring its thematic link to your content, and identifying any incidental biases that may have gone into its selection.
Alt text should descriptively and specifically communicate what is depicted, so by anticipating its wording and context, you can ensure your selections are relevant, inclusive and reflective of users' lived experiences.
For more information about accessible and effective usage of alt text, refer to our Accessibility Checklist.
Image captioning
Purpose
Image captioning serves a key role to ensure that everyone can access and understand the visual content displayed within an image. The added descriptions can include additional information that might not be clear in the image itself.
Usage
Image captions are text that appear adjacent to an image, the positioning is bottom left of an image (for web images only). For hero / villain panels, the image caption appears on the bottom of the panel cards.
Image captions differ to alternative text as they serve two different purpose:
- "alt" text should always be included with a non-decorative image. They provide a concise description of an image for accessibility purposes.
- "image caption" text on the other hand, are optional and should only be used when we need to add additional context or information related to the image content.
Image caption to be treated as secondary to alt text
Examples
We've added a prop to the Hero Panel & Villain Panel components. To explore and visualise how this config changes are implemented click through the links below to view some of our use case examples:
Contact
For further information and questions regarding the use of imagery please contact the nib Design Communications team via email at [email protected].