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

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.

02_EDS

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.

04_Typo

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

06_Colors

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.

07_Components

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).
03_Assets

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.

08_Adaptive

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

09_ExampleEnterprise communication administration dashboard.

 

10_Example
My phone plan app and smartwatch app for network analytics.

 

Want to know more about Ericsson Design system? Read more at Ericsson.com

Download EDS Infograph