Our design system project at Bio-Rad is progressing. To this point we have had a number of meetings with the software development group to hash out how to bring over our proprietary components into the new design system, which has a project name of Dieter, for Dieter Rams.
After getting a skeleton Angular Material app up and running on our localhost, we began gathering information for the first three sections: brand guidelines, written guidelines and the first Angular Material component: the button. While these three pages had enough content to assemble a fairly comprehensive page, we also began initial discover of what would be required to bring on the first proprietary Angular component, a select element.
For all these sections of our design system, our strategy is first to gather the core content from previously-provided ad hoc guidelines, organize it and add/trim as necessary. We will then go back to those interdisciplinary sources and solicit further feedback, and then bring them all together as a greoup of design system stewards.
As our process unfolds, here is the first pass at the page for buttons. We included all the variations in our application, as live, interactive Angular Material components along with narrative explaining how to use them and relevant documentation.
I think it’s a great start!
Image: Unsplash, Melinda Martin Kahn