The last few years have seen rapid growth, especially in javascript. People are getting more and more interested in what’s new with javascript and how to improve the readability and maintainability of JAVASCRIPT code, which is positive. However, a large number of people are increasingly ignoring the UI level. We should know that what directly affects user experience is the product interface in front of us. The beauty of UI and the friendliness of interaction largely determine the final user experience. However, it is a pity that all of these have not received the attention they should. In my opinion, aesthetic ability and a certain UI foundation should also be important indicators to measure the ability of front-end engineers.

Why do front-end engineers need basic UI capabilities

The product of the front end engineer is the interface. The UI design of an interface directly affects the user experience and is also an important factor to determine the success of a product. A lot of the time, UI and interaction design is left to the UI designers on the team and doesn’t need the front end to care, so why does the front end need to have some UI capabilities?

  1. Save labor cost and time cost: some projects do not attach great importance to high-quality UI, if at this time the front end has a certain UI foundation, can use the project UI component library to build a relatively good UI interface, you can save a lot of labor cost and time cost.
  2. Save communication costs: a normal project, even after the design draft review, will often have some local details such as small changes in requirements. If you go to the designer at this time, you often need to go through the following steps: express the request to adjust the design draft => the designer understands the requirements, make adjustments to the design draft => the front end engineer understands the changes. A designer often works on several projects, he may be working on something else, and he needs to switch projects to meet your small needs. As you can imagine, this is not very efficient, and if you can make a small UI change on your own, it will make the project much more efficient, of course, if it is only a small change that does not affect the overall design language of the original designer. As a matter of fact, this often happens, and requirements are often changed and fine-tuned during the development phase.
  3. The front end is the best person to touch the UI: as mentioned earlier, a UI designer often works on several projects, and maybe after they produce a design draft and go through a UI review, they move on to another project. The front end, from the beginning of the development phase and later in the iteration phase, is always working with the design and the page. They are the people who touch the page the longest on the whole project team, and they have a better chance than anyone else to find problems with the page’s UI and interaction. A better aesthetic front end will have more opportunities to find problems and improve the PRODUCT’S UI and user experience.

The project is often used for animation

So, as a front end, how can you improve the EXPERIENCE at the UI level? There may be many ways, but animation is definitely the most cost-effective one. Animation is important to enhance the user experience by adding comfort and making the user’s cognitive process more natural. The experience of an animated interface is very different from that of an unanimated interface.

In fact, many company UED UI design drafts do not include a description of animation. So, a lot of times it’s up to the front end to define these animations.

Use Transition to transition your CSS properties

Transition is definitely a great tool for animation, and a very used CSS property. Color, background-color, width, height, padding, margin, and so on. If you add transition, you’ll see that your components are much more elegant.

Write non-blocking animations using transform

The transform property does not affect the layout of the current page, it is rendered by the GPU and does not occupy the main thread of the JS. This is great, as it avoids some of the problems of animation causing the page to lag.

Of course, before animating a component, you have to think about why that animation exists. Not all animations are good for the user experience, and mindlessly introducing animations will make your page look bad and purposeless. So how do you measure the meaning of an animation? We can measure it according to two principles given by ants:

  • Whether the existence of a dynamic effect is reasonable: whether it has a clear purpose to facilitate the interactive experience, and there is no redundant dynamic effect.

  • Dynamic effect and performance: there can be no large fluctuation of frame loss or lag phenomenon, dynamic effect experience must be smooth, and does not affect the product performance.

Reference links:

Ant Motion – Dynamic effects specification for Ant Design and component Motion.ant. Design