The kbizien design-system includes all the project’s user interface resources. Graphical charter, CSS architecture, IU components and all kinds of documents concerning product design and usage processes. This design-system helps rationalise visual resources, so the various people involved in the project can iterate, improve and enable the product to evolve in a flexible and maintainable way. This makes it possible to create a robust visual language, thus ensuring long-term consistency. Good practices and technical uses are also presented. Designers can therefore focus on user experience and interactions, whilst developers can concentrate on engineering and component logics.
What this design-system includes
- Description of the graphical charter: identity, colours, fonts, icons, etc.
- CSS architecture and good practices: description of the design’s technical processes
- Documents pertaining to the use of UI components
Browse through the graphical charter and existing UI components to soak in the visual language and identify which components are likely to find their place in your creations. Read through all the rules and principles relating to product design.
Access the product interface’s technical resources. Go through the various tools and methods used, as well as the product’s UI components.
Implementing and maintaining a living styleguide allows for improved coordination and communication between creative workers and engineers. Aiming for smoother exchanges based on an identical working document encourages iteration, with a view to focusing on the product’s actual value: use and user experience. Serving as a first approach, the article entitled “Between design and development” (french) explains relations between designers and developers, using the maintenance of a living styleguide as an intermediary. The main issue faced when designing an interface is the lack of understanding between designers and developers, who each focus on different aspects. This causes inconsistencies in the project, as well as maintenance and scalability problems that can end up being fatal once the product starts to progress. A good design interface is not merely a visually coherent design with good artistic direction. An interface design must be smartly thought-out at every single stage of its creation. For the product to show long-lasting performance levels, its technical architecture must be maintainable in the long run, without the production team tearing its hair out every time the product evolves.
A few advantages of the living style guide
- Boosts modular development and the reuse of patterns
- Ensures overall consistency regarding the product’s visual language
- Serves as a document aimed at all production team members, and namely new recruits
- Helps team members communicate and iterate
- Encourages workers to learn about other people’s issues and enhances their skill level