Редизайн
для школы
креативного
сайта
творчества
Школа с курсами актерского мастерства и творческими занятиями для взрослых и детей
Задача
Сделать полный редизайн. Основной запрос — сделать сайт поярче, добавить больше цвета, но не уходить в совсем детский стиль, так как у школы есть курсы и для взрослых. Также на сайте должна быть удобная навигация. рассказ о самой школе и ее ценностях и актуальная информация по существующим курсам
О проекте
ШКТ «Новые Роли» — школа, в которой занятия направлены на креативное развитие учеников, а еще это приятное времяпровождение с пользой. Школа расположена в Мытищах и предлагает такие занятия как актерское мастерство, творчество для малышей, шахматы и танцы
Что было сделано
- Провела интервью с клиентом, сделала анализ целевой аудитории и конкурентов
- Предложила структура сайта
- Написала тексты и оформила прототип согласно структуре
- Подобрала визуальные решения для дизайна и офоромила в мудборд
- Задизайнила сайт на основе согласованных референсов
- Сверстала сайт с адаптивными версиями и настроила SEO
Сайт до редизайна
Первую версию сайта клиентка делала почти самостоятельно. На тот момент школа только открылась, и надо было понять, насколько идея нового бизнеса найдет отклик среди жителей района. Это хорошия стратегия для начинающего бизнеса. Однако в новой версии сайта надо было исправить все недочеты, чтобы сайтом было удобно пользоваться, он вызывал эмоции у посетителей и привлекал новых клиентов
Основные проблемы предыдущего сайта
Плюсы выбранной стратегии
- Неудобная структура. На главной странице и информация о школе, и текст про все курсы. Это усложняет поиск информации для людей, которым нужен конкретный курс
- Сайт не вызывает эмоции и несет чисто информационный характер
- Нет всей информации по курсам. Есть упоминание, что такие занятия существуют, но почитать о них негде
- Отсутствует дизайн-концепция, которая бы передавала настроение и доносила ценности
- Не проведена работа над смыслами. В один абзац текста написана общая информация о курсе, какую пользу приносят занятия, а цена занятия находится на другой странице сайта
- У школы есть понимание позиционирования. Уже настроены основные процессы внутри, осталось завернуть их в красивую упаковку
- Есть материалы для сайта: фотографии, курсы, тексты предыдущего сайта, которые можно использовать в качестве набросков
- Они знают свою целевую аудиторию и могут рассказать, что важно именно их клиенту
Основные проблемы предыдущего сайта
- Неудобная структура. На главной странице и информация о школе, и текст про все курсы. Это усложняет поиск информации для людей, которым нужен конкретный курс
- Сайт не вызывает эмоции и несет чисто информационный характер
- Нет всей информации по курсам. Есть упоминание, что такие занятия существуют, но почитать о них негде
- Отсутствует дизайн-концепция, которая бы передавала настроение и доносила ценности
- Не проведена работа над смыслами. В один абзац текста написана общая информация о курсе, какую пользу приносят занятия, а цена занятия находится на другой странице сайта
Плюсы выбранной стратегии
- У школы есть понимание позиционирования. Уже настроены основные процессы внутри, осталось завернуть их в красивую упаковку
- Есть материалы для сайта: фотографии, курсы, тексты предыдущего сайта, которые можно использовать в качестве набросков
- Они знают свою целевую аудиторию и могут рассказать, что важно именно их клиенту
Анализ конкурентов и целевой аудитории
Я рассматривала школы схожей направленности в Мытищах и выявила основные проблемы на сайтах этих школ, чтобы не допустить эти ошибки на нашем сайте. Рассматривался как дизайн, так и работа со структурой и текстом. Такой подход позволяет сделать работу над ошибками на основе чужого опыта и выделиться в нише.
Основные проблемы сайтов конкурентов: несовременный дизайн, плохо проработана структура, тексты написаны сухо, не проведена работа с типографикой (текст не оформлен в удобно читаемый вид)
Основные проблемы сайтов конкурентов: несовременный дизайн, плохо проработана структура, тексты написаны сухо, не проведена работа с типографикой (текст не оформлен в удобно читаемый вид)
Также провели исследование целевой аудитории и выявили их основные ценности и проблемы. Потенциальные клиенты ищут школы, в которых детям комфортно находиться, преподаватели разбираются не только в своей сфере, но и могут выстроить контакт с ребенком, а занятия помогают справиться с распространенными детскими проблемами: стеснительность, залипание в гаджетах, неумение найти друзей, скука в свободное от занятий время.
В результате я подготовила целую презентацию с выводами и идеями для будущего сайта
В результате я подготовила целую презентацию с выводами и идеями для будущего сайта
Структура
Сайт состоит из 12 страниц: главная с ценностями и преимуществами школы, 10 страниц курсов со всей актальной информацией и страница с событиями школы, которую можно самостоятельно редактировать без привлечения специалистов.
Тексты
В тексте важно было отразить любовь и увлеченность, с которой подходят к образовательному процессу. Голос бренда (тон, с которым бренд общается со своими клиентами) должен быть дружелюбным и заботливым.
Также важно отразить полную информацию о школе, курсах и ценностях, чтобы привлечь клиентов с похожими взглядами.
В результате этого этапа я предоставила полный прототип сайта со всеми страницами и написанными текстами согласно структуре
В результате этого этапа я предоставила полный прототип сайта со всеми страницами и написанными текстами согласно структуре
Мудборд и дизайн-концепция
Основной запрос по дизайну — добавить цвета и сделать сайт более ярким. На основе этого запроса и анализа ниши я подготовила презентацию с референсами из веб и графического дизайна.
В ходе согласования будущей стилистики клиентка сказала, что не хочется делать сайт по-детски ярким, так как у них есть курсы и для взрослых.
В ходе согласования будущей стилистики клиентка сказала, что не хочется делать сайт по-детски ярким, так как у них есть курсы и для взрослых.
Поэтому мы выделили главный референс, сочетающий оба запроса. В нем считывалась киношность и капля серьезности, дополненные яркими кружочками, присущими для детского веселья.
Также мы согласовали шрифты и цвета. Для кружочков выбрали гамму из базовых цветов: желтый, зеленый, синий и красный. Основной цвет сайта — сдержанный бежевый
Также мы согласовали шрифты и цвета. Для кружочков выбрали гамму из базовых цветов: желтый, зеленый, синий и красный. Основной цвет сайта — сдержанный бежевый
Презентация мудборда
Главный референс
Дизайн
Помимо цветных кружочков в дизайне хотелось сделать отсылки к самой нише школы. Флагманским курсом считается курса «актер драматического театра», поэтому основная тематика — театр, кино и все, что с ними связано. Так появились подложики для текста в виде диалоговых окошек, киноленты и листы бумаги с написанным на них текстом
Для динамики я сделала анимацию появления текста и эффект скролла для кинолент, а курсы на главной странице можно отфильтровать в зависимости от возраста учеников.
Главная страница
Шаблон страницы курса
Верстка и передача проекта
Сайт был сверстан на платформе Тильда. Все адаптивные версии разрабатывались на данном этапе с сохранением анимации, уместной под нужный размер экрана. Клиентка была очень довольна получившимся результатом и оставила положительный отзыв.
Мобильная версия сайта
“
Обалденный и очень «нежный» специалист! Все доступно, понятно и очень приятно. Вся работа была понятна, а интервью — это восторг. Обожаю работать с людьми, которые любят свою работу и хотят сделать её качественно!
Что особенно понравилось в работе со мной?
“
Все! Очень понравилось общение, то с каким теплом и заботой подходишь к каждой детали. Спасибо за всё бесконечные изменения и правки, все с какой-то бесконечной любовью. Спасибо за скорость и обалденное качество! Я открываю сайт и каждый раз не могу им налюбоваться❤️
Как вам проект?
