Today, we all design lots of cross-platform applications and instead of designing components individually we must design flexible design systems.
Why? It’s great for teams. A unified design system helps maintain consistency, avoids confusion and redundant work. A good design system enables faster speed to market, making it easier to collaborate with people all over the globe.
There are lots of great design systems out there, here are a few of our favourites.
Google Material Design
One of the most influential design systems which go beyond Google and Android apps, designers from all over are using the philosophy in a number of ways within their own designs. Our favourite attributes are the layering of objects, bold visual cues and the motions which mirror the physical world.
IBM Design Language
A solid design system with beautiful presentation and a collection of interesting hints which emphasise that it is a guide and not an out of the box solution.
Airbnb Visual Language
A behind the scenes view which tells a story and is honest, our favourite bit ‘We initially tried to create these components as symbols in Sketch, which resulted in a mess. Even now, our Sketch files are sometimes challenging to maintain.’ We hear you Airbnb!
Mailchimp’s system is comprehensive, clear and has bags of personality.
Back when style guides were a thing
Way back, when unique style guides were created for each individual product, they were typically PDF format and contained rules around what you could and couldn’t do within the realms of the brand. Style guides can be rigid and restrictive. Alas, technology has advanced and has saved us from such style guides. Well not quite… lot’s of our clients still adhere to style guides, we don’t ignore these, we use these as a basis and evolve them into a design system or language.
Step into the now
Design systems (or ‘design language’ as they’re also referred to) are much larger than style guides and they live, breathe, grow and evolve through the needs of end users. Designers must now consider the needs of all users across many platforms in different contexts.
We started to see a rise of the design system in the 2000’s when the likes of Apple launched their iOS Human Interface guidelines, made for app designers and developers to help them create ‘beautiful, engaging apps that radiate power and simplicity’ for the Apple app store.
In 2014, Google launched Material Design which is possibly the most well-known out of the design systems (most likely because Google created it!), it’s probably the most exhaustive too. A ‘design language that combines the classic principles of successful design along with innovation and technology.’ Google’s goal was to develop a system of design that allows for a unified user experience across all their products on any platform.
So here we are now, and design systems are bang on trend.
But why should we use them?
The goal of a design system is to create a unified (but not uniformed) user experience across products and platforms. Made up of design principles and component libraries, design systems aim to empower designers and teams in making informed decisions when creating new products, features or tools which sit under a brand or suite. Design systems help to harmonise a user’s experience, providing guidelines that are instructive but not prescriptive. We want to disrupt not conform.
What are they made up of?
A design system or language should be much more than a visual identity (colour sets, typefaces etc). The system should embody the brand, the values, the goals. The users experience with the brand is key, a design language speaks to users. Less obvious principles such as flow and harmony, movement and rhythm or visual hierarchy are all super important to the experience.
Interactions and movement are a key trend this year and should play a huge role in a design system, adopting slick transitions is great but keeping these consistent is key for the user’s flow. IBM’s design language is particularly good at this.
A successful design language will:
Focus: allow the user to focus clearly on the task at hand rather than to be diverted by other distractions.
Clarify complexity: we aim for simplicity, but many of our solutions are complex. Clarify complexity by differentiating elements. Design clean and straightforward interactions to inject confidence, users should know what to do and how to do it.
Confidence: empowering the user to have complete confidence with the decisions they are making. Good design is easy to digest. This goes beyond clear, easy-to-read copy. People sometimes need guidance to make decisions.
Consistency: create consistency across the product which in turn will create a secure, familiar experience across the platforms and devices.
Where should a design system live?
Keeping an online and easily accessible design system for your team is the best start to a unified user experience. The online design system should be a central hub for designers and developers alike, assets should be easily at hand and code snippets should be available for immediate cut and paste. No time should be wasted.
Tools such as Sketch, UX Pin and Zeplin are all making it easier for designers to create their own design systems and share with their teams.
And finally… The evolution of a design system
The design system needs to adapt to feedback, be iterated on and evolve alongside its product(s). If an existing pattern doesn’t quite work for a specific application, modify it or create a new one that does work. New devices are popping up all the time, keeping patterns fresh is essential for the long-term health of the design system. Take care when adding patterns to the library, you don’t want the system to become bloated. Similarly, keep on top of removing patterns which are no longer useful to help keep the system up to date.
As with all areas of design, design systems will continue to advance. If, like us, you’d like to keep up to date with the goings on in design systems be sure to check back at the Radical Company blog.