komorebi
What is it?
A color preview and play app.
Duration
2 weeks
Client
Personal project
Role
Visual design, research and development
Komorebi color play is a web-based app that empowers users to explore and create harmonious color schemes inspired by the work of Japanese artist and color researcher Sanzo Wada (1883-1967). The application allows users to select a base color, generate palettes, and convert colors to various standards while providing extensive color data and accessibility features.
Name
"Komorebi" (木漏れ日) is a Japanese word that translates to "sunlight filtering through trees" or more poetically, "the dappled sunlight that filters through the leaves of trees." The term originates from combining two kanji characters:
木 (ki) - which means "tree" or "wood"
滲れ日 (moreribi) - a combination of three characters:滲れ (morere) meaning "drip" or "seep through"
日 (bi) meaning "sun" or "day"
So, when combined, 木漏れ日 (komorebi) describes the visual phenomenon of sunlight passing through the leaves and branches of trees, casting dappled shadows and patterns on the ground below. This natural and fleeting interplay of light and shadow is often associated with serenity, beauty, and a sense of transience in Japanese culture.
The name "Komorebi" was chosen for the color play app to evoke feelings of harmony, subtlety, and natural inspiration – qualities that the application aims to embody through its intuitive design and exploration of color combinations.
1
Research & Inspiration
• Studied Sanzo Wada's "A Dictionary of Color Combinations" for color harmonies and nomenclature inspiration.
• Investigated existing color palette generators to identify gaps and opportunities.
2
Information Architecture (IA) & User Flow
•Defined key sections and features: Main Canvas, Color History, Vizualizer, Theme Changer, Display Options, Vision Simulation Tool.
• Created user flows for common tasks, such as generating a new palette or simulating visual impairments.
3
Wireframes & Prototyping
• Sketched low-fidelity wireframes to establish layout and functionality.
• Iterated on wireframes based on usability testing feedback, focusing on intuitive color selection and generation.
4
UI Design & Visual Style
• Developed a design language defined by a mixture of my personal design vision and minimalist Japanese design aesthetics.
• Created high-fidelity mockups with consistent typography, color, and spacing throughout the application.
5
Interaction Design & Prototyping
• Designed interactive elements, such as tooltips, modals, and animations, to enhance usability and delight.
• Built an interactive prototype using Figma to test design decisions and gather user feedback.
Conclusion
Komorebi is a comprehensive and intuitive color play app. By offering extensive color data, accessibility features, and a user-friendly interface, Komorebi empowers users to explore, generate, and test color palettes with ease. The application's modular design allows for continuous improvement and expansion, with plans to complete the Vizualizer tool and integrate additional features based on user feedback.