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 withmargin: -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.
- For example, use negative margins like
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.
- If sizes are inconsistent during display, it can look chaotic; use
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.