7 tips to quickly improve UI visual experience

Maybe you are a novice designer, or maybe you are a developer with rich development experience, but you have a need to make the web pages and UIs you design look more like the real thing, or at least not look like the work of an amateur.

Then today's article should be able to help you. In the UI design process, there are many techniques that do not require deep design knowledge, but they can make your UI and web interface look significantly better. When it comes to improving design, experience and skills can often help people avoid detours.

Without further ado, let’s take a closer look.

1. Button color highlights importance

When providing users with multiple choices, you can design simply and quickly by considering whether the emotions conveyed by colors are positive or negative.

In fact, the color meanings of red and green buttons have spanned the physical world and the digital design field. We can see similar designs on many physical products every day, including traffic lights, warning signs, and physical buttons.

Green means go, red means no. If users need to buy a funnel, you want interested users to click quickly, not cancel.

In addition, if your website or app involves several interactions of different importance, in addition to marking the corresponding text labels for buttons, you can also use color filling to further distinguish the hierarchical structure:

This is a simple example, with a color-filled button, a ghost button (no color fill, with a border), and a button with no border and no fill.

In a few cases, buttons that have a significant impact on the system, are destructive or restrictive, should also be highlighted, but red can be used for emphasis and warning. At this time, the relatively "non-negative" button is regarded as a less important operation:

In short, the core of how users distinguish buttons is actually based on perception rather than complex logical judgment. The basic rules of design are listed above, but what is more important is to design based on emotions and perception.

2. Use weight and darkness to differentiate between levels

Especially when constructing the visual hierarchy of text content, there are many attributes that can be used, and using only size differences to construct it seems too simple.

In many cases, we can use color, weight, and lightness to distinguish. We can make more important text larger, bolder, more vivid, or use darker black to present it.

Use these properties in combination to build visual hierarchies.

3. Use white space to isolate elements

If you want to separate two unrelated elements, using a dividing line seems to be a natural thing? Of course, but this method is really a very outdated and clumsy way of presentation. What you need is a better, more elegant, and more current way of presentation.

Instead of simply using dividing lines, use white space, or negative space, to separate them. Dividing lines are largely ugly and difficult to control visual noise, while white space is much better.

In most cases, deleting the dividing line is a quicker method, but more often you will need to adjust the size of the blank space appropriately.

Using dividers to separate content not only makes it take longer to scan the page, but the added information noise affects the overall hierarchy.

4. Use shadows instead of borders

If you want to highlight some elements, you don’t necessarily need to rely on strokes. Using shadows can achieve the same effect, and using them alone will make them look neater. Strokes + shadows will look too messy.

Using a relatively less aggressive small shadow will definitely make the effect more relaxed and look less abrupt.

5. Use color bars to enhance visual tonality

If you feel that the content area is too monotonous, you can enhance the visual attributes of this area according to your purpose. Adding a color strip on one side of the content area can enhance the visual attributes while giving the content of this block an emotional touch.

The color bar can be solid or gradient, depending on what kind of visual experience you want to convey. This color bar can also have good functionality. Of course, this is mostly used on relatively plain pages. If the page itself is already fancy, it is not very useful.

For example, you can use red and green to identify different states, or use a color bar to identify the triggered tab or control.

6. Use background color to distinguish blocks

In fact, this method is also elegant and fast for distinguishing content blocks and levels, and can almost be regarded as an effortless design technique.

In order to distinguish the elements of two different blocks, you can simply use different backgrounds to distinguish them. In essence, it adopts a card-like design idea - using different cards to classify content.

Relatively speaking, using different but less obvious color blocks as the background can not only ensure the overall neatness, but also play a role of distinction.

7. Make the most of words

Who doesn’t like beautiful fonts? Of course everyone does, but fonts have different functions. From highly readable text that presents the main body of the text to highly decorative and visual fonts, different fonts need to handle different functions.

Let’s take a quick look at a few different types of fonts:

1. Serif fonts: Serif itself means serif, and such fonts usually have small decorative serifs at the end of the characters. In addition to being decorative, serifs can also enhance the readability of the font. Common serif fonts: Georgia, Times New Roman, Cambria.

2. Sans-serif fonts: Also known as Sans-Serif fonts, they are relatively more modern. After the serifs are removed, the lines are stronger and cleaner, and they are more in line with some display needs in the digital age. Common sans-serif fonts: Helvetica, Montserrat, Gotham.

People usually think that serif fonts are more suitable for long-term reading, and they are also more commonly used in printed materials. However, the serifs and corners of serif fonts are mostly sharper, and to a certain extent, they are regarded as visual noise. In the era when screen resolution was not up to the requirements, serif fonts had great display problems. Of course, now that screen resolution has increased, this problem almost does not exist, but it still exists in small fonts, low resolutions, and small screens.

3. Handwriting fonts: Handwriting fonts are generally considered to be handwritten style fonts. When presented, there are often connected strokes, which is closer to the effect presented by traditional handwriting fonts. Handwriting fonts are more casual and interesting. Common handwriting fonts include: Alex Brush, Great Vibes, Sofia.

4. Display fonts : Display fonts are a function-oriented category, usually referring to fonts used for title display, posters, badges, etc. They are more expressive and have more prominent visual features. To put it bluntly, they are designed to attract users' attention. Common display fonts include: Algerian, Curlz, Gigi, Umbra.

In web design, in most cases, only serif and sans-serif fonts are used. In English websites, a combination of a serif font and a sans-serif font is usually used. Note that if there are fonts of different thicknesses and weights, it is better to use fonts from the same font family. In Chinese, the open source and free commercial "Source Han Sans" and "Source Hans Times" are very common choices in design.

When doing visual design, I stick to using two fonts and rarely use three fonts. The latter are mostly used in commercial or artistic projects that emphasize visuals, such as banners and posters.

Conclusion

I sincerely hope that these tips can help you make good designs, whether you are a designer or in other professions. In many cases, design is flexible, based on perception, and there are methods to follow. Especially when you carefully observe some existing good designs, you will find that there are many such tips. Observe the commonalities, perceive carefully, and summarize the experience, and you can do it too.