I said the same thing a long time ago about the importance of design literacy as a front end engineer, and today I want to talk about why I have that opinion

Design of generalization

In fact, design is ubiquitous in life, large to architectural engineering, industrial design, small to web design, product design. I think the essence of design is the process of understanding your (or your users’) inner thoughts. After completing the physical functions of an object, you need to consider its application scenarios and the practical needs of most users

I have lived in Beijing for many years. If you ask me what color is my impression of Beijing, I will tell you “blue” without hesitation. Some people will think it is the gray haze, some people will think it is the red tiananmen. Why is my impression blue? No matter where you go in Beijing, you will choose public transportation. All traffic signs have blue background and white foreground scenery, road signs on the ring road, subway signs and common roads. The advantage of using blue is that it is easy to identify, especially for people with abnormal vision like me. But it lacks beauty, because it takes care of the experience of the majority

I also often go to Xi ‘an. If you ask me what color is my impression of Xi ‘an, I will also tell you “dark red”. Subway signs in Xi ‘an are this kind of dark red. I’m not sure what exactly to call this color, red or vermilion? In a word, this color goes well with the tone of Xi ‘an. Whether it is the coloring of various beams, gate posts and tiles on the ancient city gates, or the color of modern subway signs, there are dark red designs everywhere. Although the design of Xi ‘an subway logo is consistent with the temperament of the whole city, its identification is poor, especially the greening in the city is better. When there are many trees, it is difficult to distinguish the green and the red logo interlaced together

From this example, we can know that design is not something that only exists in the theory or art world. Most of design comes from life. Both express people’s thinking and understanding of life

Narrow design

In a narrow sense, front-end engineers (programmers) do routine programming or software design. Here’s a truth about user experience: Most users when they don’t like your product, they just leave and give up. The user’s choice is positive, he will choose because your software is good, but he will not necessarily criticize the feedback because your software is bad. Therefore, I always think that many so-called questionnaires designed to improve user experience have no effect. On the contrary, a lot of feedback is unthought-out or personal, which can cloud our judgment

So is the code well designed, is the interaction smooth, is the experience extreme. The final step in this threshold is at the front end

Of course, the back end is also important, and the importance of the back end is a prerequisite for talking about design and experience here. Granaries are solid, etiquette is known, and many of the front-end questions in Zhihu are like “Node.js compared to Java…” I’ve never thought about it before, but I won’t talk about it in detail

The front end needs to focus on design for two reasons:

One, closer to the user. There is no doubt that the front end is the top element in the system stack of the whole software. The first user of the code they write is themselves, and the front end will have the first perception of whether a function is good or not. It also depends on the quality of the engineer’s design experience. Many things are logically impossible to separate good from bad, and some things should be self-evident:

Should the page link be opened on the current page or on a new TAB

This is a classic case of not being able to logically separate good from bad. Of course, it would be wrong for all pages to have new Windows open. I think should never be used at any time. Just look at the number of browser tabs you use every day. The actual use should be based on the user’s scene, preferences, links to content, technical implementation and other aspects of the comprehensive consideration, a one-size-fits-all approach is absolutely wrong

Pop-up layers and hover hints should be used sparingly

This goes without saying, since the mouse is the most commonly used input device on the PC. The mouseover event of the mouse can cause a lot of misoperations, and the display of floating layers can be visually annoying. Of course it’s technically possible to add a delay to the mouseover event to avoid the chance of misoperation, but I think this is a patching solution because any delay is wrong when a message is important enough, not to mention the side effects of patching

Recently I just found a note-taking application “www.notion.so”, which feels really great when I use it for the first time. Beautifully designed, interactive and animated, that’s what a great product should be

But when you use it in depth, you will find that this page is full of hover effects, prompt messages, state switch, etc. It almost all ICONS have added a function prompt or shortcut hover prompt, which in my opinion is very annoying users. The button on the left side of the menu, for example, uses the left arrow icon “<“, which is self-explanatory and does not need to be tooltip

Second, aesthetic needs. This is actually something that everyone needs to be concerned about. Many programmers can’t stand the Windows interface after using macOS for a while. In terms of aesthetic appeal alone, macOS embodies a simplicity and focus that Windows does not have. * Why does macOS mouse hover interact so rarely? * I think it’s the feeling of stability and reliability that the operating system gives users. When you are concentrating on one thing, it is better not to have any kind of interruption, such as system notifications, bubble notifications, etc., should be completely banned

Many people think that programmers don’t need aesthetics because they just implement features. In fact, even many programmers probably think the same way. But what they don’t realize is that even people who aren’t particularly interested in beauty have a basic aesthetic need, or that a person who looks like them is extremely ugly has a basic aesthetic need, a love of beauty is universal. It’s just that people like programmers write code for so long that they get so focused, they just care about the code and forget about other things that are equally valuable

I don’t mean to say that it’s bad, but I think that learning something about design while focusing on technology allows us to understand how other people (users) think, which is a form of communication with the outside world and can compensate for a programmer’s natural weaknesses

Rules of design

A lot of people who know a little about design will say something that others have learned through practice:

Rules are meant to be broken — Rules are meant to be broken

This problem was mentioned in the Design Book for Everyone. I agree with the author, that is, the premise of breaking rules should be that you know enough about what rules are and what they mean

At the same time, the beginning of the book shares another opinion, which I also agree with:

When you can name something, it’s everywhere

This is probably a lot of people have this experience, one day someone says a word you’ve never heard before, and you think it’s new, and then it pops up around you for a while

What the author means is that design is out of reach for many people not because it is sophisticated, but because you haven’t heard or seen some design rules

I don’t want to talk about the rest, but if you are interested, you can read the original book. The principles mentioned in the book remain in my mind today: intimacy, alignment, repetition and contrast

Cover:www.pexels.com/photo/black…

Welcome to follow the wechat public account “Sizero Jiulu” – to talk about the world from the perspective of programmers

The public the original: mp.weixin.qq.com/s/7ja6clYvd…

Blog post: keelii.com/2018/12/02/…