Мы живем в мире, в котором прогресс не стоит на месте: это касается и интернет-маркетинга, и такого мощного его инструмента, как landing page. То, что работало вчера, не обязательно будет работать сегодня — тренды со временем приедаются, а устаревшие шаблоны посадочных страниц не дают нужной конверсии. Поэтому необходимо постоянно быть в тонусе и следить за новинками интернет-маркетинга. И в этой статье мы поговорим о том, каким должен быть дизайн landing page в 2017 году.
Если говорить о дизайне продающих страниц, то в 2017 году несомненным королем является материальный стиль, разработанный и описанный компанией Google.
Так, в материальном дизайне у объектов появились толщина, тени и свойства, что позволяет ощутить их натуральность, понять положение в пространстве и взаимодействие. Сайты, в свою очередь, стали более эстетичными и, если можно так сказать, “ощутимыми” на подсознательном уровне. Основная цель веб-дизайнеров — сделать сайт приятным для глаз, сохраняя при этом простоту, чтобы пользователь мог легко ориентироваться без дополнительной навигации. В материальном дизайне эта цель реализована по максимуму.
Что касается интернета, то в настоящее время мы живем во вселенной Google… Это глупо отрицать. Их специалисты анализируют психологию пользователей и на основе полученных данных решают, что можно изменить, чтобы глобальная информационная сеть стала для нас еще уютнее. Так что если вы хотите себе стильный и современный одностраничник, то сделав выбор в пользу материального дизайна, вы определенно не ошибетесь.
Второй тренд 2017 года, касающийся дизайна landing page — это живые профессиональные фотографии, которые пришли на смену стоковым изображениям. Дело в том, что с использованием снимков купленных на бирже, созданы миллионы сайтов, большинство из которых напоминают некачественные сателлиты. Поэтому дизайн лендинга с использованием стоковых клише может изначально настроить посетителя отрицательно.
Большую роль в популяризации живых фотографий сыграл Instagram. Людям нравится следить за жизнью других людей: смотреть на то, что они делают, как проводят свободное время, что у них на обед. Сейчас для человека это нормально: мы доверяем такой модели и, более того, она нам нравится. Поэтому хорошим решением было бы использовать фотографии продукта, того, как проходит рабочий день внутри компании и так далее.
Отличный пример дизайна лендинга с использованием живых изображений — одностраничник компании Grain and Mortal. Помимо того, что разработчики сайта использовали живые фотографии в оформлении своего сайта, в его шапке они разместили видеофон, демонстрирующий рабочий процесс, брифинги и радостных сотрудников, которые явно любят свою работу.
Живые фотографии — это очень мощный тренд, который служит сразу двум основным целям: создает ощущение того, что пользователь “внутри” жизни бренда и настраивает его на доверительные отношения.
Минимализм в последние годы стал одной из главных идей в дизайне посадочных страниц, и это неудивительно. Захламление сайта приводит к рассеиванию внимания пользователя, а в нашем случае посетитель должен быть сосредоточен на продукте и на том, какие выгоды он может получить. Именно поэтому современные дизайнеры рекомендуют убрать все отвлекающие элементы из макета.
Это особенно важно, когда речь идет о дизайне landing page, где потенциального клиента надо подвести к целевому действию.
Хороший пример минималистичной страницы — это сайты таких компаний, как Dropbox и Mailbox.
Минималистичный лендинг Dropbox:
Отличный пример страницы захвата на которой нет ничего лишнего, и в тоже время все предельно понятно.
Если рассмотреть подробнее, то цель лендинга Dropbox — это привести потенциального клиента к регистрации, поэтому кнопка “Sign up” является самым ярким элементом страницы. Чтобы разбавить белый фон дизайнеры использовали неброское изображение, которое, с одной стороны, не дает заскучать, с другой не привлекает к себе излишнего внимания.
Так, специалисты Dropbox, на одном развороте смогли показать:
Давайте рассмотрим также дизайн landing page компании Mailbox.
Здесь практически все то же самое: большая кнопка, призывающая скачать приложение и демонстрация его работы. Различие между посадочной страницей Dropbox только одно: нажав на Play, можно посмотреть короткое видео о том, как работает Mailbox. Думаю, вы согласитесь, что это превосходный прием, который без труда снимет все возражения потенциального клиента.
Подведем итог: используя минимализм в дизайне посадочной страницы, вы не рискуете переборщить с количеством точек захвата внимания, благодаря чему сохраняете контакт с целевой аудиторией и выделяете самые важные зоны.
Я уже слышу возмущения, вроде: “Конечно, я буду рассказывать о своем продукте! Как же его еще продать?”. Но я хочу сказать, что если вы решили написать про преимущества своего продукта и перечислить выгоды для клиента, то вы в 2015, а на дворе уже как бы 2017.
Вместо этого я предлагаю вам показать работу того, что вы продаете с помощью инфографики. Текст — это хороший инструмент для воздействия на клиента, но каким образом он работает? С помощью символов, из которых складываются слова, люди создают в своей голове те или иные образы. Когда текст крутой, у читателя возникает сочная и подробная картинка того, как работает компания, что она предлагает и почему это ценно. Если образ “правильный”, это приводит к покупке.
Настоящая вербальная магия. Но все же у такого подхода есть один минус — невозможно наверняка предугадать субъективный опыт человека, и узнать как он воспримет то или иное слово. Картинка, которую он нарисует в своей голове может сильно отличается от того, что вы на самом деле хотели сказать. В итоге — неправильное понимание и отрицательное решение.
Чтобы максимально избежать недопонимания с клиентом, следует тщательно прорабатывать целевую аудиторию и максимально «упаковывать» текст в визуальные формы. Например, разместите на сайте инфографику: она сделает дизайн посадочной страницы более аккуратным и лаконичным.
Отличным примером реализации этого тренда может послужить одностраничник компании 1С.
Если речь идет об информационном продукте, можно рассказать какой путь предстоит пройти участнику программы, и каких целей он достигнет после ее завершения.
Чтобы продать товар или услугу, с клиентом следует общаться на языке выгод, а инфографика — один из наиболее эффективных инструментов для лаконичной демонстрации преимуществ компании. Решать конечно же вам, но я бы посоветовал использовать эту “фишку” в дизайне landing page.
Несмотря на то, что этот тренд в большей степени касается верстки, чем дизайна, его нельзя игнорировать.
Статические сайты выглядят несколько “сухими” и напоминают страницу в справочнике. Когда не было java, это воспринималось нормально, но сейчас же у нас есть возможность добавить на сайт движение! Человек любит динамику почти на генетическом уровне: мы можем бесконечно смотреть на то, как горит огонь, как течет вода или как кто-то работает, и мы же придумываем такие вещи, как графический эквалайзер, чтобы видеть как движется музыка. Поэтому страницы с элементами анимации всегда будут выгодно отличаться от статичных сайтов конкурентов.
Разумеется, оживленных деталей не должно быть много. Надо также смотреть, чтобы они соответствовали духу компании и вписывались в общий дизайн лендинга.
В качестве примера, можно рассмотреть дизайн landing page рекламно-консалтинговой группы General Idea и обратить внимание на блок, где описывается их история.
Там мы увидим как их анимированный символ имитирует прогулку по значимым датам в развитии компании. Это качественный пример того, как можно использовать движущиеся элементы для повышения интереса посетителя к тому или иному информационному блоку.
Вместо подвижного персонажа вы можете снять живое видео о том, как проходит рабочий день в компании. Кстати, вот хороший пример — сайт digital-агентства “The Pixel Age”.
Выбирайте то, что подходит вам больше и действуйте!
Об идее скрытого меню говорили еще в прошлом году, однако в 2017 этому тренду уделяют особое внимание. Проблема обычного навигационного меню в том, что оно отвлекает потенциального клиента от целевого действия, из-за чего конверсия лендинга падает.
Один из вариантов скрытой навигации — т.н. «гамбургер». Эта форма давно и успешно используется для мобильных версий сайтов, а недавно перекочевала и в десктопные.
Такой пример мы можем наблюдать на fixedgroup.com, в левом верхнем углу страницы.
Меню полупрозначное и гармонично смотриться в дизайне landing page. Оно совершенно не отвлекает и создает эффект «чистого макета».
Думаю, с этим трендом мы разобрались — тут нет ничего замысловатого. Так что берите на заметку и используйте в своих целях.
Хотя этот вопрос относится скорее к технической части дизайна, но он все равно про дизайн, и о нем стоит поговорить.
В современном обществе у каждого есть смартфоны и у большинства есть планшеты, т.е. гаджеты, которые всегда под рукой. Мобильный трафик растет, и все большее число ваших потенциальных клиентов серфят в интернете не только с ПК.
Думаю, здесь все понятно без слов: современный дизайн landing page должен быть адаптирован под мобильные устройства. От этого зависит удобство пользователей. Если сайт криво выглядит или долго грузится, то его покинут. Не адаптивный макет «отрезает» более 40% трафика. И наоборот, если дизайн посадочной страницы оптимизирован под мобильные устройства, это повышает статус вашей компании в глазах посетителя.
Вот еще один хороший пример «легкого» сайта, оптимизированного под смартфоны и планшеты: hachi-wari.com
Преимущество мобильной оптимизации дизайна продающих страниц в том, что такой сайт будет изменяться в зависимости от устройства, с которого вы на него заходите. Например, если зайти на ранее упомянутый hachi-wari.com с мобильного телефона, то можно отметить, что сайт подстроился под ширину экрана, а видеофон поменялся на статичную картинку, что обеспечило быструю загрузку лендинга.
Оценок: 1 415 (средняя 5 из 5)
Каким должен быть дизайн лендинг пейдж в 2017 году {descr}
