1. Говорите спасибо за работу, оплату и критику. Хвалите. К такому подходу быстро привыкаешь, работая с людьми из Европы и Штатов, и это здорово мотивирует. Прежде всего постарайтесь найти и подметить что-то положительное в работе, которую вам показали, а потом уже переходить к критике.

2. Заключайте договор, пусть даже без подписей, просто в письме и человеческим языком. Что должно быть сделано, как это будет работать, к какому сроку, что будет, если кому-то не понравится (обе стороны должны иметь возможность легко отказаться от проекта). Бейте работу на этапы и объясните, что вы работаете по предоплате 100% за каждый этап.

3. Дизайнер, не ограничивайтесь фотошопом. Разберитесь немного, как работает браузер и интернет, обязательно пользуйтесь веб-инспектором — вы научитесь менять размер шрифта и цвет плашек самостоятельно. Веб-инспектор окрыляет.

4. Разработчик и дизайнер, подружитесь. Сходите в кино, съешьте фисташковое мороженое (по личному опыту говорю). Смотрите и изучайте, как работает коллега — каждый должен немного уметь делать работу другого.

Дизайнер, графика в 90% случаев должна быть в векторе, лучше если это сразу отдельный SVG-файл для каждой иконки (ну или векторный макет, с отдельными слоями и объектами, чтобы было легко достать любой элемент).

Цвета и их оттенки как-то нужно называть в переменных, это стоит обсудить с фроентенд-разработчиком и составить общую таблицу. Воспользуйтесь инструментом, помогающим называть цвета, или вот прекрасной готовой палитрой. Идеально, если все участники проекта могут поправить файл settings.scss с цветами и размерами в Гите.

5. Дизайнер, разделите мысленно интерфейс на компоненты и блоки. Выделите три вида кнопок, подпишите, чем они отличаются, можно ли сделать их в коде одной кнопкой .button по всем параметрам, кроме размера .button--xl и цвета .button--yellow? Всегда ли кнопка будет желтой, или на самом деле она должна называться .button--warning, а цвет может поменяться в процессе работы?

Адаптивную версию не всегда обязательно отрисовывать отдельно, хороший фроентендер поймет, где брейкпоинт, и какой блок за каким должен стать в столбик на смартфоне, если на десктопе была сетка. Но основные моменты, ширину колонок и сетку, поведение меню, стоит примерно обговорить заранее. И быть готовым к тому, что большая часть задач и сложностей всплывает в процессе работы.

6. Клиент, предоставьте сразу настоящие материалы для работы — тексты, фотографии для сайта, список участников конференции. Нет, просто временно поставить «lorem ipsum» нельзя — как только начинается наполнение сайта, в большинстве случае половину работы нужно выкидывать, а это дополнительные расходы. Начините со смысла и основного содержания, потом переходите с дизайну и разработке.

Дизайн должен передавать суть. Чтобы зашел человек на сайт и сразу понял, куда это он попал, и что ему, бедному, делать со всем этим добром. Поэтому на сайте должен быть простой понятный текст. При этом текст должен быть еще и доброжелательным, да еще и коротким. Не говоря уже — грамотным. А все эти дурацкие плашки, градиенты, иконки и прочие рюшечки нисколько не помогут. Поэтому победит тот, кто сможет сформулировать свои мысли просто и ясно. И при том интересно. А тот, кто не сможет, будет всю жизнь рисовать плашки, пить водку, ездить на скутере и слушать Леонарда Коэна. Бла-бла-бла, бла-бла-бла. Еще шесть секунд, и я превращусь в старого пердуна.

Про Леонарда Коэна я говорю в аллегорическом смысле. Коэн тут ни при чем. И скутеры тоже. Не говоря уже о водке.

— Рома Воронежский, narisoval.ru

7. В первую очередь старайтесь сделать проще и доступнее для пользователя. «Вау-эффект» пусть будет на втором месте. Как быстро сайт откроется на простом телефоне с GPRS в Африке? Хотя бы базовая информация, адрес-телефон, или самый важный текст, будет виден на сайте в первые секунды? Если вы сделаете крутой скролл-эффект (не надо), он будет работать на айпаде? Незрячий человек узнает, что это кнопка «отправить», или вы сделали ей красивую анимацию при наведении, но забыли поставить button вместо div и добавить title="отправить" и aria-label="отправить"?

Кстати, люди с затрудненным зрением просят не отключать зум для сайтов на мобильных устройствах. И я прошу. Настолько, что сделал букмарклет, который исправляет это недоразумение.

Где можно использовать стандартные элементы, используйте их. Выпадающий список select, кнопка button, чекбокс, радио-кнопка. Не стоит только из-за красоты ломать совместимость со всеми устройствами на планете. Переубедите дизайнера, на то вы и разработчик.

8. Разработчик, дизайнер не просто так вымерял межстрочное расстояние и размеры шрифтов. Пиксель-перфект делать не нужно, мы не в 90-ых, но соблюдать основные параметры важно. Дизайнер, то, что очень важно в макете, стоит вынести на поля комментарием, подписать основные размеры. Разметить сетку лучше не колонками, а по ширине блоков. В своих проектах поступаю примерно так: row-s = 500px, row-m = 900px, row-l = 1200px, row-xl = 1400px.

9. Прочитайте Mother Fucking Website и The Website Obesity Crisis.
Если ваш сайт тормозит и заставляет компьютер включать кулеры — переделайте сайт. Если можно не использовать параллакс (обычно да), не используйте. Не отбирайте скролл у пользователя — все эти листалки вместо нормального скролла — это ужасно, правда. Так не только я думаю.

10. Подумайте, нужен ли сайт (или другая ваша работа) вообще, и именно в том виде, в котором ее просит клиент. Быть может, вместо сайта достаточно группы на фэйсбуке? Бота в Телеграме? Или хватит одной страницы вместо пяти? Стоит ли делать страницу «контакты» с сомнительной формой, когда можно указать почту внизу на всех страницах?