A Design System is a guide that goes beyond visual aspects and outlines the different features and best practices for a company’s brand and products, which is why it’s key to collaborate with multiple areas and teams and also involve the client throughout its creation.
At Gonni, we aim to continuously improve these communication channels so that our Design Systems can be used to create dynamic, consistent, and scalable products. We also created a guide of standardized elements to be used as a starting point for all of our projects, for the most efficient design and development processes.
The most important consideration to keep in mind when creating a Design System is to ensure that all decisions are made collaboratively, and that approval is received from the whole team at each step of the process. Working closely alongside developers allows us to stay on the same page and prepare our designs for a smooth hand off, and regularly checking in with the client is key to understanding the needs of the business, and ensure that they are reflected in the final product.
Having all of the company’s brand assets (from colors and fonts to tone of voice and business objectives) in one place, allows for a solid brand image and consistent communication across all channels, from an app to social media.
“It’s important that the company’s needs are reflected in the design system. A good design system can then result in time savings and shrinking implementation timelines for all teams involved.”
Paulina Donantueno – Senior UX Specialist
One of the most essential parts of the System is the assortment of basic components (inputs, buttons, icons, etc) that allow us to create designs efficiently and systematically. It’s important that these elements are created in the beginning, with their different basic states and variables in mind. While the style of these elements may change as the design progresses, having a concept of their basic shapes and states is key to ensuring consistency throughout the product.
The creation of these elements also depends on the standardization of the brand’s fonts and the creation of styles, taking into account the most common font sizes for mobile and desktop displays. Creating a logic System that can be used repeatedly throughout the design for a consistent product and communication style allows us to create a unified look and feel of the brand.
In addition to font styles, we also determine the brand’s color palette in all of its different shades. First we select the main colors, then include variations for backgrounds, text, and other elements — always ensuring that they support legibility and accessibility.
By creating an accesible and inclusive product that can be accessed by all users, we elevate its ethical and quality standards while ensuring compliance with aplicable accessibility laws to avoid possible legal issues.
“In other words, a design system enables a quick transition to production, while maintaining consistancy throughout the user experience, and saving on product maintenance when it scales or increases in complexity.”
Paulina Donantueno – Senior UX Specialist
Finally, it’s vital to think of how the columns and rows of display grids will work on both mobile and desktop screens. There is a wide array of available grid structures, which is why it’s important to create or select one that best fits the product and its requirements. Generating flexible grids is an important part of ensuring efficient development and a scalable product.