Кейс: кривые иллюстрации на коленке против современного дизайна

Результаты A/B-теста в конце статьи.

В закладки
Аудио

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

Страдают этим все конструкторы, и даже студийные сайты иногда выглядят так, слово сделаны по шаблону.

Вероятно, один из этих блоков пробрался и на ваш сайт

В этой статье я покажу быстрый и дешёвый способ разрушить оковы шаблонов и сделать оригинальный сайт.

Настолько плохо, что даже хорошо

Запускал небольшой бесплатный курс по программированию. Сделал сайт в своём же конструкторе, но вместо стандартных шаблонов решил нарисовать нечто этакое.

Рисовать я не умею, но это меня не остановило. На следующий день у меня был готов сайт с чудесными иллюстрациями.

Иллюстрация с сайта
Ещё одна
И ещё одна (моя любимая)

Технология изготовления иллюстраций

Шаг 1. Найти лист A4 и ручку. Нарисовать иллюстрацию, не взирая на отсутствие таланта к рисованию.

Шаг 2. Сфотографировать так, чтобы свет падал равномерно.

Шаг 3. Обесцветить и максимально увеличить контраст в фотошопе.

Шаг 4. Свести фон к белому цвету инструментом «Уровни».

В окне «уровней» вы увидите такой гребень. Правый ползунок под ним нужно сместить левее этого гребня

Шаг 5. Наложить подходящий текст.

Абстрактный пример

A/B-тест

Параллельно я попросил дизайнера нарисовать вариант сайта в современном дизайне. Мы его тоже сверстали и устроили испытание лидами.

Вот вариант дизайнера.

Одна из секций на сайте

Источник трафика — публикация в «Типичном программисте» во «Вконтакте».

Вариант «A», мой:

Количество посетителей: 336.

Количество заявок: 59.

Конверсия: 17.56%.

Вариант «B», дизайнера:

Количество посетителей: 326.

Количество заявок: 62.

Конверсия: 19.02%.

Победила дружба

По итогам теста с отрывом в полтора процента победил вариант дизайнера — стильный и современный. Но кривые иллюстрации на коленке делать дешевле.

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Вячеслав Гримальский", "author_type": "self", "tags": [], "comments": 48, "likes": 62, "favorites": 96, "is_advertisement": false, "subsite_label": "design", "id": 50204, "is_wide": true, "is_ugc": true, "date": "Tue, 06 Nov 2018 14:10:58 +0300" }
{ "id": 50204, "author_id": 167408, "diff_limit": 1000, "urls": {"diff":"\/comments\/50204\/get","add":"\/comments\/50204\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/50204"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

48 комментариев 48 комм.

Популярные

По порядку

Написать комментарий...
18

Боюсь, у вас просто получились хорошие иллюстрации.

Ответить
12

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

Ответить
12

Нет. Вот эти каракули на самом деле вин. Реально

Ответить
6

Нужно сравнивать не 2 совершенно разных лендинга, а один и тот же лендинг с разными иллюстрациями - один вариант с иллюстрациями от дизайнера, второй - рисованные.

Сейчас это сравнение несравнимых вещей.

Ответить
4

Пока не посмотрел сами тесты думал, что сравниваются варианты иллюстраций на коленке vs профессиональные. На самом же деле варианты радикально отличаются по объему и логике подачи информации причем авторский вариант в этом плане сильно выигрывает.

Ответить
3

Интересный тест :) По расположению блоков версии совпадали? На скриншоте версии дизайнера этапы работы расположены так, что сложно понять их порядок. Возможно, подобные моменты сказались на конверсии.

Ответить
1

Не совпадали. Разница не только в иллюстрациях, но и в структуре тоже была.
В разделе A/B тест есть ссылки на оба варианта - можно сравнить.

Ответить
4

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

Ответить
0

Если бы на сайте дизайнера была отрисовка, то да. А так иллюстрации видно только у автора на сайте. :)

Ответить
3

Вячеслав, Creatium это ребрендинг ПлатформыLP или отдельный самостоятельный конструктор?

Ответить
1

Отдельный самостоятельный конструктор.

Ответить
2

хм, а в чем смысл его существования, если по факту это копия редактора из Платформы LP ?

Ответить
2

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

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

Ответить
1

То есть вы разошлись с платформой и теперь будете делать свой новый конструктор?
Планируется ли возможность трансфера страничек к вам?

Ответить
1

