When a designer meets a front-end developer

As an Internet product designer, I have never thought of the following questions when communicating with front-end developers:

-- Is it so difficult to implement the shadow of rounded corners?

-- Loading more things users can get more information, but how can we choose if the page is slow?

In the face of these problems, apart from re-thinking our design, have you ever wondered why such communication deviation occurs? Is there a solution? What knowledge do designers need to know to better cooperate with front-end developers?

First, let's start with the differences between the two. I think the main reason is that designers and front-end developers have different responsibilities in different departments. Generally, the product designer produces wireframe and mockup, and the front end is responsible for compiling HTML, CSS, and other code (demo ), sometimes the program code (such as JSP, ASP, PHP, and Rails) will be compiled as needed. by looking at the division of labor, we can see that different roles have different understandings and focuses on products.

According to the normal project process, the design team usually needs to first design the mockup or demo (HTML/CSS) interface, and then the developer starts to formally write the code. However, in most cases, developers and designers need to intervene in the early stage of the project to ensure the project progress. The difference is that most developers review and approve the Project Plan (PRD) and prototype review, they are more concerned with technical implementation, and designers prefer to understand the project requirements of product managers and how to solve the needs, so as to improve the user experience, they are more concerned about the feasibility of creativity.

It is hard to understand that front-end development has a very different understanding of "interface elements" and "Interactive Actions" from that of designers. The unified interface elements will also benefit the website's front-end architecture. They are more concerned with the reusability of code. On the one hand, CSS: front-end development should implement the interface design of the designer (or be proud of yourself). If the design of the new page is different from the design of the same functional elements on the original page, even if it is a little different, it may lead to a lot of repetitive work and make CSS files more and more bloated. On the other hand, JavaScript: For many application-oriented websites, there will be many page interaction elements that require JavaScript. The visual or behavior design of these interaction elements is different from the previous one. It also allows front-end engineers to ensure code robustness to facilitate the development of backend engineers, in order to implement some design differences, it is too busy to fix the existing code... The focus of the interaction designer is not on the coding implementation of the program, but on how the user best interacts with the system. In the design, the ease of use of interface elements should be considered: for example, they will consider that not every user is a computer-skilled user and may be blind to hidden layers and specially designed menus, the user does not necessarily understand that double-clicking the left button can automatically scroll the screen or how to stop the automatic scroll screen and directly view the bottom result? In short, designers (more perfectionists) will constantly improve their products to provide better user experience.

How Can designers solve these problems? I think the most important thing is "communication", which is the most fundamental solution. In the early stage of prototype design, we need to inquire about the technical feasibility of front-end development based on our own ideas. In the interface design process, there will be many standards accurate to pixel level, we also need to communicate with them to understand the implementation method of the Code, otherwise it is likely to be useless. After submitting the interface design, the interaction designer should also take the initiative to pay attention to the demo implementation effect from time to time (mockup and demo are more or less inconsistent, and follow up later; in addition, the front-end of complex interaction methods may be forgotten or confused, and they also need to be checked continuously ). In addition, it is important to establish standard document management and design specifications. Fortunately, we have begun to establish the document management methods for design specifications and standards (TAOS base and TPL Model Library), including:

▲Develop File naming standards

▲Set the Unified File Path

▲Save the original file (for example, PSD and Fla source files)

▲Final documents (documents approved by the product manager)

▲Visual mode library and its corresponding code mode Library

Of course, the front-end is very busy. It also requires skills and some basic knowledge to communicate with them. I have summarized the following points to remember:

1. The website page is dynamic. Photoshop presents static content, while website pages dynamically display content, layout, and interaction. Designers pay too much attention to the user experience level, and it is difficult to cover all the details. The front-end (including development) needs to take care of the pages involved in all functional points. Therefore, we should take into consideration the full consideration in the early stage. Do not let others help us clean up the mess.

2. Focus on new technologies. The lack of technical support in web design is always art. Designers must always pay attention to new technologies and interactions so that they can provide a variety of solutions during design so as to weigh the advantages and disadvantages and find the optimal solution.

3. standardization and unification of interface elements. The front-end focuses on code reusability, and designers focus on new ideas. Therefore, in the early stage of design, we need to consider which elements and interaction methods can meet the user experience and be reused to improve efficiency.

4. Teamwork is important. Designers can easily immerse themselves in their own small world, which is a common problem we often make. "Communication" is the key to teamwork, and everything is being communicated.

5. Believe in yourself. The front-end usually judges the feasibility of some interactive methods for different reasons, such as Code complexity and technical realization. Good Designers need to have advanced consciousness and adventurous spirit. When they are inspired by new technologies and think they can greatly improve the user experience, they need to regard it as a challenge. After a deep understanding of the technology, persuade the front-end to work together.

Well, I have summarized these experiences for a while. If you have more methods, I hope you can share them with me.