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

Column

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.

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).

1440

1024

768

425

325

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.