How to Create a Successful Design System
Part 2 — Let’s get into the planning
If you have read my previous article you have probably realized you need a design system and find yourself wondering where to start. A Design System is a complex project that needs a team to succeed. It requires planning, structure, and direction.
Have you questioned yourself what the goal of the system you wish to build is? Whether it will serve a project in-house or meant for several agencies or subsidiaries? Do you know if it is for a specific project, such as e-commerce or an app, or various digital products? Is it for one brand or multi-brand? Should it cater to a specific operating system?
You will need a team
To make a successful Design System, you need people from several different disciplines in your team. An adequate team will help kick off this project and keep it running. Due to the different skills within the team, appoint a lead for each area. Leads can advocate for the Design System and drive decisions forward. Depending on the disciplines, roles, and tasks you will get different input. As such, having different perspectives in mind. Here’s a rundown:
Designers will focus on structuring the system and building the foundation. They will work on the required elements, components, modules, etc.
UX researchers can help understand the customer needs better. UX designers can help see the entire product. Both can help ensure the System conforms to WCAG standards, for instance. Copywriters, Strategists, and UX writers can help with the tone of voice when the need calls.
Front-end developers will take care of the code, environment, and documentation. Product owners or project managers will ensure that the needs of the system align. These will align either with the project, product, and/or client. Quality Assurance makes sure performance is optimal. They revise that everything works throughout all devices, operating systems, and/or browsers.
VPs and/or directors help with the alignment of the Design System. They do this throughout the company by connecting teams. Furthermore, they bring the product forward to the executive level.
Approaching your project
Have you thought of a working method? That will help make the work smooth, transparent, and thorough. Anyone that takes part in the project needs to share their thoughts, wishes, and concerns. How will all team members align, is there a working model? Nathan Curtis expands on team models for scaling Design Systems. The book “Design Systems Handbook” by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield expands on the topic. Hitherto, define all aspects to help your team achieve their goal. Bear in mind that the goal of any system is the input and output of information.
Furthermore, have you thought about the approach you will use?
Atomic Design: Brad Frost initiated this methodology. It focuses on interface design split into atoms, molecules, organisms, and pages. An extension to this could be Ions. Chris Sid explains how to add a third dimension to the Atomic Design components relation.
Material Design: Approach by Google as their guideline for web and mobile interface design. They describe it as “a design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.” Google’s Gmail, search, and analytics moved to material design. Their open-source tools, such as Angular and Polymer, supply Material Design UI elements.
Metro: Microsoft used Metro Design for the Windows 10 platform. This design focuses on mobile touch accessibility by applying big colorful squares.
Skeuomorphic: Skeuomorphic copies real-life objects and their properties. David Ofiare explains this and Neumorphism in-depth. Apple used this principle up to iOS 6 (2013). This was their default. Remember Instagram’s first app icon, the one with the brown camera? Skeuomorphism.
Flat: Flat design is often contrasted with Skeuomorphism. Flat design doesn’t use visual elements like gradients and shadows and focuses on two-dimensional elements and bright colors.
How to shape your system
Within my first post, I explain what a Design System is and what makes one up. In summary, systems must consist of three main things: interconnections, elements, and function or a purpose.
As these terms refer to systems in general, I would like to clarify what they mean for a Design System. Interconnections are a mutual connection between two or more things. They are used for a coherent organization of patterns and shared practices. Elements consist of two important sections; a Style Guide & a Component Library. Function refers to actions and things, whereas purpose refers to human interaction. A Design System’s function or purpose is to serve as a centralized source of knowledge.
To use the correct semantics, these are some of the definitions of common terms:
Style Guide
It is a manual of how to use what one finds within the system. This holistic set of standards explains how to format, compose, and design. It shares the general look-and-feel of the company’s or product’s branding. An example of this is the guidelines from Material from Google.
Component Library
These are the lego-block-like components consisting of patterns, such as common actions, inputs, dialogs, forms, etc… Due to its modular nature, these can be arranged in many different ways to achieve the desired goal. Atomic design is an approach to achieve a component library.
Pattern Library
This is a subclass within the design system and serves as a reusable solution to a common design problem. It integrates the use and function of a component. A design pattern may define the shape, colour, style, and behaviour of tab navigation. See a pattern library as your starter kit. Vitaly Friedman explains how to take your Pattern Library to the next level.
Building Blocks
They serve as the foundation. They consist of colour palettes, typographic styles, grids, layout, and icons. Take a look at Atlassian’s foundation as an example.
Documentation
This makes it easier to understand designed components. It is essential to provide documentation for a better grasp of the intentions and purpose. This should provide reusable code snippets for developers upon release. As well, documentation should include details on design principles. Documentation provides guidance on topics such: as material, accessibility, and usability. I would advise you to include links to reusable resources for design or development. Take a look at Polaris; they have a section on inclusive experiences, for instance.
Centralized source
This means the design system should have a centralized access point. Depending on the intended use of the system, ie. For internal, external, or public usage, is how the resource should be set up. Current examples include Sketch Cloud, Abstract, Figma, DSM by Invision, etc.
You may find more examples by using Adele. Below a shortlist:
Material from Google
Audi’s design system
Atlassian’s design system
Salesforce lightning design system
Polaris from Shopify
Airbnb’s Visual Language
IBM Design Language
GEL — Global Experience Language from BBC
Fluent from Microsoft
Swarm from Meetup
Canvas from Hubspot
“Design Systems are a culmination of people, processes, and shared assets that work together in an iterative cycle in order to unify products, negotiate and align cross-team communication, and increase efficiencies in building products from design to implementation.” - Nate Baldwin.
https://blog.producthive.org/anatomy-of-a-design-system-7a6b0677bf5
Other details to consider
To help your Design System gain some context, ask yourself what the needs are of your client or product. Who are you catering to with this system? Who is it serving? How will you tackle problem-solving? Will you identify the fundamental basic problem rather than the symptoms? You will need to see the system as a whole, as everything connects. I would suggest considering the following points:
Human-Centric
This makes sure it is useful for the users. The system has to work for receiving the end products and building the end products. Designers should be applying design principles, such as; visibility, findability, and learnability.
Flexibility & Scalability
A Design System shouldn’t be restrained; it should be able to grow organically and be flexible enough to scale. Design patterns will iterate over time, components and modules will also iterate over time.
Organization & Taxonomy
This ties with the taxonomy. How will you organize the whole system? Which method will you use, or will you come up with your own to suit your project’s needs? As an example, while it is easy to change the color of a button, consider the greater system’s complexity. Consequently, it is helpful to define a taxonomy for organizing the design system and the pattern library. The terminology within the system should be understood cross-functionally. Taxonomy classifies things within the system. What are the relationships and similarities among descriptive terms and labels?
Semantics
Semantics is the branch of linguistics and logic concerned with meaning. The two main areas: logical semantics, concerned with sense and reference and presupposition and implication, and lexical semantics, concerned with the analysis of words meanings and relations. For anyone using the Design System to have a common language, one should bear in mind the industry’s norm by utilizing a standard naming convention.
You ought to have thought of the things I have mentioned ahead of opening whatever tool you will use for your Design System. Was this helpful? Could you start a conversation within your team?