Мы все еще дружим с Платформой, но выбрали два разных вектора развития. Я буду двигаться в сторону машинного обучения и алгоритмов автоматического повышения конверсии. На Платформе есть отдельное видение.

Ответить
0

Типа Лилу и Ватсхэлпа?

Ответить
1

Трансфер возможен, но с ограничениями. Нужно в поддержку написать.

Ответить
3

О чем пост?) Как я понял просто надо было что-то написать... Ну ок.

Ответить
0

Нативная реклама конструктора, конечно же.

Ответить
3

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

Я бы сделал больше демонстраций и примеров - что сможете делать, где применять, какие задачи можно решить с помощью нашего курса (и редакторов, которые мы учим делать). Думаю конверсия станет еще лучше.

Ответить
3

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

Ответить
2

Насколько честный A/B тест? С какой периодичностью были сделаны публикации в паблике ТП? Как отразился тот факт, что часть аудитории, увидевшая первую публикацию не перейдут по второй? Есть скрины, как выглядел рекламный пост? Креатив один и тот же?

Ответить
0

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

Ответить
0

То есть просто поменяли дизайн страницы входе увеличивающегося траффика?

Ответить
1

Нет. Первый посетитель видел вариант "А". Второй посетитель видел вариант "Б", и так дальше по очереди.

Ответить
0

А как это технически реализовано, если не секрет?

Ответить
0

В конструкторе сайтов делал с поддержкой A/B тестов

Ответить
2

Отличный тест.

Ответить
2

Я так с 2002 делаю😆

Ответить
2

Смешной эксперимент, хоть и не оч чистый: вы-то уже знаете основы UX/UI, где какие элементы и как более мнеее расположить, есть то что называется "профессиональная настроенность". У человека далекого от веб-разработки получилось бы хуже.

Ответить
2

Тоже решил попробовать делать иллюстрации вручную. Правда для рисования использовал графический планшет.
http://rusartdesign.ru/st/%D0%B1%D0%B5%D1%81%D0%BF%D0%BB%D0%B0%D1%82%D0%BD%D0%B0%D1%8F-%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%B1%D0%B8%D0%B7%D0%BD%D0%B5%D1%81%D0%B0/

Получилось еще корявее, но пользователям нравится. Может быть в этом и есть изюминка

Ответить
0

Тоже пробовал планшет, но в итоге пришел к бумаге - результат получается менее компьютерным. Более живым)

Ответить
1

http://joxi.ru/p27nQo9iod1eYm

Разница в уровне конверсии не является пока что статистически значимой.

Другое дело, что без дизайнера срезаются косты :)

Спасибо за туториал по иллюстрациям.

Ответить
1

Уау! Спасибо за идею 😘

Ответить
1

Думаю идея изображения намного важнее подачи.

Ответить
1

Это не A/B тест. Это SDFVDBSGJHS/IUTTDGFBDAWEH тест.

Ответить
1

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

Но иллюстрации шикарные, возьму на заметку идею:)

Ответить
1

Для большей скорости и удобства есть смысл использовать в таких целях графические планшеты Wacom. Аккурат для таких же целей приобрел себе недавно. Рад встретить единомышленников) Лайк.

Ответить
0

Пробовал на айпаде, но результат выходил не таким душевным)

Ответить
0

Что это было?

Ответить
0

Нативная реклама очередного конструктора сайтов для адептов БМ. Ваш кэп

Ответить
0

Я бы ещё добавил, что в ВК больше пользуются мобильными устройствами, а лендинг дизайнера не очень читальный с моб версии. Хотя идея мне понравилась, нужно будет протестировать отдельно.

Ответить
0

http://oknaludyam.ru идея не нова, конечно. Думаю я бы сконвертнулся на такой лендос скорее.

Ответить
0

Это потому что и вы и дизайнер использовали одну и ту же причину для конверсии: простоту достижения и понятность цели. И различие было только в том, что вы по психотипу конструктор, а он, как и любой дизайнер, рефлектор, поэтому форма для этого приёма была чуть-чуть более разная (минимально), вместо цели вы использовали счастье в конструктивном его понимании. Вам стоило бы попытаться подумать над принципиально другими приёмами, если хотите настоящие А\Б тесты, которые позволяют понять объективные причины продаж, дело же не в самом соревновании кто прав ради просто соревнования, верно?

Ответить
0

С вашего сайта внизу лендоса: "Будут еще курсы, более простого и более сложного уровня."
запятая не нужна

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }