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

• 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.