Skip to main content

Minimal UI Design Tutorial Part 2

· 2 min read

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.