How does the visual designer make the front end 100% achieve the design effect?

This is a frequently discussed issue, "Innovative design capabilities & follow-up reduction capabilities." This is a business designer, not the artist's dual skills, equally important, indispensable, and even in many cases the latter will be more force, after all, we still have to do a landing of commercial products rather than the concept of a draft. This is one of the elements that can not be overlooked within the competency model of any incumbent business designer.

　　First, the effect of difficulty to achieve

The designer's imaginative brain will burst into a variety of fantastic ideas, such as a seemingly cool animation, the results ran to the engineers, the engineers are very puzzled to say do not, or to bite the bullet to finally find unsatisfactory. So early on to achieve the basic difficulty of communication is necessary, a lot of times, cool effect is not the only way to save the design, but most of the time I prefer the simple method to solve the problem. Cool effect is often not necessary, but icing on the cake, need to do what they can.

　　Ii. Clear Specifications

No time to underestimate the norms of the force, just entered a certain period of time I often like not to do norms, move a stool directly to the development engineer before pointing point (fortunately and development relationship is better, the game good friends, otherwise I may have to live to today), seemingly very efficient, but this efficiency is only suitable for a lone fight, When it comes to teamwork, a few designers face several development or even more, and the force of the norm is very important.

Specifications to write as much as possible to develop less brain, such as the principle of interaction "don ' t make Me think" like, do not let development costs a lot of energy in the understanding of norms, norms can be more stupid than silly. Try to cite an example, as follows:

I've seen too many designers like the right picture callout specifications, in fact, the actual picture of the canvas size is the left side of the blue box range, so in the callout specification must be as shown on the left, otherwise the development also need to amount to more than your blank pixel.

Include different specifications for different situations (the dock bar), or tell the development arrangement in the Notes column (for example, control margins, horizontal average arrangement)

Iii. Language Transformation

Translate the visual language into a development language, each person's perception of the body is different, designers have received a lot of art training, the proportion of the modelling has a certain understanding, you can feel the subtle visual differences, but does not mean that you can request the development of students like you, past work experience, also often heard the following dialogue:

"God, these two charts are completely different, how can you do that?"

"Ah?" he said. I look pretty much the same.

"You're blind, so obviously different you can't see."

「。。。 」

So the need to transform the language so that development can easily understand, the abstract perceptual content into quantifiable rational numbers. For example, animation trajectory, it is almost impossible to develop and observe the trajectory, so it is necessary to transform your language to make development easier to understand.

Four, repeated acceptance

For each node to carry out acceptance, multiple acceptance can let you timely understanding of the latest developments, such as problems can be timely to make changes to feedback. Even if you do the above, development is not fully understand you want to express, so need very frequent synchronization information, instead of doing 7788, suddenly found that there are problems, then to change, time may not be enough. In addition, only to do the above, you can justly and development of responsibility, otherwise, which have the face to find others theory na.

To sum up, I believe you have understood enough to "follow up the reduction ability" to a designer's importance, will do " Good-looking "designer of this world a lot, dribbble on a grab a lot, but can do business design, the required capacity is much more than this, one does not have the matter from beginning to end qualified to complete the designer at any time is not a pass, from the result-oriented view, or even less than a" The designer who you think is a lot lower than you, has the all-round quality is the "scarce species".

———————————— I'm a split line ————————————

Also attached is the suggestion of @ Chen Tongxu (blog: www.idavidchen.com).

There are two roles and goals in this problem:

Role 1: Visual designer

Role 2: Front-End engineers (presumably Web front-end and IOS, Android development is all here)

Goal: 100% Restore design effect

Let's take a look at whether the goal setting is reliable, and depending on the target, depends on the condition. If the front-end engineer level is not enough, you in addition to let him upgrade level, want to 100% restore design effect is white said. So the following I mean the default is the front-end engineer to achieve sufficient capacity. If the capacity is sufficient, can not achieve the design effect, there may be several reasons:

The design is unreasonable and ill-considered.

