Scalable and consistent on-brand design
A design system is a central environment that contains visual and functional building blocks of your digital products. These building blocks are part of a UI kit such as design philosophies, guidelines, components, code snippets and other digital assets.
Whether you are a single brand organisation or a multi-national with several brands in your portfolio, a strong design system is of value to both. This can vary from one small team maintaining of your digital products to a multitude specialized product teams focused on specific elements of the customer journey; they all work with the same design system.
The best way to set-up a design system differs per organisation. At SQLI we define, design and maintain design systems that cater exactly to your needs.
Benefits of Design Systems
- Consistent brand experiences
- Reusable component libraries
- Scalability for single brand and multi-brand hierarchies
From branding to component library
A good design system incorporates your branding and emphasizes elements online where it matters to differentiate from your competitors. This is unique for every organisation and requires a balancing act of flexibility vs. strictness and a strong step-by-step approach to a design system.
Flexibility of design system
- What is the level of creativity that fits best with your culture and systems without sacrificing creativity, scalability or consistency?
- What is the level of flexibility that you allow local marketeers for their local needs without diluting your online brand experience?
Design System: Step-by-step approach
- Step 1: Translate your corporate identity and brand hierarchy into online branding.
- Step 2: Design multi device user interfaces that unites business objectives and customer needs via online design.
- Step 3: Document all design assets and decisions into an accessible system or component library.
- Step 4: Train your staff and pro-actively maintain your component library for consistent usage.
Creating a strong design system is slightly more time consuming in the beginning than if you would not work with a design system. However, the true power of a strong system emerges in maintenance and usage, as it is quicker to keep your designs consistent for reuse and scalability.
Typical elements in a Design System
We create design systems based on the notion of atomic design: start with small ‘atoms’ or design principles like colours, fonts and typography, and define layout decisions like grids and page structures. Then combine several atoms to design components and component variances. Next is to design page templates with a strong information architecture using those components. Finally, fixate page templates to actual pages that dictates what components are flexible in usage and what components are fixed.