WHERE I STARTED
Okay, so here we go down memory lane. Back in my days as a design student in college, we were always told to have consistency in our design compositions. Everything from color, typography, imagery, weights of lines, balanced use of similar shapes. But then in senior year, the professors allow us to break out of the mold. Be bold, experiment, “don’t conform, and settle for the usual.” Design school was a meat grinder for my mind. It was boot camp with strict drill sergeant mentalities.
This all changed when I went out to the real world. At every design conference I visited and every prominent designer studio I ever visited, things were not consistent, things worked wild. Use of only 3 typographical fonts per print piece and only 3-4 shades of color, or the use of 1-2 primary images were not the rules. Clients and end-users alike dictated the rules. From their branding to their business philosophy and identity.
So where are we at now? How has the design, UX, and UI landscape changed? What is import, what is consistency, what is a “design token?” Well, I recently came across this article from Google’s Material Design System on design tokens. The idea is that you can apply a wide variety of consistent rules in your designs (Figma, Sketch, Adobe XD, etc.) or your code base with CSS frameworks methodology like BEM (make sure to add comments and notes in your code).
HOW ARE THEY APPLIED TO WEB DEVELOPMENT
Believe it or not, design tokens have been a thing in web development for well over a decade now. As developers, it has always been a constant race to keep code bases consistent, clean, and compartmentalized. The latest iteration of this phenomenon that we’ve been looking at is called web components. Dave Rupert has a good article and talk back in 2021 about web components. It’s a form of consistent code encapsulation.
At larger companies, design systems are the king of repurposing components. During my time at Red Hat back in 2018, we worked on a design system framework called Patternfly. Essentially, it’s a design and brand-agnostic framework that can be applied to any website or web application. The focus is on functionality and usability. Though the design system is developed in React, the original base of the code dates its roots back to the Bootstraps model.
PREPARING THE FUTURE
A lot of the “enhancements” that Dave Rupert mentioned in the video with Kevin Powell are brought in with JavaScript code blocks. Keeping the HTML clean from JavaScript functionality and CSS styling. Someone who has a slow bandwidth connection can still view the site, but the design is controlled by web component elements.
The other plus with web components is that if you need to repurpose the code block element(s) for a different client, it can be lightly rewritten to target specific behaviors and branding. Most of the time, clients want the same hero animation or look and feel. Some want the same cards for the profiles of executives on the About page. Then there is the tricky e-commerce setup of chips and sale items with specific hearts or thumbs-up icons.
The future of design tokens definitions is still being flushed out by Google as of right now, but building out the rules such as reference tokens, system tokens, and component tokens is exactly what Dave Rupert has been saying, “it’s all the rage!”
CONCLUSION
I think it is safe to say that in the world of design, at least in the digital realm of things, we have come full circle. Designers are not going to have a difficult time explaining to a developer their wants and needs based on client and end-user requests. The communication between these two worlds should never be a toss-over-the-fence type of deal.
A solution for any business is to create some form of a design system, design library, or components library. Whether you are a website agency, large or small corporation entity, non-profit, government, school, etc. you must invest some time within your team, design, or development department, in these methods to keep confusion from surfacing within communication lines, design sessions, and development phases alike.
Thanks for reading!