Over the last 10 years, design systems have become more common and more popular, especially in digital organisations that have cross-functional teams, working all over the world. In fact, it’s such a useful toolkit, here at Strafe Creative, we have started using design systems for our client projects too. This helps our designers easily and efficiently work on multiple projects with a clear set of overarching design principles they can apply to the client work.
Maybe you’ve heard about a ‘design system’ but you’re still not 100% sure what it is? Let’s explore…
What are design systems?
A design system is a one-stop shop for teams of designers and developers. It is a collection of guidelines, components, patterns, code and features linked by an organisation’s overarching design principles and philosophy. This helps teams to design and build consistent digital products, websites and applications efficiently, no matter where they are located, their level or which team they are in.
What are the main components?
Design system components range from logos, typography, icons and other branded elements, to transitions, navigation and search bar design. A well-thought-out design system (see examples below) will include every aspect of digital design and development. Whether you want to build a new app or design a new web page, the design system will tell you which elements fit together for a cohesive experience.
Where did design systems originate?
Design systems are actually an evolution of brand or design guidelines that many organisations have used for years. As the digital space grows exponentially, a design system gives organisations a living, breathing set of guidelines that can be accessed by many team members. These guidelines have gone beyond a branded PDF booklet and are now a vibrant and evolving tool that gives teams a shared design language.
Why use a design system?
A comprehensive design system manual can give a team a lot of benefits:
- Design and development work can be completed easily as the same elements are used over and over. Therefore improving efficiencies and consistency.
- Time and focus can be spent on more complex elements of design such as user journey management, rather than small design features.
- One single point of truth helps stop miscommunication across teams and reduces wasted design or development time.
- There is always consistency in design across products, channels, departments and teams. This overarching set of rules ensures cohesion in every part of the brand no matter who works on the project.
- For many companies, the upfront investment into a design system helps save money over time as every new designer or developer have a clear point of reference when they come on board.
How does Strafe use design systems?
For each new client, we build a bank of UX design assets or design system components (logos, colours, icons, fonts, design guidelines etc) in Figma, which automatically loads into each client project. This has a number of benefits:
- A designer can get stuck in straight away with easy access to all the assets they need.
- Any Strafe designer can pick up a project and continue working on it, as the design system provides a clear guide.
- Each new design is consistent with previous projects.
- The use of these design systems internally means we can easily complete small website updates without having to spend time looking for all the assets, thus making our processes more efficient.
Does my company need a design system?
Whilst we’ve spent the majority of this blog telling you how great a design system is, however, they’re not appropriate for every company. For example, for a smaller business, whose main offering is face-to-face supported by a simple website, a design system isn’t really necessary.
Here’s a checklist to help you decide if a design system is for you. If you answer ‘yes’ to 2 -3 of these then it’s worth exploring.
- You produce digital products and applications
- You have a team of designers in-house (or at a dedicated agency)
- Your team is distributed in multiple locations
- You work in an agile way and often need to get new designers up to speed quickly
- You work with partners and/or a community who build products with your technology
- Your brand is experienced through a number of digital touchpoints
- Your industry is fast-paced and it’s important you keep up with the competition and the ever-changing needs of your customers
Contact us via our Project Planner to see how Strafe could help you.
A design system is ideal for innovative companies that are looking to scale rapidly, do a lot of marketing and plan to create and build digital products. Investment into a design system enables this growth as new designers and developers can easily come on board and use repeatable tools and elements without training.
Read more: What’s the difference between graphic design and UX design?
Where can I see some examples of design systems?
Many global, digital organisations have invested heavily in their design systems, for all the reasons we’ve discussed throughout the blog. Let’s take a look at a few of them…
Shopify
Polaris – Our design system helps us work together to build a great experience for all of Shopify’s merchants. Here you can see the guidelines around colour and how to use it depending on the role it plays within the Shopify interface.
Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web. Material Design is a comprehensive set of UI guidelines ensuring any Googler around the world creates elements and products that are consistently Google. Here you can see the design principles about system icons including grids, metrics and colour.
Salesforce
Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.
A design system is a dynamic tool and design teams must keep it updated regularly. Here you can see a full section on the Salesforce Lightning design system showing what’s been updated.
IBM
Carbon is IBM’s open-source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
The IBM Design System is beautifully designed and goes into granular detail into all design and development components. Below you can see an example of how to design a loading screen.
To see more design systems components from well-known companies, check out this blog.
Building a design system takes time and effort. However if done well, it enables digital companies to deliver a consistent user experience every single time.
If you need a design system for your business, drop your project details into our planner and let us help!
