Six tips to quickly improve UI design effects

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 many practical UI & UX optimization tips. This article continues to add 6 practical suggestions. Let's take a look!

1. Use the grid system flexibly

When you use a grid system, are you strict and "standard" in your use of it, or are you free and flexible?

Based on my design experience, I suggest being flexible and not too dogmatic. For example, the 8pt grid system is the most commonly used one at present. I always tend to use the "soft grid" strategy. In other words, when choosing the spacing and margins between elements, use multiples of 8pt flexibly, rather than rigidly using only 8pt parameters.

This design method not only takes into account the aesthetics of visual design, but also makes the design fit the overall 8pt grid as much as possible in terms of data.

2. Add instant feedback to the form

Even today, we may still fill out forms with many fields in many occasions. Technically, many forms used to require users to provide information feedback after submission, but now it is relatively easy to implement real-time field verification and feedback on apps and web pages.

This design strategy is simple and not fancy, but it allows users to see helpful information as soon as possible when interacting. In many cases, a small icon and a brief text prompt can help users fill out the form better.

3. Use similar colors to match colors, which can save you a lot of trouble

For systematic projects, color matching is a troublesome matter, and the color matching strategy of similar colors is quite effective in system projects. This is largely because similar colors are not only easy to expand, but also easier to maintain overall consistency than other color matching, so as not to let the design get out of control.

Usually, we can select a main hue based on the color wheel, and then select the colors on both sides of it to jointly form the basic colors of this color scheme. Then, according to the needs of different usage occasions, we can adjust the brightness and saturation of these hues to quickly expand a complete color matching system.

4. Use visual alignment to enforce visual consistency

If you’ve read my previous posts, you’ll have noticed that I’m a die-hard fan of the grid system, especially the 8pt grid. However, even for a fan like me, it’s impossible to follow the logic of the grid 100%.

Because fundamentally, what we want is to present the UI visually as well as possible, but strict adherence to the grid sometimes cannot maintain natural visually, because grid alignment sometimes cannot achieve "visual alignment". For example, when your title and margin are set to 16px spacing, the subtitle or body under the title may need an additional 2px, that is, 18px margin, to maintain visual left alignment.

Don't stick to the grid every time, sometimes you have to be flexible.

5. Make the search box contain enough search content

If possible, make the search box as long as possible so that users can enter as much text as possible to find exactly what they want.

No one likes to have to scroll while typing in a search box because the input is too long, especially when the user needs to search for a lot of content and the website itself has a large amount of content. You can directly give users a long enough search box, or you can keep a search button at the top of the page. When the button is clicked, a search box across the page will appear, which can accommodate the text content that users need to search.

6. Give longer pages a floating navigation bar

For websites or apps with short pages, the drop-down hidden navigation is a very cool design. However, for long web pages and content, users may have a stronger and more difficult to reach demand for navigation, so using a floating navigation menu is more in line with the user experience.

Don’t let users stray away from key CTA buttons, especially those in the navigation, keep them usable and accessible.