(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93905182, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(93905182, 'hit', window.location.href);

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

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

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

Погрузились в задачу

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

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

Майндмэп со структурой и информацией для разработки сайта

Проработали структуру и текст

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

Старый сайт

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

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

Блок, который обозначает целевую аудиторию

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

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

Блоки с программой курса

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

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

Блок с информацией о необходимых инструментах для обучения

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

Финальный блок

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

Разработали 2 дизайн-концепции

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

Референсы, которые заказчик оценил больше всего

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

Первый вариант концепции

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

Второй вариант концепции

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

Блок с примерами работ учеников Виталия

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

На время стали коллегами с клиентом

Пример прототипа, где копирайтер оставлял место для визуала

Финальный вариант сайта с иллюстрацией

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

Цифры вместо тысячи слов

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

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

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

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

Статистика из Яндекс.Метрики

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

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

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

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

0
21 комментарий
Написать комментарий...
Виктория Бурлуцкая

Кейс супер! Возьму на заметку как референс, очень круто сделано!

Ответить
Развернуть ветку
Сергей Ананьев

Круто, рады быть полезными)

Ответить
Развернуть ветку
Дмитрий Роговицин

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

Ответить
Развернуть ветку
Сергей Ананьев

Классно, что вы сказали про эмоции) Сайт как раз попадал в подборку трендов от Тильды за эмоциональный копирайтинг!

Ответить
Развернуть ветку
Ян Мухин

эмоции у персонажей переданы очень круто

Ответить
Развернуть ветку
Сергей Ананьев

Да, мы очень старались сделать так, чтобы легко считывались эмоции) Спасибо!

Ответить
Развернуть ветку
Igor Malkov

крутой кейс, спасибо)

Ответить
Развернуть ветку
Сергей Ананьев

спасибо за оценку)

Ответить
Развернуть ветку
Ирина Гунылина

Лендинг сразу запоминается) спасибо за такой подробный кейс)

Ответить
Развернуть ветку
Сергей Ананьев

Спасибо за комментарий) Всегда рады делиться максимально подробно своей работой.

Ответить
Развернуть ветку
Дмитрий Роговицин

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

Ответить
Развернуть ветку
Априори

Вот бы все чорты были такими милыми...

Ответить
Развернуть ветку
Ирина Гунылина

А вот кстати не заметила, но да, идея крутая) откликается

Ответить
Развернуть ветку
Елена Васильева

Спасибо за разбор кейса! Очень приятная статья, читается легко и, главное, интересно :)

Ответить
Развернуть ветку
Сергей Ананьев

Спасибо!

Ответить
Развернуть ветку
Юлия Б.

Круто получилось!
Даже заинтересовалась курсом так как как раз искала подобную тему :)

Ответить
Развернуть ветку
Дмитрий Сёмин

Интересный подход к дизайну. Что-то новое прям. Сразу вспоминается книга «эмоциональный дизайн». Тут точно такие же ощущения появляются) хорошая работа!

Ответить
Развернуть ветку
Чайка

По полочкам разложили всю информацию. Кейс и сайт бомба!

Ответить
Развернуть ветку
Сергей Ананьев

Спасибо за коммент! Очень приятно)

Ответить
Развернуть ветку
Кирилл Вихров

Нравится все, кроме цветового решения

Ответить
Развернуть ветку
DAR.Vision

Круто сделан, за аргументацию лайк!

Ответить
Развернуть ветку
18 комментариев
Раскрывать всегда