A while back, at work, I had a meeting with the rest of the design team about theĀ design systemĀ that we were trying to put in place. Without going into details aboutĀ whatĀ a design system is right now, in that meeting we touched on the idea of naming our system. Most of the really cool systems also have cool names. For instance, Bulb, a British electrical company, has an amazing one calledĀ Solar, and Shopifyās system is calledĀ Polaris.
A good name is one thatās aligned with your systemās (and by extension your designersā) values. Polaris is the north star, which sailors and explorers used to guide them when they were lost, and this is likely something that resonated with Shopifyās design team. When I got out of that work meeting, I started to think of what values our team held, and what words might be associated with those values. It wasnāt long before myĀ devsignerĀ brain kicked in and came up with THIS sketch:
If you associate values to random words, you can theoretically generate a good design system name based on those values. āice creamā would register higher under the āfunā value than, say, ābroccoli.ā So if your design team valued āfunā, ice cream would come out the winner, but if they valued āhealthā or something like that, broccoli would win. This is a pretty simple example, but it can also work with multiple values, or evenĀ rankedĀ values!Ā I donāt know why, but my brain just imagined a big hulking steam-powered machine that took in values on one end and spit out words on the other! After sketching this, I immediately bought a good domain name, and in the following weeks I set to work making the drawing a reality. I set up a database in Firebase, and hosted all of the frontend on Github pages, and eventually ended up with this:
I also ended up tagging over 500 different words by hand using theĀ Tagging Machine:
I actually cameĀ veryĀ close to publishing this! I just had another 200 or so words left to tag before I felt ready to put this wacky contraption into the world, and Iād even written a whole (unpublished) blog post detailing everything about the project. For some reason I never did that.
If you want, you can try it out, atĀ designsystem.nameĀ , but taking a step back now, Iād like to take the design of this silly idea just a little bit further before doing an official launch. In terms of complexity, this is definitely in the top 3 of all the projects Iāve programmed, but I also want it to look good since itās made for an audience of designers. I kind of just styled everything on the fly, directly in the code editor, and thatās not a very good way to design something.
So I made a new Figma project where Iām really starting from scratch with the design process. I made a mood board with a bunch of stolen pictures, I turned that into a colour palette, and Iāve been doing a materials study. Iām particularly proud of my polished-concrete texture. One of the great things about designing in Figma is that I know that everything I do can be translated into code, as long as Iām willing to put in the time to push those pixels with CSS and sweat the details.
Ā
The concrete material study. I looked at a lot of photos of polished concrete floors to figure out how the light bounces off the surface, and Iām pretty happy with the result! The window reflections should be more distorted, but Figma doesnāt have the tools for that right now.Ā Itāll be easy in CSS though.
I also found my dream loft, and later discovered that it was actually just a 3d render, and doesnāt exist in the real world š But like, #goals amirite?
I have a few more material studies left (tungsten, steel, and refining the aluminium and brick studies I started), then Iāll move on to components (all the buttons and levers) and then finally a responsive layout. Itās a lot of fun figuring out how to paint somewhat realistic materials with what will eventually be code.
This post is just a status update, but the next ones will beĀ real, freshĀ designĀ (and likely much shorter! š). Steel beams, here I come! š