The VELUX corporate site is designed for our non-commercial target groups: journalists, interest groups, politicians, authorities, and researchers. Its purpose is to provide information about the company's main focus, history, press releases, jobs and more. Our corporate site is 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: Stakeholder Communications

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

Screen print of the velux.com front page

Design specifications

  • Templates

    The VELUX corporate site consists of a large number of components providing you with many layout setup opportunities. For articles we have a fixed design that you can download in a template for Sketch. For the so-called Theme pages (example shown lower right) the design is more flexible. We provide you with a Sketch file containing the fixed elements of the page: the header at the top of the page, the footer and signature at the bottom of the page.

    Article template

    Screen print of article template
    Theme page with description
  • Components

    Components or spots are the individual elements used in Sitecore to make up the web page (text field, image field, form, etc.). They are grouped into rows that contain different combinations of columns and elements. Beside standard elements like TextSpot, ImageSpot and LinkSpot we have developed some components especially for the corporate site. Below you will find a screen shot and a short description of each of them:

    Hero Fluent Images component

    Placed at the top of page to visually highlight topics of the visited section.

    The component contains one or two images in size 1280x600 px with 0 or 1 px padding. When used with two images the image size can be smaller and can be presented either symmetric or asymmetric.
    A left side text, a link and a so-called theme tag can be added to the images.

    The example to the right shows a combination of two Hero Fluent image components.

    Screen print of Hero Fluent Image spot

    Quote Spot
    Consists of a quote area and a cite field. It provides a consistent layout when quoting since the font sizes and colours are fixed.

    Screen print of quote

    Social Media Icons Spot
    Places the Social media icons within the page. Used for sharing, not following.

    Screen print of Social Media Icons Spot

    News Feed Ribbon Spot
    Provides relevant content using RSS feeds, Twitter feeds etc.

    Screen print of News feed ribbon spot

    Related Content Spot
    This component is mandatory for articles, but can be inserted on all page types. It consists of an image and a tag. The tags are predefined and placed in the tag library.

    Screen print of related content spot

    Gallery Filter Spot 
    Used in building cases, but can be added to all page types.
    Items in the gallery can have a thumbnail text and open in a light box when clicked.
    Padding can be added if you do not want the images to be 'glued' together.
    Add filters if you want to have more galleries in one to show all images or just a group of images.

    Screen print of Gallery Spot
    Screen print of Gallery Spot with light box
  • 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 Black 

    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 you have two coloured buttons to choose from, see hex colours below.

    The font is VELUX Gothic Regular 15 px.

  • 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 optimized for responsiveness, and will ensure that everything looks fine 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 corporate site is 1280 px wide and has a content area with a 12 column grid. Each column is 60 pixels wide and has a padding space of 20 pixels adding up to a total width of 940 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.

    Within this basic 12 column framework, there are many opportunities to create different numbers and widths of columns.

  • Navigation

    The navigation consists of a grey link bar with the key elements for the site and a top navigation with our main focus areas:

    Screen print of top navigation at velux.com
    Mobile view of the navigation. Normal and expanded state.
    Screen print of the velux.com frontpage in mobile view
    Screen print of the mobile menu at velux.com