Month: April 2024

Design systems typically include components, patterns, guidelines, documentation and assets. Design systems serve as a centralized resource for design and development teams to maintain visual and functional consistency throughout their projects.

Design system will help companies/designers to deliver well-designed products and services to their customers faster. By implementing a design system, organizations can streamline their design and development workflows, reduce inconsistencies, improve collaboration between teams, and ultimately deliver better user experiences.

1.The Guardian digital design style guide

The color system of The Guardian is incredible and smart solution, it has color groups comprise of a dark, main, bright, pastel and faded color variant and represents different categories:

The consistency in the color use is crucial for the readers to navigate the information on their website.

The story cards are designed to be flexible, they can expand and contract depending on the number of stories added to them.

They have multiple story card sizes, they use them to create hierarchy and pace on the page, and allow the reader to quickly gauge a story’s importance.

2. Google Material Design

Google Material Design has three main parts: foundations, styles, and components. I explored the Style section, it includes color, elevation, icons, motion, shape and typography. It is life a library that you can access to all the design assets, and adjust them to fit into your design. Material also has a plugin in Figma which is pretty accessible.

3. Apple Human Interface Guidelines

Throughout all the years using Apple’s product and the ISO system, I finally get to know their design system! Apple’s interface guidelines has a section named “Foundations” which is very interesting to me, because a good foundation is the key! Apple design their products to be more human-centered, to improve the readability, they include pixel density and brightness on their screen which can influence the appropriate minimum font size. They also test the fonts they use base on weight, typeface, color. They design the icons in the principle which is graphic asset that expresses a single concept in ways people instantly understand. Recognizable, consistent and simplified icons make users more accessible to the icons.