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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: