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, balance use of similar shapes. But then in the later senior years, the professors allows 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 bootcamp with strict drill sergeant mentalities.
This all changed when I went out to the real world. Every design conference I visited and every prominent designer studio I ever visited, things were not consistent, things work 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, 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 ideal is that you can apply a wide variety of consistent rules in your designs (Figma, Sketch, Adobe XD, etc.) or in 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 has 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 the functionality and usability. Though the design system is developed in React, the original base of the code dates its roots back to 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 in 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 re-written 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 profiles of executives on the about page. Then there are the tricky e-commerce setup of chips and sale items with specific heart or like icons.
The future of design tokens definitions is still be flushed out by Google as of right now, but building out the rules such as reference tokens, system tokens, component tokens is exactly what Dave Rupert has been saying, “it’s all the rage!”
CONCLUSION
I think it is safe to say that the world of design, at least on 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, 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, these methods in order to keep confusion from surfacing within communication lines, design sessions and development phases alike.
This was initially published on my site at jameslau.com (https://jameslau.com/design-tokens/). Please come by and check out more of my writing and other works!
Thanks for reading!
Top comments (3)
Interestingly your page does not seem to use any design at all... Is this kind of minimalism?
Hey there! Yeah, I'm just starting again with WordPress and theme manipulation. I'll be expanding some work. For not it is just mostly my thoughts, being poured out. :)
But you are talking about Design Tokens and Webcomponents, so it would be nice to have your page as a shining example, not just a block of plain text. :-)