Лидеры года — новая категория на Workspace Digital Awards! Номинируйте вашу команду, продукты и проекты.
Евгений Росляков
Оксана Гурьянова — сайт личного бренда онлайн-педагога по вокалу
Евгений Росляков
#Дизайн сайта#Программирование сайта#HTML - верстка сайта

Оксана Гурьянова — сайт личного бренда онлайн-педагога по вокалу

12 
Евгений Росляков Россия, Москва
Поделиться: 0 0 0
Оксана Гурьянова — сайт личного бренда онлайн-педагога по вокалу
Бюджет

900

Сфера

Образование, наука, работа

Сдано

Октябрь 2026

Задача

Я Евгений Росляков, создаю сайты с 2016 года и веду проект целиком: смысл, тексты, дизайн, код и запуск. Статус самозанятого — значит, договор и закрывающие документы, даже если заказчик частный эксперт, а не компания. Живу в Москве, а с экспертами работаю удалённо из любого города и страны. Ниже разбираю сайт личного бренда педагога по вокалу.

Оксана Гурьянова — вокальный тренер, который преподаёт онлайн ученикам из разных стран. За плечами больше двадцати лет на сцене и три образования: музыкальное по специальности «артист музыкального театра», педагогическое и повышение квалификации по фонопедии. Училась у педагогов из США, Европы и России по методикам EVT, CVT, SLS и ФМРГ, работала педагогом артистов театра мюзикла в Москве. Среди её учеников есть педагоги по вокалу, студенты музыкальных вузов, актёры и блогеры с миллионной аудиторией.

С таким бэкграундом главный риск — превратить сайт в длинное резюме. Человек, который хочет запеть увереннее, ищет не список дипломов, а ответ на свой вопрос: получится ли у меня и поможет ли мне именно этот педагог.

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

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

Решение

Визуальный язык вырос из биографии героини — сцена и музыкальный театр. Глубокий чёрный фон работает как тёмный зал, где свет зажгли только над исполнителем. Бордовый — театральный бархат и главные акценты. Золото — рампа: им подсвечены цифры, подзаголовки и кнопки. Портреты Оксаны сняты в

той же гамме, поэтому фото не выглядят вставленными с другого сайта.

Типографика держится на контрасте двух характеров. Узкий плакатный шрифт для крупных заголовков звучит как афиша спектакля: «РЕЗУЛЬТАТ, КОТОРЫЙ СЛЫШНО», «ВАШ ФОРМАТ. ВАШ ТЕМП.». Изящная антиква с засечками отвечает за имя и личные цитаты, добавляя теплоты. Основной текст — спокойный гротеск. Светлые разделы цвета слоновой кости отделяют «разговорные» блоки, биографию и ответы на вопросы, от «сценических».

Первый экран. Имя, предложение и три цифры опыта: больше 20 лет на сцене, больше 10 000 уроков, ученики в 20 странах. Подробная биография — ниже, на светлом фоне, для тех, кому важны детали.

Камертоном сайта стала фраза Оксаны: «Моя задача — дать вам не набор упражнений, а понимание собственного голоса».

«Результат, который слышно». Текстовый отзыв «голос стал свободнее» мало что говорит, а десять секунд записи «до» и «после» говорят всё. Поэтому центральный блок построен вокруг одиннадцати видео учеников: путь с нуля к уверенному звучанию, высокие ноты за одно занятие, диапазон и вибрато, подготовка к записи песни, отзыв коллеги-педагога. Ролики листаются горизонтальной лентой, а заголовок прямо предлагает

включить звук и сравнить. Видео не грузятся, пока посетитель сам не нажмёт play, — до этого на их месте лёгкие обложки.

Форматы обучения. Четыре ступени по глубине: личное наставничество на месяц с четырьмя видеоуроками по 60 минут, проверкой домашних заданий, методичками и минусовками; разовая консультация на 90 минут для тех, кто давно поёт или преподаёт; онлайн-сопровождение с обратной связью три раза в неделю; курс для вокальных педагогов на 2,5 месяца с документом государственного образца. Каждая карточка отвечает: для кого, сколько длится, что входит.

«Отвечаю честно». Блок от первого лица снимает возражения: при хорошей связи педагог слышит все ошибки; для занятий нужны интернет и ноутбук, USB-микрофон желателен; с чем обычно приходят — нет

звонкости, дрожь, срывы на высоких нотах, усталость после пения.

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

Отзывы и заявка. Перед формой лента из больше чем двухсот историй учеников. Форма — три поля: имя, телефон или ник в мессенджере и «Ваша задача». Поле контакта принимает и ник, потому что многим ученикам за границей удобнее написать, чем звонить. Защита — невидимая ловушка, без капчи, после

отправки экран «Спасибо!» прямо на странице.

Результат

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

спокойная диагностика, а не большая покупка.

Сайт сделан на чистом HTML5, CSS3 и JavaScript, без конструктора, поэтому я полностью контролирую, что и когда загружается. Фото, обложки видео и отзывы ниже первого экрана подгружаются по прокрутке: 13 изображений из 14. HTML всей страницы в сжатом виде весит 19 КБ, при загрузке 30 запросов и ни одного

обращения к сторонним сервисам.

Мобильные сайты для экспертов — основной сценарий: ссылку открывают из соцсетей и мессенджеров. Ролики запускаются одним касанием, лента «до и после» листается пальцем как сторис, а узкий плакатный

шрифт оставляет заголовки крупными без переносов посреди слова.

Если вы эксперт, педагог или тренер и продаёте прежде всего себя, напишите мне через freelance.ru. Расскажите, с какими сомнениями к вам приходят ученики, и я предложу, как показать ваш результат так,

чтобы его было видно и слышно ещё до первой встречи.

Евгений Росляков
Евгений Росляков

Россия Москва

Одностраничный сайт с 11 видео и формой заявки собран вручную на HTML, CSS и JavaScript с адаптивной вёрсткой и отложенной загрузкой видео.


Стек технологий

  • CSS CSS Язык программирования
  • HTML HTML Язык программирования
  • JavaScript JavaScript Язык программирования
  • Figma Figma Графический редактор

Оцените кейс
Спасибо за оценку
Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Оставить заявку