How to start a design system


After working on a design renovation project in an enterprise recently, I decided to come up with a plan for future development. This led me to think of a holistic approach into design a corporate style compatible framework where all design assets are introduced and logged. I’m going to write a series of posts where I share my ideas and findings.

It’s an approach inspired by atomic design system introduced by Brad frost. My approach is to produce a design system which can be utilized to borrow existing elements as well as introduce new elements. Using a shared variable library along with corporate style guidelines, all elements should be unified and look integrated to produce a unique experience that resembles a corporate name. Using such a system, especially in early stages of project development makes prototyping and adoption easier, saving time and resources.  Although there are many existing design libraries out there, creating a design system leads to a unique design library which is specially designed for your enterprise.

Why bother creating a design system?

While working on a complicated project I got fed up with troublesome process of getting designs which were not according to requirements and have been changing often. Although having a command runner and using new technologies like Sass made some progress in the right direction, it is was not efficient enough. To give you a better picture let me paint you a word picture. I have been advised to keep use animations to create reactionary effect for a handful of elements, for example hover effect on buttons or selecting a check box. Even though I found a library and applied those on a sample button, they never reached deployment because we haven’t had a task dedicated for it in our design development and with a short development timeline, it never reached final release.

So having a design system would help me to overcome those challenges because elements and their behaviours come together as part of the system. Basically you can’t have an element without all properties defined as its development won’t be complete unless all necessary properties of an element are done.

Creating a design system principles

A design system enables corporates to have a consistent user experience across all of their digital services. Maintaining consistent user experience across all services and devices helps an enterprise because:

  1. Provides a delightful experience which resembles corporate identity and gives users the confidence to reach wherever they’re interested to go knowing that your corporate platform gives them familiar responses to their needs.
  2. It increases productivity and efficiency all through design life cycle as elements are designed as abstract as possible.
  3. Developing services collectively rather than independently. Any branching from the basic principles of design system might lead to redundancy and errors which doubles the cost of maintenance and enhancement of developed services

I define my design system principles as follows:

  • Greater consistency

All designs should follow corporate design guideline. Elements are designed based on project requirements but created elements won’t change because of new projects.

  • Every device, Every where

Every screen should be considered for design along with where it might be used

  • Requirements evolve

Design to the requirements of audience and redesign if requirements haven’t been satisfied

  • Personalised experience

Design for personalised experience of every user whatever they requirements are.

 

Ramin Ahmadi
I am a full-stack front end developer with over 5 years experience in web design and development. I have worked with a wide variety of environments and languages including Angular, TypeScript, NodeJS, Restful API, Microservices, Atomic design, JQuery, Material design, Progressive Web Apps, DevOps, and many Azure tools. I make it a goal to automate myself out of routine tasks in my daily work. My motto is, ‘write human readable code, lean and clean’.

Comments 0

Your email address will not be published. Required fields are marked *

How to start a design system

log in

Captcha!

reset password

Back to
log in
Font Resize
Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Image
Photo or GIF
Gif
GIF format