How to make friends client, designer and developer

1. Say thanks for the work, pay and criticism. Praise. You get used to this approach quickly, working with people from Europe and the States, and this is great motivating. First of all, try to find and notice something positive in the work that you were shown, and then go on to criticism.

2. Conclude an agreement , even without signatures, simply by letter and in human language. What should be done, how it will work, by what time, what will happen if someone does not like it (both parties should be able to easily abandon the project). Beat the work on the stages and explain that you are working on 100% prepayment for each stage.

3. Designer, do not limit photoshop. Understand a little how the browser and the Internet work, be sure to use the web inspector - you will learn how to change the font size and color of the dice yourself. Web inspector inspires.
')
4. Developer and designer, make friends. Go to the cinema, eat pistachio ice cream (I say from personal experience). Watch and learn how a colleague works - everyone should be able to do a little of the work of another.

Designer, graphics should be in a vector in 90% of cases, it is better if it is a separate SVG file for each icon (well, or a vector layout, with separate layers and objects, so that any element is easy to get).

Colors and their shades should somehow be called in variables , it is worth discussing with the free-developer and making a general table. Use the tool that helps to name the colors, or here's a beautiful ready-made palette . Ideally, all project participants can fix the settings.scss file with colors and sizes in the gita.

5. Designer, mentally divide the interface into components and blocks. Select three types of buttons, sign, how do they differ, is it possible to make them in the code with one button .button in all respects, except the size of .button--xl and color .button--yellow ? Will the button always be yellow, or should it actually be called .button--warning , and can the color change as you work?

An adaptive version is not always necessary to draw separately, a good frondender will understand where the breakpoint is, and which block should be in a column on a smartphone, if there was a grid on the desktop. But the main points, the width of the columns and the grid, the behavior of the menu, should be roughly discussed in advance. And to be prepared for the fact that most of the tasks and difficulties arise in the process of work.

6. Client, immediately submit these materials for work - texts, photographs for the site, a list of conference participants. No, it is simply impossible to temporarily deliver “lorem ipsum” - as soon as the site content starts, in most cases, half of the work needs to be thrown out, and these are additional expenses. Start with the meaning and the main content, then move on to the design and development.

Design should convey the essence. In order for a person to go to the site and immediately understand where he went, and what he, the poor, do with all this good. Therefore, the site should be simple clear text. In this case, the text should also be friendly, and yes even short. Not to mention - literate. And all these foolish dies, gradients, icons and other thingies will not help at all. Therefore, the one who can articulate his thoughts simply and clearly wins. And while interesting. And the one who cannot, will draw dice all his life, drink vodka, ride a scooter and listen to Leonard Cohen. Blah blah blah blah blah blah. Another six seconds, and I will turn into an old fart.

I speak about Leonard Cohen in an allegorical sense. Cohen has nothing to do with it. And scooters too. Not to mention vodka.

- Roma Voronezh, narisoval.ru

7. First of all, try to make it easier and more accessible for the user. "Wow effect" let it be in second place. How fast will the site open on a simple GPRS phone in Africa? At least basic information, address, telephone, or the most important text will be visible on the site in the first few seconds? If you make a cool scrolling effect (not necessary), will it work on the iPad? A visually impaired person finds out that this is the “send” button, or did you make her a beautiful animation when you hover, but forgot to put the button instead of the div and add title="" and aria-label="" ?

By the way, people with impaired vision are asked not to turn off the zoom for sites on mobile devices. And I ask. So much so that he made a bookmarklet that corrects this misunderstanding.

Where standard elements can be used, use them. Select drop-down list, button, checkbox, radio button. It is not necessary just because of the beauty of breaking compatibility with all devices on the planet. Convince the designer, then you and the developer.

8. The developer, the designer, didn’t just measure the line spacing and font sizes. Pixel perfect do not need to do, we are not in the 90s, but it is important to observe the basic parameters. The designer, what is very important in the layout, should be put on the fields by a comment, sign the main dimensions. It is better to mark the grid not by columns, but by the width of the blocks. In my projects I do something like this: row-s = 500px, row-m = 900px, row-l = 1200px, row-xl = 1400px.

9. Read the Mother Fucking Website and The Website Obesity Crisis .
If your site slows down and causes the computer to turn on the coolers - redo the site. If you can not use parallax (usually yes), do not use. Do not take away the scroll from the user - all these listalki instead of the normal scroll - it's terrible, really. So not only I think .

10. Consider whether the site is needed (or your other work) in general , and exactly in the form in which the client requests it. Perhaps, instead of a site, a group on facebook is enough? Bota in Telegram? Or one page is enough instead of five? Is it worth making the page "contacts" with a dubious form, when you can specify the mail at the bottom of all pages?