Клиент пришёл с запросом на мультирегиональный сайт музыкальной школы.

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

Все просто, что может пойти не так? 😅

А вот как было на самом деле…

Задача №1: Не потерять человека в списке блоков. У клиента был огромный документ с SEO-рекомендациями: структура, страницы, блоки, формы. Нужно было сохранить всё важное, но не заставить человека читать сайт как инструкцию к стиральной машине.

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

Получился не набор блоков из ТЗ, а сценарий: от знакомства со школой до заявки.

Задача №2: ОНО РАСТЁТ!!! Одна система на много городов. Филиалы открываются в новых городах, поэтому я думала не только о том, как сайт выглядит сегодня, но и каким он будет через полгода.

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

Задача №3: Учесть ограничения CMS. Сайт делали на WordPress, а информации по направлениям и филиалам и так много, перегружать его было нельзя. Динамику я собирала из цвета, типографики, градиентов и текстур. Ещё продумала ховеры, появление блоков при скролле и другие микровзаимодействия, чтобы сайт не был плоским.

Задача №4: ХОЧУ ПОЯРЧЕ. А ЕЩЕ НЕЙРОСЕТИ СЕЙЧАС В МОДЕ Заказчик хотел ярко, я бы даже сказала, кричаще. Я приглушала, как могла, чтобы формы и кнопки не терялись.

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

🚩🚩🚩 Клиенту это не понравилось, он ссылался на уже готовые сайты франшизы до разработки брендбука, а там… розовый фон, белый текст, черный текст, а еще декоративные точки и нейросетевые музыканты…

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

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

❌ Моя вторая ошибка. Никогда не забывай о чувствах верстальщика когда делаешь дизайн)) Следующая сложность была в том что клиент хотел разработать свою собственную карту филиалов по России. Да не простую, он хотел полноценную карту. Там и куча фоток филиалов, их рейтинг, и как проехать, и записаться сразу из карты можно.

Удобно? Безусловно. Вот только это не вручную должно делаться, а выгружаться из базы. А в базе 18+ филиалов.

Ну а я что? Есть ТЗ - делаем макет.

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

И мой вывод:

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

✅ Важно думать не только о пользователе, который будет искать занятия, но и о сотруднике, который наполнит страницу, разработчике, которому предстоит всё это собрать, и бизнесе, который продолжит расти.

✅ И, конечно, консультироваться с разработчиком до того, как влюбишься в очередную сложную анимацию. То, что легко нарисовать в Figma, не всегда так же легко реализовать в коде. Проверено на собственном опыте. 🙂

Сайт уже сверстан и готовится к релизу. А пока можно посмотреть кейс: https://www.behance.net/gallery/251064789/Music-School-Website-Redesign