ARTICLE
Let’s talk a bit about design systems. For those who aren’t familiar, a design system is a collection of reusable components, rules and guidelines that help teams build consistent interfaces. It can help a team build products or interfaces that match each other while keeping them consistent. Think of it as a master document for design.
Here’s the thing - people change in an organization. When new designers join, they might create things that look completely different from what’s already there. A design system ensures that doesn’t happen. It keeps everyone aligned, both visually and functionally by providing the guidelines.
I know this Design system!
It’s amazing to see companies put their own design systems online, for free (shocker!). You might’ve heard of:
Google's Material design
Apple's Human Interface Guidelines
IBM's Carbon Design system
These are the design systems of their respective companies. Each one defines a brand’s visual language, interaction style, and design logic. You can explore them on their official brand sites, or sometimes even within some design tools. Beautiful products are built using design systems. But here’s something I started thinking about: 'What about designing the design system itself?'
When Design system becomes an experience
Most design systems are simple websites. They are clean, minimal and easy to navigate. They have separate tabs for components, typography, colors, icons, etc. There’s nothing wrong with that, they are meant to convey information and they do their job perfectly.
At least, that’s what I thought… until I came across Dropbox Interface Guidelines or DIG in short, which is Dropbox’s design system.
I accidentally found their brand guideline site while looking for their logo and color palette and it completely changed how I saw design systems. Their design system site is an experience in itself. It has smooth animations, SPA-style navigation, sticky containers and unique page layouts for each category. Some people might even think it is 'Awwwards' level good.
Now the main question: 'Does it perform better or worse than others?' Not necessarily. It is the same Design system document in a website format but it feels different!
DIG uses more visuals and motion instead of long blocks of text. I'd scroll down and come across a user controllable animation with explanation about that particular component. This didn't just gave me blocks of text, rather, it showed how to make a boring document, interesting and for new players.
A breath of fresh air
I personally have felt, Google's Material design system a bit too overwhelming with so many theme variations and layers (maybe I should give it another try..). Dropbox's design system was really fun to go through. It felt like browsing a product, not just a reading documentation. I was eager to see what's in the next page and with different animations and effects in every new page, I was also learning new stuff.
If you're new to interface design, I'd suggest going through Apple's design system or IBM's design system. While you might feel bored if you go line by line of what's written there, they explain everything in a detailed manner which can be helpful. But if you want to see something different just to have a change of pace, do check out Dropbox's design system.