Imagery
Imagery communicates a message through photographs or illustrations.
Principles
Memorable
Images should reflect realism to increase user connection and recognition.
Future-forward
The content outlook should be progressive, and optimistic.
Human
All of the layout guidelines should remain consistent all over a website pages
Photography
A perfect image is context-based. It’s recommend to shoot all images instead of sourcing content from third-party providers. This makes it easier to visually communicate real, relevant content.
Do
Use images with minimal content in the background
Don't
Use too much detail
Do
Reduce colors of the photograph
Don't
Use too many colors within the frame
Do
Use sunlight to capture photos
Don't
Take photos if there is not enough sunlight
Do
Use natural colour by adjusting the white balance based on the location
Don't
Use colour filters
Framing
The rule of thirds in photography helps control the weight of objects in an image. Single and group objects with solid backgrounds should be centre-weight. Image with one foreground and background should follow the rule of thirds.
Do
Use rule of third to control the weight of the image
Make single object, solid-background images center-weight.
Use with Caution
Left or right weight balance single object solid background images
Apply this only for hero images (website headers), not for small size containers.
Eye-lines refers to the implied lines produced when we follow a person's line of sight. The eye-line should not leave the frame - it should remain within it by positioning the object on the right line of the rule of thirds
Do
Consider the eye-line for positioning the object
The eye-line should be in the blank space when using the rule of thirds.
Don't
Place the central object too close to the frame.
It breaks the frame and overall layout.
Cropping
Cropping an image follows the foreground and the focal point of the image.
Circle (1:1)
3:4
Square (1:1)
3:2
16:9
21:9
Don't
Crop the image to focus on details
Foreground & Background
For images featuring several objects, primarily featuring events or the outdoors, separate the foreground from the background. Avoid photographs with very low apertures (lower than 2.2) to keep the background in focus.
Do
Position the main object in the foreground and the environment in the background
Don't
Blur the background, it helps to set the context
Do
Position the main object in the foreground and the environment in the background
Don't
Blur the background, it helps to set the context
Colour and Tone
If you intend to have an image with specific colours, then capture it while keeping those colours in mind. Do not introduce the colours in post-production.
Here is an example of a realistic environment that captures the intended colour tones using natural light.
Target Colours
UAE Gold 50UAE Gold 90
If you’re looking for a specific colour palette to be visible in your images, it is important to ensure that photoshoots are set up to capture the intended colour tones. Do not add colour overlays during post- production; only edit for location-based temperature correction.
Do
Correct the color temperature
Don't
Add colour overlays
Landscape Photography
UAE’s landscapes and cityscapes are clean. Use the right photographs to represent this in the best way
Do
Use clean photographs
Don't
Use complex photographs
Don't
Use heavy-edited images
People Photography
Use photographs that reflect diversity, happiness and the quality of life that this nation provides to its citizens and residents.
Hero Image
Hero images are usually website headers and/or large size images.
They require space to display elements such as text and CTA links.
They are the first, most visible element seen by users, so ensure the hero image selected communicates your positioning as clean and as straightforward as possible.
You can experiment with colour to match the colour palette of the entity with the hero image background.
First step | Select an image that best represents your entity.
Second step | Optimize the aspect ratio and make room for text and buttons.
Second step | Optimize the aspect ratio and make room for text and buttons.
Example
Landing page concept using hero image
Target Colours
UAE Gold 50
Teams
These images should be uniform in weight and shot in the same location using natural light. Place them on a solid background for consistency.
H.H. Mohammed Al Mansouri
Chairman, TDRA Board of Directors
Saeed Al Mazroui
Board Member
Abdullah Al Shamsi
Board Member
Hussein Al Zaabi
Board Member
Khalifa Al Nuaimi
Board Member
Don't
Take photographs of teams in different environments, methods and colours.
Text on Images
Ideally, use an image that has space to add text. If you have to use images with limited or no space, add an overlay to create contrast.
Do
Use images with solid colour background to add text
Don't
Place text on the image where is no space
Do
Place the text behind the image object to preserve text readability
Don't
Place text behind the object when it compromises text readability
Do
Add 30% black overlay on dark or semi-complicated images before adding text
Don't
Add Colour Overlay
Do
Place text on 60% opacity black overlay when using crowded images
Don't
Apply colour for text on crowded images
UAE 5G Conference
April 11-18 2021
In line with the vision of the UAE 2021, the TRA aims to be the main driver in launching the fifth generation of mobile commercial service in the country.
Do
Separate image and paragraph text
Don't
Add blur effect overlay on part of an image
Don't
Add blur effect overlay fully on an image
Computer-Generated Imagery (CGI)
If taking photographs or searching for relevant stock images is not feasible, CGI is our recommended approach. These images are developed using specialist software; there are a lot of possibilities. You can control the complete process of shaping up the content, from light to the layout.
Application
Landing page concept using Hero CGI image
Image Quality
Resolution, sharpness, size
Do
Use native resolution for an image without upscaling
Don't
Use images with lower resolution than desired container resolution
Image size
For better performance, compress image sizes without reducing the resolution using AI -powered image tools or your software’s built-in image compressor.
Tools to Use
Tinyjpg and Tinypng are helpful tools that work effectively to reduce image size without compromising on quality:
https://tinypng.com https://tinyjpg.comIllustration
Illustrations are used to tell a story, convey a mood or utilise a metaphor to make a complex idea clear and relevant. An illustration is one of the many ways to represent values that users can engage and connect with. Think of illustrations along the same lines as photography and videography—they are visual storytelling tools.
Principles
Use core and secondary colours when creating illustrations.
Less is More
Create simple forms that are easy to recognize.
Geometric
Create illustrations using basic geometric shapes.
White Space
Keep enough white space to balance the illustrations
Hierarchy
Position the main object in the foreground and place supporting objects and environment in the background.
High Contrast
Strong contrast helps important elements of an illustration stand out.
Solid Colours
Don’t use gradients, contouring and soft transitions
When to use Illustrations
- Header - Spot Illustration - Service
Use illustrations for these three components to help communicate content that represents a specific subject. It allows users to associate with the message positively.
Hero Scene Illustration
Scene illustrations are complex as they feature backgrounds, midgrounds and foregrounds.
Where to use:
- Website headers - Large size section and areas
Do
Create scene spot with strong foreground and minimum background
Scene Spot Illustration
Scene illustrations are simpler as they have foreground and slight background.
Where to use:
- Medium size containers
Do
Create scene spot with strong foreground and minimum background
Spot Illustration
Spot illustrations are the easiest to create as there is only a foreground (object). Such illustrations are used in wizards, services, structures and small sections due to their ease and simplicity.
Where to use:
- Medium to small size containers
Do
Create spot illustration only with foreground
Application
Two-Tone Icons
Useful in small sections or to show a process. Two-tone icons are created by adding secondary colours.
Where to use:
- Small size containers
Do
Create Two-Tones by adding colours to small,functional parts of the icon
Colour and Tone
Use core and secondary colours to add colour to illustrations.
Do
Apply the correct colour ratio to maintain high contrast and realism
Use with Caution
Use colours different from your colour palette
Drawing Guidelines
Do not use gradient backgrounds
Do not apply stroke to the objects
Do not apply stroke to the objects