I was tasked with creating the first in-house design system for Designzillas. The design system was meant to streamline design workflows, make start-to-end deliverable times faster, to standardize the usage of reusable components and font styles, and to implement standard base spacing units, font hierarchy increments, and more into the design team’s workflows.
Client
Designzillas
Project Scope
In-house Design System
Role
Design Lead
Pictured above: an overview of some of the final page layouts created with the Core design system's styles, components, and section layouts.
This project started with setting up color styles. This design system allots for three brand colors (primary, secondary, and tertiary). Each color has a lighter and darker shade with the token addition of -lighter or -darker added to its name. Next follow the neutral colors such as white, black, and shades of gray. Functional colors were also included, to be used for form errors, status warnings, and more. All functional colors must be accompanied by supporting text with a message of what the error or warning is, and optionally, an icon.
Pictured above: the color setup up of the design system.
Out of the box, the design system allots for one brand font, but more can be added. In order to fully test the flexibility of fonts introduced to the design system, they are displayed as: all capital letters, all lowercase letters, numbers 0-9, and a string of most commonly used special characters. This allows for full view of the needs of the type set in the font. In regards to font sizes, there is a default set of font hierarchy based on multiples of 8: fonts increase from 16px, 24px, 32px, 48px, 56px, and continue growing upwards in that multiple of 8. Line heights are set to 1.5 times the font size, to adhere to WCAG AA level accessibility guidelines. For accessibility purposes, no font in this design system may be smaller than 16px. In order to test color contrast, a light mode and dark mode view of fonts are included.
Pictured above: an overview of the typography section of the design system.
In order to set up the grid and spacing system, I did some math on paper to test out the best base spacing unit for the system (4px, 8px, or 16px). During testing I found out that 4px was way too tiny for a grid system (all I saw was blurry red lines), and continued on with the math for 8px and 16px grids. Then I found out the prospective screen sizes for even-columned grids based on 8px or 16px spacing, which turned out to be 1536px, 1600px, 1760px, 1792px, and 1920px. (Essentially finding out which screen sizes were evenly divisible by 8 and 16.)
Fun fact about the chosen screen sizes: 1536px is also a 16″ Macbook screen size, 1600px is the minimum Dribbble post size, and 1920px is the maximum desktop design size, so 8px and 16px grid spacing worked out nicely for the desired screens and platform sizing needed for this design system. From there I tried to set up main divider lines to set up a CSS grid style column and row layout to group the spacing blocks (creating column guidelines ranging from 10-14 columns, depending on the screen size). Here’s what I came up with:
Pictured above: images of early sketches and mathematical computations and factor trees done to get to the design system's grid and spacing system.
After all the trial and testing, the final decision for default grid setup was set to 16px. For accessibility purposes, nothing in the design system should be smaller than 16px, which also matches minimum size for typography setup, providing consistent adherence to accessibility across the design system. The default desktop art board size became 1760px for an even spread of columns, and base spacing units were set to multiples of 8 (8px, 16px, 24px, etc).
Pictured above: images of pages in the design system with the grid and columns overlay applied for layout and base spacing guideline adherence
This project started with setting up components for logo options. With the logo being used on multiple global regions (like the header, menu, footer, and more) I made sure to include all possible matchups of logo layouts, such as horizontal, vertical, and a site icon for favicons and apps. I also ensured to keep logo options flexible for whatever background color they appear on, allowing light and dark versions of logos, as well as full color.
Pictured above: A view of the logo region of the design system.
The next portion of the design system was all about reusable components. I designed components and variants for most frequently needed design elements such as: buttons, images, videos, accordions, text groups, forms, cards, products, modals, and navigational controls and pagination.
Pictured above: Some of the components of the Core design system, including: buttons, media, accordions, cards, and modals.
With styles and components established, it was time to create reusable section layouts. I established 18 out of the box section layouts included in the design system based on the most frequently used regions in the past years’ worth of designs. Sections included “Text + Image”, “Text + Form”, regions to list out team members, latest blogs, and more – all coming with their own layout variations for full flexibility.
Pictured above: reusable out of the box designed sections of the Core design system, such as text + media, text+form, maps, and team listings.
With the full list of established sections, I moved on to building page layouts. The list of out of the box pages were established based on the most frequently needed page layouts on projects from the past year of work, such as blog archive pages, contact pages, thank you pages, error messaging pages, and more. This would streamline having to redesign those pages from scratch every time we started a new project. With the addition of the styles and components, the page layouts could be easily edited to fit the brand’s needs and save designers time. This evolved into its own UI Kit within the design system for page layouts.
Pictured above: an overview of some of the page layouts established for the Core design system.