Inspiration

Design tools

Install the component libraries for our design tools.
Five design principles

The digitial design principles are meant to work as the guiding star in all our digital developments for all business segments and internal systems.
Motion

Motion is all about reenforcing understanding and behaviour on user triggered actions. We use it to describe functionality, relationships and intention.
Graph

A graph is a visualization of different types of data, such as showing the increase of a certain share for the last month. Graphs should be used to make data more digestive and easier to understand.
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 while having the ability to go back to their previous view quickly.
Slide-out

Slideout modals allow for more complex interactions while not navigating away from the current view
Concept sketches

These are sketches from 2015-2017 when Brand started forming the vision of the new design, and from Digital Roadmap that created sketches based on this.
Story block

A block to promote an article or landing page.
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 and crucial tools in creating relevant, useful and inspiring products.
Keep it together

At the base of all our design lies some fundamental visual elements that makes up the visual expression of SEB.
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 are designing?
Lead the way

Design guides people through the in's and out's of our products.
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.
Progress and evolve

Be brave, challenge your design and push boundaries!
Forms

Forms are one of the most important components of our digital design. They are a part of a signup flow, a multipage flow, or a monotonous data entry interface.
Layout templates

What if we combine some of these components? See templates on how the layout could look when you create a form or a wizard.
Progress bar

A visual representation of progress for loading content
Module

A module gives the user a complete overview of all information available for a specific area.
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 Axel. Or as he would call it: "How to make pension and insurance make sense".
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 front of them.
Toggle button - will be removed

This button has a single select function, meaning only one can be chosen. The icons must relate to the choice or action they represent.
Search
Error pages

The error page is typically used when a system is down or a generic error has occured.
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

This is a feature that helps the visitor back to the top of the page once they have scrolled through a certain amount of the content.
Article features

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 (date published, time to read, ability to share etc).
Related content

Presents similar or related content of the same type to the visitor that they are currently on
Empty states (desktop)

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

The alert ribbon is a compontent containing information about the state of the system/page/function. Information can be plain information, success, warnings & critical information (such as errors).
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 front of them.
Related blocks

The purpose of The Related blocks is to highlight a story, article, news or a product that is related to the current content, or in other ways relevant to the reader.
CX-workshops

This is a collection of workshops that you can do with your team. There is everything from how you get to know each other and work as a team, to how you understand customer-centered working methods.