Разработка стильного сайта для современной музыкальной школы

2018

Staccato.

Музыкальная школа для взрослых и детей в самом сердце Петербурга

О проекте

Staccato – это коллектив профессиональных музыкантов, влюбленных в свое дело.

Современное музыкальное образование должно быть одновременно интересным и эффективным. Именно эта идея лежит в основе школы Staccato и в основе нового сайта, который мы разработали для нее.
image

Рестайлинг логотипа

Мы провели корректировку логотипа, сделав его более современным и лаконичным: убрали лишние детали, исправили силуэт, изменили шрифтовую часть. При этом узнаваемость логотипа совсем не изменилась.
old-logo
Было
new-logo
Стало

Главная страница

decor.png
Музыка — это взрыв эмоций, драйв и праздник. Мы создали яркие иллюстрации с реальными преподавателями из школы Staccato, чтобы создать нужное настроение.
image
image
image
image
image

Курсы

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

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

image

Детали

01
Баннер с ключевыми
обучающими курсами
02
Все индивидуальные и
групповые курсы школы
03
Основные преимущества
обучения в Staccato
image
image
image
Ключевые преимущества
музыкальной школы
image
Простая и эффективная
форма захвата предлагает
бесплатное занятие
image

Дизайн обложек

Staccato ведет активную жизнь на Youtube и часто публикует отчетные концерты. Мы придумали единый яркий шаблон для оформления видео.
image
image
image
image
Сайт последовательно отвечает на все популярные вопросы, рассказывает о достижениях выпускников и дает возможность почитать реальные отзывы.
image
image

Страница курса

image
decor.png
Страница курса подробно раскрывает секреты обучения, знакомит с преподавателями и позволяет легко и просто записаться на бесплатное занятие.
mac

Дизайн-система

Все страницы подчиняются единой дизайн-системе, поэтому клиенту легко создавать новые страницы, используя готовые блоки и дизайн-приемы.
imageimageimage
imageimageimage
imageimageimage
image
image
imageimageimageimage
image

Адаптивный
дизайн

Мы позаботились о том, чтобы каждый пиксель сайта прекрасно себя чувствовал на любом экране.
image
Вся графика для сайта подготовлена для отображения на retina-дисплеях (высокой четкости).
image

Шрифты & Цвета

Дизайн использует чистые и яркие цвета и несколько шрифтовых начертаний семейства Circe
Шрифт
Circe
Цвета
Параграф
Circe Rounded Regular 32 pt
Параграф
Circe Rounded Regular 24 pt
Заголовки
Circe bold 54 pt

И другие

страницы

image