A Design System is essentially a ‘recipe book’ for your website or app. It’s a collection of guidelines that help your team know how to design parts of your website. It includes things like what colours to use, what fonts to use, how buttons should look, and so on.
Imagine it as a set of building blocks. Each block represents a different component of your website – a button, a menu, a form, etc. Your Design System provides guidelines on how each block should appear and function, enabling you to seamlessly assemble them to construct your website. This idea of using blocks to build something bigger is well explained by Brad Frost in his easy-to-understand Atomic Design methodology.
This makes it easier for your team to create new pages or features, as they can just follow the ‘recipe’. It also helps keep your website consistent, as you’re using the same ‘ingredients’ throughout.
Lots of businesses have made their own Design Systems and shared them for everyone to see. Figma, the application we at somoscuatro use for interface design, has created an incredibly useful website. It’s got all the public Design Systems from big names like Decathlon, IBM, and Google, plus loads of blog posts and guides on how to make and look after a design system.
If you’re looking for an expert to create a flexible, modular, and well-crafted Design System, take a look at our UX Research & UI Design service page or feel free to drop us a message!
Related Content
Glossary Term
