Здравия желаю, товарищ Читатель!
Зачем нужны посадочные страницы в 10 блоков, если важная информация есть на первом экране и можно ограничиться разделами «О нас», «Услуги», «Цены» и «Контакты»? Ответ простой: чтобы поглотить внимание покупателя и замотивировать вступить во взаимоотношения с товаром и побудить купить продукт.
Самые используемые техники вовлечения посетителя в процесс покупки товара — это AIDA (от англ. Attention-Interest-Desire-Action) и PMPHS (Pain-More Pain-Hope-Solution). Руководствуясь этими техниками, строится логическая структура посадочной страницы и определяются блоки, которые будут присутствовать на ленде.
Для тебя я собрала 20 наглядных примеров блоков , выполняющих конкретную информативную функцию. Примеры пригодятся, если ты , а также облегчат общение с проектировщиком и дизайнером твоего лендинга.
В этом посте ты познакомишься с первой половиной — 10 блоками. Остальные 10 примеров жди в следующей статье в августе.
20 блоков лендинга — выбери свои
- Блок-составные части продукта, комплектация;
- Блок-гарантии (тройная);
- Блок о достижениях/преимуществах твоей компании;
- Блок о сотрудниках компании;
- Блок об услугах/отделах компании;
- Блок о партнерах/клиентах;
- СТА (Call-to-action, призыв к действию);
- Блок-преимущества клиента от использования твоего продукта («Почему мы?»);
- Блок о процессе предоставления услуги (доставка, способ осуществления сделки);
- Блок-Калькулятор;
- Блок с акцией+ограничитель по времени;
- Блок с подарком+условия получения подарка;
- Блок с картой расположения компании («Как проехать»);
- Блок с контактной информацией;
- Блок-сравнительная таблица;
- Блок-идентификация «Для кого?»;
- Блок-ЧАВО.
*Нумерация блоков представлена приблизительна — порядок блоков на лендинге зависит от ниши. Определить порядок блоков можно при помощи всё тех же инструментов Яндекс Метрики ( , карта скроллинга, карта кликов) поможет тебе эта статья.
Содержит ключевую информацию для посетителя лендинга, УТП твоей компании. Желательно, чтобы эта информация также была конкурентоспособной. В зависимости от ниши, такой информацией может быть: цена продукта (от 488 рублей за 1 шт.), сроки доставки (доставка за 2 дня), место производства (напрямую из Германии). более подробно можешь узнать из предыдущей статьи.
Подходит для: оптовых тематик; ниши, где покупатель недостаточно осведомлен о преимуществах продукта (в основном — товара).
Блок может быть ответом на вопрос покупателя «Почему так дорого?», если на нем детально расписаны характеристики товара. Это нужно для создания более четкой картины объекта вожделения в голове потенциального клиента.
3. Блок-составные части продукта, комплектация
Подходит для: описания комплексных услуг; ниши по организации досуга; описания комплектации товара.
Если блок про характеристики продукта демонстрирует товар всецело, то блок про составные части раскладывает продукт (товар или услугу) на слагаемые.
4. Блок-гарантии (тройная)
Подходит для: любой посадочной страницы.
Чаще всего располагается после блока со стоимостью продукта. Строится на основании возражений ЦА и закрывает их, демонстрируя преимущества сервиса именно в твоей компании.
5. Блок о достижениях/преимуществах
Подходит для: любого лендинга; брендированного продукта от известной компании; особо важно в высококонкурентной нише.
Особо важен для бизнеса в высококонкурентной нише. Например, если несколько компаний предлагают один и тот же товар, то выигрывать у конкурентов будет тот, кто предоставит самые удобные условия для сделки и покажет компетентность работы своей компании (с какого года существует компания, количество реализованных проектов, скидки и подарки постоянным покупателям, количество точек продаж и т.д.).
6. Блок о сотрудниках компании
Подходит для: ниши по предоставлению услуг
Применение целесообразно в ситуации, где важно не ЧТО получит покупатель, а КАК будет достигнут результат.
7. Блок об услугах/отделах компании
Подходит для: тематик комплексных услуг; лендингов с несколькими товарами в одной области применения.
8. Блок-партнеры
Подходит для : любого лендинга.
Блок повышает доверие посетителя, если использовать логотипы известных клиентов.
Подходит для: инфо-бизнеса; сферы услуг; ниши, где важен процесс (КАК) получения результата.
Отличное дополнение к кейсам — визуальная демонстрация БЫЛО/СТАЛО , а также инфографика и принтскрины со статистикой.
Ниши, где важна демонстрация:
Продолжение следует…
Сегодня мы обсудили первые 10 блоков для лендинга, в ближайшее время опубликуем еще — следите за обновлениями!
Наступивший год принес массу свежих технологий и тенденций, но доминировать вероятнее всего будут направления, проявившие себя к концу 2015-го. Больше видео, решений с вертикальными паттернами, идей навеянных материальным дизайном и стильных слайдов. Для этих техник следует ожидать роста популярности. Большинство из новых концепций не столь трудны для осуществления. Ниже будут рассмотрены 11 трендов веб-дизайна (и много отличных сайтов для примера) с которыми мы столкнемся в 2016-м году. Образцы этих дизайнов действительно помогут прочувствовать тенденцию.
Сайт привлекателен анимированными фонами, интерактивными эффектами
Еще более красивая типографика
Упрощенные интерфейсы вымостили дорогу к идее применения красивой типографики (а также удобных веб-инструментов, наподобие Google Fonts и Adobe Typekit – расширив огромными онлайн-библиотеками возможности разработки). Простота надписей (читабельных и легко воспринимаемых) в концепции «каллиграфии», освобождает пространство другим элементам. Что следует попытаться увязать, так это удобочитаемый шрифт и занимательную новизну опций.
сайт ресторана в стиле кантри: размеренный и неспешный, без суеты (броских контрастов) с хорошо подобранными цветами и шрифтами. Стиль кантри (rustic-style) дает ощущение близости к природе. Фирменная символика, связанная с пернатыми, отражена графически (иллюстрации, рисунки фонов). Вообще, это часть айдентики – «ястреб и курица» (англ. Hawk and Hen), как символ удачной охоты
Иллюстрации и рисунки
Иллюстрации с рисунками вносят в дизайн творческую фантазию и веселый настрой. Работает для всех типов сайтов (не только детских). Популярность стиля «с иллюстрациями» подросла также, когда дело дошло до дизайна мелких элементов (иконки и пр.) в оформлении сайта.
Что особенно радует в этом тренде – иллюстрации добавляют сайту персональности. Поскольку иллюстрации или «скетч иконки» скорее всего рисованные (от руки), то визуально и по общим ощущениям, такой сайт для пользователей представляется более персональным. С точки зрения развития тренда в направлении повышения эффективности коммуникации с пользователем – на этом пути предстоит еще многое сделать.
Сайт располагает к себе приятными микроитерацииями и иллюстрациями. и «Беби-стиль» всего сайта превращают дизайн в игру
Исследуя просторы сети, многие наверняка замечают, что большинство сайтов построены на основе сетки. Элементы или блоки в таких сайтах расположены на странице не хаотично, как это было несколько лет назад, а в определенной последовательности и структурированы (порой это бывает незаметно при первом взгляде). Такие сайты хорошо сбалансированы и, как правило, выглядят чисто и опрятно. Большая заслуга этой опрятности принадлежит сетке , лежащей в основе дизайна и предоставляющей пользователю понятную, неискаженную структуру сайта.
Несмотря на то, что сетки, как правило, представляют простые пересечения горизонтальных и вертикальных линий с заданным интервалом, многие дизайнеры используют их в качестве украшения и подчеркивания очевидных геометрических фигур и визуальных путей. Мы можем увидеть эти пути и фигуры в сайтах-портфолио, галереях, блогах и других творческих проектах. Это и не удивительно, так как сетка обладает рядом полезных свойств и преимуществ, например, таких как:
- Создание визуальных путей для того, чтобы направлять пользователей
- Комбинирование различных компонентов в единое целое
- Сортировка информации
Ну и, конечно же, сетка как нельзя лучше подходит для демонстрации красоты прямых линий. Ниже мы подготовили сайты, в которых сетка является больше, чем просто основой дизайна.
Заключение
Как уже было сказано, сетка является неотъемлемой частью дизайна и легко превращает хаос в порядок, а в дизайне сайта, как нигде более, эта возможность действительно важна. Большинство пользователей хотят получить информацию быстро и просто, и нет лучшего способа, чем представить им понятную и хорошо организованную структуру.
Нет, это вовсе не означает, что внешний вид сайта должен быть линейным и простым. Порой, даже простые геометрические фигуры, умело "разбавленные" цветами, изображениями и графикой (вспомните плоский дизайн), могут быть по-настоящему привлекательными. Как считаете? Разве такое явное разделение на блоки не выглядит привлекательным?
Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.
Верстка сайта – ремесло для посвященных
Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:
Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html
кода и таблиц css
скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.
В процессе верстки кодом html происходит разбивка «скелета » сайта на части. А с помощью css (каскадных таблиц стилей ) задаются размеры его «костей », цвет и расположение.
Различают несколько видов верстки:
I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег