Design tools

Install the component libraries for our design tools.

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 describe functionality, relationships and intentio...

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/or device.

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 is!

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 visual aspect of design presents unique, fundamental...

1. Keep it together

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

2. Design for a purpose

For design to be impactful it needs to fulfil a purpose. The purpose should answer the question: what do we want to achieve with this product that we ...

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 any successful design.

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 to be able to complete them quickly and without c...

Design hints

When talking to designers, valuable design hints have been shared with us. We have started to add them here.

Real life example: Trygghetsplanen

This is a real life exampel of when all the steps of Visual design thinking was applied to Trygghetsplanen, as told by customer experience-designer Ax...

Wizard

A 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 and gives you a simple checklist.

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 overview of the articles meta-data.

Empty states (desktop)

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

The old wizard

A wizard presents a sequence that lead the user through well-defined steps. Use the modal Take-over which gives the user full focus on the task in fro...

CX-workshops

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