Minimal UI Design Tutorial Part 3

How to design an elegant UI? Answer: Focus on the details, distinguish between primary and secondary elements, maintain a clean layout, ensure text is easy to read, use rich colors, create natural layers, avoid excessive imagery, and add the finishing touch.

This is Part 3; see Part 1 and Part 2.

Natural Layers

• Why do some elements appear to have depth? Because they have a natural shadow effect. But is it really worth spending hours tweaking this?

• When elements are raised on the z-axis closer to the user, they attract more attention, which is also achieved through shadow.

• Advanced shadow techniques may even involve two shadows: one created by ambient light and another by direct light.

• Flat design can also convey depth; one way is through color—brighter colors appear closer, while darker colors seem farther away. Another method is using vertical offset with a solid color shadow without blur, such as box-shadow: 0 4px 0 hsl(220,8%, 80%);

• Overlay elements to create depth.

  • For example, use negative margins like margin-bottom: -72px; to overlap two background elements, or even three elements with margin: -72px 0 -72px 0;
  • Similarly, images can overlap two background areas, but to make the image clearer, you can add a solid color border for distinction.

Avoid Excessive Imagery

• Elegant design pays attention to the use of every image; you should use high-quality images, and adhere to guidelines for their use.

• When placing text over images, to enhance clarity, you can:

  • Overlay a gray layer for a gray background.
  • Reduce the image contrast for a white background.
  • Adjust the image to a single color for a deeper background.
  • Add shadow to the image.

• Images have their own suitable sizes; do not arbitrarily change their scale.

  • Do not enlarge icons; you can add a solid color circle around them.
  • Do not shrink screenshots, as the text will become unreadable; instead, you can:
    • Take screenshots on smaller screens.
    • Focus the screenshot on key areas.
    • If you must take a large image, use lines to replace small text to avoid readability issues.
  • Also, do not shrink icons; redraw them as needed.

• Be mindful of user-uploaded images.

  • If sizes are inconsistent during display, it can look chaotic; use backgroundSize: "cover", backgroundImage: url(...);
  • Images blending with the original background color can look strange; in this case, using inner or outer shadows is more appropriate.

The Finishing Touch

• You don't always need to add new elements to enhance design; modifying default settings can make it look great, such as:
  • Changing bullet points in lists to icons.
  • Adding color and weight to hyperlinks, or using a stylish bold underline.
  • Altering the default settings of elements like checkboxes and radio buttons.
• Add a colored border to one side.
• Add color to the background, or low-contrast textures and illustrations.
• Design unique empty states.
• Reduce the use of borders; to differentiate color boundaries, use box-shadow, color, or spacing.
• Be unconventional; lists don't have to be single-column; they can be multi-column cards. Tables don't have to be single-row; they can be complex and colorful. Single selections don't have to be radio buttons; they can be cards.

Continuous Evolution

Design is everywhere in life; view the world through a designer's eyes, continually recording and analyzing.