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. Прочитайте Motherfuckingwebsite и The Website Obesity Crisis.
   Если ваш сайт тормозит и заставляет компьютер включать кулеры — переделайте сайт. Если можно не использовать параллакс (обычно да), не используйте. Не отбирайте скролл у пользователя — все эти листалки вместо нормального скролла — это ужасно, правда. Так не только я думаю.
10. Подумайте, нужен ли сайт (или другая ваша работа) вообще, и именно в том виде, в котором ее просит клиент. Быть может, вместо сайта достаточно группы на фэйсбуке? Бота в Телеграме? Или хватит одной страницы вместо пяти? Стоит ли делать страницу «контакты» с сомнительной формой, когда можно указать почту внизу на всех страницах?

Автор:

Источник