Здравия желаю, товарищ Читатель!

Зачем нужны посадочные страницы в 10 блоков, если важная информация есть на первом экране и можно ограничиться разделами «О нас», «Услуги», «Цены» и «Контакты»? Ответ простой: чтобы поглотить внимание покупателя и замотивировать вступить во взаимоотношения с товаром и побудить купить продукт.

Самые используемые техники вовлечения посетителя в процесс покупки товара — это AIDA (от англ. Attention-Interest-Desire-Action) и PMPHS (Pain-More Pain-Hope-Solution). Руководствуясь этими техниками, строится логическая структура посадочной страницы и определяются блоки, которые будут присутствовать на ленде.

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

В этом посте ты познакомишься с первой половиной — 10 блоками. Остальные 10 примеров жди в следующей статье в августе.

20 блоков лендинга — выбери свои

1. Блок-составные части продукта, комплектация;
2. Блок-гарантии (тройная);
3. Блок о достижениях/преимуществах твоей компании;
4. Блок о сотрудниках компании;
5. Блок об услугах/отделах компании;
6. Блок о партнерах/клиентах;
7. СТА (Call-to-action, призыв к действию);
8. Блок-преимущества клиента от использования твоего продукта («Почему мы?»);
9. Блок о процессе предоставления услуги (доставка, способ осуществления сделки);
10. Блок-Калькулятор;
11. Блок с акцией+ограничитель по времени;
12. Блок с подарком+условия получения подарка;
13. Блок с картой расположения компании («Как проехать»);
14. Блок с контактной информацией;
15. Блок-сравнительная таблица;
16. Блок-идентификация «Для кого?»;
17. Блок-ЧАВО.

*Нумерация блоков представлена приблизительна — порядок блоков на лендинге зависит от ниши. Определить порядок блоков можно при помощи всё тех же инструментов Яндекс Метрики ( , карта скроллинга, карта кликов) поможет тебе эта статья.

Содержит ключевую информацию для посетителя лендинга, УТП твоей компании. Желательно, чтобы эта информация также была конкурентоспособной. В зависимости от ниши, такой информацией может быть: цена продукта (от 488 рублей за 1 шт.), сроки доставки (доставка за 2 дня), место производства (напрямую из Германии). более подробно можешь узнать из предыдущей статьи.

Подходит для: оптовых тематик; ниши, где покупатель недостаточно осведомлен о преимуществах продукта (в основном — товара).

Блок может быть ответом на вопрос покупателя «Почему так дорого?», если на нем детально расписаны характеристики товара. Это нужно для создания более четкой картины объекта вожделения в голове потенциального клиента.

3. Блок-составные части продукта, комплектация

Подходит для: описания комплексных услуг; ниши по организации досуга; описания комплектации товара.

Если блок про характеристики продукта демонстрирует товар всецело, то блок про составные части раскладывает продукт (товар или услугу) на слагаемые.

4. Блок-гарантии (тройная)

Подходит для: любой посадочной страницы.

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

5. Блок о достижениях/преимуществах

Подходит для: любого лендинга; брендированного продукта от известной компании; особо важно в высококонкурентной нише.

Особо важен для бизнеса в высококонкурентной нише. Например, если несколько компаний предлагают один и тот же товар, то выигрывать у конкурентов будет тот, кто предоставит самые удобные условия для сделки и покажет компетентность работы своей компании (с какого года существует компания, количество реализованных проектов, скидки и подарки постоянным покупателям, количество точек продаж и т.д.).

6. Блок о сотрудниках компании

Подходит для: ниши по предоставлению услуг

Применение целесообразно в ситуации, где важно не ЧТО получит покупатель, а КАК будет достигнут результат.

7. Блок об услугах/отделах компании

Подходит для: тематик комплексных услуг; лендингов с несколькими товарами в одной области применения.

8. Блок-партнеры

Подходит для : любого лендинга.

Блок повышает доверие посетителя, если использовать логотипы известных клиентов.

Подходит для: инфо-бизнеса; сферы услуг; ниши, где важен процесс (КАК) получения результата.

Отличное дополнение к кейсам — визуальная демонстрация БЫЛО/СТАЛО , а также инфографика и принтскрины со статистикой.

Ниши, где важна демонстрация:

Продолжение следует…

Сегодня мы обсудили первые 10 блоков для лендинга, в ближайшее время опубликуем еще — следите за обновлениями!

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

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

• Создание визуальных путей для того, чтобы направлять пользователей
• Комбинирование различных компонентов в единое целое
• Сортировка информации

Ну и, конечно же, сетка как нельзя лучше подходит для демонстрации красоты прямых линий (за далеко ходить не придется). Ниже мы подготовили сайты, в которых сетка является больше, чем просто основой дизайна.

Заключение

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

