Marketing sites

The VELUX marketing sites are designed for our commercial target groups: end users and professionals (dealers, installers, specifiers/architects). Their purpose is to deliver an optimum customer experience and to support the indirect sale by generating leads to our shops and tools. The relevance and quality of the marketing sites should contribute to strengthening the target groups’ preference for the VELUX brand.

Each VELUX sales company has its own national marketing site which is based on a global master site and built in Sitecore CMS. 

For general information see Design elements.

Please get familiar with our design essentials: Asymmetry, Clarity and Space as well as our approach to Customer Experience and UX principles.

Owner: Marketing Communications

If you have any questions about the VELUX Brand Identity Guide, please refer to your VELUX contact.

Design specifications

  • Templates
    The VELUX marketing site consists of a large number of dynamic templates providing you with many layout setup opportunities. Each component has its own template already predefined in Sitecore, so it’s easy to get going. Note that the header at the top of the page, and the footer and signature at the bottom of the page are fixed in the layout.
  • Components
    Components are the individual elements that make up the web page (text field, image field, form, etc.). They are grouped into rows that contain different combinations of columns and elements. There are many different components. Here are a few examples:
    Hero component
    Placed at top of page to visually highlight options for the section
    Multi-column component
    Combining image, header, body text and call to action button (here with three columns but available with various column numbers)
    Accordion component
    Click on individual rows to reveal/hide more content
  • Fonts
    VELUX marketing sites use the VELUX Gothic font as an embedded font. VELUX Gothic is available in four different weights.
    You should use them as follows:

    VELUX Gothic Light

    Light is intended for applications that require very large text and or large headlines.

    VELUX Gothic Regular

    Regular is the standard setting that we use in the majority of the body.

    VELUX Gothic Bold

    Bold is intended for subheadings and or to add emphasis to a word or phrase.

    VELUX Gothic Light 

    Black is intended for special applications where you need heavy impact.

    We use VELUX Gothic Italic to emphasise individual words, short phrases or quotations.

    VELUX Gothic Light

    VELUX Gothic Regular Italic

  • Links and buttons
    When linking to other pages from content that is embedded on the page, images and buttons can be used with advantage. A coloured button highlights the link option, which is especially important if the link represents a preferred call to action that we wish to promote to move the customer further on in their journey.
  • Layout
    The design and layout of the site is done automatically, but when creating the site, it can be a good idea to know the basic design principles behind the page being built.
    We recommend that you stick to using the pre-defined Sitecore “spots” in the system as these have been optimised for responsiveness, and will ensure that everything looks fine both in PC and mobile layout.

    Desktop layout

    Mobile layout

    Here we have the same image put into a 1, 2, 3, and 4 column page layout and everything is aligned and resized correctly.
  • Grid

    The marketing site has a 12 column grid. The width including margins is 1280 px with a main content area of 940 px. Each of the 12 columns in the content area is 60 pixels wide and has a padding space of 20 pixels. The 12 columns can be split into up to 6 cells, where you can insert your page blocks so they are correctly aligned. This is a simple trick to please the eye, but it works.

    Also, it is much easier to render the page if you are looking at it from a device that has a smaller resolution, e.g. a smartphone or tablet.

  • Navigation
    The VELUX navigation consists of a main navigation bar with the key elements for the current site/content area. It's supported by a top navigation with sitewide VELUX general content.
    Next to the VELUX logo there is a ‘Homeowner’ and a ‘Professional’ link that points to Professional section vs. Homeowner.
    On top of the main navigation there is a mega menu with a full overview of the contents of each section.
    Sticky menu
    Mobile view of the navigation. Normal and expanded state.

Design resources

We have created some digital templates to help and ease you when designing for the VELUX marketing site.

The templates are available for both Photoshop and Sketch and include our 12 column grid and our colours.

For fonts, logotypes, and images see Design Elements.

Download Photoshop file
Download Sketch file

Final checklist

When working with new pages for marketing sites, our goals is to create a consistent Customer Experience throughout the site.

Therefore, we strive for:

  • Using consistent templates;
  • Reusing components that provide the same information across the sites, for example, elements that link to brochures, e-shops, dealers, installers;
  • Keeping a consistent use of colors and visual elements, as well as a similar structure and order of presenting different types of information.