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.