Working in Design Systems: A Developer's Angle

Last winter I joined a web development agency, Basalt, that specializes in Design Systems. Founded by three leaders in the tech industry with more than 30 years of experience between them, Basalt is driven by the belief that Design Systems are a better way to create and manage websites. Design Systems are highly adaptive and flexible, and thus notoriously difficult to define. Here are some definitions offered by the community of experts that work on these systems:

A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive. - Nathan Curtis

The complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards. - Zack Rutherford

Working on design systems is therefore a complicated pursuit. On any given day, I may tackle:

  • front-end development (building user interface components like cards and buttons)
  • back-end development (building servers that render UI components or expose design tokens and integrating with content management systems)
  • dev-ops (setting up continuous integration, testing, and semantic versioning)
  • tooling (writing scripts to support best practices in workflows)
  • documentation (creating guidance for end users and contributors)
  • visual design (creating meaningful and effective user experiences)
  • systems design (creating code that is usable by others)
  • leadership and management change (teaching teams to change their workflows)

While I've learned a lot in the last year, one thing has become abundantly clear to me: I love working with Design Systems! Here's five reasons why:

1) Design Systems are Multi-disciplinary
Design Systems challenge the traditional division of labor in web development. The most effective design systems are the result of collaboration between coders, designers, managers, and end users. Working with such a diverse group of people is deeply rewarding. When everyone comes to the table with a different perspective on the problem, unique and creative solutions become the norm.

2) Design Systems are Future Facing
Technology changes, quickly and constantly. Not so long ago the web was just a collection of static "pages" only viewable through large desktop machines. Today the web is a collection of dynamic and rich user experiences delivered across a wide range of medium (desktop machines, tablets, smart phones, smart watches). The near future holds tantalizing opportunities and challenges (VR, flexible screens, dynamic experiences based on AI and machine learning). Design systems provide the flexibility and adaptability needed to scale and deliver as technological needs evolve.

3) Design Systems are Powerful
Design systems are thoughtful and clever collections of reusable patterns tailored to address recurring design problems. Programmers strive to write "DRY" software (Don't Repeat Yourself) and Design Systems embody that philosophy. Having a Design System empowers programmers to deliver upon their client's or employer's needs quickly and effectively. Adoption of best practices such as encapsulation and strict type definitions make the reuse and recomposition of past work a breeze. Styling is guided by intentional and well-documented design decisions, not gut-level interpretation of static mockups or wireframes.

4) Design Systems Compliment Cloud Architecture
Design Systems are complementary to modern software architecture trends. While they work just fine with the monolithic technology stacks of the past (such as Drupal), Design Systems are undeniably modern in their architectural philosophy. They do one thing, they do it well, and they integrate agnostically with other technologies. Design Systems don't care what kind of database you use, how your content is managed, where your digital assets are stored, or how your servers are provisioned. This means Design Systems are flexible, capable, and ready to taking full advantage of the benefits of cloud infrastructure and the growing number of cloud-based services.

5) Design Systems Deliver
I love making clients happy. In return for more work up front, Design Systems promise to make the whole process of front-end web development better: faster time-to-market, less bugs and regression, easier brand management, more time for customization, less costs to maintain. Every client I've worked with has had the "aha" moment when they first use their brand new Design System to build a page and the experience is so much better than what they were doing before. Nothing feels better than hearing the elation in their voices.

This list only scratches the surface of why I love working with design systems. Its an exciting time for front-end development as new technologies and approaches are improving the creation process and product quality of web experiences. I believe that design systems and design system thinking will continue to drive innovation and improvements. In the coming months, I'll be posting more about my experiences in this evolving world of web development. Follow me on LinkedIn and Twitter for more posts and upcoming speaking engagements. Want to talk more shop or have questions? Lets chat.

-Joe Karasek, Developer, Basalt