�鶹��

Skip Links

Storyboard imagery guidelines

Select the perfect image for your homepage promotion banner��

The ubs.com homepage serves as a key digital entry point for our audience and the storyboard component (homepage banner) is one of the first elements they encounter. Positioned prominently at the top of the page, it plays a critical role in shaping first impressions and showcasing our best content, making the choice of imagery essential for effective communication.

This page provides image specs, examples and best practices when it comes to image selection to ensure the homepage banner is brand compliant and displays properly across viewports.��

Brand compliance and best practices��

Please ensure the images you select are fully compliant with �鶹�� brand guidelines.
The imagery you select must have the appropriate licensing.��
AI-generated imagery must be compliant with �鶹�� rules.��
Staged objects or scenes are to be avoided.��
Due to the responsive nature of the homepage banner, photographs are preferred to illustrations.��

Technical specs

Minimal resolution:��3840��1000
Optimal resolution: 4400x2475 (the higher, the better)��

Composition

The image should have quite a lot of background (1a) around the main subject (1b). The smaller the subject, the better, as it allows for more cropping options.��

Cropping for XL view (desktop)

Cropping for S, L and M view (tablet)

Cropping for XS view (mobile)

Cropping specs

All view croppings XL, L, M, S, and XS have a 23:8��aspect ratio.

Cropping hints

To ensure proper display on desktop (2a) and tablet (2b) viewports, the main subject must be off-center, either to the right or left. Otherwise, the text box overlay will cover it.��
Please note that for desktop (2a) and tablet (2b) viewports the text box can be left or right aligned.��
On tablet, the text box requires roughly 50% of image space (2b).
For the mobile viewport (2c) cropping can be similar as for desktop and tablet viewports. On mobile, the text box is not an overlay on the image, so the placement of main subject doesn’t matter.

��

Cropping for XL view (desktop)

Cropping for S, L and M view (tablet)

Cropping for XS view (mobile)

Cropping specs

XL, L, and M views are cropped with a��16:9��aspect ratio.
S view is cropped with a��4:3��aspect ratio.
XS view is cropped with a��9:20��aspect ratio.

Cropping hints

To ensure proper display on desktop (3a) and tablet (3b) viewports, the main subject must be off-center, either to the right or left. If not, the text box will cover details below it.��
Please note that for desktop (3a) and tablet (3b) viewports the text box can be left or right aligned
To ensure proper display on mobile viewports (3c), the main subject must be positioned at the bottom, with ample background space above it. This is because on mobile the text box overlay is placed over the image and can dover significant details of the main object if not cropped properly

��

Cropping example 01

Reduced height - desktop

Reduced height - tablet

Reduced height - mobile

Full height - desktop

Full height - tablet

Full height - mobile

Review

The image features a very small subject and a large amount of background.��This provides ample cropping flexibility, while the left and top margins leave sufficient space for the text box on both mobile and desktop.��

Reduced height

Full height

Cropping example 02

Reduced height - desktop

Reduced height - tablet

Reduced height - mobile

Full height - desktop

Full height - tablet

Full height - mobile

Review

The image features a small main subject and large background, allowing ample cropping possibilities. The left and top margin leaves sufficient space for the text box on both desktop and mobile.

Reduced height

Full height

Cropping example 03

Reduced height - desktop

Reduced height - tablet

Reduced height - mobile

Full height - desktop

Full height - tablet

Full height - mobile

Review

The image has a larger subject, while still featuring a large amount of background.��This provides ample cropping flexibility, while the left and top margins leave sufficient space for the text box on both mobile and desktop.��

Reduced height

Full height

Cropping example 04

Reduced height - desktop

Reduced height - tablet

Reduced height - mobile

Full height - desktop

Full height - tablet

Full height - mobile

Review

The image does not work well in the mobile viewport for the full-height design as there is limited background on the top margin, not allowing enough space for the text box. For the reduced-height design, the image works.��

Reduced height

Full height

Cropping example 05

Reduced height - desktop

Reduced height - tablet

Reduced height - mobile

Full height - desktop

Full height - tablet

Full height - mobile

Review��

The main subject in the image is too large, limiting cropping options. For the full-height design, the image does not work for the mobile viewport. For the reduced-height design, the image works.��

Reduced height

Full height

Cropping example 06

Reduced height - desktop

Reduced height - tablet

Reduced height - mobile

Full height - desktop

Full height - tablet

Full height - mobile

Review

The main subject in the image is far too large, significantly limiting cropping options. The text box covers part of the subject on all viewports. For the full-height design,��it is not possible to crop the image in a way that displays both people in the mobile viewport.

Reduced height

Full height

UAE homepage - English version

UAE homepage - Arabic version

Hints

The UAE homepage is available in both English and Arabic. Because Arabic reads right-to-left, storyboard text boxes are right-aligned, and images are often mirrored to fit the layout.

When including the UAE homepage in your promotion, keep this alternate layout in mind when choosing banner images, as some visuals (such as those with logos, text, skylines, or artwork) can't be mirrored. In such cases, the image might need to be professionally edited or an alternative image may need to be used.��