Педагог по вокалу с двадцатью годами на сцене преподаёт онлайн, и ученики у неё из разных стран. Сайт, который рассказывает о ней и записывает на первое занятие, сделал я, Евгений Росляков. Сайты делаю с 2016 года. Для юрлиц и ИП важен формат: я самозанятый, заключаю договор, оформляю закрывающие документы. Живу в Москве; с педагогом, как и с большинством клиентов, работал удалённо.
У человека, который хочет заниматься вокалом, обычно два сомнения. Работает ли онлайн-формат вообще, ведь голос хочется слышать вживую. И подойдёт ли этот педагог именно мне, с моим голосом и моей задачей.
Создание сайта начали именно с этих сомнений. Задача одностраничного сайта: за несколько минут передать то, что обычно случается только на живом уроке. Доверие и ощущение «она меня услышит».
Почти все посетители приходят с телефона, из соцсетей и по ссылке от знакомых. Значит, страница должна быстро открываться на мобильном интернете и быть удобной одной рукой.
Моя роль: структура, тексты вместе с педагогом, дизайн, разработка и запуск.
Опыт подал как аргумент, а не как резюме. На первом экране крупные факты о сцене и преподавании, а подробная биография ушла ниже, отдельным блоком для тех, кому важны детали.
Главный блок назвал «Результат, который слышно». В нём одиннадцать роликов учеников «до и после». Каждый подписан по задаче, с которой ученик пришёл, чтобы посетитель нашёл похожую на свою. Заголовок блока предлагает просто: «Включите звук и сравните».
Видео — самая тяжёлая часть любой такой страницы. Поэтому ролики не грузятся, пока человек не нажмёт кнопку воспроизведения. До этого на их месте лёгкие обложки. Это сделано на JavaScript без сторонних библиотек: страница открывается быстро даже на слабом мобильном интернете, а видео подгружается только то, которое человек выбрал.
Визуальный образ взят из биографии педагога: чёрный зал, бордовый бархат, золото рампы. Для заголовков узкий плакатный шрифт, как на концертной афише, а для личных цитат — антиква. На телефоне тёмная тема выглядит как сцена и не слепит глаза.
Мобильные сайты я всегда начинаю с телефона, и здесь это особенно важно. Кнопки крупные, ролики открываются на весь экран, форматы обучения листаются карточками.
Landing Page здесь работает как целевая страница с одним действием: записаться на диагностику голоса. Кнопка записи появляется после каждого смыслового блока, и человеку не нужно листать наверх. Форма из трёх полей принимает и телефон, и ник в мессенджере: ученикам за границей удобнее написать, чем звонить.
Вёрстка на чистом HTML5, CSS и JavaScript, без конструктора и тяжёлых шаблонов.
Посетитель слышит результат учеников, видит четыре формата обучения и записывается на диагностику в пару касаний.
Страница лёгкая: HTML в сжатом виде весит 19 КБ, при загрузке нет обращений к сторонним сервисам. Видео начинают грузиться только по нажатию, поэтому даже с одиннадцатью роликами сайт открывается мгновенно.
Сайт работает как визитка, которую удобно отправить ссылкой в соцсетях и в переписке. Блок «до и после» снимает часть сомнений ещё до первого занятия.
Ограничение формата: у лендинга одна главная цель. Для отдельных курсов, если их станет больше, понадобятся отдельные целевые страницы со своими заголовками, а не бесконечная длинная страница.
Если вы эксперт или педагог и вам нужен сайт, который передаёт ваш голос, в прямом и переносном смысле, напишите мне через freelance.ru. Расскажите, кто ваши ученики и откуда они приходят.
