These 16 tips can easily improve the visual effect of UI design

UI 2020-07-03 1092 views 0 comments

After years of experience in design, I found that some simple visual adjustments can quickly improve the visual effect to be created.

In this article, the author summarizes some practical tips that can help you improve your current design effortlessly, and hopes to provide some guidance for you when you get started.

1. Make your elements look clearer

Use "multiple shadows" or very subtle borders around some elements (the shadows should be a little deeper than the actual shadows) to make these elements appear clearer, and pay attention to avoid dirty shadows.

2. Only one font is used in the design

It is OK to select only one font when creating a picture. Sometimes this can make the picture more powerful and consistent.

Ignore people who "always use at least 2 fonts". The combination of size, thickness and color can still produce different results.

3. Improve the guidance experience of users

Users can skip your guidance at any time, and put the "skip" link within easy reach.

4. Make sure your shadow comes from a light source

Make sure your shadows always come from only one light source. This is a simple mistake that sometimes attracts people's attention.

5. Use subtle but simple overlay layers to improve the contrast between text and image

According to the placement position of the text on the image, you can select the tried full image overlay layer, or you can select a more subtle (from bottom to top, or from top to bottom) gradient overlay layer to achieve simple contrast elements between the two.

6. Moderate use of centered text

Try using centered text only for headings and small paragraphs of text.

7. Leave blank is your friend

Well, leave it blank, negative space, you know. Use it generously or moderately, but use it well.

Even a small amount of high-quality white can make your design less depressing and look more beautiful. One of the fastest and easiest ways to improve design.

8. Darken the text on a light background

When working on a light background, do not make the text too light for users to read.

9. If the text looks a bit heavy, please lighten it

When it comes to long format content, some regular bold characters still look heavy and bright.

This problem can be easily solved by selecting content similar to dark gray (i.e. # 4F4F4F), so that the text looks easier on the eyes.

10. The smaller the font size, the higher the line height

When your font size decreases, it increases the line height, making the text more readable in all directions.

11. Select a base color and use "Hue and Shadow" to add uniformity

You don't always have to fill your design with multiple colors. If the project allows, just use the limited palette, select "Basic Color", and then use "Color and Shadow" to add consistency to your design in the simplest way.

12. Highlight the most important elements

By combining font size, thickness, and color, you can easily highlight the most important elements in the UI.

Simple adjustments can make the user experience better.

13. For consistency, please ensure that your icons have the same visual style

Keep consistent when implementing icons in the user interface.

Ensure that they share the same visual style; The same weight can be used to fill or outline.

14. Always put "call words" in the most prominent position on the screen

By using color contrast, size and labels, make sure that the "catchphrase" is as prominent as possible.

If you can, don't always rely on Icon. If you can also use text tags to achieve better user understanding.

15. Add additional visual aids to your form errors

When a user fills in any form of form, adding an error message near the operation just performed may be a simple but useful additional visual help.

16. Highlight the most common actions in the menu

When designing menus to be used inside the application, make sure that the most commonly used actions (i.e., uploading images, adding files, etc.) are highlighted on the screen.

advertisement
advertisement

Comment

Your email address will not be disclosed.