Кейс: стрит-арт-лендинг для авторского курса преподавателя иллюстрации

В нашу студию обратился иллюстратор Виталий Ивлев за редизайном сайта авторского онлайн-курса. Рассказываем о том, как мы сыграли на контрастах: сохранили дружелюбный тон голоса и придумали маскот вредного чёртика. А также передали в лендинге индивидуальность преподавателя и добавили немного андеграунда. И делимся результатами спустя 3 месяца после запуска сайта.

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

Заказчик в прошлом занимался веб-дизайном. Поэтому у него уже был свой сайт, но в последнее время появилось ощущение, что дизайн устарел и не передавал индивидуальность преподавателя. У Виталия свой взгляд на образование, отличный от онлайн-школ: нет «потока» учеников, стремления продать этот курс всем желающим и создать некий «конвейер», который делает из новичков крутых иллюстраторов. Он имеет большой багаж знаний и хочет делиться ими с тем, кто уже понимает, чего хочет, кто имеет опыт в рисовании и готов погружаться ещё глубже в детали. Курс имеет атмосферу закрытого профессионального клуба, так как Виталий стремится оставить за собой право выбирать студентов. Поэтому попасть на обучение не так просто: нужно отправить 5-7 примеров своих работ, чтобы стать частью комьюнити. На сайте было важно отстроиться от образа типичных образовательных онлайн-платформ, передать индивидуальность преподавателя и обозначить целевую аудиторию.

Работать над этим проектом было легко, так как на этапе изучения и погружения в задачу мы выстроили плотную коммуникацию с заказчиком. Он понимал важность точного технического задания и старался давать подробные ответы в брифе и на брифинг-созвоне. Дополнительную информацию присылал в формате видеороликов, где демонстрировал экран. А также создавал майндмэпы, которые помогали нам понять, каким он хочет видеть структуру будущего сайта и какая информация на нём должна быть. Благодаря этому, когда мы презентовывали текст и дизайн, правок почти не было.

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

На старом сайте текст был плохо структурирован, а ещё его было много. Поэтому пользователь мог пропустить важную и нужную информацию. Мы вытащили её на первый план — в заголовки. И сохранили дружелюбный ToV, ведь именно так на курсе проходят занятия — уютно, вдохновляюще и без лишней строгости.

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

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

По словам Виталия, основное возражение, с которым он сталкивается в работе — «Зачем тратить деньги на курс, когда можно посмотреть бесплатные уроки на ютубе?». Поэтому мы выстроили логику и структуру повествования таким образом, чтобы пошагово закрыть этот вопрос. А также добавили комментарии о минусах уроков на ютубе от чёртика и раскрыли ценность обучения на авторском курсе.

Программу курса разделили на 2 блока, чтобы было удобнее с ней ознакомиться. Модулей в первой части обучения было много, и так как они открываются для учеников поэтапно, мы поместили их в горизонтальный скролл — это помогает отобразить их линейность и последовательность.

А у второго блока обучения был большой несистематизированный перечень того, какие объекты будут рисовать студенты. Мы сгруппировали их в разделы с примерами работ — так каждый ученик сможет легко выбрать то, что ему по душе.

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

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

Главный запрос по дизайну — сайт не должен быть сервисным, похожим на типичную онлайн-школу. Хотелось чего-то яркого, вдохновляющего, с отсылками на digital-иллюстрацию, а не обычное рисование. На брифе мы предложили несколько референсов, и Виталию понравились андеграундная стилистика, контрастное сочетание серьёзности и хип-хопа, рукописных и стандартных шрифтов. Также ему по душе минимализм, например, как на сайте Молнии: чистый с хорошей вёрсткой.

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

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

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

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

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

Заказчик не запускал рекламу для сайта, а продвигал его только за счёт соцсетей и своей личности. Тем не менее, спустя 3 месяца после запуска сайта результаты оказались приятными.

На момент написания статьи сайт посетили 4 303 человека. Всего посещений было 6 680, а значит, что люди возвращаются на него повторно.

Особенно порадовал процент отказов — это то, сколько посетителей вышли с сайта, не проведя на нём 15 секунд. Он составил всего лишь 9,96%.

А также клиент рассказал, что ему пришло уже 19 анкет.

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

Другие кейсы Молнии можно найти в портфолио на сайте: flashfamily.ru.

Ещё мы снимаем видео-кейсы. Их, а также забавные клипы ищите в группе Вконтакте: vk.com/flashfamily.

За внутренней кухней и полезностями можно следить в тг-канале: t.me/flash_family.