Introduction
The HERE layout system has a fresh and dynamic flow, with a flexible grid and layered system that enable a consistent language no matter how, when and where each design will be seen. Like HERE itself, our design system is in constant motion, enabling freedom and functional adaptability.
On this page, you’ll learn the essentials of how to create a HERE layout, and at the end of this section, you’ll be able to download layout templates for both digital and print to help you get started.
1. Open grid system
The digital-first, 20 x 20 grid can be applied and adjusted to fit any format. The grid is the foundation of the layout and guides the placement of the other layers and elements, i.e. image, text (sitting on the gradient layer) and logo.
2. Flexible background layer
The flexible background layer is an anchoring element consistent across our layout assets, emphasizing the dynamic asymmetric style of our designs. It functions as the basis of any HERE layout, but you can choose between two styles based on your design needs: corner style or panel style.
The corner style is ideal for showcasing large image areas. Here the shorter side of a single grid unit is used as a measurement to create the corner shape – the area that frames the corner of the image.
In some cases you may prefer to use the panel style layout, in which case the background layer shape is created by using the longer side of a single grid unit. The panel should measure a minimum of 4 units wide when applying to a landscape format, or 3 units high when applying to a portrait format.
3. Placing the data flow gradient
A data flow layer made with one of our gradients functions as a text container within our layout system. This layer should overlap the flexible background layer, as well as the image – consider it a bridge between the background and the image. While flexible in size, the layer should ideally occupy approximately 30% of the overall layout. It’s also critical to create a generic rectangular shape: avoid stretched-out columns or other elongated, extreme-format shapes.
In corner-style layouts, the data flow layer should touch the edge of your layout.
In panel-style layouts, the gradient is a freestanding layer – just don’t forget the 30% rule!
4. Placing type
Use the layout grid as a rough guideline for type placement, adjusting the gradient layer to fit the text with the necessary margin spacing. Remember the 30% rule to avoid the gradient layer becoming too dominating. Text color on gradients is always HERE Gray. More information on type sizing can be found on the typography page.
5. Placing the logo
The box logo always sits as the absolute top layer in the layout system.
The logo is aligned with the foundational grid and has an offset of 1 unit. It should stand at the lower right corner of the gradient flowing data layer unless there is a specific reason to place it at the top right corner. When designing for standard layout formats, the height of the box logo is approx. 3 to 4 units.
When placing the logo, remember these four golden rules:
- Keep the box logo on the right
- The aqua of the gradient layer emerges from the HERE logo
- Use a version that ensures contrast with the background
- Make sure you use the short side of a unit as your measurement for a proportional logo
For more in-depth guidance on placing and using the HERE logo, please visit the logo page.
6. Placing images
The image brings together the other three layers for a harmonized and dimensional overall layout. Here, choosing the right image is critical. Make sure that the photograph you choose has a clear focal point – whether that’s a person, a vehicle, a street, a product or another specific area of focus. It’s also critical that there is sufficient contrast between the logo and the image. For more detailed information on the HERE photography style, and for help deciding on the right image for your layout, check out the photography page.
7. Color scheme
What color scheme you choose for your layout will be determined by and which HERE audiences your design will be directed towards – and therefore what brand mode you’re using. For an in-depth guide on our brand modes and the possible color schemes, navigate to our brand mode page.
Layout examples
