My Role
UI/UX Designer
Timeline
January 2022 – February 2022
Collaborators
Reginald Sacdalan — Senior Manager
Ivan Song — UI/UX Designer
—Context
UBC APSC is a multidisciplinary faculty offering hands-on education in engineering and applied science, with programs spanning several disciplines including: Architecture and Landscape Architecture, Community and Regional Planning, Engineering, and Nursing.
Atom is APSC’s current design system.
Despite the structured framework provided by Atom, however, there was a noticeable gap in the lack of a defined Spacing System, making it challenging to maintain consistent and harmonious layouts across the site.
Atom, UBC Applied Science’s existing design system
—Project Brief
Refining Atom’s existing Spacing System
We aimed to create a new spacing system that could be applied across all APSC websites, fostering a more cohesive visual design language while simplifying development for our team.
No spacing rules defined
With new spacing system applied
The problem:
T-shirt sizing
We were relying on the 't-shirt' spacing system, which proved difficult to scale due to its rigid set of fixed values. As a result, developers struggled to stick to consistent guidelines for when to apply each spacing value.
Spacing based on assumptions
Without clear guidelines for spacing, developers had to make assumptions about line heights and add extra margin and padding to match design specs, resulting in inconsistent spacing across websites.
Broken components
Components and content looked noticeably different across different institutions, resulting in an inconsistent brand identity and frustrating reading experience due to misaligned components and fragmented text blocks.
—Research & Requirements
“
T-shirt sizing is the way that Grommet leverages familiar clothing sizes of "small", "medium", "large" to drive the sizing and spacing of components.
via HPE Design System (ref.)
Previously, we used a ‘t-shirt’ spacing system. However, this approach was difficult to scale, especially when new values were needed between existing sizes.
As a result, components were often developed with arbitrary spacing, limiting their effectiveness and flexibility.
To address these challenges, we recognized the need for a new system that would allow for greater scalability and a wider range of spacing tokens to be added, ensuring consistency and flexibility across all components.
Let’s dive deeper...
—A Deep Dive
We used IBM’s Carbon Design System as a reference for our own spacing system.
In the Carbon Design System, tokens are categorized into spacing and layout components to address different design needs. Each token uses multiples of two, four, and eight, providing both small and large increments for creating precise spatial relationships in detailed designs.
Spacing tokens
Layout tokens
Spacing tokens are used for fine-tuning the gaps and padding between elements within components, ensuring consistent and precise alignment across the interface. These tokens support detailed design adjustments, maintaining visual harmony and balance.
Layout tokens focus on controlling the overall structure and organization of the design, managing larger-scale spacing between components or sections.
This separation allows for flexibility and efficiency in applying appropriate spacing based on context—whether it's for detailed design work or broader layout management.
—Atomic Design
The Atomic Design methodology created by Brad Frost is a design methodology for crafting robust design systems with an explicit order and hierarchy.
It’s based on the idea that designs are built like atoms, with smaller elements combining to form larger, more complex structures.
via Bootcamp
We decided to adopt this framework for our own spacing system.
The 8pt grid system
This is a design framework based on the concept of creating a visual structure using a consistent grid where each spacing, margin, or element is sized in increments of 8 pixels (or points).
—Creating Guidelines
With the above in mind, we began documenting our spacing tokens.
We categorized tokens into atomic spacers, molecular spacers, and organism spacers.
Atom spacers
Atom spacers can be used to apply space between simple UI components and basic HTML elements, such as paragraphs or text within buttons.
Molecular spacers
Molecule spacers can be used to apply space around individual components, such as tables, buttons, content cards or breadcrumbs.
Organism spacers
Organism spacers can be used to modify the page layout and apply space between entire sections of content.
Once we had established our tokens, we began breaking and testing.
We started with type styles, then moved onto components, then page layout.
We documented the spacing scale, and its usage guidelines in our Design System, Atom.
—Implementation
So, how does it hold up in practice?
We gathered feedback from both users and team members, including designers and developers, to ensure the spacing felt natural, was easy to implement, and enhanced overall usability. During the process, we also identified and addressed edge cases, resolving any spacing issues or inconsistencies that emerged when applied to different types of content or across various devices. We tackled these challenges by carefully testing and adjusting the design to maintain consistency and optimize the user experience in all contexts.
Documentation can be found here.
—Reflections
Working on design systems taught me the value of being meticulous in building a scalable and effective spacing system. This project enabled us to:
Establish a consistent spacing system
By using the atomic design framework and an 8px grid system, we established a consistent spacing system that could be applied across our components and pages.
Streamline the design workflow
The spacing system allowed us to create quick and simple components that accelerate the design process, saving valuable time by eliminating the need for constant adjustments.
Streamline the handoff process
With appropriate documentation, developers are able to appropriately use spacing components, while also improving QA efficiency by reducing the need for redlining and eliminating time spent inspecting mocks in tools like Zeplin.
—Post-Launch
During my time at UBC APSC, I worked on several websites within the faculty's portfolio. The implementation of our new spacing system sped up workflows and improved handoffs, while maintaining consistent spacing across sites and visual cohesiveness.
