Teamwork. How to reconcile the designer and coder

The frequent complaint of the layout makers: “They make an incomprehensible layout! Indentations are dancing, headings of different sizes and styles, elements fall out of the grid! I don't want to work with them. ” Designers, at one time, complain that the maker-ups spoil the layouts.

These complaints are complementary. If you start to understand the root of the problem, then both will be guilty. How to reconcile these two front workers?

It is necessary to understand that in most cases it is necessary for both to change.
')

Designers:

1. Use mesh

It's amazing how many people who call themselves “web designers” ignore this basic element of work. The grid sets a strict horizontal hierarchy of your layout. Most web designers use ready-made nets or make their own, which gives them high accuracy and speed.
Learn how the mesh works, such as Bootstrap .

If you find it difficult to calculate the size of the columns yourself, use a special online calculator .
Adopt a 10, 8, or 4-pixel grid. In studying the 8px mesh, it helps to study the Material Design concept and this article .

2. Learn the basics of layout

You do not need to go into the details of Javascript, working with npm, git, or preprocessors. You need to master the layout in order to understand what can be done and what is not. When you yourself understand how layout is created, you will be able to objectively evaluate how complex a task you set for the coder, and, in which case, simplify it.

3. Show the state of objects in different states

It often happens that the designer does not show and does not even tell the coder about hover effects (what they will be when hovering or clicking on an object). In such cases, often the coder makes the hover effect the way he sees it in his head.

Do not make think maker-up for you. You can display the status of objects like this:

• Make one element different from the rest and throw a “hand” cursor on top of it.
• In the case of modal windows, create a separate layer for it, which can be hidden without pain, and show it with an example or through a prototype of how the window will appear and disappear.

You can also transfer all the objects for hover to a separate sheet to show their state before and after.

4. Type

Type all objects on the layout. If this is an Open Sans 1.2em header, then let it be Open Sans 1.2em everywhere. Do the same with buttons, paragraphs, leading and indents. We are not saying that everything should look the same - no. You should understand that the more typed objects you have, the easier it is for the coder to work with them. If you want to work together completely with the coder, study the Atomic design + BEM bundle.

5. Rename layers

Only lazy people didn’t say about this point, but all too often layouts come with layouts with randomly folded layers, the name of which doesn’t mean anything. Rename the layers according to their meaning and group by type. You can use both BEM syntax and generic terms like button, header, footer, and so on.

6. Collect images and icons

Collect all the icons and images from your layout and place in the project folder according to the meaning. For example, like this: img / photos / photo1.jpg, img / icons / facebook.svg and so on. This simple step will help the coder to work with the layout much faster and more efficiently when inserting graphics.

7. Create a Kit

By Kit, I mean a separate sheet in which all typed elements of the system are written: for example, headings of all levels and varieties, buttons and their variations, dividing lines, and so on. If you previously typed objects, you can easily transfer them to the Kit on a separate sheet. Thanks to this, the coder can calmly prepare the base using the BEM methodology and assemble the site like Lego cubes.

8. Comment

If you provide a static layout for the layout, try to leave the maximum number of comments on the design elements that may arise. Do not be lazy. Spend time right away and save yourself a lot of questions for the future. Most programs for creating interfaces allow you to do this in the most convenient way.

Layouts:

1. Look at the layout of the designer’s eyes

It is very important to evaluate the artwork of the designer before the start of layout. You may think that this or that object will be difficult to type out, but first understand why exactly the designer did it, and whether the picture will be as solid if you remove or change the object? Offer the designer your own version, and in most cases he will explain to you why he used such a solution, and whether it is possible to change or delete it without loss for the layout.

2. Try to draw a design

To better understand the work of a designer and appreciate his work for real, test yourself in his role. Choose any program for working with graphics that you like and draw one or several layouts, observing all the requirements that you make to the designer. Evaluate your work as an artist, and give people to the court in chat rooms, forums, friends and acquaintances. This will give you an extra reason to make sure that the designer does not eat your bread for nothing ... Well, or that the artist has always slept in you.

3. Do not make decisions for the designer

Very often when drawing on a mock-up, layout designers neglect some “trifles” and do not impose them. They believe that the designer just got carried away, and painted unnecessary "hotties". Not! A good designer studies the product for which he will draw the design, thinks over the elements, the composition, places everything on this layout and creates a single picture. If you have any doubts about the changes in the design, be sure to coordinate them with the designer.

4. Maintain dialogue

Discuss the design. After receiving the layout, evaluate it (observing the first item), and tell the designer where and why you need to make edits. What is an adaptive mesh and why it is specifically needed. Clarify controversial points: it is possible that the designer deliberately destroyed the rhythm of the composition, and not just admitted carelessness. If a button, link, or picture does not have a hover effect, ask how it should look or where it is drawn. Be sure to discuss controversial issues, then not only your work, but also the work of the designer will improve.

5. Discuss common tools for the job.

Layout designers often had to get layouts in inconvenient formats for layout, in which it is quite problematic to look at sizes, colors, shadows or indents. Decide with the designer which program is best for both. A variety of software on the market makes it easy to do this. Already in the question of creating user interfaces you have a choice between Adobe products (for example, Adobe XD), Sketch, Figma or Framer (which just recently released the opportunity to create interfaces in the next release). Select one or more programs and understand how you will interact.

Conclusion

The most important thing in the work of two front-line workers is to understand the capabilities of each other and communicate. As in any relationship, there must be consistency and streamlined communication. Start to implement these items one by one or all at once, and then the work will bring you sincere pleasure.

Grigory Mochalin and Ilya Dzenski worked on the article.