In simple terms, a Design System is a single source of truth which groups all the elements needed to allow teams to design and develop a product. You may have seen or worked with a design system if you are a designer, developer or project manager, but you will start to see these becoming more commonplace within organizations. Their goal is simple, Design Systems are generally a dedicated web space where anyone working for an organisation can feed off and refer to, when designing and developing anything for that organisation, whether it is a website, intranet/extranet, mobile application, marketing campaign etc.
Many designers and developers, through recent years, have worked with brand guidelines which were created only focusing on print design guidelines. Then a few pages at the back (if any) were added for digital. Digital was an after-thought. I have seen this so often in the past, where our digital teams were expected to apply print guidelines to a global website or mobile application. They just don’t fit! In the end we often created a new digital style guide and pattern library so we could all sing from the same hymn sheet.
Today, with many new design solutions coming to the market and improvements in Sketch and Adobe XD, it is easier to bridge the gap between designers and developers. Take Zeplin, where we can export designs straight from Sketch into Zeplin, which creates a digital wiki for developers to take CSS code making their coding time easier and with more direction. We often work with digital design guides or wikis, which is a digital bible for designers to pick up and work within specific guidelines. These ensure designers can (i) work from the get-go with guidelines and also (ii) guide front-end developers on the styles to implement. What you see is what we build!
Now, Design Systems are a further evolution of these. It is not just a deliverable but a set of deliverables. It will evolve constantly with the product, the tools and with technology. It is a living thing!
A Design System entails:
· Tools for designers & developers, patterns, components, guidelines…
· But also -and it’s often the most difficult thing to achieve- some abstract elements such as brand values, shared ways of working, mindset, shared beliefs…
What is inside a Design System?
1. Purpose and shared values — Where are we going and why?
2. Design principals — Guides for teams on the purpose of the product
3. Brand identity and language — Colours, fonts, language, icons, voice, ….
4. Components and patterns — The building blocks from the first 3. Designers create them and developers build them
The best way to understand what Design Systems is to take a look at some other examples online. Here are a few of my favourites (public):
The Experience Design team at everis have created design systems for clients in banking, insurance and industry and their value is proving immense. Many different teams can now work from them and contribute to them. If you want to learn more about Design Systems and how they can help, get in touch.
“Coming together is a beginning. Keeping together is progress. Working together is success.” — Henry Ford