Как сделать продающий первый экран сайта для онлайн курса?

Привет!

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

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

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

А теперь переходим к моему авторскому алгоритму создания первого экрана!

1. Анализируем! Всегда во время работы нужно опираться на какой-то предыдущий опыт или на конкурентов. Смотрите сайты в топе выдачи Яндекс и Гугл, гляньте Behance, может быть что-то найдете особенное. После того, как проанализируете сайты, у вас сложиться +- очевидная картина, что точно должно быть на первом экране, какие смыслы и стиль заходят вашей целевой аудитории.

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

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

4. Дизайним! Как только мы проанализировали рынок, написали смыслы и примерно поняли композицию, пришло время упаковывать наше решение! Вот тут уже вашей фантазии нет края, так как можно делать абсолютно всё (в рамках разумного) Яркие цвета, необычные сочетания, популярные и не особо шрифты. Пробуйте сделать такой экран, чтобы вам самим захотелось купить тот продукт, который вы упаковываете, тогда эффект точно будет!

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

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

Зашел на беханс, выбрал несколько интересных проектов, которые +- похожи по нише на то, с чем мы работаем сейчас. Просмотрел внимательно, что вообще сейчас в тренде, на чём дизайнер сделал акцент больше и тд. Супер, теперь есть понимание, что можно получить в итоге.

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

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

Протестировав несколько вариантов шрифтов и оттенка цвета для кнопки, получился вот такой вариант дизайна. Я считаю, что получилось супер! Яркий, притягивающий взгляд и просто такой, на который хочется нажать. Уверен, что внедрив даже этот концепт первого экрана себе в проект, можно увеличить конверсию всей автоворонки на 10-20%!

Что ж, на этом всё. Надеюсь было максимально полезно! Как вам метод?

А если хотите узнать подробнее про то, как всегда делать релевантный дизайн под свою аудиторию и с помощью него увеличить доходимость до своих вебинаров/продуктов, то можно написать мне в телеграм, покажу вариант, как можно добиться результата!