Varius Studio — Building a Design System
Varius Solutions, 2018 | Design Lead | Duration : 1 year
🐦 @hunterrice20
Universal Language
Products pivot, focus veers, and target demographics swivel. The malleability of startup visions might resemble that of gold, but durable design foundations withstand the creative winds as visions solidify.
Here’s a peek into my underlying thought process while forming the basic building blocks of Varius Studio.
Why?
Design is the center piece of the consumer experience. Yes, scope creep is inevitable, but as products make their way to new platforms and internal teams expand, a proper design system preserves unification, and facilitates clean code.
Over the course of several months, our product team at Varius Solutions crafted the “Wombo” design system with the intention of fostering product evolution.
Weak Design = Weak Code
Before jumping into the benefits design systems have on design teams, it’s important to point out that my primary mission while constructing Wombo was to put our development team in a position to succeed.
If you have startup experience, you understand the necessity of agility. The more developers can lean on design systems, the quicker they can move. The beauty and consistency of our Wombo design system was really a secondary result of this primary focus.
The Foundation
Wombo was constructed using our own version of Atomic Design. This is a clean way of breaking up interfaces into smaller pieces. From the bottom up, we defined elements, standardized components, and assembled layouts.
Like building a skyscraper, if the foundation is executed properly, speed is exponential. While working on Wombo, it took some time to lay the preliminary tiles, but once they were down, it didn’t take much effort to quickly fill the rest of the floor.
Elements ·
At the core of each interface live Wombo’s underlying elements: fonts, icons, colors, spacing, shadows, interactions, etc.. Individually, they’re inconsequential, but as they come together to form components, they make up the basic building blocks necessary for the assembly of interfaces.
Components⠿
These elements are threaded throughout a variety of components: text fields, buttons, menus, nav indicators, etc.. We built the Wombo component library as an evolving organism in which each new component is a sibling of the last.
Our approach to designing each component was to start with base cases, and work our way down to edge cases. For example, we tackled the most recurring active button before focusing on hover, disabled, progress, and error states.
Layouts 𝍌
Each layout, or page, is simply an arrangement of components working succinctly to guide the user’s decisions & thought processes. Ever wonder why your Ikea cart is overflowing with ceramic turtles and Cinnabons when you make the final stretch towards checkout?
A successful composition of components within a layout will tell you where to go, what to look at, and how long to look at it.
Look & Feel
While defining initial elements, and working through early components, we began to establish our look and feel. As anybody who’s been swiped left on Tinder knows, there are no second chances at first impressions.
To form a cohesive style and achieve immediate acceptance, every font, color, and shadow must work together.
Design Style
Although there are countless revisions in any product development, the most essential first step in creating a cohesive design language is choosing a specific user persona and threading it through all design decisions. This selected target demographic will impact everything moving forward from interactions & flows, to colors & general style (ex. flat vs. skeuomorphism).
Color Palette
Color has a major impact on the the way we interact with interfaces. It not only defines a brand, but it also dictates a user’s emotions and decisions throughout their experience.
For example, it’s engrained in all of us to feel relief when we see green, and tense when we see red. We’re drawn to saturation, and hesitate when we see lower opacities. We use these understandings to determine how to present CTAs, significant headlines, disabled states, and more.
I used Lyft’s https://www.colorbox.io to help define the Varius Studio color palette:
Font Family
To tie our theme together, we selected a font that is functional, fitting, and differentiating. We went with Cabin because it scales nicely, feels natural both on and off the screen, and accurately embodies the Varius tone.
Spacing
Vertical spacing gives all placement decisions purpose and deliberation.
Rhythm = Familiarity. Like a great Kanye beat, Stronger design is repetitive, familiar, and consistent.
Ratio
Threading a baseline ratio throughout, gives each element on screen a sense of belonging. I chose a ratio of 1.5 to govern font sizes, line height, component size, and of course, vertical spacing.
This ratio is known as perfect fifth.
Line Height
After selecting a body font size of 16px (preference), I calculated line height by simply multiplying:
ratio x base font-size
1.5 x 16px = 24px
Font Size
I calculated the remaining header sizes to keep the rhythm synchronized:
H1=ratio² x base font size
H2=ratio¹ x base font size
H3=ratio`⁵ x base font size
H4=base font size
H5=(1/ratio)`⁵ x base font size
H6=(1/ratio) x base font size
Conclusion
On a tight deadline, it’s natural to want to throw out fundamentals and good practice. Building a robust design system only sounds like deceleration on the path towards MVP.
The reality, however, is it pays off heavy in the long term. It allows designers to rapidly take wireframes to high fidelity, and quickly ideate in a plug and play manner.
It allows development teams to work in crisp code bases, allowing the focus to be more on logic, as opposed to individual interfaces. Plus it’s nice, as a designer, to not feel guilty about making cosmetic changes to components, knowing there won’t be any frantic sifting and repetitive copying and pasting of code.
Wombo became a language spoken throughout our Varius product team, and provided a great baseline of communication between our designers and developers.
More From Studio
Objects View
Theme Store
Build Object
Campaign Experience
