Empath UI Design System
UI Design System
December 2019 – March 2020
Presentation and illustration of the use cases and results of the research projects/applications DAIMON and ERPAD.
Oktober 2021 - January 2022
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.
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.
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.
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.
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.
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