Как поменять местами дизайнера с фронтенд-разработчиком и сэкономить 250 часов на проекте

Фронтенд-продакшн AFFINAGE разбирается, почему при соответствии всем стандартам качества проект получается неидеальным, зачем делать рефакторинг в дизайне, и сколько стоит работа по новым правилам.

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

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

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

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

Представьте стандартную картину работы над новым проектом:

• Дизайнер создаёт красивый макет в соответствии с пожеланиями заказчика.
• Верстальщик получает макет и должен повторить все идеи дизайнера даже если они не могут быть реализованы технически или будут затруднять использование готового продукта.
• На этапе вёрстки многие задумки дизайнера теряются из-за плохо продуманной идеи и неверно подготовленного макета.
• На выходе заказчик получает совсем не то, чего ожидал.
• Работа над проектом потребовала больше времени и сил, чем планировалось.
• Лимит ресурсов превышен, уровень удовлетворенности клиента низкий.

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

Понятие «рефакторинг» постепенно перебирается из терминологии программистов в повседневную речь — и это неудивительно! Ведь это слово как нельзя лучше подходит, когда мы говорим о разумном и максимально логичном упрощении какого-либо процесса, продукта или описания.

Именно этот принцип мы применили и по отношению к digital-дизайну: как и в программировании, этот подход позволяет исправить исходный макет таким образом, чтобы он стал аккуратным, понятным и удобным для всех специалистов , и ничем не отличался от исходной «картинки»!

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

Кроме того, для ускорения работы над макетом, мы создали чёткую систему гайдлайнов, которая стандартизирует каждый прототип (элемент) макета.

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

Чтобы наглядно продемонстрировать, каких результатов можно добиться реализуя наш подход к работе с дизайном, мы подготовили сравнительную таблицу. Здесь представлены данные по двум проектам, близким по объёмам и функциям.

Проект №1: начало 2019 года. Работа в старом формате

• Отрисовка макетов (86 страниц) — 381 час
• Экспорт макетов (изображения) — 4 часа
• Экспорт макетов (разметка) — 30 часов
• Вёрстка макетов — 516 часов

Итого: 931 час

Проект №2: начало 2020. Работа в новом формате

• Отрисовка макетов (86 страниц) — 403 часа
• Подготовка макетов и компонентов к экспорту — 11 часов
• Экспорт макетов (изображения) — 4 часа
• Экспорт макетов (разметка) — 0,5 часа
• Вёрстка макетов — 249 часов

Итого: 667,5 часов

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

В итоге мы получили впечатляющие результаты: нам удалось сэкономить 250 часов работы над новым проектом! Но мы не собираемся останавливаться на достигнутом и продолжаем улучшать работу новой технологии.

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

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

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

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

20 августа мы проводим бесплатную онлайн-конференцию Design is Frontend, где выступят спикеры из НТВ/Ведомостей, JAMI, AGIMA, AFFINAGE и Voximplant. Поговорим о неверстабельном дизайне, кликабельных прототипах, анимации интерфейсов и взаимодействии дизайнеров с фронтенд-разработчиками. Приглашаем всех неравнодушных к дизайну и верстке обсудить насущные проблемы :)

#дизайн #верстка #фронтенд #разработка #бесплатная_конференция #designisfrontend