How front-end engineers communicate with designers

Abstract: The background of the article, from the group in the Friday night of a brainstorming thinking collision communication activities.

Article copyright belongs to a group of any students who have spoken, I just do a simple comb or finishing.

The general designer to the front-end only PSD, no other superfluous things, even the basic documents are not bothered to give. Front-end expectations of the design can be given in addition to the PSD, as well as the design of the upstream post of things passed down. Examples include: product prototypes, requirements documentation, interactive documentation, and more.

In general, before real code development is done, the front-end expectations are designed to include:

1.1 JPG files: Inside there are various PSD action decomposition diagrams, including page logic, or interactive decomposition. The designer's goal is to make a convenient copy of the design, but for the developer, if the rating is too hidden, a part of the development will be omitted.

2.1 parts PSD file: A good psd file is a file that is layered with clear, design specifications.

3.1 Requirements Documentation: requirements documentation is an introductory or logical description of the current development functionality.

4.1 Prototype Documentation: a prototype design document is generally a rough draft of the initial functionality conceived by the Product manager, which simply designs the layout or interaction, and requires a design-and-art process to become a complete interface that can be presented to the user.

Of course, all these results, need to go through a layer of meeting audit, with the approval of each project group leader by mail to each member, the most clumsy way is put on the local area network shared address can go to get PSD file.

Well, then all the intermediate requirements change, interface changes are to CC the relevant personnel, so as not to communicate again in the middle, wasting time.

The general PSD may be this:

In fact, the expectation is this:

Because the front-end to restore the page frequently to hide different layers to observe the effect or cut the picture, the designer is a combination of different layers to a piece, and the front-end is exactly a reverse process.

So a good layer structure can save a lot of time for downstream jobs. Then there is a problem, as the front-end, you for the downstream position to provide a number of convenient places?

And the company's more detailed process is this:

1, demand, product and product leader communication needs

2, product leader with development, testing, Ui/ue dignitaries, to arrange the period

3, to come to everyone together to develop, challenge product manager, with interrogates-like, product holding the requirements of the document to speak PPT

4. Demand return

5, continue to interrogates (4, 5 has been repeated)

6, the demand OK, began ui/ue design

7, review Ui/ue

8, Ui/ue return

9. Development

10. Testing

11. Return

12. On-line

13, there is a problem rollback.

In addition, the company's design is this: usually PSD to the interactive effect of the layer is done, out of JPG,

will be the default state, the interaction state, the administrator state each one, and then the window layout out of one, are done very fine.

The result is that there is no chance to make a mistake.

Some company design department has its own norms, the first of them out of the diagram are very normative,

spacing, color values, layout, fonts are not many, because the entire product multiple page style to unify,

So the more fancy it is, the more they make trouble for themselves, and they won't have a special mix of different specs to rub together.

For example, this is:

There is also a demand meeting with the product or the project will be at the time, the specific needs of the functional point first to do the feasibility of the discussion,

If development costs are too high, the demand side will often be persuaded to use alternatives.

Or some of the advanced functional modules, we will split the project, divided into several installments, first out of the core function module, on-line and then do some of the advanced requirements of the module, to achieve product iterative development.

For labeling specifications, it is recommended that:

Http://barretlee.github.io/SuperMarker/index_cn.html

Brother Beard's transduction artifact

Another point of view is from the product's height, the design, the front end, the back end should be a whole, and ultimately should result-oriented,

The output of the product is not good, as a development team is actually responsible.

In other cases, each project will have a summary of the directory, the prototype is directly provided by the demand, PSD and JPG in the design of the summary directory, our production is a summary directory, all the links of children's shoes can be very intuitive and convenient to view these files.

And then the design of the pit when communicating with the following situations:

1. Some interface out of time or the staff of their own experience quality problem is not willing to out PSD diagram, and then verbally notify the front end, so that you can change that can be, this is a pit.

In our experience, the recommendations for this situation are:

Everything must be out, and all team members agree and be enforceable.

All the fonts, spacing, colors, must be agreed and fully identified clearly.

Eliminate the practice of saying so directly.

Otherwise, the final product is made,

Product said is a set of test and measurement of a set, the development of a set, the boss saw is a set,

The possibility of rework is very high.

I feel that compared to the possibility of this rework, the front of the multi-point to do a good job of the design is understandable,

And from the whole project development cycle, it is to save the development cycle.

2. Some page designers do not take into account, for example:

Some pages do not have to be considered by the designer when there is no data, or they are not experienced.

At this time the designer must be asked to give first page or list page, Content Detail page, User Center, etc. without data,

To show that all members of the team are aware and consistent. Otherwise, after the test data is deleted, the real data is not yet up,

The boss is in a good mood to look at the time, the page overall out of control.

There is also a situation is the front-end of their entire data without the hint,

From the interactive form, there is no specification on the copy, resulting in the last step of the test when the return to re-modify, wasting time.

3. Situations where there is too much data:

Another common problem is that there is too much data or the text content is too long to open the container,

These two kinds of problems are often missed when they are actually done.

And then wait until the test to find the problem to bring.

There are two other things you might encounter:

A. Some front-end in the view of the design draft, it is inevitable to see the uncomfortable, this time from the non-professional point of view to make recommendations, but when the mention is not popular skills, prone to conflict.

The advice given at this time is:

The advice is this, unless you have done design or understand the design of the creative process, otherwise from the design point of view should not mention different opinions.

You can give constructive advice from an interaction or function or experience,

In addition, when it comes to skill, you can positively affirm the outcome of his work or effort,

And then said, I see a few questions here, communicate with you, and then cloth-cloth,

Rather than just go up and say, I feel here how how, very subjective, said that there is no standard or basis for judging.

Finally, it must be said that, according to your industry experience or self-designed standards, you certainly will not allow this phenomenon, and then you see if you want to reconsider. I just thought I'd give you a lift.

Emphasize this informal formulation, give oneself or each other to leave room, all have the space that can retreat, everybody is happy.

B. What if the customer provides a break? What experience is there in communication?

The quality of the design if there is a problem in itself, for example, do not consider adding data after the situation,

or other pages in the process of the style of the non-uniform how,

The customer is not very understanding, the initial do not want you to follow his idea.

At this point you need to stand at a higher altitude to handle the problem with skill.

For example, after you have this page and so on, the user seems to see 2 pages of the button is not the same,

Feeling very layman, resulting in the result is not in the next visit, so that users will be lost.

You see if there is any need to reconsider.

Finally design and development, last year HV in Guangzhou, Webrebuild shared his "restoration of living Design" theme, I feel very useful.

Share with you.

Restore the Live design address:

http://kejun.github.io/share2013_11/

Reprinted from: http://www.cnblogs.com/jikey/p/4102881.html

How front-end engineers communicate with designers