WHAT IT IS
The application of working smarter, not harder.
@2024
And we’re shit hot at doing it, and a bunch of other things too.
What is it?
01
So, we’ll explain, a design system is a powerful tool, one that, as we said before is the epitome of working smarter not harder.
It enables designers and developers to streamline their creative processes while maintaining a cohesive brand identity. The golden goose, right.
Simply put, a design system is a set of interconnected guidelines, rules, and reusable components that are used to build and maintain consistent experiences across digital products or platforms.
The ingredients
02
To cook one up, we need:
Design Principles - Fundamental values and guidelines
Visual Style - Color schemes, typography, iconography, and imagery
Components - Reusable UI elements like buttons, forms, and navigation menus
Patterns and Guidelines - Best practices and design patterns
Documentation - Detailed instructions and guidelines
Accessibility Guidelines - Standards for ensuring inclusivity
Just like ingredients in a recipe, these elements come together to create a cohesive and consistent design system that enables teams to build and maintain high-quality digital products.
Mise en place
03
We get all the prep done before getting stuck in, but it all depends where you are starting from. Do you have a current app?
Do you have a current design system?
Do you have two?
Maybe you’ve got nothing but an idea.
All of these are okay, but depending on which starting point will determine our first steps. It’ll usually involve things like defining a scope of the system, analysing what we need, what we have, conducting any research, and overall confirming how the system aligns with your business goals, all while planning how to execute it in a way that allows you to reap the benefits.
Your flavour
04
We get all the prep done before getting stuck in, but it all depends where you are starting from. Do you have a current app?
Do you have a current design system?
Do you have two?
Maybe you’ve got nothing but an idea.
All of these are okay, but depending on which starting point will determine our first steps. It’ll usually involve things like defining a scope of the system, analysing what we need, what we have, conducting any research, and overall confirming how the system aligns with your business goals, all while planning how to execute it in a way that allows you to reap the benefits.
Reuse & recycle
05
Using the visual language defined in the previous step, we get to work creating a set of reusable components. Things like buttons, cards, navigations and overlays.
All of these things are used to build the product, keeping a central source of truth in the design system. By having these reusable components we make the designs more consistent and centralise one place to make changes across hundreds of screens and flows.
Imagine a scenario where you need to make a change to the button on large product where would have thousands of places where the same button is used. Instead of having to go to each individual you make one change in once place.
It’s a simple example but imagine this concept for all aspects, everything from spacing, colours & types all the way through to cards, inputs, and even whole sheets and screens.
Documentation
06
So this is stereotypically seen as the “boring part”, we disagree. Theres beauty in the detail.
For each component we create there comes a lot admin and process around it, this is to be expected as part of a functioning system.
We document detailed specifics, things like, context and usage, breakdowns of it’s construction and even down to tracking individual components alignment with the codebase.
It’s good practice and helps the system stay as something understandable and useable.
Implement
07
We then implement the flows into the system, the working files, and the prototype before handing it over to your development team. But we don’t leave it, we follow the build ensuring we conduct visual QA so the end result is as it was designed.
Maintain
08
So your system is now essentially on cruise control.
Picture this, style defined, product is live, multiple designers & developers using the system, one source of truth, one central hub. Documentation is crafted down to the letter. All running smoothly. Everyones happy.
You’d think that’s it right, sippin margs on the beach vibes right?
Not quite.
In this phase we manage things like version control and governance, making sure updates run smoothly and ensure consistency across all the projects. We keep the system up to date and regularly review and update, addressing new design requirements, technology updates, or user feedback.
Maintenance mode involves less intense work but, work nonetheless. Your system is a living breathing entity, a sort of product of itself. It needs constant care and attention to thrive.
@2024