Time is pressing or unwilling to achieve

Communication is not in place.

　　The design is unreasonable

The previous role 1 is visual designers, generally speaking, visual designers are using visual symbols to convey the design of various information, and throughout all types of job responsibilities, there is no strict requirements visual designers have html/css/javascript skills. In fact, most visual designers do not understand technology, like CSS box model, Float, absolute positioning relative positioning, if ... else.. Then these do not understand. This is an objective situation, if visual designers have these knowledge skills can naturally avoid some problems, but the operation of specialization, can not be forced.

In addition to raising your level of knowledge, there are other ways:

Design Review. When you are still interacting with a prototype, you invite the technical manager to reveiw together.

Once I was in a bank to implement the project, do is the Hybrid application, that is, the Web and Native hybrid, using a number of frameworks, there are some technical constraints. But the interactive and visual design process, did not communicate with the technical manager, until the visual finish, delivery to the H5 engineer, the engineer was dumbfounded, this help design blind, this can not achieve ah ... Then only the redesign, the progress has been slowed down a lot.

In the interactive phase of the introduction of technical personnel, will have great help, but also conducive to technical personnel to determine the selection of technology.

　　Time is pressing or unwilling to achieve

All projects and products will have a development plan, although in many cases the plan always keeps up with the changes (the requirements change, the online time is ahead), but in general each developer has its own priority ranking for the part they are responsible for. In the products and projects that I have done, the developer's focus in most cases is: function implementation > Effect implementation. In fact, it is more important to unify the understanding of priority.

If the development plan has been specified, at the same time the research and development personnel also recognized the delivery point, then in the development task of the Plan, visual designer Sapo roll lying to sell Meng, Xiao to love the reason, how to impress the front-end engineers, online also have a lot of colleagues experience skills, always can be achieved.

The implementation of the design, not only the front-end engineer's work, sometimes also need to cooperate backstage, want to achieve, then we have to give engineers time, can not want to run horses, and not to the horse eat grass?

At the same time, design and program are closely related, sometimes not do not want to implement such a design, but because there are some problems, such as Digg in the popular time, their chief designer and the chief programmer of the controversy between:

There is a very famous debate between Daniel Boca (Daniel Burka) (the chief architect of Digg) and Chow Seat Stump (Digg's chief programmer). At that time, Daniel wanted to make a design change on Digg's "button". For Daniel, the change is tiny, but for chief programmer Joe, even a small change in design can have a huge impact on the response time of the entire site. In order to adapt to this point of change Digg site must enhance its own processing efficiency, improve the server's internal architecture: http://tech2ipo.com

So when our team does some design consulting projects, we will bring in the technical staff.

　　Communication is not in place

Cut the picture and mark it well.

Use the language that the other person understands. There are many visual designers that have no technical basis, but understanding some of the terms is very effective for communicating with programmers. For example, there are a lot of action, you said a Half-day "from here to there","a little slower", it may be difficult to achieve the kind of effect you want. But if you say that the tension (pull) value of the animation, the friction (friction) value, the Cubic-bezier function, that program person is relatively good to understand.

can refer to this website, find a lot of animation effect name: Form follows Function

Keep following up. After the design to finish the map can not be indifferent, wait until the code finished after the proudly said: "Ah, did not follow my design effect." Ensuring the design effect is also the responsibility of the designer, creating Bug documents, mapping comparisons, and describing them, because not everyone is pixel-eyed and has a different understanding of beauty.

　　To sum up

Process: Communication-> Design Review-> delivery design-> communication-> follow-up tracking

Every job is not as simple as it seems. Design is more than just a drawing to make things look better, programmers are not just writing code (in some of our team's projects, many of the design is not reasonable where the programmer pointed out), the most important mutual communication and understanding.

In fact, I suggest that we can modify the rhetoric of this issue, what is called "how to let the front-end engineer 100% to achieve the design effect," This is not just the work of the front-end engineers, not "how to let people to achieve", but "how to cooperate" problem.