The visual, written and behavioral attributes like logos, color palette, iconography, typography, voice or tone come under the umbrella of style assets.
Advanced design systems use design tokens to centralize the management of colors, text styles, icons and more. Design tokens are platform-neutral entities that store design variables and are used in place of hard-coded values such as pixel or hex values to maintain UI and UX consistency when design systems scale.
Structural assets are an assembly of UX design elements (specific buttons, page templates, etc.) for creating user-friendly screen designs with a shorter turnaround time.
The atomic design approach is one of the most popular ways to describe the hierarchy of structural assets. Here’s a general breakdown:
- Atoms: An atom is the foundational unit of a user interface. A single form field, a drop-down menu, a button or an icon are all atoms.
- Molecules: A molecule is a small group of UI elements that function together as a unit — a cluster of several atoms. A collection of form fields or an associated submit button can be an excellent example of a molecule.
- Organisms: An organism is a more complex entity in the UX design hierarchy– an aggregation of molecules and atoms. Examples of organisms include utility navigation, global navigation, hero space and the footer.
- Templates: A template is a reusable framework or design layout formed by aggregating atoms, molecules and organisms. Standard templates include the homepage, product list page, product detail page and shopping cart.
- Pages: A page is a fully developed and optimized version of a template. When a template is enriched with placeholders or real content such as text, images or advertising units, it becomes a page.
Code components are an inventory of production-ready codes in the selected framework. They are organized using the atomic design approach hierarchy. Each design atom, molecule, organism and template have an associated code component to match. Sophisticated design systems tokenize code components for updating colors, typography, spacing, etc., in a centralized manner.
Enforceable guiding principles, usage guidelines and governance policies should be in place to create efficient design systems.
The guiding principles ensure that design assets and code components are modular, composable, generic, flexible and accessible. Usage guidelines include the rules related to typography, color palette, dimensions and spacing, grammar, aspect ratios, writing style, etc.
Governance policies are necessary to sustain the given standards over time. Instead of implementing the conventional IT governance model, software engineering leaders can use a wiki-style approach. It can give contributors the freedom to create, update and delete style assets, structural assets and code components on an ad hoc basis, allowing the product teams to improve the design system “on the fly.”
To maintain the credibility of the design system, the leadership team can review additions, edits and deletions during a significant release, apart from their quarterly reviews.
Utilize existing UX design systems
Over the years, various platform-based and open-source design systems have been launched to ensure high-performing UX. For building apps on a major platform, it’s highly recommended to repurpose these existing design systems as much as possible. The design assets and code components in these systems are backed by extensive research on UX within product categories such as customer relationship management (CRM) and enterprise resource planning (ERP).
Allocate a team for design systems
Treat your design system as a digital product by establishing a product leadership consisting of a product owner, UX lead and development lead.
The three leads can improve the design system with operational, design and technical guidance. The team can also have contributors such as UX designers, content strategists, front-end developers and accessibility specialists to handle each release of the design system.