Everything that belongs to design development within an organisation is a design system.
This is what designer Brad Frost says. This includes general design principles and testing methods as well as specific UI and code components or tools for teams. And like any other product, it needs a defined process, resources, and ownership to be successful. The designer Nathan Curtis calls it:
Not a project, but a product that serves products.
What are the advantages of a design system?
Through clear guidelines and the reuse of design elements, a designer deals with the actual issues surrounding a product instead of constantly reinventing small-scale design components and processes. The designer can focus on the user experience and make context-based, precise suggestions and recommendations for users. A design system also saves time and money and speeds things up enormously when launching the next product. Recycling components helps developers avoid redundancies and ultimately saves up to 20 percent of development time. Not only does this help achieve product maturity faster, it also raises the quality of the result because the system offers solid tested code whose use makes the performance lean and fast.
And what is a style guide?
The first point of contact in a design system is the style guide. It represents the shop window and provides an overview of the entire range of design elements. (The entire system would be like the neighbourhood or street where the shop is located).
While window shoppers can come from the entire organisation, a small number of people are more interested in the workshop in the backyard. These people are called “designers” or “developers.” They build the individual parts – the toolbox – that keeps the system running and invent a common language for things. (This is crucial, because a style guide is aimed at both designers and users of the design system.)
The toolbox is the sum of the many small parts that future teams will need to develop new products (or expand existing ones) – websites, apps, prototypes, campaigns.
Tools such as Sketch (UX, design development), InVision (exchange in the design process), Confluence (documentation of final functional UX and design specifications) and Slack (team collaboration) are used in the workshop. The style guide is the concrete and tangible centre of a design system.
Why is understandable language so important in a design system?
Your agency’s project team should use clear language and have an easy-to-understand classification for the elements it uses, as well as working on an ID-basis when designing. This requires coordination efforts in advance, but it pays off immediately as soon as your team and/or time pressure grows.
Example: Miles & More
During the design development of the new Miles & More website, our design team described each individual component in detail and assigned the spaces between and within all components with individual IDs (spx1, spx8, spx160 etc.). The space logic was based on the 8px x 8px base grid from Google’s Material Design.
This systematic and easily understandable description helped the five-person team of designers – spread across different locations – quickly create consistent results.
Like any other design element, the spaces were always available to all team members in a sketch library.
How does my design system stay up to date?
While PDF-based style guides used to be the communication tool of choice, today’s companies are faced with questions of how deeply a design system should be integrated into the product development process and whether a control lever should be established.
The following overview shows the development history of design systems:
The Holy Grail of design systems is live code. Each UI element is stored with HTML code that is in sync with the real production environment. If this is not the case, new content is created that requires intensive maintenance.
Live code requires that code be divided (between the component library and the development environment), that it is versioned, and that it is kept up to date. It is also important that tools be up to date, and ones like Bower, Grunt, and Gulp automate this process to some extent. But even more crucial is governance. There must be one person who understands the implications that changes in one component can have for all the products in which it is used.
What is important here is a technical lead or central authority who is responsible for the code quality.
Example: MAN design system
As a lead agency for MAN, our development team always keeps the code up to date over all instances of the supported channels. Our team updates (and hosts) the code in Git and uses a script to import the most current version into the MAN style guide. This results in a uniform level of knowledge for all MAN user groups as well as a consistent UI across all channels.
How many people do I need for my design system?
Salesforce has dedicated a whole team for its Component Library. You don't have to go that far. When asked, “How do you scale a team for a design system?”, designer Nathan Curtis answered: You need a small allied team of the best people from all product teams, preferably including a mix of diverse disciplines. (This is also good because they then carry the results back to their teams.) The actual documentation is carried out centrally by one or two people who dedicate part of their team role exclusively to this task. They write texts for guidelines, build components in the code, update templates, and maintain sketch libraries, for example. Conclusion: Without ownership and fixed roles, a design system cannot survive for long. Decide in an alliance, document centrally.
In the case of MAN, we set up a micro team consisting of lead developer, UX and art director. The three examine new requirements, keep the system slim, prevent untamed growth, and suggest ideas for new components.
Doesn’t a design system make my products boring? Where does innovation come into play?
Contrary to popular belief that a design system writes the status quo in stone, is boring, and prevents innovation, it is actually the case that – when you really think it over – the system encourages new innovative ideas. Innovation can arise in any ongoing project. Here, a team has the chance to challenge and expand the system and, if necessary, to replace a component entirely. This is a “virtuous cycle”, says designer Josh Clark: “The new cool tricks will be the new routine, until the next idea comes along...”
A design system is a living system that drives innovation and is the foundation for bringing a brand, products, and services into the digital age. It requires product development and its added value must be communicated internally.
Hilla Neske, Creative Director, Ray Sono
You want to learn more about Ray Sono? Get in touch!
_v01.png)
