6 tips to quickly improve UI design effects

Editor's note: When designing a UI, there are many tips that can improve the visual effects and user experience of the interface. This article from Mark Andrew sorts out 6 very practical tips for improving UI effects. The original article was first published on marcandrew.me.

When creating a practical, accessible and visually appealing UI interface, we usually only need to make limited fine-tuning to achieve quite good results. Previously, I have written a lot of practical UI & UX optimization tips (get them at the end of the article after reading it). This article continues to add 6 practical suggestions. Let's take a look!

1. Keep your message short and to the point.

Make sure the text message is short and to the point, remove unnecessary embellishments and details, make it easy for users to understand and have a direct conversation feeling.

Presenting clear and concise information to users helps them better achieve their desired goals.

2. Use 20pt font size when creating longer text

For long text content, such as blog posts and project descriptions, it is recommended to use a font size of 20 pt (or even larger) for the main text to ensure the readability of the entire content.

Of course, in specific applications, it is necessary to flexibly handle it according to the actual font settings. Some very thin fonts do not have a good reading experience at 20 pt, so you may need to enlarge them appropriately.

3. Don’t rely solely on color to convey error messages

When designing, it is important not to rely solely on color to convey information. Especially in the error message of a form, simply adding a red border to the input box is not enough to make users clearly aware of the error and how to correct it.

On the one hand, use clear guidance information to help users understand how to correct errors. On the other hand, it is necessary to consider that users with visual impairments cannot perceive information through colors.

In actual projects, using icons and text to convey information together helps make the information easier to understand and improves overall accessibility.

4. Use a 4pt baseline and 8pt grid to control vertical spacing

Speaking of fonts and typography, you can use a 4pt baseline in conjunction with an 8pt grid system to create a stronger sense of rhythm in your designs.

Use the 4pt baseline to control the line height, and use multiples of 4pt (4pt, 8pt, 12pt, 16pt, 20pt) to set the line height value.

The main reason is that in the traditional 8pt grid system, the control of line height is relatively rough and the range of options is relatively narrow. It is much better to use the 4pt baseline system alone to control line spacing.

5. Reduce the spacing and line height of title text

Unlike longer body text, title text is usually shorter, but correspondingly, because the text size is larger, you need to appropriately reduce the letter spacing and line height to ensure that the overall sense of the title is stronger.

Appropriately reducing line height and character spacing can achieve better readability and make the visual comfort stronger.

6. Use multiple shadows and subtle borders to make elements stand out

In the UI interface, you can add multiple levels of shadows to the elements, or use a very subtle 1px border (just a little darker than the actual shadow) to make them look clearer and more prominent. The shadows created by this treatment method will not appear too turbid, and can also make the overall vision clearer.