Создание сайта для художественной школы: опыт и нюансы
Меня зовут Софья Гаева, я владелец веб-студии «Сеослон» и маркетолог. Суть моего бизнеса – давать заявки клиентам.
Задача
- Построить гипотезу и спроектировать опыт пользователей
- Создать структуру сайта, которая позволит сайту продвинуться по SEO
- Разработать дизайн, который будет с высокой вероятностью закрывать потребности целевой аудитории
- Запрограммировать сайт, на основе согласованного дизайн-макета
Этап 1. Аналитика
Первым шагом в создании сайта было проведение анализа потребностей пользователей. Мы выделили фокус-группу и опросили респондентов (людей попадающих в нужный сегмент целевой аудитории) . Собрав все необходимые данные мы их структурировали, и приступили к разработке древовидной структуры, которая подходит для SEO-продвижения
Этап 2. Проектирование пользовательского опыта
Разработав структуру страницы, мы приступили к проектированию пользовательского опыта. Важно было создать удобный и интуитивно понятный интерфейс, который поможет пользователям легко ориентироваться на сайте. Мы создали низкодетализированный прототип сайта, который послужил техническим заданием для дизайнера в дальнейшем
Этап 3. Определение дизайн-концепции и дизайн-макет
Для создания дизайна сайта был задействован опытный дизайнер, который работал в сфере услуг схожей тематики. Основной упор был сделан на чистоту и строгость дизайна, который бы обеспечил легкую считываемость контента. Мы создали 2 дизайн-концепции и после согласования одной из них, разработали дизайн-макет для всех 14 страниц. Основной проблемой была реализация абонементов и интеграции с ALFA CRM, однако мы смогли решить эту задачу, с помощью простых форм и ограниченной палетки цветов
Этап 4. Программирование и вёрстка
При разработке мы добавили простые анимации, чтобы акцентировать внимание на нужных блоках и элементах. Это позволило сфокусировать внимание пользователей на призывах к действию и снизить отказы при попытке достигнуть цели на сайте
Этап 5. Итоги первых недель
После того, как сайт был создан и протестирован, наша команда подключила доменное имя, сертификат безопасности, и передала сайт заказчику. Теперь пользователи могут легко и быстро записаться на уроки рисования, используя удобный и интуитивно понятный интерфейс. Отслеживая статистику событий за первую неделю после тестирования мы зафиксировали значительный рост показателей внутренней конверсии и повышения трафика из поисковых систем
Итоги
Редизайн сайта поздеевка.рф – это пример того, как компания может создать сайт, который отвечает потребностям пользователей и выделяется на фоне конкурентов. Заказчик очень доволен результатами работы, однако нам предстоит ещё длительное отслеживание статистики для внесения корректировок. Отслеживая поведение пользователей, мы подтвердили разработанную нами гипотезу и смогли обеспечить хорошие показатели конверсии на сайте.
1). Первый экран.
а). Меню.
У пунктов меню нет межбуквенного интервала. Если пишите текст капсом, то его нужно добавить. Сейчас сложно читать, слово "Запишитесь" и вовсе сливается.
Увеличьте padding внутри пункта "Обучение".
Самих пунктов вверху слишком много. Замените названия соцсетей на иконки. Или замените ссылкой "мы в соцсетях". Из-за того, что стили-CSS у соцсетей и меню одинаковые, у них и визуальный вес одинаковый, а этого быть не должно.
б). Надзаголовок "Обучение рисованию детей от 2-х лет, подростков и взрослых в Красноярске" длинный. Сократите до "обучаем взрослых и детей от 2х-лет". По h1-заголовку понятно, чему вы обучаете.
в). Не резмещайте так фото на главном экране. Людей совсем не видно. Фото ниже с девочкой и то намного лучше. Переместите фото направо, а текст — налево.
г). У кнопок разные отступы.
2). "Поздеевка"
Текст можно чуть улучшить.
"Обучаем детей и подростков всех возрастов".
"В Красноярске мы одни из немногих, кто предоставляет:
• долгосрочные программы
• краткосрочные курсы
• мастер-классы
• программы обучения на каникулах от 3-х месяцев."
3). "Основные программы"
Дальше на сайте пошло слишком много зелёного цвета, отчего он потерял свою акцентную силу. Замените часть зелёного на другой цвет.
4)."Краткосрочные курсы"
"Базовый курм"- ошибка.
У некоторых колонок в конце предложения стоят точки, а у некоторых нет.
Плюс вы разместили два одинаковых по стилю слайдера подряд. Разбавьте их, добавьте ритма. Разместите между ними какую-нибудь акцию.
Местами на сайте нарушено правило внутреннего-внешнего.
5). "наша команда"
Честно говоря, никогда не понимал, почему многие организации размещают чёрно-белые фото своих сотрудников. Как будто они умерли.
Добавьте членам команды больше оригинальности. Сколько людей они обучили на настоящий момент? Сколько они уже работают у вас? И пр.
У некоторых членов команды обрезана голова. И я бы заменил фото, сфотав этих людей за работой (за холстом, с детьми). Сейчас эти фото можно смело размещать на сайте компании из другой сферы (менеджеры, банк, психологи и т.д.) и ничего не поменяется.
6). "ГАЛЕРЕЯ"
Добавьте больше фото в одну колонку. Чтобы можно было больше видеть, быстрее листать. Добавьте счётчик слайдов (dots)
7). "Отзывы родителей и учеников"
Нет фото. Если фото нет, то уберите кружок.
Добавьте в каждый отзыв заголовок из отзыва, чтобы заинтересовать пользователя. Сейчас отзывы желания нет.
Типо "Эмоций-море". А имя человека и чья она мама убрать вниз, меньшим шрифтом. Это ведь не знаменитость.
В идеале замените отзывы на видео-отзывы.
8). "наши преимущества"
Добавьте интерлиньяжа тексту. Тут тоже местами можно улучшить текст. Главред поможет.
И я бы переделал иконки. На месте первой один лепесток (фигура), второй — два и т.д.
9). "Мастерская особых художников"
Из адресов убирите "пр." и "ул.".
Верните яркость карте.
10). footer
Вёрстка улетела влево.