Five design principles

Use the digital design principles as a guiding star in all our digital developments.

Motion

Motion is all about reenforcing understanding and behaviour on user triggered actions. We use it to ...

Graph

A graph is a visualization of different types of data.

Widget

A widget acts as a configurable preview for a module and/or page.

Table

A table displays collections of raw data grouped into rows with supporting headers.

Density

Density scaling is a feature that enables a recommended value of margins depending on resolution and...

Take-over

Takeover modals enable a user to focus on a specific task.

Concept sketches

Design sketches from Brand and from Digital Roadmap in 2015-2017.

Tools for developers

If only there was a guide on how to improving the code so that we include more people... Wait, there...

Stepper

A stepper makes it easier to input values that are in a narrow range.

Visual design thinking

This chapter aims to give guidance on how to think when creating visual design for our brand. The vi...

1. Keep it together

At the base of all our design lies some fundamental visual elements that makes up the visual express...

2. Design for a purpose

For design to be impactful it needs to fulfil a purpose. The purpose should answer the question: wha...

3. Lead the way

Design guides people through the in's and out's of our products.

4. Don't simplify, make it simple

We always aim for presenting the complex in a simple and approachable way. This is a key aspect of a...

5. Progress and evolve

Be brave, challenge your design and push boundaries!

Form design

Forms are often the final step in the journey of completing their goals, which is why it's important...

Real life example: Trygghetsplanen

This is a real life exampel of when all the steps of Visual design thinking was applied to Trygghets...

Wizard

The wizard presents a sequence that lead the user through well-defined steps.

Search

About accessibility

What does accessibility mean and how can it affect all of us? This section talks about the basics an...

Up button

Helps the visitor back to the top of the page once they have scrolled down.

Page header

A collection of data that can be used with a Story page or News page to give the reader better overv...

Empty states (desktop)

How to make our users aware of potential and current system status updates that might require user i...

CX-workshops

Workshop templates to guide you in creating impact, coming up with creative ideas and in exploring h...