Тендеры и лиды
Информация
Делимся опытом, как организовать презентацию дизайна сайта так, чтобы утвердить макет с первой попытки. Подход, который почти всегда срабатывает.
Мы unova. Делаем сайты на Тильде с интерактивными 3D-анимациями.
Наш опыт в UX/UI-дизайне более 7 лет. За это время мы презентовали десятки дизайн-концепций и поняли одну важную вещь — сделать хороший дизайн это только половина успеха. Вторая половина — это то, как ты его показываешь и продаешь клиенту.
Когда мы только начинали работать, казалось, что достаточно подготовить макет и просто кинуть ссылкой в заказчика «Дизайн готов. Посмотрите». На практике это оказалось плохим сценарием. Клиент мог ничего не понять, не уловить идеи, начать сомневаться и либо завернуть концепцию полностью, либо завалить правками.
Если клиент сам изучает дизайн без пояснений, он начинает анализировать детали в отрыве от контекста. Не видит всего масштаба работы, не понимает, как вы пришли к тем или иным решениям. В итоге у него формируется искаженное впечатление, и даже сильная концепция может показаться ему спорной или сырой.
Презентация — это не просто демонстрация макета. Это процесс, где дизайнер шаг за шагом ведет клиента, показывает ход мыслей, объясняет каждое решение и связывает всё в единую картину. Клиент видит не только дизайн, но и весь путь, который к нему привел, и воспринимает концепцию как совместный результат.
Мы всегда показываем концепцию на звонке, а не ссылкой в чате. Встреча обычно длится не меньше часа. Обязательно приглашаем ЛПР — того, кто реально принимает решение. Это очень важно — первое впечатление должно формироваться у человека, от которого зависит утверждение.
Перед началом презентации озвучиваем регламент звонка и просим клиента фиксировать все вопросы, которые появятся в процессе. Объясняем, что обсудим их после показа целиком. Это помогает и мне не сбиваться на ответы посреди повествования, и клиенту сохранять целостность восприятия. Часто бывает так, что вопросы, которые возникают в начале, сами отпадают на следующих слайдах.
Есть еще один прием, который мы используем. Никогда не говорим: «мы презентуем дизайн». Такая фраза будто поднимает клиента выше нас. Мы презентуем, а он сидит и выносит вердикт. Вместо этого мы говорим: «Давайте посмотрим и обсудим дизайн-концепцию». Казалось бы, мелочь, но именно она выравнивает позиции и превращает процесс в совместное обсуждение.
Просто созвониться с клиентом и с ходу показать макет — плохое решение. Перед тем как показывать сам дизайн, клиента нужно погрузить в контекст. Напомнить, какие этапы уже пройдены, что было согласовано, и только потом показать итоговую концепцию. Для этого у нас есть четкая структура презентации.
Обложка нужна не только ради красоты, но еще и как «заглушка». Пока вы приветствуете клиента, даете вводное слово и озвучиваете регламент звонка, на экране висит нейтральный слайд. Он должен быть простым и минималистичным, чтобы ничто не отвлекало клиента от вашей речи.
Важный момент — на обложке нельзя использовать элементы будущей концепции. Это заспойлерит дизайн и разрушит эффект интриги.
Напоминаем, какие предварительные исследования мы проводили и на основе чего проектировали структуру сайта. Это возвращает клиента в контекст и показывает, что дизайн — это логичное продолжение.
Показываем прототип, который был согласован на предыдущем этапе. Напоминаем, из каких блоков и элементов он состоит и какой пользовательский путь заложен. Это позволяет клиенту снова пройтись по логике сайта и освежить в памяти уже утвержденные решения.
Слайд с референсами, которые клиент отметил на этапе мудборда. Мы напоминаем, какие решения тогда зашли клиенту — какие цветовые гаммы, какие шрифты, какие визуальные приемы. Это помогает плавно связать прошлые этапы с текущей концепцией.
На этом слайде мы показываем концепцию «вживую» — в мокапе ноутбука. Причем сначала используем небольшой трюк — поверх мокапа накладываем размытие и говорим что-то вроде «И вот, наконец-то, результат всей нашей работы, барабанная дробь, исторический момент». Нагнетаем интригу, а потом снимаем размытие и показываем главный экран сайта с анимацией.
Этим приемом мы достигаем сразу нескольких целей:
После мокапа показываем макет целиком. Здесь мы подробно разбираем каждый блок: сетку, цветовую гамму, шрифты, приемы композиции, баланс воздуха и контента. Всё это сопровождаем комментариями, чтобы клиент видел не просто картинку, а понимал, почему выбраны именно эти приемы. Ссылаемся на некоторые решения из мудборда. Раскрываем идеи метафор, заложенные в стилистику. Объясняем, как стилистика пересекается с продуктом клиента.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13202 тендера
проведено за восемь лет работы нашего сайта.
Фрагмент презентации слайда концепции в полный рост
Мы показываем презентацию в фигме. Это позволяет сделать макет кликабельным и интерактивным. Сразу показать анимации по наведению, переходы между страницами, закрепленные по скроллу элементы, всплывающие окна.
В отдельных случаях собираем анимацию в After Effects, но обычно хватает стандартной смарт-анимации фигмы.
Следом за демонстрацией концепции идут слайды, показывающие масштаб и глубину проработки проекта. Для этого показываем адаптивы — не весь макет, а пару экранов на мокапах телефонов. Это помогает донести клиенту, что дизайн сразу разрабатывается с учетом мобильных разрешений, сохраняя визуальный язык и стилистику, но делая интерфейс удобным на телефоне.
Чтобы еще раз подчеркнуть объем, мы собираем минигайд со всеми стилеобразующими элементами: шрифты, цвета, сетку, состояния кнопок, иконки, даже метафоры, заложенные в дизайн. Клиенту это показывает системность и глубину проработки.
Если использовали иллюстрации или 3D, показываем отдельный слайд со скриншотами из рабочих файлов. Это подчеркивает, что у нас кастомные решения, а не стоковые картинки, и что мы заморочились ради уникального результата.
Когда клиент уже посмотрел концепцию, адаптивы и все материалы, он думает, что презентация подходит к концу. В этот момент мы говорим: «Демонстрация дизайн-концепции подходит к концу… Хотелось бы сказать. Но нет. Вишенка на торте — альтернативная версия». Обычно на этом месте клиент расплывается в улыбке 😊
Фишка в том, что по договору мы готовим одну концепцию. И именно этого ждет клиент. Но в процессе всегда рождается больше идей, чем можно уместить в одну. Чтобы не терять ценные решения, мы готовим вторую концепцию — полностью самостоятельную, с другой цветовой гаммой, другими шрифтами и другой композицией.
Эта версия всегда становится вау-эффектом. Клиент не знал, что она есть, и воспринимает её как бонус. Мы также показываем её сначала в мокапе, а затем в полный рост, с разбором всех стилеобразующих решений.
Чтобы клиенту было удобно сравнить обе концепции, мы делаем отдельный слайд. На нём обе версии можно проскроллить и сравнить поблочно. Мы говорим, что каждая версия самодостаточна, и в разработку можно забирать любую. Но если клиенту понравилось одно в первой, а другое во второй — мы можем скрестить решения и собрать третью, объединяющую сильные стороны обеих.
Последний слайд — «Спасибо. Есть вопросы, обсудим». На нём мы говорим: «Спасибо, мы проделали большую работу, нам самим очень нравится результат. Хотим услышать ваши первые впечатления и обсудить вопросы, которые у вас возникли в процессе».
Очень важно именно здесь снять с клиента первое ощущение. Понять понравился клиенту дизайн или нет. Получить первые эмоции.
После этого я возвращаю слайд со сравнением концепций, чтобы во время обсуждения обе версии были перед глазами. Так клиенту проще ориентироваться.
Как правило, клиент говорит, какая из версий понравилась больше. Далее обсуждаем вопросы и комментарии. После чего обещаем прислать митинг-репорт и ссылку на презентацию и прощаемся.
Этот способ презентации мы проверили на множестве проектов, и почти всегда концепцию принимали сразу. Ещё раз выделим главные мысли.
Надеемся, что наши наблюдения помогут вам в работе и сэкономят нервы на согласованиях. Если тема откликнулась — заходите на сайт студии и подписывайтесь на телеграм-канал, там мы делимся новыми проектами и полезными материалами.
