I'd like to share with you "Why I've decided to create a Deisgn System for Inovae" and "How it rapidely became central in my creative process"


What is a Design System?

A Design System is a library of visual components that, put together, will allow the development of digital interfaces. Its development is considered throughout the duration of a project depending on the issues to be solved or the needs of the client. This solution will serve as a reference for both designers and developers and reduce the time for mockups creation and implementation. A Design System offers a modular approach to design that does not focus on the page itself, but rather on the elements that compose it. The task of the designer is no longer then simply to produce "Pages" but "page components". The arrival of new tools such as Sketch will allow designers to fully enjoy all the advantages offered by the creation of a Design System.

Design system D8molow

An overview of the D8mo project created with a Design System


Benefits and advantages

Automate creative processes to focus on the essentials

Manage states

Working on elements and not on pages will allow a more accomplished work regarding interactivity. A modular approach allows to better predict the states of buttons (hover, disable etc.) but also error messages, toasts and many context elements that are rarely displayed on mockup.

Button states

Different states provided on toast and buttons

Design only exceptions

The use of a Design System will reduce the time of design and implementation throughout the project. The graphic designer designs each element once, which will then be reused throughout the pages. The gain in productivity is enormous. It offers a considerable flexibility responding to modification requests. Each of the changes on an element will have repercussions on all the pages where this element appears, eliminating the tedious work of individual update of each mockup.

A Design System is the opposite of the "Page by page" system which forces the designer to work in a linear way with mockup.

Example: it is asked to update the logo in the header of a site that includes 60 finalized pages.

With the page per page → Replace the logo as many times as it is present on the models (= 60 times)
With the Design System → Replace the logo on the element "Header" (= 1 time)

Symbols and pages

Design in a dev logic

If the design is tailor-fitted to the client's need, it should never be at the expense of implementation. Developers must be involved from the beginning of the development of the Design System to provide their expertise on the feasibility of certain combinations of elements. With intelligent contribution from the development team, the design system can bring a secure foundation on which the designer can build upon, doing so while remaining close to developer's logic. As a result, this greatly facilitates implementation.

Build a Design System

Launch

Choosing a Design System is choosing a modular way of thinking. It is also a decision that involves the participation of the entire team. A Design System is designed by each member and requires the participation of the team to function well.

It is not always easy to know where to start but here are some keys to get started.

Components

A good start can be to list all the components that are familiar to you and that will be part of your Design System (buttons and states, maps, banners, carousels, key numbers, quotes, etc.). This list will serve as a reminder and will be fed throughout the production process.

The pages

The design phase will then allow to elaborate the big templates of the project: homepage, landing page, details page, search ... As these templates are built, the components will be put in place. Each must have a specific function and must not vary from template to template. For this purpose, it is quite normal to make many adjustments between components and templates. It's even a sign that your Design System is going in the right direction!

Template page

Atomic Design

To bring structure to our system, Atomic Design is here to help us.

Design System

 

Designed by Brad Frost, Atomic Design is a method based on modularity. It allows to create Design Systems from components: atoms, molecules, organisms, templates and pages.

Atomic Design

The goal is to assign feature-based functionality to achieve a highly consistent design across all pages. In Sketch, mastering symbols is key to making the Design System perform. A symbol is an element that can be used simultaneously on several pages dynamically.

-> Sketch 💎- use of symbols – discover the details in this video!

Collect feedback

Throughout the realization of the mockups, it is necessary to regularly collect feedback from front-end and back-end developers. Up-to-date documentation allows everyone to understand the use of each component of the system.

Documenting is essential to keep the system up to date because it is designed to evolve over time. InVision is an online tool for sharing prototypes. It is a great help to allow a team to interact around wireframes or models. Perfectly synchronized with Sketch, it saves time when sharing a Design System.

Plugin Craft

Craft PLugin

 

This plugin is proposed by InVision Lab. It allows to classify and store Design System elements in a personal or shared library. It is then easy to use them to build mockups a bit like we would use Lego to build a house.

Design System Window

As you may have noticed, a Design System goes beyond the simple library of components. It asks the designer who designs it to get out of his comfort zone and take better into account the technical aspects. A good Design System is designed in harmony with the developers because it must be a reference for the team throughout the duration of the project.

At Inovae, we are committed to innovating, advancing, and striving for quality in our development processes.

Working with Design Systems brings us, on a daily basis, numerous advantages and gains:

👉 Increased productivity
👉 High responsiveness on change requests
👉 Reduced implementation time
👉 Accelerated designing mockups
👉 A better technical vision on the entire web production chain
👉 The alignment of internal teams
👉 An excess of motivation and the decline of recurring tasks
👉 High consistency in our processes
👏 The satisfaction of our customers