#Веб-разработка #Для-IT-руководителей

Дизайн сайта: почему макет согласовывают по три круга и как этого избежать

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

Три круга правок — это симптом, а не вкусовщина

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

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

Третий круг — уже следствие усталости. К нему обычно подключаются новые люди: коммерческий директор, собственник, маркетолог, который вернулся из отпуска. Каждый смотрит на макет впервые и высказывается по всему сразу, потому что не видел предыдущих обсуждений. Дизайнер получает противоречивый список: «сделать строже» и «добавить яркости» в одном письме. Разрешить такое внутри макета невозможно, конфликт лежит вне его.

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

Разработка дизайна сайта начинается с решений, а не с картинки

До того как открыть Figma, нужно ответить на несколько неудобных вопросов. Кто основной посетитель — закупщик, розничный клиент, соискатель, подрядчик? Какое действие считается успехом: заявка, звонок, скачивание прайса, регистрация в личном кабинете? Что мы говорим человеку в первые пять секунд, если он вообще не знает бренд? На этих трёх ответах держится вся первая половина страницы, и переспорить их макетом нельзя.

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

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

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

Невидимый ЛПР — главная причина третьего круга

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

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

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

Третий сюжет — смена ЛПР в середине проекта. Новый директор по маркетингу приходит со своим видением и своими референсами. Это нормальная жизнь, но её последствия должны быть оговорены: смена лица, принимающего работу, — это основание для отдельного круга правок с отдельной оценкой, а не бесплатное возвращение к нулю.

Критерии приёмки: как оценивать макет не по «нравится»

Критерии приёмки макета сайта: целевое действие на 1440 px, преимущество за 5 секунд, каталог в 2 клика, первый экран без скролла
Критерии приёмки макета сайта: целевое действие на 1440 px, преимущество за 5 секунд, каталог в 2 клика, первый экран без скролла
Дизайн можно обсуждать предметно, если заранее договориться, по каким признакам он считается принятым. Мы формулируем критерии до показа макета, обычно четыре-пять пунктов: целевое действие видно без прокрутки на экране ноутбука 1440 пикселей, ключевое преимущество читается за пять секунд, каталог доступен максимум в два клика, на мобильном первый экран помещается без горизонтальной прокрутки.

Такие критерии превращают разговор из вкусового в проверяемый. Фраза «первый экран пустоват» заменяется вопросом «видно ли за пять секунд, чем мы отличаемся от конкурента». На второй вопрос можно ответить да или нет, показав макет трём людям из целевой аудитории, и спор закрывается за пятнадцать минут вместо переписки на два дня.

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

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

Как мы ведём разработку дизайна сайта: этапы и лимит итераций

Процесс у нас разбит на четыре точки приёмки, и каждая закрывается письменно, до перехода к следующей. Сначала аналитика и структура: карта страниц, приоритеты блоков, целевые действия. Затем прототип в оттенках серого — без цвета, шрифтов и фотографий, чтобы обсуждать логику, а не эстетику. Дальше дизайн-концепция одной ключевой страницы. И только потом — отрисовка остальных экранов по утверждённому стилю.
Четыре точки приёмки при разработке дизайна сайта: структура, серый прототип, концепция, остальные экраны
Четыре точки приёмки при разработке дизайна сайта: структура, серый прототип, концепция, остальные экраны
Такое разделение снимает самый частый источник переделок. Когда цвет и структура обсуждаются одновременно, человек реагирует на картинку целиком и не может отделить «неудобно расположены фильтры» от «не нравится синий». На серых прототипах эти вопросы разводятся, и структурные правки стоят дёшево — перенести блок в прототипе занимает минуты, а в готовом макете с иллюстрациями и анимацией это уже часы.

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

Перед стартом мы просим заказчика подготовить минимальный набор входных данных — именно он экономит больше всего времени:
  • список из 3–5 сайтов, которые нравятся, с пояснением, что именно нравится в каждом (структура, типографика, тон), и 2–3 сайтов, которые категорически не подходят.
  • фирменные материалы: логотип в векторе, брендбук или хотя бы палитра, реальные фотографии продукта и команды.
  • реальные тексты хотя бы для главной: заголовок, описание услуг, преимущества с цифрами.
  • имя человека, чьё «да» финальное, и его согласие участвовать в двух точках приёмки.
  • перечень технических ограничений: CMS, существующие интеграции, требования к доступности и скорости.
Что подготовить заказчику перед разработкой дизайна сайта: референсы, брендбук, тексты, ЛПР, технические ограничения
Что подготовить заказчику перед разработкой дизайна сайта: референсы, брендбук, тексты, ЛПР, технические ограничения

