Заказать дизайн отдельно, а вёрстку отдельно — плохая экономия

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

Ниже — цепочка, которая обычно и разворачивается.

Шаг первый: макет принят, вопросов нет

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

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

Шаг второй: разработчик задаёт неудобные вопросы

Дальше начинается сборка, и выясняется, что в макете нарисованы идеальные случаи.

• Что происходит с заголовком карточки, если он длиннее двух строк.
• Как выглядит список, когда в нём ноль элементов.
• Что показывать, если картинка товара не загрузилась.
• Как ведёт себя кнопка в момент отправки формы, чтобы её не нажали дважды.
• Что видно на экране шириной 360 точек, если в макете только версия для ноутбука.
• Куда девается фильтр, когда выбраны все значения сразу.

Каждый вопрос — это решение, которое кто-то должен принять. Дизайнер уже вышел из проекта, поэтому решения принимает разработчик.

Шаг третий: заказчик видит результат и удивляется

Сайт собран. Он работает, но выглядит не совсем как макет — в тех самых местах, которых в макете не было.

Начинается спор, и он неразрешим по существу. Дизайнер говорит, что нарисовал всё, о чём договаривались. Разработчик говорит, что сверстал ровно то, что получил. Оба правы.

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

Шаг четвёртый: считаем экономию

Сложите: цена макета, цена вёрстки, цена доработок после стыка и цена вашего времени на переговоры между двумя исполнителями, которые друг другу не подчиняются.

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

Слово противоположной стороне

Позиция «дизайн отдельно» имеет сильные аргументы, и я их признаю.

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

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

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

Как разделить и не потерять деньги

Если делить всё-таки нужно, вопрос переносится с «кто рисует» на «что входит в макет».

1. Мобильная версия каждой страницы, а не только версия для ноутбука.
2. Состояния элементов: обычное, наведение, нажатие, отключённое, загрузка.
3. Состояния экранов: пусто, ошибка, много данных, длинный текст.
4. Сетка, шрифты и отступы в виде правил, а не на глаз по каждому экрану.
5. Договорённость, что дизайнер остаётся на связи до запуска, и это оплачено.

Пятый пункт стоит недорого и снимает большую часть проблем. Именно его чаще всего и не заказывают.

Почему у нас это делается вместе

Я собираю дизайн и код в одном проекте, и главная выгода не в цене. Она в том, что решение о внешнем виде и решение о структуре данных принимаются одновременно.

Например, в админке магазина «Жук и Плут» вкладка импорта с Wildberries выглядит так, как выглядит, потому что известно, сколько полей приходит из выгрузки и какие из них владелица правит руками. Нарисовать такую вкладку заранее, не зная формата данных, невозможно — получится красивая форма не про то.

Сроки в разделе цены — лендинг 3–5 дней, сайт с админкой 7–14 — тоже отсюда: в них нет паузы на передачу макета.

Отдельный случай: дизайн админки

Разделение особенно дорого обходится там, где рисуют не витрину, а панель управления.

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

Дизайнер, который не видел этой логики, нарисует ровные поля в две колонки. Красиво и бесполезно: половина полей окажется лишней, а трёх нужных не будет.

Как проверить макет за двадцать минут

1. Откройте макет на телефоне. Есть ли вообще мобильные экраны.
2. Найдите самый длинный заголовок в вашем каталоге и посмотрите, влезает ли он.
3. Спросите, как выглядит форма после нажатия кнопки и что видит человек, если что-то пошло не так.
4. Посмотрите, есть ли экран со списком, где ничего нет.

Если на три из четырёх вопросов ответа нет, макет ещё не готов к передаче в разработку, сколько бы красивых экранов в нём ни было.

Что говорить дизайнеру, чтобы макет пригодился

Заказчик обычно формулирует задачу через референсы: «хочу как вот тут». Этого мало, потому что чужой сайт решает чужую задачу.

Полезнее дать три вещи. Первое — что человек должен понять на первом экране за пять секунд. Второе — какие возражения мешают ему написать вам, в порядке частоты. Третье — что происходит после нажатия кнопки: звонок, письмо, оплата.

Дизайнер, получивший эти три ответа, рисует структуру, а не украшение. И такой макет переживает передачу разработчику гораздо лучше.

Когда разделение сработало у меня

Честности ради: один раз разделение сработало хорошо. У заказчика был свой дизайнер, который остался в проекте до запуска и отвечал на вопросы в тот же день.

Работало это не потому, что дизайнер был штатным, а потому, что он никуда не ушёл после выдачи файла. Спорные места решались за десять минут перепиской, и ни один вопрос не превратился в переделку.

Отсюда простой критерий: разделение нормально, если у обеих частей есть общий срок и общая цель — работающий сайт. И плохо, если у дизайнера цель — сдать макет, а у разработчика — сдать сайт по этому макету.

Коротко

Разделение экономит на цене макета и тратит на стыке, где кто-то додумывает всё ненарисованное. Если делить, покупайте не картинку, а полный набор состояний плюс участие дизайнера до запуска. Разделение оправданно, когда дизайн — часть позиционирования или когда дизайнер свой и никуда не уходит после выдачи файла.