Skip to main content

Minimal UI Design Tutorial Part 3

· 3 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 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.