When creating a beautiful and efficient UI, you need to spend a lot of time honing the details and tweaking them along the way to keep your customers, users, and yourself happy. If you’re a designer, you know how it feels.

In the process of doing design, I discovered many practical and effective details adjustment skills, can quickly improve the visual effect of the whole design draft a grade. Top design takes you to see the relevant UI design dry goods, hope to bring you useful inspiration.

In this article, I have combed out these skills, hoping to give you some help.

1. Tricks to make elements look sharper




It’s not that complicated, just adding “multiple shadows” or using very subtle borders (slightly darker than shadows) around the edges of elements that wouldn’t normally be shaded can make the element look sharper and avoid the messy feel of diffuse shadows.

2. Design with only one font family




While it is possible to use font combinations to create visual style and contrast in style, it is actually perfectly fine to use just one font family to create the effect.

Ignore the “use at least 2 different fonts” rule, and you can still achieve great results by adjusting the weight, size, and color.

3, long text is best in 20pt float




For long text, such as blog posts, project descriptions, and content that users need to read for a period of time, it is best to use 20 pt text parameters in the body of the text.

Of course, the 20pt parameter is not fixed, but can be flexibly adjusted according to the actual effect, considering the use of scenarios, font style differences. Over the last 10 years, there are still a lot of websites that follow the tradition of using 18pt size, and the reading experience is terrible.

4. Provide an optional new user boot process




When a user first installs an APP or enters a website, a new user tutorial is usually provided to guide the user through the product and interaction.

But! It is not necessary for every user to finish watching the tutorial, so the “skip” option is provided in the interface, so that users have the right to choose. At the same time, the “skip” button should be at the bottom of the interface as far as possible. After all, in this era of large screen, the most convenient interaction area for fingers is mainly concentrated at the bottom of the screen.

5. Unified light source for shadows




This is an advanced technique for unifying the experience, and some users may feel strange when the light sources of UI elements are not aligned. But if the light source is unified, it can bring a strong sense of consistency to the experience of the APP.

6. Use subtle overlay layers to improve contrast




Contrast between the text and background is not always ideal, this time you can add a color overlay, but try not to use pure color, the superposition layer with a gradient from down to up or down from the top to change, on the one hand, to optimize the contrast between the elements, also can ensure the natural and comfortable.

7. Use center-aligned text with restraint




Center-aligned text typesetting is not to be discouraged, but to be used with restraint. Try to use center text only for headlines and small blocks of text, and follow the universal left-aligned formatting for everything else.

8. Don’t be afraid to use white space




White space is the most important element in typographic design. Please do not be too cheap, do not excessively pursue the saturation of information, try to make the interface breathing sense, in this era of information overload, try to give users a comfortable and transparent experience. Let the line height be at least 1.5 times the height of the text, based on the principle of proximity, on the premise of reasonably grouping elements, let elements and groups between groups, not too dense.

This is one of the fastest ways to improve your design sense.

9. Deepen the text on a light background




Designers now know better than to use plain black text on a light or white background. They usually use gray or use transparency to control the shade of text, but a lot of times, for presentation purposes, many students use gray text that is not very readable.

In order to improve the actual experience and effect, ensure the accessibility of the text content, appropriately deepen the gray of the text, and achieve excellent visual experience on the premise of ensuring the color contrast and the sense of layering with other texts. For more information about design, you can go to the first-class design network, and a large number of high-quality design materials are waiting for you.

conclusion

To make the UI experience better, in many cases, you need to polish the details. There are many tips like this, which I will add later.