Future Digital Blog

Discussing all things digital

The new Ericsson Design System consists of everything a designer or developer needs to create iconic user experiences. From the design foundation with the visual hierarchy, themes, colors, typography, and iconography to components with ready to use code. The only thing you have to add to the drink is creativity! And the system is constantly evolving and is co-created together with its users.

Design has always been important for Ericsson. Creating smart solutions and aesthetics expressions that provide value in a perfect blend. When I think about classic Swedish industrial design, one of the first images that pops up in my head is the Ericofon designed by Ralph Lysell  Ericsson in 1955

01_Ericofon-1

Since 1955 the Red Dot Award has selected the best designs in different categories such as product design. This summer they selected Ericsson Design System as the winner in the category Interface Design for its innovative approach to user experience, enabling agile software design and implementation.

Ericsson Design System

What does the design system look like?

The design system supports both the designer and the developer. As a designer you have all design elements including layout templates and examples accessible in either Sketch or Adobe Illustrator formats. And for the developer the design system supports the most common platforms.

The typography used in the design system is the brand-new font Hilda, that is optimized for digital interfaces and to be perfectly rendered and readable on screens. The Hilda font comes in a light, regular, medium, and bold weights.

Typo

New iconography has been created following a minimalistic approach where each icon is crafted to offer high legibility in small resolutions.

Icono

The color palette is optimized to be readable in different contexts and special focus has been to make the colors as accessible as possible for people with low-vision or color blindness. The colors in the deign system is used to guide the users towards key messages rather that as decorative and esthetic elements. Every color in the system has a meaning and has been carefully selected and tested.

Colors

The design system has a large and growing set of common components ready to be used, including usage guidelines, implementation guidelines as well as running example you can interact with. It also comes with code snippets in HTML Markup, LESS and JavaScript (Vanilla).

Components

The design system supports all type of screens from the largest screens in a network operation center used by professionals to the smallest screens used by consumers it has an adaptive layout and it comes in two themes. One bright theme that is optimized for text readability and one dark theme that suits darker environment such as an operation center.

Adaptive

Let’s have look at how services and apps look like using Ericsson’s new Design System!

Example

Enterprise communication administration dashboard.

Example

My phone plan app and smartwatch app for network analytics.

Want to know more about Ericsson Design system?

Download Ericsson Design System infograph

Tags:
Customer experience Editor's picks Inspiration & knowledge

Mikael Eriksson Björling
Follow Mikael Eriksson Björling:

Mikael Eriksson Björling

Mikael is Senior Lead Designer at the Ericsson UX Lab and an Ericsson Evangelist. He was previously Director at the Networked Society Lab. His specialty is in understanding how consumer behavior, emerging technologies and new industry logics are shaping the future society and in the intersection of these areas design great user experiences. Mikael believes that with the ongoing digital transformation we have a great opportunity to shape a better world. Mikael joined Ericsson in 1998 and is based in Stockholm. You can engage with him on Twitter at: @mikaeleb or on LinkedIn.