Разработка сайта

2020/21

маркетинговый анализ структура и текста для сайта дизайн сайта
иллюстрации
верстка на Tilda

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

• устаревший дизайн;
• непродуманная структура сайта и логика страниц;
• сложный поиск информации;
• устаревший контент;
• скучная подача;
• отсутствие четкого, понятного позиционирования и преимуществ школы;
• и ряд других важных моментов.

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

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

Созваниваемся с Александром, заполняем бриф. Совместно с копирайтером-маркетологом задаем десятки предметных вопросов. Задача на данном этапе - разобраться во внутренних процессах школы, понять ее сильные и слабые стороны. Файл с ответами на вопросы по объему получается больше, чем готовый текст для главной страницы.

Этап 2 - маркетинговый анализ

Один из ключевых этапов разработки. Чем глубже проработка, тем лучше конечный результат.

• Разделяем целевую аудиторию на 3 сегмента, выписываем проблемы, желания, страхи, возражения.
• Изучаем конкурентов, отмечаем для себя удачные решения, расписываем сильные и слабые стороны, смотрим, как мы можем отстроиться.
• Выписываем выгоды, составляем уникальное торговое предложение.
• Собираем всю необходимую информацию для разработки продающих текстов.

Основной сегмент целевой аудитории - дети в возрасте от 5 до 16 лет, которые “живут” танцами. Конечно же, предложение в первую очередь должно быть направлено на родителей, которые принимают окончательное решение, в какую школу отдать ребенка.

После изучения конкурентов и рынка в целом, стало понятно, что главное преимущество школы - преподаватели и их подход к обучению. Марина Храмова и Александр Солдаткин имеют более 30 лет активного сценического опыта на двоих. Они являются воспитанниками и продолжателями лучших традиций русской балетной и актёрской школы. Выступали со звездами мировой величины на одной сцене, сыграли в сотнях мюзиклах и спектаклях.

Что они говорят о своем подходе к обучению: “Сцена – это наша жизнь. Поэтому мы ставим перед собой задачу, не только научить танцевать, но и вкладывать эмоции, чувства и мысли в каждое движение, рассказывать маленькую жизнь через танец. Наша задача – раскрыть талант и потенциал в человеке. Научить слушать и слышать музыку…”

Подход, имена и опыт преподавателей стали ядром позиционирования.

Этап 3 - разработка продающих текстов

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

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

Исходя из результатов маркетингового анализа, в первом экране было решено дать следующую информацию:

Следующий блок “На кого рассчитаны занятия в школе DanceArt” показывает, кому подойдут занятия в школе и что они дают разным группа целевой аудитории. Мы делаем подстройку на основании проработки аудитории в маркетинговом анализе. И если посетителя цепляет хотя бы несколько пунктов, мы на полпути к успеху.

Дальше оффер - самый важный блок на странице под заголовком: “Чем отличается наш подход к преподаванию”. Здесь мы раскрываем все тонкости подхода к обучению, показываем, чем школа отличается от сотен других в Германии.

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

• понятные, четкие преимущества обучения в школе;
• подробные программы занятий для разных возрастных групп;
• регалии преподавателей;
• описание студий, в которых проходят занятия с визуальным подтверждением - фотографии различных групп в процессе обучения;
• демонстрация достижений и наград учеников;
• отзывы родителей;
• ответы на частые вопросы;
• карта с расположением филиалов школы.

Этап 4 - создание дизайна сайта

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

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

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

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

• Для придания динамики, создания целостной картины в большинстве блоков на фоне нарисованы плавные линии. Они характеризуют движение, кружение, также вызывая ассоциации с балетом и танцами. Ведут посетителя по сайту.

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

• подбором подходящей цветовой схемы, о которой упоминалось выше;
• фоном с синим “сценарным” свечением и плавными линиями;
• демонстрацией танцующих детей на сцене с неподдельными эмоциями на лице и в движениях;
• фотографиями преподавателей, выполненными в стилистике сайта.

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

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

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

Этап 5 - верстка, настройки, запуск сайта

Сайт верстался на Tilda. После верстки проверяется отображение сайта на 5 разрешениях, подключаются формы заявок, социальные сети, мессенджеры, счетчики для отслеживания посещаемости.

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

Что в итоге

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

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