Minimal UI Design Tutorial Part 2
How to design an elegant UI? Answer: Focus on the details, distinguish between primary and secondary elements, maintain a clean layout, ensure text readability, use rich colors, create natural layers, keep images within bounds, add the finishing touch, and ensure continuity.
This is Part 2, see Part 1
Rich Colors
-
From a designer's perspective, the HSL color wheel is more useful than RGB because its parameters are perceivable by the human eye:
- Hue refers to the position/angle of a color on the color wheel.
- Saturation indicates whether a color is gray or vibrant; 0% is gray, and 100% is the most vivid.
- Lightness indicates whether a color is black or white; 0% is pure black, 100% is pure white, and 50% is pure color on the hue.
-
You need far more colors than you think; five or six are far from enough.
- Overall, divide into three categories, each with seven color choices:
- Grays
- Primary colors
- Accent colors
- Overall, divide into three categories, each with seven color choices:
-
Select from predefined colors.
- Defining a color palette is a true test of skill, as it requires a good eye and experience.
- Start by finding the darkest and lightest colors, then look for the intermediate ones.
-
When searching for dark colors, you can slightly adjust the hue within 30 degrees to compensate for the lack of color caused by changing the other two parameters.
-
Similarly, gray does not need to be pure gray; you can add other colors. Some grays are cool-toned, while others are warm-toned.
-
To address accessibility, you don't necessarily need to only adjust saturation and lightness to make elements clearer; you can also adjust hue as long as it remains relatively clear, allowing you to maintain aesthetics.
-
Don't rely solely on color to distinguish elements; there are many other methods that can achieve even better results.