Like any language, a design language is a methodical way of communicating with your audience through your approach to product design. It’s the cornerstone of consistent customer experiences.
Brand drives every single decision you make when building new products or features. A good brand is much more than a name and a logo. It’s the values that define your unique identity and what makes you stand out from others.
Most customers form an opinion about a product in seconds. In most cases, your logo will be the first brand asset someone sees. It’s all about making the right first impression. A distinctive logo helps users recognise a product immediately and gives them the essence of your branding.
Providing guidance on how to approach common UX patterns will allow your organisation to establish a consistent approach and a consistent user experience on any platform.
Variables that store values for the base layer of your design system, like colour and typography. They’re used in components, so changes on this level will resonate throughout the whole system.
Not only an efficient way to showcase your brand, but also an efficient way to communicate with your users. Colour palettes created with purpose over aesthetics in mind can help you create intuitive design patterns by adding meaning to your interface.
Make sure to have accessible pairings between the main colours in your palette. More importantly, make sure that your background and text colours have at least an AA standard contrast ratio between them.
Besides your brand colours, make sure to have colours defined and made into variables for functions like disabled states, backgrounds, actions and high contrast text.
Preparing a dark mode version of your colour palette will allow your design system to adapt to dark mode and respect what your user wants to see.
Provide guidelines on how and when to use the colours in your palette, what to keep in mind when working with them and how not to use them.
A well thought out layout goes a long way. Consistent use of a grid and spacing makes it easier for your users to scan the user interface and grasp the content.
Units are the most granular building blocks for layout. Defining a set of values with consistent increments (such as 4, 8, 12 and 16 for a 4-point system) will provide you with the foundation when you’re designing your grid and spacing values.
Every layout should sit on a grid that brings order and hierarchy to the interface. Define a grid separately for mobile, tablet and desktop devices with columns, gutters, and margins so your interface can adapt to any platform easily.
Predefine the screen sizes and orientations your grid will adapt to.
Horizontal and vertical rhythm plays a big role in a layout. You should provide easy methods for adding space between interface elements independent of your grid.
Typography is one of the main ways you surface content in products. A clear hierarchy and contrasting styles in your typography scale will make things easier to read and help with the overall structure of your product. It’s also an opportunity to visualise your brand character and presence.
Desktop devices can usually afford to have bigger font sizes compared to mobile devices. Creating a typography scale that adapts to the viewport size will help with a more meaningful hierarchy and layout.
Font sizes and leading should match your grid to allow better pairing between text and other UI elements. A good example of this is text paired with icons with bounding boxes.
Optimising the letter spacing (tracking), line height (leading) and line length for your typography scale will help with the readability of text.
Custom fonts need to be downloaded before they can be displayed, especially on the web. Make sure that you have sensible fallbacks and fast loading time for your typography assets. Using system fonts solves this performance problem.
Provide guidelines on how and when to use the pairings in your typography scale, what to keep in mind when working with them and how not to use them.
Icons are symbols that represent functionality or content. They’re especially recognisable and helpful in user interfaces since their meaning can be understood at a glance. hough they can be used just for decoration, their full potential can be realised when they’re used meaningfully and consistently.
Components are the main building blocks for user interfaces. Building a reusable component library enhances your product development workflow by reducing design and tech debt and speeding up the process. Core components can’t be broken down into granular pieces without losing their meaning.
Avatars are used to show a thumbnail of a user photo or a visual representation of any other type of content.
Avatars should mask an image into their shape and work with any image size since they may get this image from unknown data sources.
There should be fallbacks when there’s no image available. This can be done with placeholder images or initials.
Always provide a description for screen readers describing what’s displayed on the avatar image instead of just naming its role.
There are many contexts to use avatars and they all require different sizes for the component. For average projects use at least 2-3 different sizes and make sure there’s at least a small size available.
Avatars can be used with an icon instead of an image to emphasize areas that don’t necessarily have (or need) an image associated with it.
When used with icons or text, there has to be a background colour from the design system colour tokens applied to the avatar shape. Make sure that icons and text have enough contrast ratio with the background according to the WCAG AA standard.
Badges are elements that represent the status of an object or user input value.
Badges may play various roles in your product and having a predefined colour for each role should help users understand their meaning. When changing colours, make sure the text has enough contrast ratio with the background according to the WCAG AA standard.
Badges can be used as a dynamic way to display selected values and there should be a way to dismiss them.
Banners display an actionable message used as a prominent way of communicating with your users.
Banners are used to display different types of messages and it’s important to differentiate their visual appearance based on the role they’re playing. If you’re using background colours for role differentiation, make sure there’s enough contrast ratio with the content according to the WCAG AA standard.
Area for icons or images
Banners can supplement their message using a supporting icon or image. They shouldn’t be used instead of text content.
Actions in banners should relate to its text and provide a way to react to the message sent to the user.
Don’t overwhelm the user with banners on the page and include a dismissable action. That may be either a separate close button or one of the actions provided.
If a banner dynamically appears on the page, it should be announced to the user by their assistive technology.
Banners should adapt to the viewport size. This usually means that they become full-width for mobile to save some space.
Buttons are interactive elements used for single-step actions.
Clearly show that the button is interactive when it gets hovered with a mouse cursor.
Used when a button gets pressed. The same state can be used to represent the button responsible for toggling another element on the page while that element is visibly opened.
Cards are used to group information about subjects and their related actions.
Carousels stack the same type of items and allows scrolling through them horizontally.
Dropdowns are used to display a contextual subview with a list of actions or content related to the area where the dropdown is.
The icon component is a way to align the way iconography static assets are displayed in the product.
An input checkbox is a form element used for selecting one or multiple options.
An input radio is a form element used for selecting one option from a list.
Input text lets users enter and edit text.
Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission.
Lists define the layout of the page content or groups of elements stacking them vertically or horizontally.
The loading indicator shows that an operation’s being performed and how long the process will take.
Modals are containers appearing in front of the main content to provide critical information or an actionable piece of content.
Tabs organise navigation between multiple pages or content sections.
Toasts provide short meaningful feedback messages about the action results.
Tooltips are desktop-only components that display additional information when hovering over or focusing on an element.
To make things efficient for anyone using your design system, make tooling essential. Find the workflows where you can integrate things with the tools people use. This helps organically spread your design system and make it crucial to people’s daily work.
The UI and UX in a design system need to be tied to development as much as possible. The tools in this checklist should help designers and developers work better together.
There are many design editors available in the market today with the most popular names being Sketch, Figma and Adobe XD. If you're unsure which route to go down it's often best to speak with your team.
Most popular Design Editors (Sketch and Figma, especially) come with third-party plugin support. Whilst it's best to use the editors in-built tools for laying out your components, plugins can bring in a range of useful data to populate them.
Having your design versioned with semantic versioning will allow you to easily align design with development, roll back faulty changes and release changes in code and design at the same time.
Define the process of contributing to the UI and UX of the design system and document it in a discoverable place to make it easier for everyone to contribute.
One of the main challenges in developing a design system isn’t building the components. It’s making your code stable, easy to read and contribute to.
Isolate your UI components’ environment outside of your product codebase to make sure they’re not dependent on any global dependencies and can be easily reused.
Having your code documented is key to driving adoption and reducing the load on the contributors.
Having a defined code style helps align the way code’s written in the system and increases development velocity. It should be automated with the tools provided for each platform.
Every part of the design system should be covered with unit tests. Once your system’s adopted, any change in the isolated environment may affect how the product works.
Design systems should cover accessibility as much as possible. Making this automatic reduces the risk of inaccessible components or user flows in the product.
Version your code with semantic versioning that dictates how version numbers are assigned and incremented.
Design system releases should be automated and ideally use scripts ran locally or in remote CI pipelines to prevent broken releases.
Commit message guidelines and changelog
Automate the generation of your changelog by adopting a commit message guidelines that categorise and define the changes being made.
Create merge request templates that outline the change being proposed to facilitate productive discussions.
Define the process of contributing to the code of the design system. Document everything in a discoverable place to make it easier for everyone to contribute
Design systems are no different than any other project your team might take on. In order to successfully build and maintain one, you need a clear strategy that’s well executed daily, and you‘ll need to create opportunities for your colleagues to give feedback to help share your design system together.
Solid task management and workflows are a crucial step in executing any project. Adopting a methodology like Agile or Kanban helps you cover a lot of ground.
Setting your short and long term vision and mapping things out helps you decide the steps to take, understand your place in the bigger picture and prioritise day-to-day tasks.
Define milestones that act as bigger epics in your project management with the help of your roadmap. These will help you understand your progress.
Make it easier to track your day-to-day progress by using ticketing software like Jira, Trello or GitHub. This’ll make it easier for others to submit feature proposals or bug reports.
Your users play a great role in shaping your design system. Creating communication channels where they can raise their voices helps you keep track of how they’re using your system. It’ll also improve their sense of ownership and the adoption of your system.
Arrange community meetings with everyone who uses the design system. Share your knowledge and make proposals to improve the sense of community.
Most product development work happens digitally, so create a digital channel where people can reach out and ask questions.
Create open hours in which you can engage your audience in a more private setting where you can discuss things in more detail. You can also use these as peer coding or peer design opportunities.
To save everyone time, define which questions are asked frequently by your audience and document them in a discoverable place.
Data isn’t the only driving factor when it comes to the development of design systems. Keeping a sharp eye on how your system’s used in the development process and the end product can inform your go-forward strategy.
Track the usage of your components. For development you can use built-in tools like Figma’s Design System Analytics. For the end product you can have a separate way of tracking per platform depending on the technology.
Implement a way to track and pinpoint component-related outages in your product.
Track what tools are being used for your design system. Find out which ones are used the most and which features are the most popular.
Service and health metrics
Define service and health metrics for your design system to set a benchmark on how well you’re doing. Common examples can be the number of tickets closed, improvements made or bugs fixed.