Introduction

HERE data overlays are used to visualize information on photographic identifiers, illustrations and CGI material to explain products and features. They provide an explanation and a technical view of products and features in use in real world environments. Data overlays can be static or used in motion, but motion should be used where possible.

Guidelines

Containers and modules are devices which provide ways to cluster information and ensure standout of important content on busy background scenes. Containers hold key information about a product or feature and always emerge from a pointer line which is directing attention to an area within the scene (eg. moving car, building).

Modules allow for additional information to be added to scenes and do not use a pointer line. Instead, modules are floating elements which can interact closely with the scene, and can be docked-onto or nested within containers to help explain detailed stories.

Selecting containers and modules.
Containers and modules can be used in combination to help tell complex stories and show various types of information.

Container
Information which is pointing at an object. Pointer is always at 45°.

(Floating) module
Short information which is NOT pointing at an object.

Container (+nested module)
Information which is pointing at an object and needs to be divided into different topics (e.g. trip data divided into origin and route).

Container (+docked module)
Information which is pointing at an object and live updated information which is added on (e.g. road works and diversion).

Container and modules content overview.
Overview of the basic types of containers. (Gray examples),

General information.
2-tier container with pointer.

General information.
Module without pointer.

Combination of general information and docked-on additional information.

General container content.
Containers are structured in the following ways.

General information.
2-tier container with pointer. 

General information.
2-tier pointer container with 1 module.

Module content.
Modules are structured in the following ways.

Combination of general information and docked-on additional information.

Typography

The HERE typeface Fira Sans is used in data overlays in different type sizes. Please ensure decimal type sizes are not used.

Containter type sizes.
Below is a guide to type sizing. Sizes are based on containers at 150px wide. Once type has been sized, the container can be scaled up or down proportionally depending on requirements.

Module type sizes.
Below is a guide to type sizing. Sizes are based on containers at 150px wide. Once type has been sized, the module can be scaled up or down proportionally depending on requirements.

Information visibility hierarchy.

Construct information in hierarchies to highlight the most essential messages.

Building a container or module.
The size of a container or module is based on the amount of information. Please use the following dimensions based on a container or module at 150px wide. For other formats you can scale it up or down proportionally.

The cut corner of a container consists of a triangle with two 20px long sides at a 45° angle.

The cut corner of a module consists of a triangle with two 15px long sides at a 45° angle.

Containers and modules have a 10px clear space on the inside for information. Containers also use this clear space for placing docked-on modules.

Container variations.
Containers can point in four directions and adapt in the following way.

Container with pointer on the top right corner.
(pointer is always at 45°)

Container with pointer on the top left corner.
(pointer is always at 45°)

Container with pointer on the bottom right corner.
(pointer is always at 45°)

Container with pointer on the bottom left corner.
(pointer is always at 45°)

Flexible modules.
General information layers can be shown in different ways. Only one cut corner is allowed per container.

Module without pointer.
Cut corner always bottom right.

Don'ts.

Flexible module/container combinations.
Modules can be nested or docked on.

Additional information nested in the general information layer.

Additional information docked-on from left or right.

Additional information layered over corners.

Do's and Don'ts
When creating containers and modules please consider the following rules.

Overlapping elements.
Ensure that only modules and containers overlap.

Line pointers.
Don't cross line pointers or information from other containers or modules.

Clear spaces.
Containers and modules should have a clear space of at least 10mm based on the width of a container or module at 150px. For other formats you can scale it up or down proportionally.

Photography

Small retouches on the photography can be used to enhance the legibility of data overlays.

The data overlay color palette.

Coloration of containers and module.

HERE primary colors are used for containers and modules. Choose color based on legibility on background. One color should be used to group similar products / content. Do not use more than two primary colors per application. Ensure enough transparency is used to avoid boxes looking too solid.

For modules displaying information to attract attention (e.g. free parking spaces). Do not use for containers colors.

For modules displaying information to attract attention (e.g. free parking spaces). Do not use for containers colors.

Harmonizing colors and transparency with background

Box colors should be chosen to be visible and readable, but should be chosen to be harmonius with background scene.

On light backgrounds, avoid using very dark overlay boxes. More transparency should be used to give it a lighter and more transparent feeling.

Color & transparency
Primary colors are the dominant color palette used in the data overlays. If the background image allows it please always try to use transparent containers and modules.

CONTAINER / MODULE TRANSPARENCY & COLOR

