Professionalising Screen-Based Design - NSB Visual Profile

Visual Profile

NSB consider themselves to be comfortable, effective and environmentally friendly with the hope to convey a feeling of light and fluffiness.

Few examples of how they portray themselves with appropriate pictures to fit with the words. 

"Warm & Charm"

"Airy & Easy"

"Pride & Experience"

Given that was given as a requirement within the brief was to stick to the already existent NSB visual branding there were some things listed within their visual profile on their website that I think will need to be taking into account.

One of those things is with their logo:

'To ensure readability, it defined an area around the logo that should be free of text and other visual elements.

The grid around the logo shows the minimum air and protection around the logo.'

What to do and what not to do with their logo

These pointers are something that I should bare in mind when I come to designing the website as not only do they help with legibility issues related to improper use of their primary and secondary logos as the colours of their logos and the background images don't contrast well enough to allow the logos to stand prominent, as they should on any website.

Primary Logo

Secondary Logo

NSB has developed an icon bank to help users navigate the information but with that comes a list of things not to do with their logo, again these are something I will have to avoid doing when it comes to the design stage.

Do not:
- Use too many icons on the same surface
- Create new icons or modify existing
- Use colors other than what is stated in the design manual
- Using icons in smaller sizes than the minimum size specified in the design manual

Sizes:
- Do not use less than 14 px on screen
- Use the appropriate icon at the right size - there are three variations of each icon.
- Use the same size (or a logical system size) on all icons within the same flat.

Selection of NSB's Icons

Colours

Main Colours

'Red is NSB's primary color and the main color in the logo. Red is well suited for headlines and can replace black headlines in such ads.'

'White is an important color for NSB and symbolizes purity and in combination with green, environmentally. White makes text, information and photo get better forward and provides a contrast between all elements. In addition, it helps the NSB logo of a major and worthwhile visual space on a surface.'

Main Colours

Additional Colours

'Grey - NSB also need a neutral colour like grey, where we have four different shades. These we use when needed.'

'Orange is used when we will enrich the profile. Important is the colour used wisely, it is red muffled in a flat, orange may be highlighted, but not both colours, then it quickly becomes a little circus.'

Accent Colour

'Green speaks for the environmentally friendly side of NSB. It is not intended to use the large green expanses, but rather in the text where NSB will talk about the environment. The green color should be used sparingly and subtly. It is also possible to integrate green color in the photo. For example, close-up of leaves, trees or grass.'

Map Line Colours

'In communication and information on the new route network in Eastern Norway, we use certain colours on line map and line designations. These colours are dedicated to line map special and should not be used for other purposes.'

Typography

NSB will have an airy, clean and modern typographic expression.

- Myriad Pro (primary font used for headings, titles, introductions, between titles)
- Bembo (support font used for body text)

'NSB want to be clear in all communications, it should therefore be sought to develop precise, short headlines in all publications. By highlighting one or more words we achieve focus on a desired theme. Myriad Pro Light can be used in headlines to highlight the message.'