Images and copy
Images or background media (e.g video) often sit behind headings and text. This means images need to be selected or cropped with text positioning in mind. Images may need to be treated with a gradient or other means to ensure that the text accessible. Below are some examples of how to edit images so the composition is clear and the text is readable.
Using the OVO square
When constructing images using the OVO square for the new design, we found that bigger is better, more gutsy and optimistic. The square works well full bleed in the background as it gels with the bolder typography and friendlier feel of the site.
The square should not be the focal point of the image. As a visual device it should be used in the background to add depth, or to crop a wide image and NOT as a frame. The subject should take up the majority of the image, sit on top of the square, and extend past it.
Shadows should also extend past the square when used as a backdrop, if it is used to crop an object, the shadow should also be cropped along the same edges as the object. Should the object extend past the square, so should the shadow. Create Images using OVO square as transparent so they feel like they extrude from the background.
Creating promo images
Selecting the right image is important
A lot rides on image selection and positioning, especially when working with text overlays. Choose an image that is sympathetic to being used for a promo. The good examples below work well because they have large empty areas and a targeted area of interest, e.g. the product or the woman’s face.
Choose an image that will work with one of the OVO colour themes.
E.g. when using an “on dark” colour theme, try to choose an image with a large dark area and position that behind the text area, leaving the area of interest free of text.
Make sure the main interest in the image is positioned where it can be seen.
Avoid putting text over peoples faces in an image or obscuring the recognisable part of a product.
Using gradient overlays
The website uses several components which feature text placed directly on top of a background image. Where possible, you should choose an image with a large empty area to provide a legible background for the text like the examples above.
Sometimes, this may not be possible and you might have to use an image with busy details in every part of the image. For these instances, the components have an optional gradient overlay that can be toggled off or on within Contentful which provides a legible background for the text.
Try to use gradient overlays only where necessary. It’s better to choose an image with an empty area and a target of focus than to use this gradient overlay failsafe.
Image sizes
|
Item |
Page template |
Export size |
Rendered size |
|---|---|---|---|
|
Homepage |
2270 × 1200 |
1136 x 600 |
|
|
Homepage |
240 × 240 |
120 × 120 |
|
|
Homepage |
1104 × 1200 |
552 × 600 |
|
|
Product grid |
Homepage |
630 × 630 |
315 × 315 |
|
Homepage |
300 × 300 |
150 × 150 |
|
|
Smart meters |
200 × 200 |
100 × 100 |
|
|
Homepage |
1104 × 500 |
552 × 250 |
|
|
Overview header |
Tariff |
714 × 714 |
357 × 357 |
|
Tariff |
910 × 910 |
455 × 455 |
|
|
Bolier replacement |
1104 × 1104 |
552 × 552 |
|
|
Tariff |
n/a |
n/a |
|
|
Beyond |
4400 × 1440 |
2200 × 720 |
|
|
Beyond |
400 × 230 |
200 × 115 |
|
|
Energy efficiency |
714 × 476 or |
357 × 238 or |
|
|
Smart meters |
1104 × 1104 |
552 × 552 |
|
|
Smart meters |
1104 × 1104 |
552 × 552 |
|
|
Smart charger |
714 × 714 |
357 × 357 |
|
|
Article header |
Guides |
1104 × 1104 |
552 × 552 |
|
Guides |
714 × 536 |
357 × 268 |
|
|
Article image |
Guides / article |
1428 × 1000 |
746 × 500 |