A small and simple Design System built for maximum efficiency in a startup environment.

The Conferize Design team was very small, the Design Director, a Product Designer and me. I joined the company right after a complete restructuration, with a new team and a new direction.

Even though the team was small we were quite productive. However, after a few weeks of work I could definitely see that we were heading into a dangerous territory called “Inconsistency”. Each Designer was producing mockups at a very fast pace but without following any Design rules.

So one of my first missions was to come up with a small but complete Design System in order to structure the creation of our mockups, and facilitate the life of our Developers.

Foundations

The first step was to define the foundations, the stronger they are the easier it is to build on top. So I spent the first few days creating the foundations, keeping them simple enough so we can work fast but with enough variations so we never feel like something is missing.

Typography

Color palette

Grid system / Spacing rules

Icons

Components

The second step is to build a full library of components. Rather than going crazy and creating thousands of components I decided to keep it minimal with only the most essential elements.

Making it available to developers

Having styles and components available for Designers is a good thing but it’s useless if developers can’t take advantage of it.

So the last step was to make our Design elements available to developers. In order to do this I created a few files using LESS and Git, these files would generate the Design Foundations directly in code but would also generate all the styles in Sketch thanks to a plugin in just one click.

No more gap between Designers and Developers.

Do you want to talk about Product Design, 3D animatiom or any other exciting projects? Just drop me a line at this email address: contact.ferrere@gmail.com

You can also find me here:
Twitter    LinkedIn    Skillshare   Instagram