Footnote

UX/UI Design  •  Design Systems  •  Icon Design  •  Illustration
A concept note taking application to empower product development with project-based notation and unique referencing tools
I designed Footnote to explore advanced design systems composed of hierarchical text, scalable spacing values, standardized color, and consistent illustration + iconography style.

The challenge of creating and implementing a design system across the scope of an application impressed on me crucial knowledge to building scalable systems from the ground up.
Project Info
Custom Iconography
Typography
36px
SF UI Display
Bold
24px
SF Pro Text
Semibold
18px
SF Pro Text
Semibold
14px
SF Pro Text
Regular
14px
SF Pro Text
Semibold
12px
SF Pro Text
Semibold
12px
SF Pro Text
Regular
10px
SF Pro Text
Regular
Spacing
4
8
12
16
20
24
32
1x
2x
3x
4x
5x
6x
8x
Creating an application-sized design system provided me with fundamental knowledge into building scalable systems from the ground up. It has proved crucial to my growth as a designer and has informed the skill I bring to any job.

Looking back on this project, I am able to think of my own work critically. If I were to simplify the system further from here, I would reduce similar type stylings and reconsider the note previews located on project tiles in the dashboard. I would also focus more on accessibility with the lighter greys in the system.

Establishing a base 4 value in the system was vital to maintaining consistency around the application. Taking base 4 further, I would derive all dimensional values in the application from it.
Reflecting

Let's work together

Like my work? Let's get acquainted
View Résumé