Design System

— what is it and why you might need one?

Ask about Design System Find out more
Design System Design System Design System

Is this what the reality of IT projects at your company looks like?

  • Waste of time and energy

    Is app development at your organization limited by an extended time of design and programming?

  • Weak UX

    Do users of your multiple applications experience the comfort of a consistent ecosystem?

  • Lack of consistency

    Does each of your systems look and work differently, even if at first glance it has similar elements?

  • High cost

    Do you feel like you’re paying multiple times for having the same solutions implemented separately in many different places?

Only 2.5% of organizations complete their IT projects with a 100% success
Only 2.5% of organizations complete their IT projects with a 100% success
66% of IT projects eventually run over budget
66% of IT projects eventually run over budget
The average IT project exceeds the planned budget by 27%
The average IT project exceeds the planned budget by 27%

What is a Design System?

A Design System is a collection of rules, tools, and processes which simplify designing, construction and development of digital products.

In practice, it is a library of different components which combines design, code, and the knowledge of how to use them. It allows designers and developers to work more efficiently and the effects of their work to create a coherent family of products within a single organization.

Complicated? Think about it as if it was a set of Lego blocks. Everyone can use it to build the same thing, but at the same time, you can use your imagination and create a unique design that is still based on the same principles of creation.

Who needs a Design System?

01. Companies with an extensive ecosystem of IT projects that require further development
02. Organizations that plan to build new IT projects
03. Teams of designers and developers experiencing issues related to communication and achieving coherent results
Tak, warto wprowadzić design system w organizacji! Yes, the implementation of a design system within your organization will be worth your while.

What can you gain by implementing a Design System?

There is a simple idea behind the solution to your problems - you build once, you use it many times.

You can create new projects cheaper and faster You can create new projects cheaper and faster

Increased efficiency of design and development

You save on development of your existing products You save on development of your existing products

Reusable code and quick prototyping

You can unify how the applications within your ecosystem work and look You can unify how the applications within your ecosystem work and look

Common look&feel and support for your organization’s brand

You provide comfortable experiences to the users of your products You provide comfortable experiences to the users of your products

Good UX and repeatable use cases.

What is not a Design System?

UI Kit

A UI Kit is merely a set of interface elements that presents their interactions in relation to a specific product.

Style Guide

Style Guide is just a set of guidelines regarding the use of, among others, colors, fonts, spacing, etc.

Component Library

A component library is a set of interface elements ready to be reused, but without any context of how to use them

Bootstrap

Bootstrap lacks any proper documentation regarding the use of its elements. It’s just another popular component library, which does not provide any guidelines regarding visual requirements.

What does Design System include?

Biblioteka komponentów
Component library

design + code

Sketch Plus
vuereactiosandroid
Biblioteka komponentów
figmagdrivehangoutszeplin
storybookabstractsketchgitlab
Design language
Design language

Basic elements of design (foundations) + terms for using them together

Design language

How to create a Design System?

There is no universal way to build a Design System. The plan depends on the IT project ecosystem within your company and the goals, which you would like to achieve.

Start by asking yourself the following questions:

  • In how many IT projects would you like to implement a Design System? What devices are these projects used on?
  • What is the tech stack used to create them?
  • What level of coherence do you require among your projects?
  • What kind of team will be using the Design System? How many people and what is the structure? What do these people do?
  • What does your team know about Design Systems today?

...or simply schedule an appointment with us and we will analyze the subject of implementing a Design System at your organization together.

The Process - constructing a Design System

We always approach the construction of each Design System individually, but our standard agenda is as follows:

1. The Organization
Cataloguing Cataloguing Study of the application ecosystem within the company and selection of the first product where DS can be implemented.
Design System Team Design System Team Putting together a team responsible for the Design System
DS Structure DS Structure Definition of the scalable structure and contents of the Design System.
Design Ops Design Ops A selection of processes and tools to be used for creating the Design System.
2. Construction of the Design System
DS
Development
Development
Documentation
Documentation
Quality Assurance
Quality Assurance
UX/UI Design
UX/UI Design
Implementation within your products
Implementation within your products Mobile apps
iOS Android
Aplikacje web Web apps
Vue React
Aplikacje desktopowe Desktop apps

(e.g. Slack, Microsoft Teams)

E-sklepy, Landing page i więcej… E-stores, Landing Pages and more…

Tools and technologies

Design
Sketch
Figma
inVision
Documentation and cooperation
Abstract
Zeplin
Storybook
G Drive
Hangouts
Development
Vue.js
React
webpack
GitLab
Node.js
styled-components
styled-system

The Design System Team

Your Design System Team will be the core of this process. It should include the people who work closest to the system: they analyze requirements, undertake key decisions, build architecture and finely they design UX/UI and write the code.

DS Product Owner
DS Product Owner

Coordinates the work of the team and takes care of client requirements.

In practice, one of the other DS Team members can take the role of the DS Product Owner.

DS Product Owner
UI Designer

Responsible for the visual layer of all elements - shapes, colors, scale, contrast, spacing and rhythm.

Front-end Developer
Front-end Developer

Responsible for coding the elements, optimizing the code and coherent naming of elements.

UX Designer
UX Designer

Responsible for usability of the elements in particular product-based contexts, selecting states, microinteractions and the language of the interface.

Content Manager
Content Manager

Responsible for presenting the DS in a way that will make it clear to all product teams and the management.

Design Systems created by Autentika

Yes, we do know quite a lot about Design Systems, simply because that’s what we create every day.

We create a component library
						
() => {
	<Button variant="primary">
		Button Text
	</Button>
}
						
					
We create documentation
We create documentation
We build applications
We build applications

Get to know Tetrisly - a Starter Kit to create a Design System

Play video Tetrisly cover
Sławomir Wójcik
Sławek Wójcik Business Developer
Let’s talk: +48 603 440 039
Download info pack via e-mail Ask about Design System