Нет, это вовсе не означает, что внешний вид сайта должен быть линейным и простым. Порой, даже простые геометрические фигуры, умело «разбавленные» цветами, изображениями и графикой (вспомните ), могут быть по-настоящему привлекательными. Как считаете? Разве такое явное разделение на блоки не выглядит привлекательным?

Вопрос масштабируемости сайта актуален для каждого веб-дизайнера. Согласитесь, создавая авторский визуальный продукт, хочется, чтобы он оставался одинаково красивым и удобным для пользователей любых устройств. Вариант неприемлем, когда блог или сайт смотрится отлично на экране с разрешением 1920х1080px и совершенно не читабелен на экране смартфона с параметрами 240х320px.

10-15 лет назад не было такого разнообразия и количества мониторов. Поэтому разрабатывать дизайн для сайтов было просто. Создаёшь обычный статический дизайн под фиксированную ширину экрана и можешь не сомневаться - большинство пользователей увидит сайт так, как и задумано.

Сегодня же у пользователей не только мониторы с самым разным разрешением, 3,5 миллиарда человек заходят в интернет с мобильных устройств - нетбуков, планшетов, смартфонов и т.д. Создавать сайты, используя старые методы, уже не комильфо.

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

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

Статический дизайн

"Статичным" или "статическим" называется сайт, который состоит из неизменяемых HTML-страниц. Такой сайт подразумевает наличие закрепленной темы с фиксированной шириной и чаще всего содержит одну или буквально несколько страниц. Чтобы отобразить такой сайт по центру экрана достаточно 1000 px. Контент всегда будет выравниваться строго по центру.

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

Преимущества статического дизайна:

• Экономия времени и сил при разработке;
• Требует меньше нагрузки на хостинг;
• Вывод картинок, видео-материалов, баннеров можно осуществлять без опасения, что они перекроют друг друга или сместятся при разном разрешении монитора.

Недостатки статического дизайна:

• На мобильном устройстве сайт будет отображаться с горизонтальной полосой прокрутки;
• Широкоформатные мониторы отображают статический дизайн довольно убого - вариант не для тех, кто стремится к эффектности.

Статичных сайтов раньше было намного больше – появление и развитие CMS способствовало сокращению их количества в пользу динамических. Примеры статических сайтов:

Динамический дизайн

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

"Резиновый" дизайн

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

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

Адаптивный дизайн

Чтобы сайт одинаково хорошо выглядел и на мобильном телефоне и на большом мониторе, разработчики некоторых сайтов пошли по пути разработки нескольких, по сути, независимых, вариантов дизайна для разных устройств. Когда пользователь заходил на сайт, сервер определял тип устройства и разрешение экрана и "отдавал" ту или иную версию сайта. При этом каждая версия была заранее оптимизирована под разные разрешения. Для версий под экраны с маленьким разрешением использовались уменьшенные изображения, а некоторые элементы вообще убирались. Сама компоновка блоков также отличалась от "большой" версии.

Адаптивный дизайн оправдан при создании масштабных проектов: информационных порталов, интернет-магазинов, форумов, корпоративных сайтов и других подобных им ресурсов. Особенно эффектно он смотрится на мониторах с диагональю не менее 15,6’’.

Принцип адаптивности строится на создании одного URL, который подстраивает контент под различные форматы экранов. Примеры:

Посмотрите, как меняется расположение текста и картинок на различных экранах. Почему это круто? Одна из причин - Google отдаёт предпочтение таким ресурсам в поисковой выдаче. Другая причина - такие сайты легче проектировать и поддерживать, а это упрощает работу многих людей.

"Отзывчивый" дизайн

Последним методом, к которому пришли веб-дизайнеры, стал "отзывчивый" дизайн (англ. responsive design), который противопоставили обычному "адаптивному" дизайну (англ. adaptive design), хотя до настоящего времени эти термины часто путают и употребляют в похожем смысле. "Отзывчивый" дизайн соединяет в себе черты адаптивного и "резинового" дизайнов. Он автоматически подстраивается под любую ширину экрана, как и резиновый. При этом в процессе подстраивания может меняться расположение блоков, размер картинок. Также могут появляться, пропадать или изменяться некоторые элементы. Например, обычное горизонтальное меню может поменяться на выпадающее.

Ещё более важный момент - места, из которых люди будут приходить на ваш сайт. Поэтому очень важно учитывать любую скорость интернета, ведь огромное количество людей живут в отдалённых районах, где скорость интернета даже не 1 мб/с. Существует исследование, согласно которому, 57% пользователей уйдут с вашего сайта, если он загружается дольше нескольких секунд. Не так давно Google начал учитывать скорость при ранжировании сайтов. Она не оказывает большое влияние на позицию сайтов со средней скоростью загрузки, но если страница не загружается за определённое время, то поисковый алгоритм применяет к такому сайту штрафные санкции.

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

Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена . Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.

Отличия блочной вёрстки от табличной

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега

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

Единственный ощутимый минус блочной вёрстки - сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок