Introduction
Data overlays are elements that should be used to reinforce a message within an image or moving image. They should be easy to read so that the viewer can understand the main message at a glance. The key rule for overlays is to keep it simple and relevant to the image.
Don’t crowd overlays with too much information or data
Modules and containers
All the information for an overlay should fit inside one module. You may use multiple modules, but try to use a maximum of two modules per image.
A - Primary container
B - Secondary container
C - Support container
D - Icon element
E - Primary pointer
F - Icon element pointer
Primary container anatomy
A - Type of data icon (icon should be inside the white area)
B - Type of data
C - Status or Status of progress
D - Icon (icon should be inside the white area)
E – Info
Primary container variations
Secondary container anatomy
The secondary container is combined with a primary container module. Its objective is to provide secondary information that enhances and supports the main information.
A - Secondary icon (icon should be inside the white area)
B - Secondary info
Secondary container variations
Support container anatomy
A support container is housed inside the primary container. It should be used to show additional information such as graphics, graphs and copy that communicates relevant data or information.
A - Area defined for support info
Support container examples
Icon element anatomy
An icon element should only be used to support a primary container that is communicating the same message. For example, instead of using three similar primary containers with just a small difference of values on the data/info, we use one primary container and multiple icon elements.
A - The icon should be the same as the one used on the Primary container that is supporting (icon should be inside the white area)
Grid and sizes
The modules and elements aren’t defined by a fixed size (e.g. millimetres or pixels). Instead, they’re defined by a measure X. Measure X is a square that defines a grid to specify sizes and spacings. You can see in the accompanying images how that square is used to define sizes, spacing between elements and margins around a module. Lines are defined as ¼ of the X value. When doing the ¼ division, if the pixel value ends in a decimal point, the value should be rounded to the nearest whole number. So for example, a value of 3.4px should be rounded to 3px.
However, in digital formats the minimum value of the X is always at least 8px in height and width, so that the information is large enough for the viewer to read even the smallest fonts.
Grids and Font weights
The font size of text in graphic overlays is also defined by the grid of the measure X. However, the font weight is defined according to the graphics below:
A - FiraGo Regular
B - FiraGo Light
Pointer
The Pointer should be used to highlight which element in the image or video that the overlay refers to. There is no requirement to use the pointer, but it is recommended as it provides additional context and clarity.
Always use the 90°pointer as the first option. If this isn’t possible because of the image position, then use the primary pointer variations with the respective rotation and position toward the module defined below. The secondary pointer variations should be used as an absolute last result, if you cannot use any of the primary pointer variations.
Primary pointer variations (rotation with position)
When using the variations follow the position regarding the module (middle, corners) and the respective angle.
Secondary pointer variations (rotation with position)
When using the variations follow the position regarding the module (quarters) and the respective angle.
Colors
The modules have three different themes: Dark, Light and Gradient. Dark can be used with Gradient and Light can be used with Gradient, but it is important to note that the Dark theme cannot be used with the Light theme in the same image.
When choosing the right theme, be aware that the module should feel part of the image and not “stuck on”. So, choose the Dark theme if your image has a darker environment, and the Light theme if it has a light environment. Ultimately, designers can use their discretion when deciding which version appears more integrated with the image.
Accent Colors
Using an accent color will help identify what type of message is shown in an overlay. This will reinforce for the viewer what type of data you are displaying and its general context.
Always make sure you choose the right color for the font so that the color contrast ratio is at least AA with the background.
Dark module
A
- Module background
- 1 fill (opacity 60%), Gradient Top Left #ADADAD (Alpha 50%) to Bottom Right #454545 (Alpha 50%)
- 1 fill, #000000 (opacity 30%)
- Blur 30
B - Inside lines, #FFFFFF (opacity 40%)
C - Icons background, #3F454D (opacity 40%)
D - Line Circle, #FFFFFF
E - Pointer line, #FFFFFF (opacity 40%)
F - Accent color
G - Dashed line Circle, #FFFFFF
A
- Secondary background
- 1 fill (opacity 60%), Gradient Top Left #ADADAD (Alpha 50%) to Bottom Right #454545 (Alpha 50%)
- 1 fill, #000000 (opacity 30%)
- Blur 30
B - Inside lines, #FFFFFF (opacity 40%)
A - Support background, #3F454D (opacity 40%)
Light module
A
- Module background
- 1 fill, #FFFFFF (opacity 50%)
- Blur 30
B - Inside lines, #FFFFFF (opacity 40%)
C - Icons background, #FFFFFF (opacity 40%)
D - Line Circle, #FFFFFF
E - Pointer line, #FFFFFF (opacity 40%)
F - Accent color
G - Dashed line Circle, #FFFFFF
A - Support background, #FFFFFF (opacity 40%)
B - Inside lines, #3F454D (opacity 40%)
A - Support background, #FFFFFF (opacity 40%)
Gradient module
A
- Module background
- 1 fill (opacity 60%), Gradient Top Left #ADADAD (Alpha 50%) to Bottom Right #454545 (Alpha 50%)
- 1 fil, # Accent colourl (opacity 30%)
- Blur 30
B - Inside lines, #FFFFFF (opacity 40%)
C - Icons background, #3F454D (opacity 10%)
D - Line Circle, #FFFFFF
E - Pointer line, #FFFFFF (opacity 40%)
F - Accent color
G - Dashed line Circle, #FFFFFF
Because we are using an accent color for the background of the container, all the content inside the module should be white. However, the inner circle of the pointer should match the accent color.
A - Support background, #3F454D (opacity 10%)
Pointer dark variation
This pointer can be used when there is not enough contrast with the background to clearly see the primary version of the pointer.
A - Line Circle, #3F454D
E - Pointer line, #3F454D (opacity 40%)
C - Accent color
D - Dashed line Circle, #3F454D
Iconography
A - Icon should include Accent color on a detail (except on icons for use in gradient module).
B - The Type of Data mini icon should be Filled style and should be full Accent color.
Graphic elements to support overlays
Designers can choose from a variety of additional graphic elements to add greater depth, context and visual dynamism to data overlays. Just make sure to not over-use them! It’s always most important that the viewer can understand the data in an overlay at a glance.
Circles
A - Receiving information, connected car
B - Active e.g. uploading/downloading information
C - Alert e.g. uploading/downloading information
Lines
A - Bold line. Route. HERE Aqua (100%)
B - Bold line fades out. Route where the final destination
is not defined. HERE Aqua (100%), fades out to 0%
C - Bold line changes color and fades out. Route approaching a situation where attention is required. HERE Aqua (100%), fades into one of the additional colors
D - Dashed line with transparent bold line underneath.
Route alternatives. Dashed line: HERE Aqua (100%).
Line underneath: HERE Aqua (30%)
E - Dotted line. Data flow line. HERE Aqua (100%)
Highlighting elements
A - Highlighted building. Color field has outline (with gradient)
Dos and Dont’s
These are some guiding rules that should be followed when creating data overlays and applying them to images or videos. As always, use common sense and create overlays that follow the rule of simple and clear messaging.
Simple example 1
In this simple example, the main message represents the tracking of a fleet. Instead of using multiple modules to represent the position for each truck, we just show one full module on the first truck and revert to a simple icon element representing the same type of information for the other trucks. Also, instead of using “uploading information” as the status message, we use “live” to give the viewer the sense that this is real-time data.
Complex example 2
In this complex example, the main information we want to communicate is the location data of parking spots and that it is possible to pay with Mastercard. At a glance, we can identify that the car is looking for two spaces and the location of the Parking and the payment.
Complex example 3
In this example, we want to demonstrate that we recognize a broken-down vehicle and that the information is transmitted in real-time to other vehicles so they can re-route accordingly and avoid the hazard event. Again, we use “live” as the container status to give a sense of immediacy and to convey that this is real-time data.
