Design Systems

SCALABLE & CONSISTENTLY 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.

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.