Пример с проекта: как три круга свернулись в один

Приведу случай из нашей практики. К нам пришла оптовая компания с редизайном сайта. Предыдущий подрядчик сдал макеты за два месяца вместо запланированного одного, потому что каждый показ собирал по 40–60 комментариев от шести разных сотрудников, и половина комментариев противоречила друг другу. Бюджет вырос примерно на 35%, сайт так и не запустился.
Кейс: как три круга правок дизайна сайта свернулись в один — полтора дня вместо недели, комментариев меньше втрое
Кейс: как три круга правок дизайна сайта свернулись в один — полтора дня вместо недели, комментариев меньше втрое
Мы начали не с макетов, а с двухчасовой сессии, где развели роли: собственник отвечает за позиционирование и первый экран, коммерческий директор — за структуру каталога и форму заявки, маркетолог — за тексты и аналитику. Остальные участники получили статус консультантов: их мнение собирается, но решение принимает профильный владелец зоны. Одно это сократило поток комментариев примерно втрое.

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

Похожая логика сработала в проекте для мебельного B2B: в кейсе «Созвездие мебели» мы вынесли в приоритет работу с каталогом и оптовыми заказами, и структура страниц утверждалась на прототипе до отрисовки, что позволило пройти дизайн без третьего круга правок. Кейс полезно показывать своей команде до старта: он наглядно объясняет, зачем нужен этап, на котором «ещё ничего не нарисовано».

Сколько стоит лишний круг правок и почему торг за скидку его не окупает

Посчитаем на типовом проекте. Дизайн сайта из 8–10 уникальных экранов в московских студиях среднего уровня стоит примерно от 250 до 600 тысяч рублей, срок — четыре-шесть недель. Один дополнительный круг правок по всем экранам — это 30–50 часов работы дизайнера и арт-директора, то есть 90–180 тысяч рублей по ставкам 3000–3500 рублей в час, плюс полторы-две недели к сроку.
Цена лишнего круга правок дизайна сайта: 90–180 тыс. ₽ и плюс 1,5–2 недели к сроку
Цена лишнего круга правок дизайна сайта: 90–180 тыс. ₽ и плюс 1,5–2 недели к сроку
Дальше включается второй счётчик, о котором забывают. Пока согласуется макет, простаивает вёрстка и разработка, а рекламный бюджет либо не тратится, либо льётся на старый сайт с низкой конверсией. Если компания планировала запуск под сезон, сдвиг на три недели может стоить дороже всего дизайна — упущенную выручку никто в смете не показывает, но она вполне реальна.

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

Разработка дизайна сайта в Москве сегодня конкурирует не ценой часа, а предсказуемостью сроков: разброс ставок между студиями редко превышает 30%, а разброс фактических сроков сдачи достигает двукратного. Если вы выбираете подрядчика, спрашивайте не «сколько стоит макет», а «сколько кругов правок включено и что происходит на четвёртом». Ответ на второй вопрос говорит о процессе больше, чем портфолио.

Частые вопросы

Сколько кругов правок считается нормой?

Два на каждый ключевой этап — прототип и дизайн-концепцию — и один на типовые внутренние страницы. Если правок больше, дело почти всегда не в дизайнере: либо не был определён ЛПР, либо структура не согласовывалась отдельно от визуала, либо в процессе поменялись бизнес-задачи. Третий круг по всем экранам — сигнал остановиться и вернуться к постановке задачи, а не рисовать четвёртый вариант.

Можно ли согласовать макет с первого раза?

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

Что делать, если внутри компании не могут договориться о стиле?

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

Нужен ли отдельный дизайн под мобильные?

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

Итоги

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

Практический минимум перед стартом выглядит так: назначенный ЛПР с правом финального «да», один человек для сбора комментариев, письменные критерии приёмки, серый прототип до цвета и лимит итераций в договоре. Пять пунктов, каждый из которых стоит несколько часов подготовки, а экономит недели.

Мы в Else Digital ведём дизайн именно в этой логике — от аналитики и структуры к концепции и отрисовке, с фиксацией результата на каждой точке. Если у вас впереди редизайн или новый сайт и вы не хотите повторять историю с третьим кругом, напишите нам: обсудим задачу, покажем, как устроен процесс на похожих проектах, и честно скажем, где в вашем случае риск затянуть согласование выше всего.
banner max bot
Пора обсудить
ваш проект!
Оставьте заявку или напишите