UI Design Minimalist Tutorial Part 1

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 hierarchies, keep images appropriate, add finishing touches, and ensure sustainability.

Focus on the Details

1. Start with functionality, not layout.
2. Begin with the details and work from grayscale; this forces you to clarify the hierarchy, layout, comparisons, and sizes before considering color.
3. Avoid over-designing, as a product that users can actually use is far more important than design.
4. Iterate in small steps; people often underestimate the difficulty of implementation.
5. A product's personality is determined by elements such as font, color, border radius, and voice. For example, round shapes feel lively, while straight and thin shapes feel serious; blue is safe, gold feels expensive and complex, and pink is playful. Be careful not to borrow too much from your competitors :)
6. Limit choices by pre-setting common parameters; this makes it look better and easier to implement.

Distinguish Between Primary and Secondary Elements

1. Human attention is limited; having too many focal points is equivalent to having none.
2. Size does not equal importance; consider using two to three font weights and two to three colors.
3. You can use gray text on a white background to downplay text, but avoid using gray text on a colored background; instead, use colored text on a colored background.
4. Mix weak and strong elements rather than relying solely on one or the other.
5. Try to avoid labels (label: blah); sometimes you don't need a label and can go straight to the value; at other times, you can form a short sentence with the label and value; strengthen or weaken according to the importance of the label and value.
6. The size of document tags does not equal the size of the UI; for instance, while you often use h1 for page titles, the actual importance of a page title may not warrant such prominence, so use regular size and font instead.
7. Weight and color can both serve to strengthen or weaken elements; consider them together.
8. If there are three parallel buttons for actions, distinguish between primary, secondary, and tertiary.

Maintain a Clean Layout

1. Start with a loose layout, as reducing spacing is easier than increasing it.
2. Select spacing from the design system.
3. You don't need to occupy the entire screen; you can center elements or add columns.
4. Some elements should not use proportional sizing but fixed widths, such as a left navigation bar or the width of an icon occupying a column; forms should not be resized unless absolutely necessary.
5. Avoid scaling all parameters of a component uniformly; instead, design specifically for different sizes.
6. Related items should be grouped together, while unrelated items should be spaced apart.

Ensure Text Readability

1. Choose font sizes from the design system; avoid using em as it is a relative value based on the current font.
2. Select a good font; starting with system fonts or popular fonts is always a safe choice; some fonts are designed for headings, with shorter horizontal spacing and shorter lowercase letters; others are designed for small sizes, with larger horizontal spacing and taller lowercase letters; learn from excellent designs and develop your intuition.
3. Ensure that text paragraphs are not too wide.
4. Align different text at the same level using baseline alignment (align-items: baseline) instead of centering.
5. Line height affects whether users can easily shift their gaze to the next line; use 2x line height for wide paragraphs and 1.5x for narrow paragraphs; use larger line heights for small text and smaller line heights for large text.
6. Not every hyperlink needs color or underlining.
7. Short paragraphs can be center-aligned, while long paragraphs should be left-aligned; numbers should be right-aligned.
8. If the distribution of single-line text in a paragraph is awkward due to word length, consider using hyphens: auto;.
9. Adjust letter-spacing as noted in item 2 above; if increasing it for small-sized fonts, be careful to reduce letter-spacing.