Communication between front-end developers and product designers

As an Internet product designer, do you often hear such a sound when communicating with front-end developers:

--"elder sister, to point professional spirit good, this form is adaptive, you design the page is not good to expand ah ..."
--"With Ajax is not no good, but you have to tell me beforehand, you do not say how I know it, you said I know well ..."

In the face of these answers, in addition to crying no tears, do you ever think what causes such communication deviations, there is no solution to it? What knowledge does a designer need to know to work better with the front-end developers?

The first thing to say is what the difference is between the two. I think the main reason is that designers and front-end development in the Department of different responsibilities division. Usually, the product designer's output is mostly wireframe (wireframe), visual design Manuscript (mockup), etc., the front-end responsible for writing HTML,CSS code (demo), and sometimes according to the need to write program code (such as Jsp/asp/php/rails), Just look at these division of labor, we know that the different role of the product understanding and focus is very different.

According to the normal project process, the design team usually needs to design the interface mockup or demo (HTML/CSS) before the developer begins to write the code formally. However, in most cases, developers and designers need to be involved in the project upfront in order to ensure the project's progress, and most of the developers are audited through the project Plan (PRD) and the prototype review, and they are more focused on technology-achievable , and designers are more interested in understanding the project requirements of product managers and in what ways to address requirements to enhance the user experience, they are more concerned about the feasibility of creativity.

What is more disturbing is that the front-end development of "interface elements" and "interactive action" understanding and designers are very different. Unified interface elements are also good for the front-end architecture of the site, and they are more concerned with the reusability of the code. On the one hand is the CSS: front-end development to achieve the designer (or their own proud) interface design, if the new page design and the original page of the same functional elements of the design, even if it is a little discrepancy, are likely to bring a lot of duplication of work, the CSS file becomes more and more bloated. On the other hand, javascript: For many application sites, there are a lot of page interaction elements that require JavaScript. The visual or behavioral design of these interactive elements is not the same as before, it will also allow the front-end engineers to ensure the robustness of the Code to facilitate the development of back-end engineers, and to achieve some design differences in the existing code tinkering busy, the most terrible is finally submerged in the bug of the sea ... The emphasis of the interaction designer is not in the coding of the program, while focusing on how best to interact with the system, the emphasis in the design is on the ease of use of the interface elements: for example, they will take into account that not every user is a skilled user of the computer, facing hidden layers and specially designed menus may be flying blind, The user may not be able to understand the double click can automatically scroll screen or how to make automatic scrolling stop, directly to see the bottom of the results? In short, designers (even more perfectionist) will continue to refine their products to meet a better user experience.

So how do designers solve these problems? I think the most important thing is "communication", which is the most fundamental solution. In the early stage of the prototype design to ask for their own ideas of the front-end development in the technical feasibility, in the interface design process will have a lot of precision to the pixel level of standards, but also to communicate with them to understand the implementation of the Code, otherwise it is likely to do no work. After submitting the interface design, the interaction designer also wants to take the initiative, does not have the time to pay attention to the demo the realization effect (mockup and the demo is somewhat inconsistent, needs to follow up in the later stage; In addition, it involves complex interactive ways that the front end will probably forget or confuse, and need to be It is also important to establish standard document management and design specifications, but we are beginning to establish a document management approach (SVN) for design specifications and standards (Amoy and TPL schema libraries), including:

• Develop file naming standards
• Set File uniform path
• Save the original authoring file (for example, PSD, Fla source file)
• Final Document completion (approved by Product manager)
• The Visual Mode library and its corresponding Code pattern library

Of course, the front end is very busy, often to "harass" they will be despised. Communicating with them also requires skill and some basic knowledge, and I have summed up the following points to remember:

1. The page of the website is dynamic.
   Photoshop is a static thing, and a Web page is a dynamic presentation of content, layout, and interaction. Designers focus too much on the user experience level, and it's hard to be exhaustive about all the details. and the front-end (including development) need to take care of all the function points involved in the page, so in the early to consider the best comprehensive, don't let others help us clean up the mess.
2. Focus on new technologies.
   The lack of technical support for web design is always just art. Designers must always focus on new technologies and ways of interacting so that they can provide a variety of solutions when they are designed to weigh the pros and cons of finding the optimal solution.
3. Standardization and unification of interface elements.
   The front end focuses on the reusability of the Code, and designers focus on new ideas. Therefore, in the early design, we should consider which elements and interactive methods can meet the user experience and can be reused, in order to improve efficiency.
4. Team work is important.
   Designers are easily immersed in their own small world can not extricate themselves, which we often make a common problem. "Communication" is the key to teamwork, everything is in communication.
5. Believe in yourself.
   The front end usually makes judgments about the feasibility of some interactive methods for different reasons, such as the complexity of the code, the implementation of the technology, and so on. Good designers need to have some sense of advance and adventure, and when they are inspired by new technology and think it can greatly enhance the user experience, it needs to be implemented as a challenge. After a deep understanding of the technology to convince the front end together to achieve.

Well, the experience of blood and tears is my work for a long time to sum up, if you have more methods, hope to share together.