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.
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.
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.
To lay a consistent experience cross platform, I lay the foundation of all interfaces through constraining their layout grid and space.
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.
Margins at different breakpoint are different. However it still follows the Spacing rule (see the Spacing section).
Set to be 8px, which is the minimum of the Spacing rule (see the Spacing section).
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.
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.
To lay a consistent experience cross platform, I lay the foundation for all interfaces through constraining their layout grid and space.