Have you ever taken parts of a puzzle from several different boxes and tried to solve it? You know, the one where the colors don’t fully match, the edges are all jagged and there is no piece that seems to click in properly? To a web developer, this is how it would feel like without a design system.
To put it simply, a design system is a collection of design components, style guides and standards which can be put together in order to provide a seamless user experience across devices. Think of it as a sack of tools, each having one single predetermined function i.e. making a website or computer application look the same. Efficiency, teamwork and well-designed products are the main goal of it – that and creating beautiful things.
Let me tell you about an event from my life. A couple of years ago, I was a member of a tiny web development group that was assigned to overhaul the website of a local art gallery. Even though it was a passion project, there was always conflict in terms of design and a violent disconnect when it came to communication between the designers and the developers. We would create exquisite layouts only to discover later that the buttons would not align or that there were inconsistencies in font styles and size across the pages. It was chaotic!
Then we made up our minds to move towards a design system. All at once, we had a common tongue, a group of parts from which we could Geneve a more effective design strategy and a guide on how everything should and wanted to be made. It was akin to switching on the lights in a pitch black room! As a result, the way we worked was more integrated, the compilations of our designs were more cohesive, and we closed the project before it was due. The art gallery was satisfied, as were we, for having accomplished what many thought was impossible.
Using design systems has its benefits beyond just a nice interface. These benefits include a sense of ownership among team members, time-saving and improving the user experience. With this knowledge, let’s go a little deeper into what exactly design systems are, and how they fit in the current web development landscape.
What Are Design Systems?
Let’s go over what components make a design system. In essence there are three components. Documents, style guides and a pattern library.
Documents: You can think of this as textbook for your work. Style guides document color combinations or even font choices to use. While design works may differ, projects will always stay true with regards to the color palette and fonts regardless of whoever is working on it. It provides a central board that everyone can look at and use as a source.
Pattern Libraries: These includes ready to use elements such as buttons, form fields, navigation bars and other website components. Instead of creating new elements from the zero, designers can now leverage the pattern library. This reduced the time and increased the quality in which the design process takes place.
Documentation: That is what ties everything together. Good documentation describes how to make use of style guides and pattern libraries offering samples as well as best norms. It acts as a point of reference for people involved in the project, especially in comprehending the reason behind a certain design decision so as not to be lost in concepts.
Now, how do slotted components aid in the achievement of consistency across digital products? Imagine a situation where many people are involved in a single project at the same time and there are different designers and developers too. In the absence of a design system, each participant will likely have a unique design interpretation of the brief. One designer will want to use bold colors, while the other is more subtle. This approach contributes to a poor user experience where any given site seems like a patchwork of ideas rather than a single product. However, with a design system in place, everyone relies on the same ‘source materials’ resulting in a consistent and uniform facial expression which matches the target audience.
Why Are Design Systems Important?
Now we see the other side of the coin – why design systems have become indispensable in modern web development. The design systems, in a nutshell, are created with an intention to enhance the communication between the designers and the developers.
Silos in teams often lead to a lot of communication challenges. While designers create beautiful graphics, developers often complain about their complexity. Here’s where a strong design system comes in. It creates a universal standard through which designers and developers can communicate more efficiently. This means that developers can create such graphics out of components that only need small tweaking which makes the process faster and smoother.
Look at Airbnb, for example. Companies have outgrown their brand design and experience and this is where DLS comes into play. This allowed their team’s to streamline all aspects of their website and mobile appsin order to achieve a better and more cohesive customer experience. They witnessed a remarkable increase in the speed and quality of their designs. Thanks to DLS, Airbnb was able to better enforce its brand and utilize it over many channels and launch feature updates faster.
The Importance of Design Systems in Web Development
Uniformity Overall work
Witness the situation whereby you flip through a magazine and each page has an entirely distinct style in terms of typography, color, and even layout. It is safe to say that this would be a little disturbing. Well, as it so happens, this scenario might unfold in the realm of website development, especially where there’s a multitude of designers and developers working on a single project in an unstructured environment.
Clearly defined working parameters are essential, particularly in retaining the integrity of the visual and functional components of a design system across different digital products. It is essential to have a defined blueprint to be followed in designing a product as this allows every member of the team to focus on the structure by ensuring every component, be it the buttons, headers, icons, and whatnot, looks the same. This not only improves the quality of the product but also assists in building the brand.
Last year, I worked with a small non-profit and the team was absolutely thrilled to work on a project whose end goal was to develop a new website to promote their cause and enable the local community. Unfortunately, things took a sour turn as soon as the designers got their hands on different parts of the website. One part was using a good-looking modern sans serif font and the other was using a really convincingly cool script font. The mood changes from warm and welcoming to cold and clinical in an instant.
So, from bumper-to-bumper, it’s pretty clear that one task remained to be addressed and that was ensuring that each design component best complemented the other—because it looked like we were sewing a quilt with fabrics that were not compatible—hodgepodge if you will! Let’s be honest, never starting something without a clean slate is important: So, we started all over again, but this time with a design system that included consistent typography, colors and a library of components. The results were terrific. One of the features that we enhanced for this website was building a cohesive brand, designing our message to be clear and easy to consume. Design blockers were a thing of the past content was the king!
Increased Efficiency and Velocity
The fastest and most noteworthy improvement that any organization can experience after introducing a design system is speed. Imagine having a library with a collection of pre-designed components and styles, and you forecast the level of efficiency that a designer or developer can experience: Instead of having to completely redesign with every task, teams can use what already exists as a base which helps a lot.
Consider the carbon design system developed and used within IBM as an example. According to their reports, there was an estimated 50 percent decrease in the time it took to turn a design into a fully functioning product. This amount of efficiency is transformative for organizations who are looking to remain competitive. Especially today, when user expectations are rapidly shifting delivery speed has great significance.
During the UI design phase, it was never-ending flip-flop decisions and alterations. However, once we began working with a design system this task became simple and simpler. The UI was designed really quickly with minimal time invested because by that stage the design components had already been established and all that was needed to be carried out was the restructuring of the user’s journey. While it did save us a lot of time, it did do reduce quarrels amongst the teams and allowed the project to move along at a quicker pace.
Enhanced Collaboration
The use of design systems vastly improves the communication and collaboration between the teams. During scenarios like these when everyone is working on the same output it does become easier to share and build upon ideas at a larger scale. With a common goal in mind, both the teams can refer to the same style guides along with component libraries, reducing chances of confusion.
There are various tools and platforms that enhance the use of design systems while also increasing the collaborative aspect of the project. Figma and Sketch improve the cohesion between team members by creating shared libraries that each person can utilize to ensure consistency. From documentation of decisions to real time collaboration, topics such as these are immensely helpful during the joining period of a new team member.
Based on what I have observed, design systems aid in unifying designers and developers. In one of my recent tasks, I recall using design systems and InVision as a collaboration tool – designers would upload their prototypes and developers could leave reviews instantly. The dialogue allowed us to discuss potential problems, thereby limiting the amount of back and forth that slows down progress.
Establishing a Design System
A Guide to Implementing Your Design System
At first, creating a design system might seem overwhelming, but if accomplished step by step, it becomes an easier endeavor. Here’s a simplified sketch:
Research and Discovery: Investigate the users and the aim of the project. This can include user studies and existing design evaluations.
Define Design Principles: Create principles that denote who you are as a brand. These principles will help you make a variety of design decisions later on.
Create a Style Guide: List your colors, preferred typographies, spacing and other related information that would be needed in the construction of the design system.
Build a Pattern Library: Gather buttons, forms, navigation menus and other essential items for components as well as document required usage specifications for each component.
Documentation: Prepare up-to-date documentation which covers the entire specification of the design system. Include best practices and design system usage examples to aid team members.
Iteration and Feedback: When your project goes through the lifecycle, make sure you go back and update this design system based on the feedback from the team and results from the user tests.
A case study which explains this procedure well is that of Spotify’s design system Encore. They have set out on a quest to make their design language shared among different teams. By taking a systematic approach and asking for inputs from relevant people they developed a comprehensive system that reduced their product development cycle greatly.
Common Challenges and Solutions
Design systems are great assets but like in every case the path of getting there is full of hurdles. Here are some of the most common difficulties that groups struggle with while trying to develop systems and how to tackle them:
Resistance to Change: Team members might be reluctant to acclimate the new system. In order to combat this problem let them partake in the system approach and use systems’ benefits in form of workshops and training ways.
Maintaining the System: Due to the ever-growing and changing nature of projects it is easy for the design systems to become irrelevant. Set up regular review processes of whether the components and guidelines in your system are still appropriate. Ask people for comments to make improvements.
Forgetting to Document: A design system is spelt out through the effective use of documents. Be sure to set appropriate time to draft out cogent and understandable formats. Infuse the use of images and practical occurrences to spice up the introduction.
Dan Mall, an important figure in the design world, emphasizes the significance of storytelling in the context of design systems. They believe that every team member should participate in a storytelling activity where they explain their thoughts, decision-making processes, and integration of the frameworks. This kind of ownership and advocacy for storytelling creates unity in the creation of a design system for the entire group.
Interrogatives
What is the difference between a design system and a style guide?
It might be easy to think that a design system and a style guide perform similar functions, however, there are key distinctions that set them apart.
Primarily, a style guide is a textual document which details the graphical components of a business, for instance fonts, colors, logo etc. You can depict this as a list which needs to be adhered to for uniformity purposes. It does offer practical elements but more out the use of images outside the plan.
At the same time, there exists a design system which is wider in scope. It has all the divergent elements such as a style guide but also includes a library of reusable components such as buttons, forms, navigation and much more. It can, therefore, be regarded as an ensemble of tools which empowers both designers and developers to come up with coherent and practical digital products in a streamlined manner.
With this in mind, let’s turn to the case of a small startup that engaged my services. They were quite focused on designing a style guide in order to encapsulate visually the identity of their brand, however, things turned south as the startup picked up speed. Most of the time a designer would create a new component instead of selecting from the existing ones. Finally, we made a design system that had the style guide and a set of components that could be used directly with the design. This change not only simplified our process but also helped the team work through several projects without losing the integrity of their designs.
How can a small team or a young company take advantage of creating a design system?
When it comes to small teams or young companies, opportunity to scale is what matters most. A design system can prove to be a leverage especially when the time is not on your side. The adoption of a design system enables a small team to set up a well thought out structure which grows with the team.
Consider a startup in the phase of launching a new app, with no design system in place this means that every designer has the capability to create a new button, icon or layout of their choosing, this clearly illustrates the high risk of inconsistency within the team as they grow, but if a team starts off with a design system in place, everyone is able to access a central repository of components they can use, and that greatly reduces the time and polish the product.
With me working as a part of an emerging tech startup, we had to bring out a product in a very short time period, this meant that all hands on deck, to give a pretty good image now when everyone started off doing everything in the tech world independently, as you may have guessed, the designs were all over the place, once we moved to the designing system it meant that the team could use the same components and design in the same style, which boosted our morale and aided us in finishing off on time. I saw the impact that design systems could have, especially in small scaling teams that are trying to grow.
What tools are commonly used for building design systems?
As there are a number of tools available, there are some which have risen to popularity for assisting in the creation of a design system.
Figma: One of the most loved and common tools for designers as it allows a group of people to work on a project simultaneously, they can build libraries of components and styles with ease which will allow accessibility to every member with editing permissions.
Sketch: For the interface designing, this tool is highly recommended in the designing industry. There is a wide range of plugins available that help in developing design systems and help in providing uniformity in the multiple projects.
Adobe XD: One can easily design the user experience in Adobe by using their XD tool, which also allows one to share and create Design Systems with their teams.
Zeroheight: This system makes it easier for teams to keep track of the design system. They create guidelines for style integrated into the design devices to allow for easy accessibility.
Storybook: This is super helpful for the developers as they build UI components because it enables them to develop them independently. It facilitates the display and verification of components to make sure that they function as expected before being incorporated.
In one of the client project that was based in the health domain, we were required to build a design system in Figma that would consist of the components of the mobile apps and the patient portals. Being able to collaborate in real-time was huge as we were able to iterate quickly and make sure everyone was on the same page.
As a design system mature, how does it change over time?
A design system needs to be run over the changes and transformed if it’s to achieve its objectives. Like any other living document, it should always be updated with what the users are saying, what is new technologically, and what has changed regarding the strategy of the brand.
With user testing feedback in hand, teams may determine that some elements should be modified to enhance their effectiveness. It is also possible for new trends to occur that would require a change in the style guide and addition of new components.
In my opinion, it would be very prudent to have regular reviews and iterations of the design system because that has been one of the factors that contributed to its success. For example, one of the companies I worked with decided to set quarterly reviews. After these reviews, we provided the users and team members with the opportunity to suggest what can be modified further for better effectiveness. This ensured that our design system in question remained relevant and active while the element of teamwork and learning was always emphasized.
Conclusion
To conclude, design systems are absolutely crucial in today’s world of web development as they enable developers and designers to work within a design framework that promotes consistency, efficiency, and collaboration.
From ensuring that projects are visually uniform through to facilitating the processes involved, a much felt need for change through the implementation of a design system makes more than a handful of advantages available. For teams, especially still on the early stages, a design system should be one of the most effective ways to scale and improve the quality of their digital products.
I highly suggest that in your projects you implement a design system. Having such an investment pays off in the long run since it allows for better collaboration and a better user experience.
What do you think? Have you ever worked with design systems? What problems did you run into and how did you deal with them? Everybody is welcome to leave their comments and experience below.
