Overview
Compound uses photography, pictograms, icons and branded illustrations across Standard Life platforms. These appear in components from graphics to cards.
Media libraries
The latest media libraries include:
- Brand illustrations
- Iconography
- Pictograms
- Photography and stock images
Responsive compositions
Media requirements vary across viewports depending on the platform.
Some platforms require a single file, while others require one for each breakpoint. Discuss requirements with each development squad.
Example
Blog article headers use breakpoint-specific artwork. This platform utilises device-specific illustrations or images to prevent cropping at various breakpoints.
Supply images at the following dimensions:
- Large: 1440x420px
- Medium landscape: 1024x420px
- Medium portrait: 768x420px
- Small: 375x300px
When supplying images for each breakpoint, follow these guidelines:
- Ensure the focus of the composition stays in view for each cropped size (viewports can vary within a breakpoint range)
- Name files consistently and add the breakpoint size as a prefix (for example, 'filename-example-large.jpg')
Composition and aspect ratio
When supplying images for the platform, ensure that you check the required breakpoint width and height to display the content correctly.
Using this information, calculate the overall dimensions for each device, maintaining the aspect ratio.
Media in handovers
When supplying images to developers, follow these practices:
- Replace spaces with "-"
- Keep file names concise and consistent
- Name the content if possible (this acts as a fallback for accessibility tools if an alt tag does not exist)
- Keep the file size as small as possible, and use Figma plugins for extra control
- Resize components to specific sizes or ratios if requested
- Use the correct dpi for your platform
- Ensure images do not contain words for accessibility reasons
Accessibility
Media should be perceivable to all users. Tag all content appropriately and size assets to improve performance.
Find out more about accessibility and how Compound complies with AA standards.