Настраиваем взаимодействие между дизайнерами и верстальщиками

Дизайнер подготовил аккуратный и проработанный макет, а верстальщик допустил кучу ошибок. Или наоборот — дизайнер отдал в работу невыполнимые или непродуманные макеты. Знакомо?

Как избежать недопонимания, настроить взаимодействие и решить задачу клиента — в этой статье своим опытом поделились специалисты из Reactive, Aic, IT Test, Аспро и MetaLamp. Читайте рекомендации дизайнерам и верстальщикам, а в конце материала — скачивайте чек-лист работ по дизайну.

В Reactive я провёл три интервью с нашими фронтенд-разработчиками, чтобы понять — как нам, дизайнерам, готовить макеты к вёрстке. Ребята на примерах наших текущих проектов объяснили, какие ошибки в дизайне мы допускали и как их избежать в дальнейшей работе. В итоге получилось три текстовых файла, которые я отправил изучить всей команде дизайнеров.

Общаться — самое лучшее, что можно сделать для выстраивания нашего взаимодействия. И главное — не бояться задавать вопросы.

Я разделяю совместную работу дизайнера и верстальщика на две части: подготовку материалов к разработке и качественный процесс коммуникации (авторский надзор и синхронизации на каждом этапе разработки).

На первой стадии нужно очистить макеты от лишнего: правильно переименовать слои и компоненты («frame 127690» → «input»), убрать лишние группы и фреймы, собрать макеты таким образом, чтобы было понятно, где начало и конец каждого флоу.

Также важно создать UI-кит с вариантами компонентов, всеми цветами, стилями текста. Всё это нужно сделать, учитывая различные сценарии использования. В дизайне важно предусмотреть мелочи, с которыми будет работать верстальщик: система сеток, кратные значения в отступах и размерах объектов, гайдлайны — это все атрибуты внимательного подхода к макетам, которые упрощают и ускоряют работу фронтендера.

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

Хороший макет — предсказуемый макет, где прослеживается система, где один и тот же элемент выглядит одинаково на всех страницах.

Должны быть определены все базовые стили: заголовки, размер основного текста, списки, таблицы, ссылки, кнопки. Нужно стандартизировать все отступы. Например, они должны быть кратны 4: 4, 8, 12, 16, 20 и т.д. И если в макете случайно оказался отступ 17 px, то верстальщик легко бы смог заменить его на ближайший стандартизованный.

Также нужно определить все состояния элементов: Hover, Active, Success и т.д. Всё это должно легко считываться и быть понятно из макета. Не стесняйтесь делать пометки и напоминания. А перед началом работ по вёрстке проговорите с верстальщиком все особенности проекта, убедитесь, что всё ясно.

Позаботьтесь о верстальщике

Обычная работа дизайнера — думать о пользователях, и в работе с макетами таким пользователем выступает верстальщик. Задача дизайнера в данном случае — сделать всё, чтобы верстальщику было очевидно, как работать с макетами: как быстро найти необходимые элементы и совершить как можно меньше ошибок при вёрстке.

Так, в MetaLamp мы (дизайнеры) оставляем рядом с макетами стикеры с комментариями для разработчиков: например, когда нужно описать анимацию и подкрепить это ссылками с примерами, т.к. содержание стикеров видно сразу, и не потеряется в Figma. Иногда записываем 5-минутные скринкасты в Loom, например, когда, важно пояснить глобальные изменения в структуре файла, но нет возможности созвониться с верстальщиком. Эти небольшие дополнения помогают одинаково смотреть на вводные.

Убедитесь, что задуманные идеи реализуемы в рамках проекта

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

Чтобы верстальщику было удобно работать с макетами, дизайнеру стоит придерживаться следующих правил:

Работайте сообща, как можно раньше. Это позволит на раннем этапе обсудить будущий функционал и скорректировать его по необходимости, не тратя много ресурсов. Обсуждайте требования, предлагайте идеи, решайте задачи вместе. Это упростит и удешевит разработку.

Сопоставляйте макеты с задачей проекта

В любой точке процесса работ над проектом в MetaLamp мы стараемся возвращаться к вопросам «А какую задачу мы решаем? А какого результата нам нужно достичь?».

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

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

Спрашивайте и предлагайте

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

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

Мы в Reactive начали тестировать чек-лист работ по дизайну — он нужен, чтобы минимизировать доработки в дизайне и вёрстке, когда проект уже тестируется.

Как это работает:

Делимся шаблоном чек-листа работ по дизайну с вами. Сохраняйте, используйте и подписывайтесь на наш телеграм-канал «Проспал планёрку» — там мы рассказываем о выстраивании процессов в разных отделах IT-компании.