Design Systems
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.
Scaleable & consistently on-brand design
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 a 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?
A 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 not working 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.
Design principles
Here you’ll find familiar elements like colours, fonts, spaces, shapes, icons, illustrations, photographies, animations, voice and tone, and sounds, as well as how to put them together meaningfully and in compliance with your brand showing your team what is compliant and what is not.
Components
The components are the building blocks of your digital experiences, and include application buttons, navigation, forms, and icons. Components are used by your internal users to create content.
Page templates
Page templates are reusable combinations of components that solve common user problems. These best practice solutions ensure consistency across experiences.
Digital component library
At SQLI we also are very adept at developing your marketing and E-commerce site. Equally as important as making sure your platform is successfully implemented is making sure that the people in your company can use it.
We make sure that your design system is made available for your internal users via a modular system that manages source code for the UI elements, leveraging CSS and JS frameworks. This kind of system will particularly fit large-scale product as e-commerce websites. Your users can quickly create new digital assets with page templates that they populate with components from the UI library. Your guidelines can be automated by making the page templates aware of what components are allowed for a layout a user chooses.
Did we pique your interest? Let's talk!
At SQLI, we craft digital experiences that define the success of great brands. Our vision is to create a diverse world filled with authenticity. To craft digital experiences that people love and talk about – making great brands shine.
Digital is in our DNA. We started designing and building websites in the 90’s, so this is no exaggeration. Since then, we’ve matured into a full service agency, but we never lost our focus on e-business.
Get in touch to discuss how we can drive your digital success.
Our