Nordic Cool
The Visma design language
Our language
A language is all about identity and culture. The language unifies us and gives us an identity as a group. A strong language defines us and tells others who we are and what values we have. With a language we can create meaning and purpose.
This creates a strong bond and value related to everything we do. And regardless of what we create, it is based on the language and tone-of-voice we call Nordic Cool.
In all our conversations – we use the same language.
You should feel the design, not see it
For product design, the goal is for the user to feel the interface – not see it – so that the interface does not get in the way of the task at hand. Thus we try to use a subtle, yet distinct design. We put a lot of effort on the details of the design to give the user the feeling of world class craftsmanship.
Furthermore, it should give the impression of being secure and stable, only by how it looks and feels. All of this is achieved through visual harmony, in particular through consistent padding and alignment. Compare this to how cars are designed: every curve and detail is carefully thought out, making the whole even better than the parts.
It’s all about the light.
And, the light springs from the same source
When it comes to visual and aesthetic principles, Nordic Cool is all about light. The light, which includes colours, creates the Visma ambiance. Even at a glance you should feel the Visma ambiance. That ambiance is called Nordic Cool.
As you can see in our three main illustrative families, that are part of our illustration library, they carry the same ambiance even though the styles are quite different in shape and form. This is the light in play. That light is the essence of Nordic Cool.
You can have quite busy illustrations and still get a calm feeling. This is achieved by having a dominant part of the illustration using bright colours. This makes functional sense by distinctively focusing the eye on fewer elements, emphasizing the story.
Narrative
Spot
Isometric
Shed some light on…
We are mostly making products for people to use in a professional setting or in settings that are highly important in people’s lives. We are talking about tools that businesses use to run their accounting, to recruit personnel and to pay employees salaries. We are talking about tools that hospitals use to manage their workforce, tools that schools use to schedule children and tools that people use to get out of debt. We handle sensitive information, which means that function is really important. Understandability is important. Being cohesive and consistent is important. It evokes trust. So, whether we are making software that targets super-users or less advanced users, we should always use our design language to create that calm and trustworthy conversation with our interface.
Visma is working in a vast number of business areas. The more Visma grows, the more areas our design language has to cover. Our experience is that one size does not fit all, but we still need design principles. We need them for the following reasons:
- To manifest our brand. It’s both valuable and usable that customers and users can recognise Visma’s products.
- To facilitate migration of users from many applications to fewer. If we can cater for more users in fewer applications we can focus our efforts to make a few applications really good, rather than maintaining a vast amount of similar applications.
- To make development faster and better by having a standardised design and let developers focus on making meaningful features rather than spending time on graphical design.
- To generally improve user experience and quality by following standards and avoid re-inventing wheels.
Light & Color
Let’s talk a bit more about light and color. We believe the biggest influence on what creates the Visma ambiance is how we use and execute light and color. And for product design light and color has a very important functional role, in addition to having a decorative purpose. The choice of having blue as a main core color is because it is a less obtrusive color. The energy level in it is less energetic and psychologically has a calming effect on humans. The downside is that it is very commonly used in software. We balance this fact with having green as a positive complementary color. The green serves as not only steering attention in a work surface towards main activity areas or objects but also create a somewhat unique profile together with the blue. This together with how we use light and shadows sets the core foundation for our tone and ambiance. The other colors for product design is purely functional with use of red for signaling error and orange for warning.
Actually light and color also plays a big part when we talk about fonts and all other visual objects in an interface/application. Especially for administrative heavy applications like our own. For Nordic Cool 4 we have reduced amount of font shapes and states greatly which creates better visual hierarchy, readability and calmer impression of the interface.
The evolution of Nordic Cool
The first iteration of our product design language was created in 2006. Since then we have fine-tuned and perfected the visual design and complemented it with a growing amount of design patterns. At the same time we have gathered a lot of experience in the field of optimizing visual design for administrative working tools – which is a quite different domain from others. The product design we are doing aims to cater for the interface being easy to understand and interact with – to be intuitive.
In the beginning we mostly worked with applications that was made for professionals in medium to large size corporations. Today the situation is vastly different. This change has happened gradually and with that, our design language and system has evolved to better cater for these broader needs.
The main goal with our most recent update, Nordic Cool 4, was to merge our previous two languages into one that covers the whole customer journey. Having more cloud solutions, we see that being consistent and cohesive throughout the customer journey is essential for looking professional, but also for everything to make sense for the customer.
The main differences between NC3 and NC4
A step closer to flat design
As described above, we have moved closer to flat design with Norid Cool 4. To give an example, let’s look at the buttons. The Nordic Cool 3 versions are skeumorphic and use gradients, while the Nordic Cool 4 buttons are flat and use shadows and strokes.
All buttons offer affordance through perspective, just in different ways.
Added flexibility for the top menu
As exemplified on Get inspired, Nordic Cool 4 offers more flexibility in regards to the top menu. With Nordic Cool 3 we offered only one height and colour of the top menu, using our main blue colour. The top menu was only made white for white labeled products.
Over time, we have seen a need for more options, since our products are used in many different contexts and customer segments. As a result, Nordic Cool 4 offers two options, a blue and a white menu in two different heights – the normal height and a taller version. We recommend that our more dense and information heavy products continue to use the blue top menu. The white top menu is recommended for products where the context allows for more colourful content, such as images and illustrations and for white labeled products. We recommend the use of the same top menu colour throughout product lines and customer journeys to the extent it is possible.
A brighter background
A subtle yet important part of the impression of an interface is how the main building blocks, like menus, content boxes, grids and interaction elements, rests upon a background. The background plays an important role in setting the ambiance. It almost plays the role of a background singer.
In our case the small change from a plain grey background to a subtle blue tinted background makes the general impression more positive and fresh. It simulates light being reflected from the main blue elements that act as pillars in our interface design. However, if one decides not to use the main blue menu – it still resonates with the other building blocks.
A walk down memory lane
Nordic Cool has been with us for over a decade. Together with trends and best practices, the visual language has evolved over time. We started out with an almost monochrome design before introducing a blue profile color with the bright and minimal Nordic Cool we know today. Below you can see where it all started and how Nordic Cool has evolved over time.
The first generation was inspired by how Apples operating system was creating a calm and reduced background focused on usability and readability, and where colour could be used for functional visual cues.
With Nordic Cool 2 we introduced more colour into the interface, starting to work with blue as our main colour and orange as the complementary colour, guiding the user through the different workflows. We used skeuomorphism and gradients to create even more perspective. All in all, with a more decorative interface with some colour use, we noticed an increase in satisfaction when using our software.
So, with Nordic Cool 3, we moved away from dark colours and minimised the use of skeuomorphism and gradients, using it mostly to emphasise buttons and other important interaction elements. One other important goal with Nordic Cool 3 was to comply with AA WCAG. Due to that we could not continue using orange as our complementary colour, and we consequently started to use green instead. The new blue with the green made our interface look cool but with some added warmth.
As a result, after some initial adjustments based on testing, our interfaces became brighter, more refined and reduced. But also distinct and usable from an accessibility point-of-view.
