Why design in two modes?
Dark ui was warranted by the branding colors, in order to optimized legibility and cover more text-heavy content, we had several meeting with the client and decided to make additional light scheme.
02.
Problem
The client gave us the following proposal to work with, this project was under the span of only two months, so they want to solve this problem.
• Design the product in both dark and light mode to optimize legibility.
• Document the component usage (colors, typography, button status) for their future in-house designers.
• Solve the issue of inconsistent design.
03.
Process
After generating a light mode for the screens, we were in need of a design system that would allow us to move quickly and create prototype in a matter of several clicks. To start, I mainly focus on colors, typography and essential components. I leveraged some of the new features on Figma including variants, interactive components, and of cause , auto layout. I learned through this process is the ability to abstract components to the degree, where they would preserve enough flexibility and yet still extend to specific contextual details.
Light and dark mode design
These components were used repetitively in the community forum page, in different user login status, search bar, notification, etc. It is important to add the elements to the design system for a quick and efficient prototyping iteration.
Components
Input Form
Buttons
Navigation
04.
Visual System
Colors and grey scale
Typography
Visual direction
Lead designer proposed that we could use in-house illustrations for the header, so I made the illustrations, following the look and style of the new branding.
04.
Hand-off
At the end, We’ve made 106 small-size components, 68 mid-size components and 22 larger components, with a total of 196, complete the basic visual guide line and hand over to the client with a demonstration on utilizing the variant function with Figma. The Design system later on use by three Metaforo in-house designers, with an improvement in work efficiency.
See full example here: Figma Link
