In the first insight of our series on Design and Development, we discussed the relationship between designers and developers, outlining some practical methods of how this can be best cultivated to enhance the product design process.
The jobs of designers keep growing exponentially as they are expected to work across the multiple disciplines that go into designing unique products with increased functionality. This can get quite complicated, especially when working with clients from diverse industries.
Designers are often at risk of being too creative, especially if they lack clear parameters that guide – yet constrain – their work. Unfortunately, this can produce inconsistencies which could hamper development work and result in poor user experience. This affects the entire process, slowing down both design and development.
To simplify the process, we can utilize design systems, which provide an accessible mental model of viewing interfaces in a hierarchical way. This encourages designers to simultaneously consider and plan for both the visual UI and the underlying functionality of components.
We mentioned in the first part of the series that the goal of the design team is to make the digital platform as accessible to the end-user as possible. Design systems empower your team to focus on people – not pixels. It is crucial to understand the “why” behind the design of the system and define its standards accordingly, allowing the designer to truly prioritize the needs of the end-user.
The importance of design systems comes down to systems thinking. This problem-solving framework focuses on how parts of a system interact and interrelate with each other, and how they affect the workings of the system as a whole. Adopting a systems thinking approach to UX/UI design encourages designers to look below the surface of an interface, and focus more on how different components are going to interact with each other in the final product, rather than simply the visual design of each individual screen.
By leveraging systems thinking in our design work, we can adopt a much more holistic approach to product design. By focusing on design systems rather than simply a collection of screens and visuals, we’re reinforcing the idea that design is not just about making something look good – it’s about ensuring that the product is functionally sound and accessible to the developers who will build it and, ultimately, the end-users who will interact with the final product.
A significant benefit of having a design system is that it is typically shared among both the design and development teams. This creates a single, unified source of truth for designers and developers: the design system becomes a common visual language that can be understood and utilized by various stakeholders.
Implementing a design system also creates clear parameters that constructively constrain designers’ work, helping to prevent over-designing. In turn, this ensures that development difficulties (and poor user experiences) are avoided. Design systems allow you to build bridges between different product teams and make the process of collaborating on a project much smoother.
Adhering to a well-crafted design system improves consistency in product design. The system acts as a style guide for both design and development, helping eliminate design inconsistencies and improving both future workflows and the end-user experience.
Consistency is especially crucial when scaling your product. Design systems simplify tasks by utilizing a series of repeatable components and setting standards and guidelines that remain steady across all sorts of digital products. They also improve accessibility and predictability for clients and users.
When crafting a design system, think about standardizing elements that encompass both design and development. These may be things like naming conventions, accessibility requirements, and file structure.
The thorough, meticulous, and sometimes exhausting work that goes into crafting a design system should be seen as a long-term investment in your company and its clients. Having a comprehensive design system helps to save both costs and time, as the design team can be much more efficient when they have an all-encompassing guide for new features or additional products and platforms. No time is wasted on guessing or redesigning common elements.
Design systems streamline the work process by enhancing creativity and innovation, and helping to prevent technical/design debt. Design debt occurs when designers add new elements to a digital product and fail to consider how all these components would eventually fit together within the existing platform. As a result, the website or app may end up with a cluttered UI: the individual features and appearance might be nice, yet feel inconsistent and make UX complicated or unclear.
Design debt can make adding and developing new features difficult, especially if you plan to update or scale the product. Design systems exist to manage complexity and help create, iterate, and ship better products. Companies of all sizes and magnitudes rely on centralized design systems to help them scale their products. For organizations whose products span multiple platforms and channels, having predictable and consistent UX and UI ensures that products are always aligned with the brand guidelines and values. This is crucial for product scalability – and reinforcing consistent brand identity.
In the words of design systems expert Brad Frost, a design system is a UX/UI toolkit that follows a set of clear standards and represents “the official story of how an organization designs and builds products.” That story can consist of several broad “chapters”, from the brand’s intangibles, like general guiding principles and values, to specific brand guidelines, such as a style guide, UI elements and components, voice and tone standards, and design pattern libraries.
Within your company, it is a common visual language that helps the design team maintain a pattern to build consistent and functional products. The composition of the design system – the pieces it is built out of – depends on your organization or brand’s goals for the product.
In other words, design systems are strategically compiled, self-contained collections of design components and standards that can be adapted and reused by designers and developers to craft and scale various digital products. A design system may even include ready-to-use code, further simplifying collaboration between designers and developers.
Alongside design components, the processes of a design system need to be well-documented: having documentation to accompany the design assets allows designers to define each component and its purpose, creating a reference of when, how, and why to use them for all stakeholders.
To make sense of when you should start crafting your design system, let’s consider the design process as a whole. At Mäd, once the foundational work of the project has been completed, our design team starts designing the product via wireframes that outline the features and flows of the digital product. For convenience, we use UI kits, which are pre-made sets of assets that contain various UI components that a designer can assemble into a prototype. This allows us to focus on the functionality of a product before distracting our clients with the visuals.
After prototyping, testing, refining, and getting approval on the wireframes, the designers start “designing” the design system. This approach is convenient because, at the wireframe stage, we have already determined which components are needed to ensure both product simplicity and functionality of the final product, allowing us to focus on standardizing the UI of these components.
When creating the UI components, think about the visual design language of your product: this is key to planning your design system. The visual design language is composed of all the design assets that will be used in crafting your product, and includes color, typography, sizing and spacing, and imagery, all of which play a role in crafting each element of the interface.
It’s challenging to give a complete breakdown of all the things that must be included in a design system and to set out the order in which it should be done because this will vary from project to project and company to company. For the sake of simplicity, we’ve decided to outline a condensed version of the process, which you can split into additional sub-steps if needed. Note that documentation is a non-negotiable requirement, regardless of the process you choose to follow.
At Mäd, we typically view the design system as composed of the following key parts:
The steps to building a design system would loosely follow the order of these components.
1. Start with intangible elements.
You will have already completed the preliminary preparation – wireframing and testing – by the time you begin crafting your design system. The first step in building the design system is to outline its intangible elements. These include the brand guidelines and principles, accessibility guidelines, company values, and possibly even a glossary.
It is important to define design principles. These are the guiding rules that aid design teams in making meaningful (and sensible) design decisions. The principles should reflect the beliefs, values, and identity of your company, the brand, and the product, and ensure that all decisions are made with the company’s purpose in mind.
This will also help you to devise the visual design language of the brand or product that will be used in crafting the design system as a whole.
2. Create a style guide (and visual design language).
As mentioned, the visual design language is the core of the design system. After you’ve established the intangible aspects of the design system, you can start to define its language via a style guide.
Style guides are manuals that classify the graphic design styles (colors, fonts, icons, imagery, spacing, and grids) and the context of their usage. They function as companions to design and brand guidelines, and should be aligned with these principles – for example, your style guide could emphasize the use of brand colors for functional design elements, like buttons.
3. Define design elements and components.
You will now focus on the concrete parts of your design system – elements, components, patterns, and flows, – all of which have already been outlined in the wireframing stage.
Elements include things like buttons, chips or tags, cards, inputs, and selections. When design elements, like buttons, are combined together into functional pieces, they become design components. Design components are at the foundation of a user interface design – the most basic building blocks. Components may comprise things like pop-ups, content cards, modals, forms, tabs, and navigation.
Components can vary across channels and platforms, depending on whether the product is app- or web-based.
4. Compile a design pattern library.
At the next level, design components are arranged into compositions, more commonly known as screens and pages. An example within the user interface could be something like a sign-up flow or an overview page. When you sketch wireframes, you are creating a draft of what a page would look like and the elements it consists of, so at this stage, you should already have prototypes of these compositions.
Finally, now that you have a more complete draft of the interface, you should identify design patterns – the most common user flows and interactions with the product. Examples include user behaviors like continuous scrolling, or the path a user takes when they want to purchase a product via the app/webpage.
You should organize these into a pattern library – a visual collection of UI design components and patterns that commonly appear in your product, along with supporting information on how to use them. Classifying all the bits and pieces will help eradicate any inconsistencies (and the most reused and overused components) and find areas that could be improved via a better design system.
Having a library of preset assets allows designers to effortlessly maintain consistency and build new features at speed.
Ideally, the design and development teams will have been working together from the early stages of the project. In that case, your design system may also include snippets of code for certain components and flows, which will help streamline the developers’ job as they build the product.
Some platforms for creating design systems already include ready-made code fragments as part of their features. You can utilize that to make the design handoff more seamless and save time in future projects.
So, you’ve created the perfect design system – now what?
After completing the wireframing and testing stages, and designing a functional and scalable design system, we have all the tools needed to roll out the UI. This approach can be used for entirely new products and updates to existing apps and webpages. Once the UI rollout has been completed, the designs can be handed over to the development team.
It will benefit your team to determine the best way to manage the design system, as that would allow you to continually adjust and adapt it to your products. This is particularly helpful if you have multiple systems to work with for different projects. Most design systems are housed via a web platform – that is, a Design Systems Manager – making it convenient to keep track of brand guidelines, style guides, UX components, patterns, and snippets of code so that teams can stay in sync. Here are a few examples of how and where you can manage your design system.
Figma.
As an all-in-one design platform, Figma is a multifunctional tool for collaborating through any and all steps of the design process – from brainstorming to wireframing and prototyping and, of course, building a design system. Figma is endorsed by companies such as Shopify, Discord, and Condé Nast for its capacity to connect everyone in the product development process as the intersection of design, code, and data.
The nature of this platform enables users to collaborate live while building powerful design systems that are painless to evolve as your company, products, and teams grow. Here, design elements are aligned with their respective code fragments, making design handoff a breeze and ensuring your teams truly find a shared language. This intuitive platform helps designers bring order and alignment to even the most complex systems while keeping scale in mind.
InVision is an ‘online whiteboard’ platform for productivity and collaboration favored by companies in the ranks of Netflix, IBM, and Salesforce. As highlighted on its website, InVision enables you to “effortlessly go from kickoff to handoff” and “centralizes your entire workflow so you can collaborate at every stage of your process”.
Its DSM efficiently connects design and code, enabling real-time collaboration between designers, developers, and stakeholders in one unified space. The platform implements common design tools in an interface that is even accessible to non-designers. Additionally, InVision boasts an extensive library of design templates from companies like Microsoft, Atlassian, and American Express, and allows you to integrate files or libraries from other platforms (like Sketch and Figma).
Another great option is UXPin, whose Merge design platform allows you to create “design powered with code”. Its key feature is enabling designers to work with code components – with no coding skills required – to streamline the design handoff. The platform is utilized by PayPal, HBO, and Amazon, among other leading companies, and it prioritizes the end-user so much so that it allows you to build prototypes that feel like the end product.
UXPin stands out because it allows design and development teams to “wireframe, prototype, and ideate” together in real-time. The UXPin DSM empowers you to maintain consistency in your design system – including consistency in how it evolves over time to let you design at scale. It houses a common language of UX/UI for your design and development teams, letting designers send files to developers with “all the specs, code, and automatic redlining” while ensuring things don’t get lost in translation.
Design (and design systems) can, and should be, scaled.
Dropbox has introduced an intelligent structure to its design system, called Dropbox Interface Guidelines (DIG), which is an excellent example of how a brand can enhance its product scalability. DIG covers Web, desktop, and mobile platforms, and is organized in a hierarchy of libraries and kits.
It starts with the all-encompassing Global Styles kit, which is a guide to all UI colors and logo components. Every library below will inherit the elements of these main Global Styles, so any changes made here will apply to all libraries. Right beneath it is the Global Icon kit, which comprises of icon sets that are consistent across platforms, such as icons for files, folders, and syncing. This is essentially most of the Dropbox UI – it is a file hosting platform, after all.
Mobile and desktop both have several OS-specific libraries, but above that, the design system introduces a library of Shared Mobile Styles and another for Shared Desktop Styles. These include visual components and styles that are similar across different OS (i.e., they look the same in both the iOS and Android apps), such as borders and shadow treatments, along with icons that are applicable to all mobile products or all desktop variations. The web version has a standalone kit because the Dropbox web UI/UX is the same across all browsers and platforms.
Finally, the shared kits are split into OS-specific libraries – iOS or Android UI kits for mobile, and Windows or macOS kits for desktop. These contain things like OS-specific icons, guidelines on layout and typography, components, and sometimes even fully-composed screens. To maintain efficiency, designers can enable only the libraries they need and choose to disable those that aren’t relevant to their product – for example, when working on the mobile iOS app, they don’t need to view the desktop kits.
Design systems are indispensable tools to implement if you want to enhance your collaborative processes and your products. From a user standpoint, design systems ensure that a consistent, cohesive user experience is maintained. From a design/development process standpoint, teams can launch higher quality work in a fraction of the time, effort, and cost. From a client standpoint, new products or features are brought to the market more swiftly and effortlessly.
Just like your company, clients, and the products that you are working on, design systems can evolve and change over time. The technical aspects sometimes don’t matter as much as creating a dynamic system that is both flexible and maintainable.
In the following part of this series, we’ll discuss the different types of design handoffs and review the varying needs of developers and stakeholders. You’ll find out how to use this information to avoid “over-designing” (and over-complicating) your projects, how to communicate seamlessly within every team, and (hopefully) streamline the handoff process as much as possible.
Garden by Zendesk. Garden is the design system by Zendesk, where the components, standards, and tools that product designers use every day are “grown”. It is a combined repository of shared knowledge in design, content strategy, and engineering that reinforces a cohesive UX in Zendesk’s SaaS products. Garden not only powers Zendesk’s own app suite, but also serves as an accessible, open-source guide that can be used by other individuals and organizations.
Lightning Design System by Salesforce. Salesforce’s Lightning Design System (SLDS) functions as the primary source of Salesforce Lightning principles, design language, and best practices that help both designers and developers to achieve consistent and efficient UX/UI. The design system gives access to icons, color palettes, fonts, and other design components while enabling product teams to build apps without writing a single line of code. SLDS is open-source and can be accessed by anyone.
QuickBooks. The QuickBooks design system (by Intuit) comprises a range of resources: from content, product, and marketing standards to patterns, style guides, and accessibility guidelines. This design system prioritizes functionality and inclusive user experiences; it consistently reinforces QuickBooks’ design principles – Simple, Fast, and Clever – to help design and development teams make decisions that align with UX/UI goals. Unfortunately, much of its material is not available for free access and use.
Workday Canvas Design System. Canvas by Workday is a design system consisting of reusable and adaptable UI elements, guidelines, and best practices that enable teams to create scalable, unified user experiences. Canvas empowers collaboration between designers and developers, providing detailed resources for both design and development to help them build excellent products. It is backed by open-source code, making all the documentation, design downloadables, and code accessible to anyone on the web.
Work with our expert team to get measurable results.
Together we can Make It Happen.™
