Overview

To ensure my website feels visually consistent and approachable, I built a design system from the ground up. Improving the design and development processes, while still allowing room for growth, personal aesthetic, and expression.

Goal

When building my archive-portfolio website, I encountered an overwhelming and tedious design process. As my aesthetic ideas started to diverge, it hindered sketching, designing, and developing.

To improve and ensure the design and development process is smooth and sustainable, I needed a language or system for steady developments while still allowing expression on a personal level.

Process

The first step was to understand what this system serves, which is my website. The website has certain functionalities, which were mapped to understand the fundamental expressive needs and constraints.

Next I laid out the semantic concepts of the system: this means defining constants and rules. For that I used several design principles, e.g. spacing, layout, hierarchies, color systems, and typography.

Then to test the system, prototype mockups were built, to validate whether expression is possible using the system. While building web pages ( expressions), recurring design patterns emerged and were captured to be repurposed.

Over several loops of testing the system using mockups and test code, a stable system took shape.
See the design system in action →

Results

The Project produced:

• A design system document for designers and developers alike.
• A Figma working file
• CSS stylesheets and React Components

This project was significant in providing clarity, ease of work, and the aesthetic that I wanted to express with my website. I reduced my development cycle and mental overload that came with the previous cycle, as now I can almost effortlessly express ideas and content on the web.

Reflection

This project taught me a lot. Consistency had been quietly slipping away from my development cycle before this system existed. Another important point I wanted to tackle was the mental overload I had while designing.

My overall aesthetic for my website is Stationery, and as I got more inspired by different stationery items, designs diverged more. This led to broad visual expression, yet also a tedious one to build and maintain.

By containing and converging my ideas back to something more feasible and still aesthetically pleasing, I created a tool allowing me to express myself more confidently and freely.