How to design a design system?

The daily tasks of a designer can vary between creating an identity, designing a brochure or poster, creating a social media visual, working on a website design and fighting with the developer! ... then one day this new challenge comes along: create a design system.

Huh? What is a design system to begin with?

A design system defines a brand and allows it to be coherent while maintaining high scalability. It includes the typical components: typography, colors, and you have to add to that designing entire templates and layouts. It is the logical way of thinking when working with a big organization with a wide range of sub-entities and communication channels.

Big companies like Airbnb, Uber, IBM use design systems and have been able to change their pace of creation and innovation.

"Your technical approach doesn’t matter as much as creating a living, breathing system that’s flexible, maintainable, stable, scalable, and successful in the long-term." - Katie Sylor-Miller, Senior Software Engineer, Design Systems team at Etsy

What is the difference between a design system and a typical visual identity guideline?

A visual guideline usually includes typography, colors, logo usage and imagery. This entire guideline is just one component in the design system, although an important one. Once the visual design language is set, we need to build the system or the environment where our main components live. Think of it as our eco-system.

How is our type reacting with the imagery and with the colors? Do we have big boxes of color or the usage of color is minimal? When there is color and imagery, which is more important and why?
Your system will be built when you have answers to all these questions.

So we are no longer thinking of designing pages or templates, we are designing a system of components made out of a collection of repeatable elements and a set of standards, when put together, reflect the brand’s core with utmost consistency.

To be able to create this system, here a few tips that can help:

1- Keep it simple: figuring out how to balance flexibility and consistency is the harder lesson when creating a design system. That’s where a rationale can come in handy so our design templates are not just visually nice, they serve a specific purpose.

2- Keep customizability in mind: when we say system, we don’t necessarily mean a rigid one. We can make room for some fluidity.

3- Nothing is permanent. Our design system is a living breathing thing, so keep in mind that it has to evolve with time in an elegant way.

"Design systems are always evolving, and the way you share and encourage adoption of new iterations will evolve along the way as well." – Diana Mounter, Design System Manager at GitHub

4- Document the design system
Now that the design system is built, take in consideration that you are not the only designer who will be working on it. A manual explaining all the guidelines and standards should be ready to direct anyone clearly and without any room for assumptions. That’s when the system becomes the brand’s core!

We are working on building a design system for the Souk El Tayeb organization. The organization is multi-layered with sub-brands and so a typical visual guideline is proving to be too limited to cover their messages & channels. Stay tuned for that story.