Привет! Меня зовут Игорь Кочергин, я — частный специалист в сфере веб-дизайна и верстки на Тильде, занимаюсь созданием сайтов и лендингов под ключ.Главный экран лендингаЗабегая вперед, представленный лендинг показал хорошую конверсию, на что я получил соответсвующий отзыв от заказчицы. Цифровые показатели из этических соображений раскрываться не стали.Первый контактКо мне обратилась Аза с вопросом о создании сайта. Сразу показал свои кейсы, рассказал о ходе работы и взаимодействия. Клиент, в свою очередь, разъяснила цель лендинга и задачи, которые будут стоять перед исполнителем.От меня в данном случае требовался только дизайн, так как команда разработчиков у Азы своя. Важным условием стал срок исполнения работы — всего два дня. Средний временной показатель одного проекта у меня составляет 7 суток: пришлось скорректировать привычный график и сразу приступать к работе.Подготовительный этапВ первую очередь я попросил заказчицу показать референсы. Важно проанализировать конкурентов, найти точки роста и определить целевую аудиторию.Далее расписали структуру лендинга: Аза высказала пожелания по шрифтам и цветам, а также написала тексты для каждого блока. Особое внимание уделили адаптиву для всех устройств, так как сайт-референс некорректно отображался в десктопной версии.Обсуждение деталей внутри блоковПервый блок. Этот курс для вас, если вы:Специалист или эксперт;Начинающий или действующий предприниматель;Хотите сменить сферу деятельности;Ищите интересную идею;Хотите найти роль в жизни;Ищите работу по душе.Второй блок. Программа курса:Подготовка, борьба с установками;Поиск ниши;Поиск идеи;Анализ объема рынка и конкурентов;Тест идеи. Создание MVP;Стоимость создания. Расчет рентабельности бизнеса.Также мною было предложено внесение дополнительных блоков:С кратким описанием организатора курса (это помогает закрыть возражения о личности спикера);Часто задаваемые вопросы и техподдержка.Начало разработкиГлавный экран лендингаСначала я сделал прототипы десктопной и мобильной версии, прописал тексты и наметил местоположение всех объектов. Далее занялся поблочным заполнением. На фоне главного экрана необходимо было создать ассоциативный ряд с личностью организатора и бизнесом. Личное фото Азы с фотосессии подходило как нельзя лучше, а столицей бизнеса общепризнанно является Нью-Йорк. Кнопку Call to action («Записаться») необходимо было сделать на контрасте с основным фоном — это для лучшей конверсии.Блок «Для кого этот курс»Блок «Для кого этот курс» решели сделать в виде карточек с подходящими по смыслу фотографиями людей. Добавление анимации способствовало увеличению динамики на сайте, для привлечения дополнительного внимания. Для интерактивности добавили анимированный элемент — строка поиска, в которой автоматически набирались и стирались заголовки каждой карточки.В блоке «Программа курса» каждая позиция сделана раскрывающейся, чтобы не нагромождать пространство. В свернутом варианте все выглядит аккуратно и чисто. Темно-серый фон способствует поддержанию темпа и контраста на сайте.Блок «Программа курса»Отрисовка каждого мокапа Айфона в блоке «Тарифы» заняла достаточно много времени, но усилия того стоили. Получилось эффектно и в то же время небанально. Мокапы сделаны в разном цвете для подчеркивания альтернативы между тарифами курса.Блоке «Тарифы»Создавать отдельно блоки «FAQ» и «техподдержка» нецелесообразно, так как часто задаваемых вопросов было немного, поэтому их выполнили в таком варианте:Цвета и шрифтИзначально Аза планировала сделать лендинг в пастельных тонах. Я же предложил выполнить первые два блока в более ярких цветах, чтобы ассоциировать их с «новой жизнью». Темные блоки сделаны для контраста и динамики. Шрифт заказчица выбрала сама и никаких других вариантов не рассматривала.Использованный шрифт:ОтзывКак и договаривались с клиентом, ровно через два дня макет был готов, за что от Азы остался исключительно положительный отзыв.Автор:Telegram — @igkocherginInst — @igkochergin
Не позорься)