Design System (surgere)
Visual language is a core part of your design standards. Defining the purpose and style of color, shape, type, icons, space, and motion is essential to creating a brand-aligned and consistent user experience. Every component in your system incorporates these elements, and they play an integral role in expressing the personality of your brand.
Without standards, decisions become arbitrary and difficult to critique. Not only does this not scale, but it also creates an inconsistent and frustrating user experience.
Creating surgere's Design system
1. competitive Research
I researched what I considered to be a mature group of design systems of various sizes and intentions. Knowing that Surgere's system would not be as robust as Material.io anytime soon, it was worth understanding what a design system could be someday. I appreciated the simplicity and approachability of the Mail Chimp design system as well.
2. gap analysis
I took an inventory of the current components that we were using as well as captured design components that we would need moving forward. During this part of the process, I would reference other mature design systems as guides to fill in any areas we were missing content.
Surgere had just finished rebranding prior to my arrival at the company. The marketing team had worked with a vendor to establish the new look and feel and I wanted to make sure I was maintaining brand consistency during the creation of the design system. I would regularly check in with the marketing team to make sure we were moving design within Surgere forward together.
4. Establishing principles
It’s consistent. The way components are built and managed follows a predictable pattern.
It’s self-contained. Your design system is treated as a standalone dependency.
It’s reusable. You’ve built components so they can be reused in many contexts.
It’s accessible. Applications built with your design system are usable by as many people as possible, no matter how they access the web.
It’s robust. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.