Кейс веб-дизайнера: лендинг для инфобизнеса за 2 дня

Привет! Меня зовут Игорь Кочергин, я — частный специалист в сфере веб-дизайна и верстки на Тильде, занимаюсь созданием сайтов и лендингов под ключ.

Главный экран лендинга
Главный экран лендинга

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

Первый контакт

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

Кейс веб-дизайнера: лендинг для инфобизнеса за 2 дня

От меня в данном случае требовался только дизайн, так как команда разработчиков у Азы своя. Важным условием стал срок исполнения работы — всего два дня. Средний временной показатель одного проекта у меня составляет 7 суток: пришлось скорректировать привычный график и сразу приступать к работе.

Подготовительный этап

В первую очередь я попросил заказчицу показать референсы. Важно проанализировать конкурентов, найти точки роста и определить целевую аудиторию.

Далее расписали структуру лендинга: Аза высказала пожелания по шрифтам и цветам, а также написала тексты для каждого блока. Особое внимание уделили адаптиву для всех устройств, так как сайт-референс некорректно отображался в десктопной версии.

Обсуждение деталей внутри блоков

Первый блок. Этот курс для вас, если вы:

  • Специалист или эксперт;
  • Начинающий или действующий предприниматель;
  • Хотите сменить сферу деятельности;
  • Ищите интересную идею;
  • Хотите найти роль в жизни;
  • Ищите работу по душе.
Кейс веб-дизайнера: лендинг для инфобизнеса за 2 дня

Второй блок. Программа курса:

  • Подготовка, борьба с установками;
  • Поиск ниши;
  • Поиск идеи;
  • Анализ объема рынка и конкурентов;
  • Тест идеи. Создание MVP;
  • Стоимость создания. Расчет рентабельности бизнеса.

Также мною было предложено внесение дополнительных блоков:

  • С кратким описанием организатора курса (это помогает закрыть возражения о личности спикера);
  • Часто задаваемые вопросы и техподдержка.

Начало разработки

Главный экран лендинга
Главный экран лендинга

Сначала я сделал прототипы десктопной и мобильной версии, прописал тексты и наметил местоположение всех объектов. Далее занялся поблочным заполнением. На фоне главного экрана необходимо было создать ассоциативный ряд с личностью организатора и бизнесом. Личное фото Азы с фотосессии подходило как нельзя лучше, а столицей бизнеса общепризнанно является Нью-Йорк. Кнопку Call to action («Записаться») необходимо было сделать на контрасте с основным фоном — это для лучшей конверсии.

Блок «Для кого этот курс»
Блок «Для кого этот курс»

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

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

Блок «Программа курса»

Отрисовка каждого мокапа Айфона в блоке «Тарифы» заняла достаточно много времени, но усилия того стоили. Получилось эффектно и в то же время небанально. Мокапы сделаны в разном цвете для подчеркивания альтернативы между тарифами курса.

Блоке «Тарифы»
Блоке «Тарифы»

Создавать отдельно блоки «FAQ» и «техподдержка» нецелесообразно, так как часто задаваемых вопросов было немного, поэтому их выполнили в таком варианте:

Кейс веб-дизайнера: лендинг для инфобизнеса за 2 дня

Цвета и шрифт

Изначально Аза планировала сделать лендинг в пастельных тонах. Я же предложил выполнить первые два блока в более ярких цветах, чтобы ассоциировать их с «новой жизнью». Темные блоки сделаны для контраста и динамики. Шрифт заказчица выбрала сама и никаких других вариантов не рассматривала.

Использованный шрифт:

Кейс веб-дизайнера: лендинг для инфобизнеса за 2 дня

Отзыв

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

Кейс веб-дизайнера: лендинг для инфобизнеса за 2 дня

Автор:

  • Telegram — @igkochergin
  • Inst — @igkochergin
22
1 комментарий

Не позорься)

1
Ответить