Dimark Style Guide for DiMS
Stworzenie ujednoliconego zarządzania projektem od 0 do 1 w celu poprawy brandingu, spójności i dokumentacji.
Czas przekazywania zespołowi został skrócony o 70%
85% poprawionej współpracy i przejrzystości
Co to jest DiMS?
The system enables the optimisation and automation of equipment servicing and maintenance processes and provides full control over the processes carried out by employees.
Moja rola
Zespół
Informacje o projekcie
Kontekst
Nie było systemu projektowego, ani stylu projektowego. Deweloperzy polegali na własnej intuicji, aby utrzymać spójny interfejs użytkownika i spójne wzorce UX. Każdy przycisk i formularz wyglądały inaczej.
Projekt
Najlepsze produkty skupiają się na prostocie, użyteczności i przejrzystości.
Kontekst
The basis of the DiMS design system was an atomic structure that broke down all components into their smallest parts. This method provided flexibility and consistency in the creation of interface components.I audited all current user interface components and classified them as: Atoms, Molecules, Organisms or Templates.
Cele DiMS aplikacji, do projektu przebudowy strony internetowej:
Consistent design style:
Unifying all visual elements to give the app a consistent and professional look across all platforms and devices.
Optimise UX/UI functionality:
Improve navigation and interaction to make it easier for users to perform tasks and use the application.
Improved visuals:
Applying modern UI design trends and best practices to create an interface in line with current user expectations.
Developing new functional modules
Ensuring seamless integration of new modules into the existing application structure.
Audyt istniejącego projektu
Budowanie przewodnika stylu
Podejście budowania systemu
I started with basic elements such as typography styles, colours, inputs, buttons, forms and icons.
These elements formed the foundation of the design system and were used to create more complex components.
No branding guidelines were given - except for the colour, which was not quite right. I therefore used the company's existing website to build the design system, along with all my knowledge of colours, logos and branding, which I have had for years.
It was important to allow users to distinguish between different states or actions, such as the default state, hovering the cursor, etc., and to select appropriate graphic and text elements. Each shade provides feedback to users, making products easier to use.
Wynik
The implementation of the design system has delivered the expected benefits:
Improved collaboration
Significant improvement in design efficiency
Increased design flexibility
Faster development of new tasks
Corporate colours finally established