16 мая 2019
Образцовые лендинги. Наш топ-50
~25 минут на чтение
~25 минут на чтение
Мы регулярно отслеживаем сайты, которые удачно совмещают в себе и хороший дизайн, и маркетинговые «фишки». В этот раз хотим поделится подборкой образцовых лендингов российских и зарубежных компаний. Вдохновляйтесь и берите на заметку!
Наталия Аникина
Аналитик-проектировщик
1. Centros
Лендинг компании Raleigh — мини-путешествие на инновационном велосипеде Centros. При скролле пользователь словно совершает поездку на разработке компании и в деталях может ознакомиться с ее преимуществами.
Плавная анимация, контрастный дизайн блоков, лаконичные тезисы — все элементы страницы нацелены на демонстрацию велосипеда. Примечательная особенность — экран с лупой, которая позволяет рассмотреть модель детально. В конце — кнопки, с помощью которых можно перейти в онлайн-магазин или найти точку продаж в ближайшем городе.
Плавная анимация, контрастный дизайн блоков, лаконичные тезисы — все элементы страницы нацелены на демонстрацию велосипеда. Примечательная особенность — экран с лупой, которая позволяет рассмотреть модель детально. В конце — кнопки, с помощью которых можно перейти в онлайн-магазин или найти точку продаж в ближайшем городе.
2. Maslo
Промо-страница Maslo презентует преимущества приложения — платформы для вычисления эмоционального интеллекта. Hey, I’m maslo — с первого экрана тезисы ненавязчиво знакомят пользователя с разработкой. Текста минимум, однако каждое предложение понятно и лаконично описывает характеристики разработки. Сместить навигационное меню вниз — нетривиальное решение: экраны можно листать, как страницы издания.
Мягкий градиент лиловой гаммы в дизайне экрана и плавные линии намекают на нечто глубокое, эмоциональное — поддерживают идею самого продукта.
Мягкий градиент лиловой гаммы в дизайне экрана и плавные линии намекают на нечто глубокое, эмоциональное — поддерживают идею самого продукта.
Пользоваться обзорной страницей серии пианино от компании Roland — одно удовольствие. Внимание уделили каждой мелочи: есть описание дизайна, эргономики, внутреннего устройства инструмента.
Информации — много, она подана разнопланово: с помощью лаконичных текстов, анимации, разноформатных фото и видео. Последние заслуживают отдельного внимания — показывают звучание пианино в разных помещениях: от студии до кафедрального собора.
Информации — много, она подана разнопланово: с помощью лаконичных текстов, анимации, разноформатных фото и видео. Последние заслуживают отдельного внимания — показывают звучание пианино в разных помещениях: от студии до кафедрального собора.
4. Userbot
Лендинг стартапа, создающего корпоративного бота для общения с клиентами. Создатели стремились спроектировать страницу с конкретной целью — привлечение инвесторов — и им это удалось.
Яркая цветовая гамма, необычный курсор, нестандартная реализация табов «Проблема» — «Решение». Содержит отборную информацию для потенциальных инвесторов — представлена команда и партнеры, есть роадмап развития продукта, информация о конкурентах, экономические и финансовые данные, награды.
Яркая цветовая гамма, необычный курсор, нестандартная реализация табов «Проблема» — «Решение». Содержит отборную информацию для потенциальных инвесторов — представлена команда и партнеры, есть роадмап развития продукта, информация о конкурентах, экономические и финансовые данные, награды.
5. Miro
Сайт бывшей платформы для совместной работы Realtimeboard, которая провела ребрендинг и теперь стала Miro. На первом экране — внушительный заголовок, который доносит главную ценность и назначение сервиса — сотрудничество без ограничений. Ниже первого экрана — видео, наглядно демонстрирующее все преимущества сервиса.
Яркие цвета, нестандартные формы, креативные иллюстрации — заметно, что сервис сделан креативными людьми и предназначен для таких же пользователей.
Яркие цвета, нестандартные формы, креативные иллюстрации — заметно, что сервис сделан креативными людьми и предназначен для таких же пользователей.
6. Petalcard
Лендинг знакомит с «кредитной картой будущего», пользоваться которой можно без комиссий за операции. Дизайн и контент минималистичны — ни капли лишнего, коротко и понятно. Преимущества использования карты показаны с помощью карточек с анимированными иконками. Ключевое отличие — броская кнопка «Apply now» на нескольких экранах.
7. Airbnb
Пример лаконичной промо-страницы с интригующими тезисами и вовлекающим фоновым видео. Побуждает пользователя к целевому действию — создать бизнес без вложений: на впечатлениях, «знакомя людей с тем, что любите».
Отзывы с фотографиями мастер-классов и экскурсий рассказывают секреты успеха пользователей сервиса. Главная кнопка — «Начать» — всегда на виду: пользователю легко совершить целевое действие.
Отзывы с фотографиями мастер-классов и экскурсий рассказывают секреты успеха пользователей сервиса. Главная кнопка — «Начать» — всегда на виду: пользователю легко совершить целевое действие.
8. Balsoy
Лендинг Balsoy знакомит с преимуществами и характеристиками необычного продукта — одноименного бальзамического уксуса на основе соевого соуса. Как и создатели продукта, разработчики странички стремились соединить элементы двух культур — азиатской и итальянской. Последним удалось осуществить задуманное с помощью шрифтов, цветовых решений и контента.
При скролле бутылочка уксуса перемещается от экрана к экрану, чтобы управлять вниманием пользователя. Экран с кликабельными карточками блюд — интересное решение показать способы применения соуса. Завершает лендинг форма обратной связи: заполнив ее, можно бесплатно получить образец продукта.
При скролле бутылочка уксуса перемещается от экрана к экрану, чтобы управлять вниманием пользователя. Экран с кликабельными карточками блюд — интересное решение показать способы применения соуса. Завершает лендинг форма обратной связи: заполнив ее, можно бесплатно получить образец продукта.
9. «Рокетбанк»
С первого экрана промо-страница обновленного мобильного приложения «Рокетбанка» привлекает внимание оригинальной анимацией. При этом у пользователя есть два пути: продолжить скроллить или, кликнув «Пуск», ознакомиться с характеристиками приложения без текста. Попробуйте второй — завораживает.
Интерфейс приложения показан полно и развернуто: дизайнеры постарались, чтобы внимание пользователя удерживалось на протяжении всего просмотра. Контрастные экраны использованы уместно: только для того, чтобы показать фоновые решения приложения.
Интерфейс приложения показан полно и развернуто: дизайнеры постарались, чтобы внимание пользователя удерживалось на протяжении всего просмотра. Контрастные экраны использованы уместно: только для того, чтобы показать фоновые решения приложения.
На странице кафе Catch fish and chips все просто и со вкусом. Динамичный слоган, постепенно заполняющийся водой, — нестандартное решение для индикатора загрузки.
При скролле появляется анимация из серий фотографий — любопытный ход, чтобы удержать внимание и показать процесс приготовления блюд в кафе. В хедере страницы размещены кнопки «Меню» и «Контакты»: ненавязчивое побуждение изучить позиции и забронировать столик.
При скролле появляется анимация из серий фотографий — любопытный ход, чтобы удержать внимание и показать процесс приготовления блюд в кафе. В хедере страницы размещены кнопки «Меню» и «Контакты»: ненавязчивое побуждение изучить позиции и забронировать столик.
11. Spisy no spisy
Feel the taste of emotions («Попробуйте эмоции на вкус») — с первых секунд страничка азиатского ресторана Spisy no spisy побуждает посетить заведение. Забронировать столик можно, не покидая главный экран — кнопка CTA открывает форму заявки, где удобно зарезервировать место на конкретную дату.
Дизайн поддерживает концепцию ресторана: приглушенные цвета и рисованные картинки в стиле восточного искусства. При этом акцент — на фотографиях блюд и интерьера заведения: ярких, в разнообразном ракурсе — все, как подобает страничке ресторана.
Дизайн поддерживает концепцию ресторана: приглушенные цвета и рисованные картинки в стиле восточного искусства. При этом акцент — на фотографиях блюд и интерьера заведения: ярких, в разнообразном ракурсе — все, как подобает страничке ресторана.
12. Toggl
Страница сервиса для планирования внутренних процессов команды Toggl привлекает внимание оригинальным цветовым решением. Проработанные анимированные персонажи здорово передают смысл тезисов, описывающих продукт. Фантазийное и нестандартное решение — дизайнерская фишка.
Дизайн, тона и типографика. Страница профессионального сообщества дизайнеров Squarespace / Circle — ода минимализму.
Фотоконтент идеально подходит под описание и соответствует общему дизайну сайта. Создателям странички удалось рассказать о сообществе без лишних элементов и слов: минимум текста, максимум эстетики. Продумано до мелочей, достойно высшей оценки.
Фотоконтент идеально подходит под описание и соответствует общему дизайну сайта. Создателям странички удалось рассказать о сообществе без лишних элементов и слов: минимум текста, максимум эстетики. Продумано до мелочей, достойно высшей оценки.
14. OranjeBitter
Промо-страница OranjeBitter приглашает гостей на вечеринку. Летние, сочные цвета — дизайн странички намекает, что программа события обещает быть яркой.
Калейдоскоп — нестандартный ход, удерживающий внимание. Несмотря на вызывающие цвета, CTA-кнопки «Билеты» вписаны весьма удачно. Одна — в хедере страницы, вторая — в завершение скролла: не отвлекают внимание, купить билет можно в любой момент.
Калейдоскоп — нестандартный ход, удерживающий внимание. Несмотря на вызывающие цвета, CTA-кнопки «Билеты» вписаны весьма удачно. Одна — в хедере страницы, вторая — в завершение скролла: не отвлекают внимание, купить билет можно в любой момент.
15. Not pot
Лендинг Not pot предлагает изучить характеристики жвачки с успокаивающим эффектом. В основе продукта — вытяжка органической конопли: разрешенного и безвредного растения, не имеющего общего с марихуаной. При скролле до конца можно обнаружить ссылки на статьи, подтверждающие легальность продукта, а также страницу с контактами, где можно задать вопрос.
Элементы в стиле pop-art, интересная анимация и понятный интерфейс — изучать страницу приятно.
Элементы в стиле pop-art, интересная анимация и понятный интерфейс — изучать страницу приятно.
16. Australian Emu
Промо-сайт Australian Emu презентует лимитированную золотую монету от компании Metal Market Europe. Цветовое решение — лаконичное, интерфейс — плавный и интуитивный. При скролле движущаяся монета управляет вниманием, а продуманные тезисы помогают изучить все характеристики продукта.
Навигационное меню слева визуализировано как маршрут и дублируется в «гамбургере». Завершает лендинг форма подписки: можно подписаться на рассылку, чтобы не пропустить выпуск новой монеты.
Навигационное меню слева визуализировано как маршрут и дублируется в «гамбургере». Завершает лендинг форма подписки: можно подписаться на рассылку, чтобы не пропустить выпуск новой монеты.
17. RBK Money
RBK Money — международная платформа для платежей всех видов. Компания работает по всему миру, что подчеркивают анимированные элементы страницы — динамичные фигуры жителей разных стран.
Лендинг предлагает подключить на сайт онлайн-оплату и другие технологии для приема любых видов платежей в разных сферах бизнеса. Понятные СТА и тезисы доступно рассказывают о простоте использования платформы и подталкивают пользователя к целевому действию. Понятный и приятный глазу лендинг.
Лендинг предлагает подключить на сайт онлайн-оплату и другие технологии для приема любых видов платежей в разных сферах бизнеса. Понятные СТА и тезисы доступно рассказывают о простоте использования платформы и подталкивают пользователя к целевому действию. Понятный и приятный глазу лендинг.
18. MNFST
Промо-страница MNFST знакомит с приложением для монетизации постов в соцсетях. Тезисы, визуальные приемы и анимация показывают результат использования сервиса. Так, mock-up c видео на главном экране объясняет, как работает сервис: размещая баннер известного бренда на фото, пользователь может получить деньги.
СТА вызывает любопытство: нестандартный призыв побуждает рассчитать, сколько стоит ваш пост в соцсетях.
СТА вызывает любопытство: нестандартный призыв побуждает рассчитать, сколько стоит ваш пост в соцсетях.
19. Viita Titan HRV
Страница посвящена модели умных часов. Рассмотреть продукт можно во всех деталях: при этом сами часы расположены по центру экрана — интересное решение, чтобы сфокусировать внимание пользователя. Дизайн выглядит брутально — черно-белая гамма, расплавленный металл на фоне экранов. Немало внимания уделено типографике — в некоторых блоках по высоте слова больше половины экрана.
20. Fontface
Fontface — расширение для браузера, которое позволяет просматривать и добавлять в закладки любые шрифты. Управление вниманием реализовано отлично. Экран двигается плавно, меняет форму, на нем появляется лупа: при скролле пользователь может подробно ознакомиться, как работает расширение. Логичное завершение страницы — предложение установить расширение.
21. Revolut
Лендинг приложения Revolut предлагает переводить деньги за границу без комиссий. Призыв к действию размещен на первом экране страницы: выглядит гармонично, побуждает ненавязчиво. Анимация с меняющимися экранами в деталях показывает преимущества приложения. Дизайн — простой и лаконичный, интерфейс — понятный и чистый: оба работают на репутацию ресурса и оставляют приятное впечатление от использования.
22. ActiveCollab
ActiveCollab — программа для управления проектами. Изучать характеристики продукта легко на протяжении всего скролла. Первый экран дополнен 3D-анимацией, демонстрирующей преимущества использования ПО: все персонажи заняты своим делом, а работа происходит одновременно. Анимированные иконки и текстовые тезисы помогают понять философию платформы. Пример чистого и понятного UI-дизайна.
23. Dental Loupes
Страница Dental Loupes демонстрирует преимущества инновационной разработки — очков для стоматологов. При загрузке страницы использован зрелищный анимационный эффект: очки вращаются на 180°, увеличиваются и уменьшаются. Можно рассмотреть разработку в деталях и с разных ракурсов.
На первом экране крупным планом — 3D-модель, далее при скролле — CTA «Заказать бесплатную демонстрацию очков». В завершение — отзывы и оценки покупателей. Слева — ключевая особенность страницы — бот-консультант в необычном исполнении. С его помощью можно задать вопрос напрямую или изучить часто задаваемые вопросы.
На первом экране крупным планом — 3D-модель, далее при скролле — CTA «Заказать бесплатную демонстрацию очков». В завершение — отзывы и оценки покупателей. Слева — ключевая особенность страницы — бот-консультант в необычном исполнении. С его помощью можно задать вопрос напрямую или изучить часто задаваемые вопросы.
24. Unaweel
Лендинг Unaweel демонстрирует характеристики самокатного колеса с рулевым управлением для инвалидных колясок.
Преимущества продукта продемонстрированы наглядно и подробно: при скролле можно узнать, как установить и использовать руль, а также познакомиться с его габаритами и возможностями. В завершение — кнопки с предложением пройти бесплатный тест-драйв или приобрести продукт. Просто, наглядно и удобно.
Преимущества продукта продемонстрированы наглядно и подробно: при скролле можно узнать, как установить и использовать руль, а также познакомиться с его габаритами и возможностями. В завершение — кнопки с предложением пройти бесплатный тест-драйв или приобрести продукт. Просто, наглядно и удобно.
25. Dipsea
Лендинг мобильного приложения Dipsea предлагает скачать бесплатное музыкальное приложение. В нем можно выбрать настроение или момент (возвращаясь на автобусе домой, перед свиданием) и слушать музыку под особый повод. Интерфейс страницы отображает специфику приложения: выбор таких же опций доступен на главном экране с помощью выпадающих списков.
Страница электромобиля от Mercedes-Benz сделана в корпоративном стиле компании. Акцент — на черно-белой цветовой гамме и натуралистичных деталях. Почти на каждом экране присутствуют люди — удачный ход с точки зрения маркетинга.
Еще одна особенность страницы — удобная реализация листания и увеличения изображений. Есть 3D-рендер — можно покрутить модель со всех сторон, посмотреть различные варианты дисков, цвета кузова и салона.
Еще одна особенность страницы — удобная реализация листания и увеличения изображений. Есть 3D-рендер — можно покрутить модель со всех сторон, посмотреть различные варианты дисков, цвета кузова и салона.
Хорошая работа с типографикой, эффектные slowmotion-видео, крупные фотографии с детализацией модели велосипеда целиком и его отдельных частей. Подробная информация об особенностях велосипеда открывается прямо на странице. Реализована эффектно — с помощью выезжающих справа блоков. Это отличный пример непрерывного взаимодействия.
28. Mont Roucous
Это продающая страница узкоспециализированного товара — термальной воды для малышей. Лаконичная, с понятными и убедительными тезисами, а также притягательной анимацией. Простой, но «говорящий» продукт.
29. Lobster
Лендинг оператора сотовой связи Lobster предлагает выбрать тарифный план и подключить сим-карту. При скролле появляется динамичная линия, словно нарисованная фломастером от руки, — необычное решение, чтобы управлять вниманием пользователя. Элементы дизайна лендинга можно взять на заметку.
30. Flixxo
Промо-страница Flixxo знакомит с приложением сообщества по зарабатыванию токенов. Ховер, который следует за курсором мыши, — стандартное решение в контрастном исполнении: на темном фоне экрана смотрится выигрышно. Цвета, масштаб изображений, проработанные иконки — получилось интересно и привлекательно.
Так выглядит подборка 30-ти современных лендингов, которые совмещают в себе тренды дизайна и маркетинга. Мы в Uplab стараемся быть в курсе нововведений и учитывать примеры прошлых лет — и предлагаем попробовать практику вам.
Оцените наш топ-20 посадочных страниц за 2016 год, которые отличают побуждающие CTA и убедительная подача информации.
Оцените наш топ-20 посадочных страниц за 2016 год, которые отличают побуждающие CTA и убедительная подача информации.
1. Job Alfabank
Страница вакансий «Альфа-банка» рассказывает целую историю. Посетитель сайта может не только посмотреть вакансии, но и оценить возможности карьерного роста.
Основные конверсионные кнопки представлены в шапке и нижней части сайта. Первая — «Отправить резюме», вторая — «Все вакансии». Обе ведут на соответствующие страницы сайта «Альфа-Банка».
Основные конверсионные кнопки представлены в шапке и нижней части сайта. Первая — «Отправить резюме», вторая — «Все вакансии». Обе ведут на соответствующие страницы сайта «Альфа-Банка».
2. RolerDrom
Сайт продает двухколесные скейтборды. На главном экране — слайдер с ключевыми преимуществами магазина c кнопкой CTA в центре. Контакты магазина встречаются дважды — вверху и внизу страницы, а также дублируются под «гамбургером». Они не всегда на виду, но всегда рядом — лендинг довольно короткий. Удобно, что на сайте указаны альтернативные способы связи — Viber и WhatsApp.
3. Tornado One
Сайт-презентация нового смартфона Fly Tornado раскрывает основные функции телефона. Лендинг имеет минималистичный дизайн, нет ничего лишнего. Конверсионная кнопка «Купить», представленная в шапке, направляет посетителя на сайт производителя в карточку товара. Шапка сайта, а вместе с ней и кнопка «Купить», двигается при прокручивании страницы.
4. Smart Fasad
Лендинг с простым дизайном и минимумом текстовой информации. Заманивает привлекательным оффером — гарантией максимально низкой цены. Формы обратной связи «ловят» пользователей на каждом экране, предлагая оставить заявку на остекление и заказать выезд специалиста. Преимущества утепленного остекления перед холодным продемонстрированы c помощью инфографики.
5. Dinero
Лендинг продает элитные аксессуары и выполнен под стать своей аудитории: дорого, солидно, ничего лишнего. На первом экране посетителя встречает имиджевое видео. Лаконично, но увлекательно описан подход к работе и преимущества изделий. Есть информация о ценах и условиях доставки для покупателей и партнеров.
6. EnjoyMe
Интригующий лендинг. На первой странице практически нет информации — встречает коробка с подписью «Эмоции в кубе». Отличный способ удержать внимание пользователя. Кнопка CTA — подписка на один из трех тарифов посылки. Весь контент подан таким образом, что посетитель с наибольшей вероятностью доберется до нее.
7. Bork
Отличительная особенность страницы — наглядное представление эффективности работы аппарата. На странице подробно описываются характеристики продукта. Конверсионная кнопка простая, форма — лаконичная и удобная. Нет дополнительных полей, из-за которых посетители часто спешат поскорее покинуть страницу.
Лендинг знакомит с творчеством молодого иллюзиониста. Посетителей встречает видеоролик. Чтобы не занимать место на экране с видео, кнопку для вызова формы заказа звонка, а также иконки-ссылки на социальные сети расположили в хедере. Потенциальный заказчик может посмотреть фотографии артиста, изучить портфолио, прочитать отзывы других клиентов.
10. Clubium
Digital-агентство, занимающееся продвижением в Instagram, встречает потенциальных заказчиков сильным оффером — «Горячие клиенты с первого дня продвижения». Простая инфографика показывает продажи и преимущества продвижения в социальной сети.
11. Коворкинг #tceh
Первый экран лаконичный, но при этом очень информативный. Посетителя встречает сильный слоган проекта — «Стартапы взлетают здесь». А также короткая видеопрезентация. Преимущества коворкинга дополняют отрисованные иконки.
12. Росстур
Лендинг по продаже туров по Уралу рассчитан на конкретную целевую аудиторию — заядлых путешественников, исследователей, тех, кто предпочитает активный отдых. Подход к оформлению приветственного экрана позволяет «отсеять» тех, кому неинтересна история региона. Текст на первом экране интригует и одновременно с этим дает понять, куда и с какой целью планируется поездка.
13. Ichiban Auto
У страницы есть «фишка» — по мере продвижения к форме заказа запчасти сыпятся в корзину. Это помогает посетителю понять, какое действие нужно совершить. Конверсионная кнопка находится к самом конце страницы, под формой обратной связи. Поскольку лендинг короткий, ее одной достаточно. Тем не менее форму обратной связи можно вызвать в любой момент, ссылка на нее есть в шапке сайта.
14. «Бодрый день»
У страницы есть «фишка» — по мере продвижения к форме заказа запчасти сыпятся в корзину. Это помогает посетителю понять, какое действие нужно совершить. Конверсионная кнопка находится к самом конце страницы, под формой обратной связи. Поскольку лендинг короткий, ее одной достаточно. Тем не менее форму обратной связи можно вызвать в любой момент, ссылка на нее есть в шапке сайта.
Промо-страница инвестиционной компании продает вебинар об инвестировании. Тема вебинара, указанная на главном экране, интригует пользователей. Многие захотят узнать, как купить недвижимость за 1% от ее реальной цены. Лендинг подробно рассказывает, какую практическую выгоду можно получить от вебинара.
Лендинг, предлагающий услуги копирайтинга. Слайдер выполнен в винтажном стиле. На странице представлена вся информация, необходимая для принятия решения о сотрудничестве — подробное описание услуг, цены, примеры работ, отзывы клиентов. Конверсионная форма обратной связи встречается на странице дважды. Предложение выполнить бесплатный анализ контента вызывает доверие и стимулирует отправить заявку.
17. Fuelfree
На первом же экране лендинг экономителя топлива предлагает рассчитать выгоду, которую получит клиент от использования продукта. Ниже представлены ключевые преимущества с убедительным призывом — «Начать экономить». В отзывах наглядно показаны преимущества использования продукта. «До / после» — очень удачное решение.
18. Lingualeo
Красивый и предельно понятный лендинг, мотивирующий начать изучение английского языка в сервисе Lingualeo. Первую конверсионную кнопку можно заметить еще на первом экране. Чтобы упростить процедуру регистрации, посетителю предлагают войти на сайт через профиль в соцсетях.
19. Binn
Лендинг презентует предложение по поддержке сайтов от агентства Binn. Первый экран встречает тремя вопросами, которые помогают определиться, что делать дальше. По клику на один из них потенциальный клиент переходит на блок с ответами. После описания преимуществ сотрудничества на странице появляются пакеты услуг компании. Каждый блок имеет конверсионную кнопку.
20. Pimp your eyes
Pimp Your Eyes нестандартно подошли к оформлению страницы. Контент представлен «вкусно»: необычное описание подхода к работе, красивые фотографии, увлекательные описания очков и цены. Кнопка CTA «Подписаться на рассылку» расположена в середине страницы и сопровождается простой формой: посетителя просят ввести только e-mail.
Каждый лендинг в подборке — синергия продуманного дизайна, понятного интерфейса и грамотной расстановки CTA-элементов. Надеемся, что наша подборка вдохновила вас — создайте свой лендинг, который будет одновременно решать и пользовательские, и коммерческие задачи. Ведь второе прямо вытекает из первого.
Поделитесь материалом с друзьями и коллегами
Комментарии к статье