Why Design Systems are Going to Shape the Internet
The Role of Componentized Systems in Web Development
Have you been hearing “design systems” everywhere around? But you’re still wondering why you should be excited about them at all?
What is a design system anyways (and even more important — what is it not)? If you’re struggling to understand the definition, head over to Sylvee L.’s article What is a Design System? Amongst a lot of valuable information, she describes the following:
Design systems are essentially collections of rules, constraints, and principles, implemented in design and code.
Guidelines and specifications are part of it. Actual design assets and code implementations of components are also contained. The definition of all aspects and artifacts of a brand in one place.
Starting out as digital versions of printed styleguides, it now almost seems like the digital manifestations of design systems are interconnected with all the hot topics that could shape the internet in the near future. Closing the gap between designers and devs, flawless consistency across all user interfaces of a brand, personalization of layout: design systems are supposedly coming for the rescue. What’s behind this? Is it just a hype or a permanent trend with substance?
We can find answers by looking at the challenges that modern digital agencies and developers are facing when producing content for the web. If you don’t feel like reading and want the quick tour, jump to the conclusion.
Creating front ends is increasingly complex
Front end development has drastically changed in the past years. One of the underlying reasons is that devices with a myriad of screen sizes and technical setups are used to view the web.
Quality content for the web nowadays has to have a responsive layout to fit any screen. Intermittent or slow internet connections as well as low-end computing power have to be taken into consideration when designing for performance. And last but not least, following a11y standards will gain even more importance in the coming years as not only screen readers but emerging technologies like voice assistants and AI use them to interpret the web. In consequence, it takes much more to implement high quality content for the web than it used to back in the days of static 800px wide (Flash) websites.
In most cases this unfortunately doesn’t mean that time and budget for development is increased but that quality suffers.
With a design system at hand it is possible to build upon what already exists. Components do not vanish after a project is released, they can grow with time, be reused and gradually optimized to the best they can be. It becomes possible to live up to the expectations of the web as it progresses its form into omnipresence.
Project members work in silos although their roles intertwine
It is surprising how separated visual designers and developers sometimes work, even though they are contributing to the very same end product. No one can see the actual state of work of the other because they are working with completely different sets of tools. Furthermore, this means everything created before the final product has to be recreated in a different format at least once.
Tools like Sketch are starting to bridge the gaps. Simple prototypes can now be stitched together from actual layouts. Client approvals for designs can be obtained online. Handoffs for development are enriched with more and more useful technical information.
In this paradigm still only one contributor of a web project is the source of all data. A design system instead is in the center of all contributors, playing an equally important role in the tool chain of each.
Often referred to as the “Single Source of Truth”, it holds all aspects and definitions of components. And makes these infos available to everyone involved, in the format they need it in. Additionally, it increases communication and transparency between contributors. Everyone works into the very same space.
Modularization of content on the web is important
Modularization is the prerequisite for reusability. Reusability is required to keep efforts low, gradually increase quality, and to keep all target media consistent in their UI. Also, modularization of contents unlocks flexibility in order. Components do not depend on what comes before and after them in the layout anymore. They can be puzzled together in whichever combination is necessary.
With the help of a design system, contents are split into components, each to be looked at and worked with separately to a certain extent. It forces all involved parties to stop thinking in pages, and quit interweaving what can only be reused when separated.
AI is coming to the internet
Furthermore, breaking things up into components is the foundation for an automatization of the web.
By making contents available in a scannable and modular way, design systems serve as the pool that components can be picked out from. They can then be combined in different ways. To automatically convert a scribble to a prototype. Or to generate user interfaces for different target media. Or rearrange layouts to be tailored to the needs of the specific viewer.
Conclusion
Design systems help to ease some of the most hurtful pains in current web development.
- Once a design system is established, the time to develop a new product with it is significantly reduced.
- Through avoiding to reinvent the wheel and gradually increasing quality of the design system contents, even the demanding requirements of the modern web can be met within time and budget constraints.
- Communication and tooling gaps are closed. All people involved in a project use the same terminology (the one that is used in the design system) which saves time and confusion.
- Centralized management of a brand leads to consistency across all user interfaces that belong to that brand.
- Generic components in a design system could even automatically be combined in endless layout variations.
The web of the future consists of microservices, stitched together on the fly, in large parts interconnected by AI. Virtually all technology in our environment will be “smart”, connected, and tweaked to save us time and ensure our comfort. Often without explicit interference of a person. Design systems are a fundamental step in this direction. They provide the puzzle pieces that can be modeled into anything.
