Designsysteme

Our service: The process to a uniform modern design language

Brad Frost's Atomic Design approach provides diva-e with the basis for the development of the design system, but represents only part of the comprehensive structure of the complex design. Based on this, the design experts develop the basic guidelines and building blocks for the entire system. In the course of the project, an ever larger design system is formed into a single unit. The small-scale development of the individual components minimises errors in content and concept, and the structure of the newly created product is immediately recognisable. The agile and scalable design system makes it possible to quickly take new requirements into account and integrate them effortlessly into the further process.

The method initially appears to be very complex, but is indispensable for larger projects. For smaller design tasks, however, the experts at diva-e continue to use other techniques. The initially high effort involved in using a design system is reduced in the course of the project, because new offshoots with different - albeit uniform - styles can be created without additional work. In the end, customers benefit from the cost efficiency of the design system.

Our tools: Reusability, easy maintenance and simple expansion

diva-e uses a pattern library for the design system, which can be used independently of the different tools. The pattern library serves as a comprehensive library and as a construction kit for the entire system - no matter whether you work with open source PatternLab.io, a proprietary development like the diva-e blueprint or a brand manager like Frontify. For the creative structure of such a library diva-e uses the design tools Sketch and Figma. To visualise a first impression interactively, common tools like Framer X, inVision or Principle are used for the prototype development.

The work steps in the design system can be reused for various applications. This applies not only to the design process for module and template design, but also to the developers in the programming of code snippets. In addition, the modern design system is more vivid than a classic style guide in Word or PDF format, which might gather dust in some drawer when printed out. As a living style guide, a design system is available digitally and online for everyone at any time.

Discussion, exchange and feedback

For a functioning and successful design system, the integration of the entire team is required. At the same time, easy access must be guaranteed for all those involved - customer, service provider or agency. This makes onboarding easier, especially for new team members. A design system is a good introduction and orientation point for new designers and developers, as they can find a reference of all available elements and definitions at a glance.

Depending on the tool used, there should be a comment function, because such a collaboration tool ensures complete documentation and exchange of information between all persons. It also provides transparency about the current development status and allows direct and quick feedback from all participants.

Your result: Our design for your success

Our diva-e design system is a sustainable tool for your products and brands and increases the flexibility of your projects and future applications. As a contemporary and binding brand portal it displays all design contents and design information.

Your advantages at a glance:

• agile and scalable through a modular approach while always maintaining high quality

• up-to-date, lively, easy to maintain and consistent from code to design

• enables faster implementation of additional projects and MVP

• promotes transparent and cross-team cooperation