Design System

Instead of using the typical grid-based spacing system, I opted to use a type scale based system instead, combining rhythm and gestalt’s principle of proximity.

each additional step multiplies by the ratio of 1.2, which is a minor third scale.

The reasoning was twofold: to have a consistent ‘soft grid’ that follows the typography, and for developers to have specificity in implementation. This also allows for automatic scaling based on font size.

This redesign is built on top of existing brand guidelines, following the same color scheme and typeface.

Reflection

I learned a lot about making pixel-perfect designs, working in a startup, agile setting where project scopes are not often clear. I applied all of the ideas I learned working at loopie. At the same time, I became aware that design is not just about pixel perfect pictures. I’ve made mistakes in my hand-off process and the importance of annotating designs, and the design limitations that come from the application development process.

It has been a while since I came up with this method for a design system, and within other projects I have been in, this system has not worked well as I hoped. While mathematically elegant, this design system ended up being confusing and difficult to implement, both to designers who were not used to using specific numbers (there also no way to enforce this in figma at the time), and developers who didn’t have the documentation of when and where to use this system.

As a UX designer, ultimately you are also designing not just for users and not just for the business, but also for the other designers and engineers who must implement these designs.