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

1. Настройте рабочую среду для удобной коммуникации

Выберите удобный для всех способ общения и визуализации идей, процесса или готовой работы. Это может быть как электронная почта, социальные сети, базовые мессенджеры: WhatsApp, Telegram, Viber, так и специализированные платформы, например, Slack, Microsoft Teams, Flock и многие другие.

2. Взаимное уважение и вежливость друг к другу

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

3. Понимание веб-дизайнером принципов верстки

Веб-дизайнер не должен уметь верстать свой макет, однако, понимать основы вёрстки для его профессии – обязательно. Отсутствие знаний базы фронтенд-разработки может привести к тому, что дизайн-макет попросту не будет подлежать описанию кодом. Вся работа пойдет насмарку, что в худшем случае приведет к потере клиентов из-за затянутых сроков, потраченных на правку макета. Поэтому важно заранее узнать у дизайнера, понимает ли он базу, и в случае отрицательного ответа быть готовым предложить обучающую информацию, или подыскать более продвинутого и опытного специалиста.

В идеале, и веб-дизайнеру, и веб-верстальщику необходимо обладать навыками обеих специализаций. Плюсов такого подхода невероятно много: совместный мозговой штурм для реализации UX, больше творческих идей, возможность увидеть ошибки и вовремя их поправить.

4. Попросите дизайнера группировать слои и давать им названия по смыслу

Чтобы с лёгкостью ориентироваться в проекте, в макете необходимо наличие иерархии слоев. Хаотичный разброс слоев приведет к потере большого количества времени на поиск того или иного элемента, или вовсе запутает вас. Поэтому предложите дизайнеру структурировать элементы в его работе, создавать группу с составляющими объекта (например, для карточки товара в группу попадут кнопка, изображение, текст и сама форма).

5. Расскажите веб-дизайнеру об оптимизации графики для быстрой загрузки страницы

Существует известный факт, что многие пользователи покидают сайт, если он не загрузится в течение нескольких секунд. Адаптированная веб-графика значительно сокращает время отклика сайта, поэтому выбрав мультимедиа оптимального веса (100-200КБ), веб-дизайнер способствует улучшению скорости загрузки веб-страницы. Однако не всегда возможно найти изображение в нужном размере. В этом случае стоит воспользоваться форматом изображения WebP, который обеспечивает сжатие изображений без видимой потери качества.

6. Пусть веб-дизайнер покажет состояния объектов (кнопки, анимации, эффекты, поля, формы)

Верстальщику важно знать, как меняется объект при наведении или клике на него. Попросите дизайнера создать дублированный слой, показав измененное состояние объекта, или описать словами, какой эффект был задуман.

7. Предупредите веб-дизайнера о необходимости предоставить вам пакет используемых визуальных элементов

Помимо макета будущего сайта, дизайнер должен передать вам все графические элементы, которые использовал при его разработке: фотографии, картинки, иконки, логотипы, а также шрифты.

8. Никогда не изменяйте макет веб-дизайнера без согласования

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


Подводя итог, отметим, что в любом деле необходимо умение общения. Гнев и войны между верстальщиками и дизайнерами, работающими над одним проектом – бессмысленная трата времени и нервов. Не бойтесь трудностей, проявляйте профессионализм, развивайтесь и учитесь новому, а главное – выражайте доброту и терпимость к другим, и ваша работа будет на высоте!