Статьи Unova

Презентация дизайн-концепции сайта. Как согласовывать дизайн с первого показа

2025-09-02 15:54
Делюсь опытом, как организовать презентацию дизайна сайта так, чтобы утвердить макет с первой попытки. Подход, который почти всегда срабатывает.
Меня зовут Глеб Говядинский — я дизайнер и основатель студии unova. Мы делаем сайты на Тильде с интерактивными 3D-анимациями.
Я UX/UI дизайнер с опытом более 7 лет. За это время я успел презентовать десятки дизайн-концепций и понял одну важную вещь — сделать хороший дизайн это только половина успеха. Вторая половина — это то, как ты его показываешь и продаешь клиенту.
Когда я только начинал работать на фрилансе, мне казалось, что достаточно подготовить макет и просто кинуть ссылкой в заказчика «Дизайн готов. Посмотрите». На практике это оказалось плохим сценарием. Клиент мог ничего не понять, не уловить идеи, начать сомневаться и либо завернуть концепцию полностью, либо завалить правками.

Почему нельзя оставлять клиента наедине с макетом

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

Звонок вместо ссылки

Мы всегда показываем концепцию на звонке, а не ссылкой в чате. Встреча обычно длится не меньше часа. Обязательно приглашаем ЛПР — того, кто реально принимает решение. Это очень важно — первое впечатление должно формироваться у человека, от которого зависит утверждение.
Перед началом презентации озвучиваем регламент звонка и просим клиента фиксировать все вопросы, которые появятся в процессе. Объясняем, что обсудим их после показа целиком. Это помогает и мне не сбиваться на ответы посреди повествования, и клиенту сохранять целостность восприятия. Часто бывает так, что вопросы, которые возникают в начале, сами отпадают на следующих слайдах.
Есть еще один прием, который мы используем. Никогда не говорим: «мы презентуем дизайн». Такая фраза будто поднимает клиента выше нас. Мы презентуем, а он сидит и выносит вердикт. Вместо этого мы говорим: «Давайте посмотрим и обсудим дизайн-концепцию». Казалось бы, мелочь, но именно она выравнивает позиции и превращает процесс в совместное обсуждение.

Структура презентации

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

Обложка

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

Аналитика

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

Прототип

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

Мудборд

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

Анимированная дизайн-концепция в мокапе

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

Дизайн концепция в полный рост

После мокапа показываем макет целиком. Здесь мы подробно разбираем каждый блок: сетку, цветовую гамму, шрифты, приемы композиции, баланс воздуха и контента. Всё это сопровождаем комментариями, чтобы клиент видел не просто картинку, а понимал, почему выбраны именно эти приемы. Ссылаемся на некоторые решения из мудборда. Раскрываем идеи метафор, заложенные в стилистику. Объясняем, как стилистика пересекается с продуктом клиента.
Фрагмент презентации слайда концепции в полный рост
Мы показываем презентацию в фигме. Это позволяет сделать макет кликабельным и интерактивным. Сразу показать анимации по наведению, переходы между страницами, закрепленные по скроллу элементы, всплывающие окна. В отдельных случаях собираем анимацию в After Effects, но обычно хватает стандартной смарт-анимации фигмы.

Адаптивы

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

Miniguide

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

Дополнительные материалы

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

Альтернативная версия

Когда клиент уже посмотрел концепцию, адаптивы и все материалы, он думает, что презентация подходит к концу. В этот момент мы говорим: «Демонстрация дизайн-концепции подходит к концу… Хотелось бы сказать. Но нет. Вишенка на торте — альтернативная версия». Обычно на этом месте клиент расплывается в улыбке 😊
Фишка в том, что по договору мы готовим одну концепцию. И именно этого ждет клиент. Но в процессе всегда рождается больше идей, чем можно уместить в одну. Чтобы не терять ценные решения, мы готовим вторую концепцию — полностью самостоятельную, с другой цветовой гаммой, другими шрифтами и другой композицией.
Эта версия всегда становится вау-эффектом. Клиент не знал, что она есть, и воспринимает её как бонус. Мы также показываем её сначала в мокапе, а затем в полный рост, с разбором всех стилеобразующих решений.

Сравнение версий

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

Завершение презентации

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

Резюмирую

Этот способ презентации мы проверили на множестве проектов, и почти всегда концепцию принимали сразу. Ещё раз выделю главные мысли.
  • Презентуйте на звонке. Макет нельзя показывать просто ссылкой. На звонке вы сможете объяснить все решения и подчеркнуть ценность работы, иначе восприятие дизайна будет искажено.
  • На звонке обязательно должен быть ЛПР. Первое впечатление и аргументация должны быть направлены именно на него. Если подключить его невозможно, настаивайте на том, чтобы он посмотрел запись звонка. Так аргументы дойдут до него в первозданном виде, а не «через глухой телефон».
  • Перед звонком проговорите регламент и предложите клиенту записывать вопросы, чтобы обсудить их после презентации. Многие вопросы, появившиеся в начале, решаются сами во время демонстрации.
  • Будьте эмоциональны на звонке. Веселая и позитивная подача заряжает клиента и задает правильный тон для обсуждения.
  • Напоминайте о предыдущих этапах. Это помогает клиенту вспомнить пройденные шаги и понять, что дизайн формировался последовательно, с учетом согласованных решений. В итоге уменьшается шанс услышать «это все не то», так как клиент признает свою роль в согласовании этапов. Такой подход частично распределяет ответственность и снижает риск, что концепцию полностью завернут.
  • Анимируйте интерфейс. Даже небольшие интерактивные элементы делают концепцию живой и помогают клиенту почувствовать сайт в действии.
  • Показывайте дополнительные артефакты. Стилевая система, адаптивы, 3D или иллюстрации — все это подчеркивает масштаб и глубину работы.
  • Превышайте ожидания. Альтернативная версия дизайн-концепции — это всегда вау-эффект. Она показывает, что вы заморочились и сделали больше, чем прописано в договоре, а клиент получает приятный бонус и чувство выбора.
Надеюсь, мои наблюдения помогут вам в работе и сэкономят нервы на согласованиях. Если тема откликнулась — подписывайтесь на телеграм-канал, там я делюсь новыми проектами и полезными материалами.