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
Empaths modern design language is minimalistic, clear and guiding, which makes it particularly intuitive to use. Empath is a Material Design based design system and offers a very wide range of components, the focus is on developing data-centric interfaces.
.
Concept
Empath is made for data-centric 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 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 flat design, shadows are only used to highlight contextual menus, dialogs or buttons.
Development-oriented
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 time-consuming. Empath was created in close cooperation with development to ensure efficient component design. The thoughtful use of font styles, line thickness, roundings as well as object sizes and spacings leads to a clearly modernized and individualized appearance without a lot of development effort.
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.