Empath UI Design System

Project Type

UI Design System

Timeline

December 2019 – March 2020

Description

Presentation and illustration of the use cases and results of the research projects/applications DAIMON and ERPAD.

Client

north.io GmbH

My Role

Conception

Creative Direction

Execution

Timeline

Oktober 2021 - January 2022

My Role

Conception

Creative Direction

Execution

Design System

About

Empath focuses on human thoughts, motives and feelings. The modern design language is minimalistic, clear and guiding, which makes it particularly intuitive to use. Empath is a Material-UI based design system and offers a very wide range of components. The focus of Empath is on the development of complex interfaces, but of course it can also be used for less complex cases.

Concept

Empath is made for complex applications, for that reason the user interface is designed minimalistically. The components are reduced to the basics and focusing on expressive colors, shapes and lines. In addition to the usual warning colors, there is only one primary color, which is used targeted in individual components. The focus is on increasing the intuitive use of complex applications with clear, guiding and expressive interaction indicators.

.

Isolation

Rounded and spacious designed components are forming the contrast to the angular base surfaces. All the base surfaces stick to each other, so the components isolate themselves ideally through their rounded shapes, which makes it easier for the user to perceive them faster and use them more intuitively. Empath is fundamentally driven on a flat design, shadows are only used to highlight contextual menus, dialogs or buttons.

Development-oriented

Empath does not change the essence of MUI, it offers optimisations based on the goals and concept. Good design is important to enable the user to use the application satisfactorily, but components and interfaces also need to be developed and maintained, and this is very time-consuming. Therefore, Empath optimises only what is needed to optimise, based on proven patterns and design rules. The components of the MUI library were taken over and for the most part only changes were made which did not change the essence of the components. Optimisations of colors and their use, font styles, line thickness, roundings as well as object sizes and distances are leading to a significantly modernised and individualised appearance.

Atomic Design

Empath is based on the Atomic Design methodology, which makes it very flexible and easily scalable. Colors, fonts or spacing are used as defined and centrally stored design tokens. This has the advantage that the UI can be designed much more consistently, since design and development can use the defined tokens instead of working with color values or font sizes.

Another advantage is that the maintenance and optimization of components and even the entire system can be significantly accelerated. For example, to change a color, only the token needs to be changed, which changes the color in all components that use that token.

The same applies to the components, which are classified into atoms, molecules and organisms. Atoms are the smallest components, molecules are made up of atoms and organisms are made up of atoms and molecules. When an atom is changed, that atom also changes in all molecules and organisms.

The result is a system with many predefined, centrally stored components and tokens that are used to create templates and pages and allow you to make changes across the system with just a few clicks.

.

XD Library

All components are built identically to the developed components

Up to 8 instances per component

Colors and text styles are customizable with a few clicks

Uses design tokens

Uses  Atomic Design

All components are fully responsive

All color palettes are optimized for color vision deficiency

Uses all of XD's technical capabilities

.

Material property, Purple, Violet, Font, Pink

Demo

A demo of light and dark mode is available. Check out for yourself how the XD files and the components are working.

Please note: The demo only contains some of the many components.

Download

Download