I played a vital role in crafting key features and design systems at Webstudio.
While most of my work at Webstudio was brand design, a big part of my job was solving design problems for the product itself. I worked with the Webstudio team on the design system and several features, including the Dashboard and Box Shadow controls. Shoutout to Taylor, our product designer, who I worked with closely on all things product related.
In the spirit of Open Source, I took the initiative to publish our working files to Figma Community, giving designers the ability to contribute to our project: Brand Guidelines | Design Docs | Library
Design System
Implementing and maintaining our design system was a multifaceted and ongoing job. I was responsible for our color tokens and icon library. We based our colors on the Radix color system, but had to come up with a color naming convention to suit the needs of our product. For our icons, we would use Untitled UI Icons as a starting point and modify them as necessary while maintaining visual consistency.
Dashboard
The dashboard is this interesting space in between the website (which follows the brand guidelines) and product (which has its own design system). It’s the only place in where you can see the brand font (Manrope) and the product font (Inter) working side by side.
Live Tile Problem
Apps like Figma, Procreate, and Adobe CC have live tiles that show what’s going on within the project. While we liked this solution, we decided that development time was better spent elsewhere, so I had to figure out what to put inside the thumbnails instead.
Live Type Solution
Instead of a live tile, we have typography that is based on the project title. It’s basically the first letter of each word blown up really big. By default it’s extra light, but animates to extra bold on hover. This is possible because our brand uses a variable font, Manrope.
Live Type Solution
Instead of a live tile, we have typography that is based on the project title. It’s basically the first letter of each word blown up really big. By default it’s extra light, but animates to extra bold on hover. This is possible because our brand uses a variable font, Manrope.
Dashboard Documentation
Box Shadows
box-shadow: inset h-offset v-offset blur spread color;For the box shadow section, users needed an interface to visually manipulate this CSS code. By exploring how different apps control shadows, I was able to design an interface that’s right for Webstudio.
X+Y: Although Angle + Distance is more widely used, I decided to go with X+Y. It was simpler to implement, and I didn’t find Angle + Distance to be a significantly better user experience.
Inset: Even though it’s part of box-shadow CSS, inset is not usually seen in UIs, I chose to include it because it gives users more flexibility. It’s not the most often used feature, so it’s small and to the side.
Opacity Controls inside Color Picker: Since our color picker has opacity control, having it as another input would have been redundant. This is the same color picker that is used throughout the product, so the experience is consistent.
Box Shadow Documentation
Closing Thoughts
Having used creative software almost daily for all of my adult life, I have strong feelings about how these tools should work. Getting to actually design the tools has been deeply rewarding.
One of my favorite contributions was this little button. As a user, I would get overwhelmed when there were too many local styles applied. I needed a reset button to make them all go away. I talked it through with the team, and made the case for this feature, which you can see below.