Overview

This project involves reconstructing the New Ruten Design System for Ruten. Throughout the process, we utilized various design methods such as initial surveys and mid-term mood boards to distill the design language for Ruten's products. Ultimately, we arrived at a defined set of guidelines that will serve as the foundation for the future product design system.

Design Process

Apply theory to practice

Next, we will illustrate the process involving the color system, using the Design Language Guidebook and HSB mode color settings as the foundation for the new design system, and identifying the primary and secondary colors.

HSB mode color settings

We've fine-tuned colors for RUTEN products using the HSB model, which is more intuitive and aligns with psychological expectations. We omitted hues with lower brightness to avoid dullness and appeal more to younger users. The adjusted brightness ensures readability and usability in various scenarios. This enhances the design language, emphasizing comfort, order, playfulness, and simplicity.

Color system expansion

• Step 1: Expand auxiliary colors using the main color and extract colors based on color theory principles such as analogous, adjacent, triadic, complementary, split complementary, double split complementary, square tetradic, compound, and shades.

• Step 2: Choose perceptual vocabulary opposite to warm colors in the design language, such as rigorous, unique, control, and mastery, and select cool colors as auxiliary colors to enhance flexibility in color application.

• Step 3: Fine-tune using the Adobe Color color scheme system.

Final color system

To view the final complete color system and definition file, please click.

Deliveries