Заячий стон

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

Начинаю разработку с анализа конкурентов и целевой аудитории.

Я составила два опроса для зрителей театра:

• Один для холодной аудитории в соцсетях
• Другой — для лояльной аудитории, которая лично общается с администрацией театра

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

Мы получили 108 ответов.

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

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

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

На основании структуры сайта я составляю черно-белый драфт сайта, так называемый прототип.

На нем я размещаю информацию в том порядке, в котором она будет идти на сайте и размещаю примерные тексты — их в последствии финализирует копирайтер.

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

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

Практически каждый мой сайт сделан в рамках той или иной креативной концепции: у нее есть название, обоснование и конкретные визуальные приемы, которые мы будем использовать.

Посмотрите пример презентации, которую я составляла для Заячьего стона:

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

Я предоставила на выбор 3 дизайн-концепции: я их делаю на примере первых двух блоков сайта.

Но эти дизайн-концепции клиент не принял: это окей, так бывает. Мы созвонились и спокойно выявили, что нужно доработать:

• Не нравится массивный шрифт заголовка на первом экране.
• Хочется включить в дизайн округлый шрифт из логотипа, чтобы было единообразие визуальной коммуникации.
• Кажется, что нет юмора и изюминки. Все-таки это комедийный театр.
• Хочется добавить больше цвета. Не только красный и ч/б, но и какие-то яркие цвета. Например, очень нравится сочетание красного и зеленого.
• Нужно дать понять посетителю театра, что буквы З и С в начале слов Заячий Стон — это ушки и попка заячика из логотипа.
• Хочется, чтобы сайт был анимированный, а на макетах абсолютно не понятно, как этот дизайн будет выглядеть и жить на сайте: будет ли это такое же статичное полотно или будет какая-то анимация, и если да — то какая?

Но что понравилось тоже, все-таки, было:

• Идея с софитом из первой концепции. Хотелось бы ее сохранить.
• Маркерные и карандашные рисунки поверх фото.

По итогу я презентовала 3 обновленные дизайн-концепции: учла все комментарии и сразу заверстала их на Тильде, чтобы показать клиенту анимацию концепций. Это гораздо облегчило понимание анимации.

Мы утвердили 1 концепцию с небольшими доработками.

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

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

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

Я использовала как уникальный дизайн, так и стандартные блоки Тильды и стилизовала их с помощью CSS.

Стандартные блоки были нужны для формирования расписания, отзывов, новостей и событий, которые постоянно меняются. Нужно было сохранить удобство пользования и красоту — именно поэтому здесь пригодился CSS-код.

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

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

Ну и сравните финальное до/после:

Почему пишу отзывы? Потому что не только клиент оставил мне положительный отзыв, но и сами зрители театра оценили сайт:

А это отзыв клиента: