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.
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.
Photography should use
.jpg format, with appropriate resolution and compression to meet the guidelines in the table below.
.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).
.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.
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|
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].
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.
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.
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'
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.
For further information and questions regarding the use of imagery please contact the nib Design Communications team via email at [email protected].