AboutProjectsResumeFilm
Giloo Design System
I created the new color palette, spatial system, and UI elements for Giloo's 2.0 online-streaming platform. The goal of this Design System is to come up with an engaging and flexible system that is easy to communicate with developers.
Foundation
Flexible
Giloo is on a mission to help documentary lovers discover documentaries that can answer their interested issues. To nail this mission, the product team will need to regularly arrange the elements in a fashion that aligns with users' behaviors. Hence the flexibility of this system cant be stressed more.
Engaging
As an online-streaming service with a vision to open a window to critical issues worldwide for users, Giloo aims to not only provide content but connect with users. Hence, this design system carries the task to engage with users with informative, effective, and appealing elements.
Spatial System
To lay a consistent experience cross platform, I lay the foundation of all interfaces through constraining their layout grid and space.
Layout Grid
Columns
To assign the pages a dynamic path to showcase the content, I created a flexible column system. The system follows the law of X(X-1). This way, at each breakpoint, the designer can either have their element taking up x columns or x-1 columns.
1440
1024
768
425
325
Margin
Margins at different breakpoint are different. However it still follows the Spacing rule (see the Spacing section).
Gutters
Set to be 8px, which is the minimum of the Spacing rule (see the Spacing section).
Spacing
The spacing rule is created to make sure the consistent rhythm for users' browsing visual experience. According to the spacing rule, all space between elements should be one of 8px, 16px, 64px, and 128px. The spacing rule is crucial when the section strives to pop out and hence not follow the column. The elements, including thumbnails, text boxes, etc., are required to strictly follow the rule. For instance, in the hero section, to concentrate on the three documentaries of the week, three thumbnails are formatted on the page, not strictly following the column but following the spacing rule.
Iconography
The design of the icons strived to be simple, informative, and ubiquitous. This way users can quickly grasp the meaning while not being overwhelmed. Since the icons can be for various usages in the platform, each scenario's spacing is also specified.
System Icons
Component
To lay a consistent experience cross platform, I lay the foundation of all interfaces through constraining their layout grid and space.
Buttons
Push Buttons
High emphasis buttons
Normal
Icon
Responsive
Outline Buttons
Medium emphasis buttons
Normal
Responsive
Icon Buttons
Normal
Small
Cards
Film Cards
Film Card L
Film Card M
Film Card Saved
Film Card Hero
Exhib Cards
Film Card Hero
Updating...