Our tried-and-tested approach to Design Systems
And how you can utilize our principles in your projects
For digital designers like us, design systems can be like the alphabet. They are a crucial part of every project and a solid ground to build any kind of digital product, website or even brand.
At HOLOGRAPHIK, we’ve built quite a few design systems for a wide range of different projects, from financial websites to travel guide apps.
We will take you through the process of creating a design system, from the perspective of a design studio. Continue reading to get a look into some of our tips that will make the creation of a design system your favorite part of any design project.
What is a GOOD Design System and why it matters
Before we get to the tips, let’s define a good design system and the advantages of using one.
The typical benefits of design systems are things like easier collaboration, multi-team synchronization, and visual cohesiveness, but for us, the core purpose of a design system is to help designers, developers and clients build scalable products.
Well thought out systems can be an immensely useful tool when taking on any kind of design project. So it’s a good practice to know how to effectively create one.
At HLG, design systems naturally occur during the creation process. Our exploratory approach sometimes almost inadvertently creates a design system because we strategically gather and organize pieces of inspiration.
There are some elements that are generally included in good design systems (feel free to save this post so you can use this as a checklist when making your own design system) and they are:
Logos, Typography, Colors, Buttons, Inputs, Elements, Iconography, Imagery, Spacing, Grid, Elevations, Misc
How we do it
We understand that every project is different, and we aim to build systems that will perfectly fit our client’s needs and equip them for the future.
Our process involves the creation of a design system at an early stage of a project. Then we can systematically build solutions for the project from the get-go, and we won’t have problems at the end of the project.
We start off by analyzing the crucial needs of a project and ideating what it could become one day. This allows us to plan ahead and it helps us get a starting point for the structure of our design system.
While we’re in talks with the client to come up with the project’s strategy, or when we’re building wireframes and conceptualizing different experiences, we start exploring different visual directions that align with the client’s vision and defining some key elements that we’ll use across the whole project.
We whip up the base structure (simple design system templates) and start building out the system from there. The base structure usually includes the things that most design systems have in common, like: Typography, Colors, Iconography, Components, Imagery, Spacing, etc. We always end up tweaking the structure a bit and then we build on top of it, so it can fit a project’s specific needs; nevertheless, a strong base plays an important role.
When we decide on the final direction, we start creating the visuals for the project, then we begin filling out our system and creating the basic styles and components.
As we move on to creating more complex components and as more of the visuals get done. We make sure that our design system stays on top of everything by creating more components, mixing components to get new, more complex ones, and consistently using all the elements from the system.
PRO TIP: Figma is a great tool, not only for designing and collaboration, but also for building design systems. Components, Variants and Auto Layout are really useful features, and when you learn to use them properly, they can be a real lifesaver :)
In the end, we kiss it goodbye and hand it over to the clients along with the final designs. That way we make sure that they have what they need to build cohesive updates and more products that align with the work we’ve already completed.
What kinds of projects need design systems?
Over the last couple of months, we had some compelling projects across multiple design fields. We experimented, tested and successfully implemented design systems in almost every project that we worked on.
The elements of a system can be small and simple, such as brand guidelines for a fashion brand, or something more complex, like UI components for crypto exchange apps.
The truth is, systems, as we see them, can be implemented in all types of projects, even outside the world of design.
Traditionally, design systems are mostly used for digital products, apps and websites. But at HOLOGRAPHIK, we apply the same systematic thought process to all our projects, so when we make brand guidelines, visual directions and animations, we consequently create design systems for them.
Why are systems important to us?
Everyone likes to have guides and be fully informed about something they’re doing. We love building those guides and gathering all kinds of information that will help our team and clients build cohesive products.
For us, a good system is a key component to building anything online (sometimes offline, but more on that later).
From a philosophical standpoint, systematic thinking is a constant loop that helps us anticipate and get over all the design obstacles that we might encounter when completing our goals. Also, there are numerous practical examples of why systems are important to us. Here are a few:
- Systems help us focus on small details, as well as the big picture at the same time.
- Systems help us onboard new people in our work and increases our productivity, as well as effectiveness.
- Systems cultivate harmony among a team, so the final product becomes a cohesive solution that has the same design language across all of its parts.
- Systems help us bring structure to the projects that we’re working on.
- Systems greatly facilitate the scalability of a product, so it can be easily converted from a desktop to a mobile solution
Why are systems important to clients?
Clients usually approach us to collaborate on more specific design projects, often initially ignoring their existing design system, if they even have one.
But after talking with them and defining the scope of their project, it becomes obvious that a design system should have been an integral part of their workflow, and it’s something that can help them long after we are done with the initial work.
Design systems help them have a stable ground and a starting point to build a new part of their digital presence or any new product.
Systems help everybody on a team, from the c-suite to junior developers, they all have a clear understanding of where things are going and how certain things should be built.
Systems help in onboarding new members of the team, or whole external teams relatively quickly and effortlessly.
We hope that you found this blog post interesting and that it will inspire you the next time that you’re making a design system. If you think that there is something important that we left out or you just have a good tip of your own, don’t hesitate to start a conversation in the comments, we would love to hear your feedback.
HOLOGRAPHIK® is a creative studio specialized in design and motion. Our work mainly covers strategy, art direction, web and mobile solutions, 3d and motion design. We help brands and visionaries find dauntless and unique visual identities, create lasting value and inspire future trends.
Stay up to date with everything HOLOGRAPHIK®:
Website │ Instagram │ Dribbble │ Twitter