Please use the 40% opacity for calm backgrounds and the 80% for busy backgrounds.

TYPOGRAPHY COLOR

Typography examples.
Avoid combining Aqua type with an additional secondary color type in the container, as it gives a playful and overly colorful impression.

CONTAINER / MODULE TRANSPARENCY & COLOR

Please use the 40% opacity for calm backgrounds and the 80% for busy backgrounds.

TYPOGRAPHY COLOR

Typography examples.

Module color overview.
The additional colors are used as accent colors to put a focus on information.

Please use the 80% fading into 40% in the last third of the gradient.

Typography examples.

Do's and Don'ts. Ensure enough contrast is achieved when combining colors. Do not use other secondary colors from the HERE palette.

Pointer and line colors.
The triangle pointer and line colors are always used with 100% opacity.

Line pointers and container lines.
White is the preferred color for both type of lines.

 

Dos and Don'ts.
Please do not use colored line pointers.

Color code overview.

HERE primary colors are used, with HERE yellow and orange for attention colors.

BASIC COLORS

ADDITIONAL COLORS

 

Nested and docked modules color.

Colors choice for nested and docked modzules are as follows.

Nested: For containers with 40% opacity, please always use 40% for module opacity as shown.
Tone-in-tone container and modules are not allowed.

Nested: For containers with 80% opacity, please always use the same opacity than on the container it's nested in.
Exception: White containers should always be set to 90%.

Docked: Module colors can be chosen from the "Data Overlay Color Palette" and used with a gradient.

Container and modules examples.
Overview of the basic types of container and modules. Please use color to differentiate/group types of information.

80% HERE Gray
(busy background)

40% HERE Gray
(calm background)

80% HERE Gray
80% HERE Orange

Connectivity circles.
Connectivity circles can be used to both highlight and communicate meaning.

Eg. Car highlight (connected car).

Eg. Car highlight (Active, uploading/ downloading).

Eg. Car highlight (Alert, uploading/ downloading).

Graphic language toolkit.
All overlays are based on the following elements.

Connectivity circles.
Examples how to highlight objects and communicate meaning. E.g. active, alert, uploading, charging etc.

Content containers and module styles.

Building/objects highlight styles.

Symbol pointer styles.
Floating icons can be used with a pointer below, if no other information is required.

Icon language.

Line styles.

Additional info styles.

Highlighting elements.
The gradient is created in the same way as used in the modules.

Highlighted object.
Color field has outline (with gradient).

Highlighted object to attract specific attention.
Color field has outline (with gradient).

Zoomed in details.
Color field has NO outline. Color is chosen based on the object but is selected from the data overlay palette.

Gradient setup.

Line styles.

Meanings of each line type.

Usage Examples

We've pulled together a variety of examples that illustrate ways that the HERE data overlays can be used.

Movement
Every movement should feel natural, Objects don't just go from zero to hundred but accelerate and decelerate.

Animation curve.
Outgoing Velocity: 50 %
Incoming Velocity: 80 %

Data overlay animation.
The overlays appear in a continious motion. The animation curve is applied on the whole animation to create a seamless motion.

Data overlays on still imagery.
On still imagery, containers/ modules should have a subtle movement after they appeared to give a dynamic feel. They move diagonaly to keep the 45° angle of the line.

Data overlays on video.
On video footage, the overlays are orientated in the 3D Space according to the camera perspective. The data overlays are moving according to the objects they are belonging to.

Lines
We always start with the line as our first element to animate in.

Animation of containers with line.
The line always comes in first. After that the container is emerging out of the line.

Animation of modules without line.
If the overlay has no lines it animates in like the container.

Timing

Keep animation short so viewers don't have to wait for elements to appear. The animation should always have a continous flow. If you have elements animating in, one after another, an overlap in the animation helps the view to take in information.

Data overlay animation.
Objects shouldn't be animated simultaneously but after each other to help the viewer take in information. Stagger animating elements so as not to overload the scene with too many animating elements at once.

Layers

The data overlays consist out of multiple elements. To show layers of information animate these elements in one after another.

Data overlay animation.
Showing the layers one after another helps the viewer comprehend the information. Basic elements appear with the container or module while infographics animate in slightly later to have a focus on their movement.

Resources

Overlays files package

If you need overlays developed, please work with your Activation Manager and the guidelines above to create what is right for your project. For approval on your project and if you need additional assistance, contact brand@here.com