Как создавать и использовать лендинги: разбор с примерами

Лендинг пейдж (landing page) или просто «лендинг» — это интернет-страница, которая при помощи краткой презентации продукта побуждает пользователя совершить целевое действие. Например, купить билет на мероприятие, оставить заявку на расчет стоимости услуги, подписаться на рассылку, зарегистрироваться. Цель лендинга: сделать из посетителя сайта клиента. Мы сделали краткую инструкцию по составлению лендингов и подобрали более 40 интересных примеров.

03

02

01

В этой статье вы узнаете:

07

06

05

Главное отличие лендинга от обычного многостраничного сайта — использование минимум средств для убеждения максимального количества посетителей сайта в необходимости выполнить определенное действие. То есть при подборе и размещении информации основное правило звучит так — информация должна считываться на лету. Посетитель не должен переходить на другой сайт, чтобы узнать больше информации, почитать отзывы или сравнить цены.

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

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

Если у продукта есть несколько несхожих целевых аудиторий, можно разработать для каждой ЦА отдельный лендинг. Даже если ЦА — это одна строго очерченная группа потребителей, то можно создать два лендинга в рамках A/B тестирования, чтобы узнать, какая страница работает эффективнее.

После составления портрета типичного покупателя и формирования списка преимуществ необходимо создать контекстную или таргетированную рекламу, через которую посетители будут попадать на сайт. Особенность привлечения трафика формирует еще одну характерную черту лендингов: они всегда воспринимаются в контексте рекламного объявления. Условно говоря, не следует в контекстном объявлении писать: «Купите велосипеды», а лендинг посвятить продаже только оранжевых трехколесных велосипедов. Это снижает конверсию лендинга и, соответственно, увеличивает долю бесцельно потраченного рекламного бюджета.

Вне зависимости от степени знакомства интернет-пользователя с продуктом, после посещения лендинга он должен совершить действие. Действием может быть покупка, заказ обратного звонка, подписка на e-mail рассылку и т. д. Чтобы лид понял, что требуется сделать, в лендинг добавляют специальные призывы к действию (от англ. «call to action, CTA»). Чаще всего CTA представляет собой кнопку или форму обратной связи.

Кнопки CTA имеют четкое указание, что нужно сделать: «позвоните», «оставьте контакты», «свяжитесь с нами» и т.д. Форма обратной связи, очевидно, — это блок, где лид оставляет свои контактные данные. Объем формы обратной связи в значительной степени зависит от продукта. Однако следует помнить, что чем меньше полей пользователю необходимо заполнить, тем охотнее он это выполнит.

Один из ключевых вопросов — как провести лида от заголовка лендинга до CTA. Однозначного ответа не существует. С равным успехом можно создать большую посадочную страницу, в конце которой находится CTA. Или разместить призыв к действию на первом экране. Выбор тактики зависит от продукта и от осведомленности целевой аудитории. Если при переходе на лендинг лиду заранее известно, что ему предложат, CTA уместно разместить на первом экране или в хэдере. И наоборот, если необходимо подробнее объяснить преимущества продукта, призыв уместно разместить в конце страницы.

1. На первом экране — крупное изображение продукта с емким уникальным торговым предложением. Пользователь должен сразу понять, что делает ваш продукт привлекательным, и продолжить листать лендинг.

2. Ниже — основной помощник в процессе конвертации лида в клиента — CTA-кнопка. Важен четкий призыв в виде короткой фразы «хочу купить», «пройти регистрацию», «заказать звонок» и ничего лишнего, что бы отвлекло пользователя от задачи.

3. После привлекательного первого впечатления важно снять возражения пользователя и побудить совершить действие. Размещаем блоки о преимуществах продукта с фактоидами, сертификатами и отзывами довольных клиентов. Это триггеры доверия, которые должны побудить пользователя купить именно ваш продукт и не ходить по страницам конкурентов в поисках лучших аналогов.

4. И снова CTA-кнопка. К концу лендинга пользователь убедился в пользе продукта и готов совершить целевое действие — купить, зарегистрироваться, оставить заявку и т. д.

Финальная структура лендинга зависит от его целей, но базовые элементы всегда одни и те же — логотип, заголовок, УТП, смысловая часть с демонстрацией продукта, его преимуществ, и кнопка для захвата лидов.

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

Конверсию часто обозначают буквами CR — это аббревиатура от "Conversion Rate", что значит «коэффициент конверсии». Вот пример расчёта CR: если за 100 посещений сайта три клиента совершили целевое действие (подписку, покупку и т. д), уровень конверсии составляет 3%.

Какая конверсия считается «хорошей»? По данным исследования Unbounce, средний коэффициент конверсии для целевой страницы составляет около 6,6% во всех отраслях по состоянию на четвертый квартал 2024 года. А в отчёте WordStream приводятся данные по отраслям с разбросом от 2 до 9%. Рассматривайте это как общую базу для ваших собственных целевых страниц.

Повысить конверсию помогут улучшения интерфейса и другие приёмы, связанные с дизайном:

•

Интересные визуальные решения, которые с первых секунд заинтересуют посетителя;

•

Текстовый контент. Важен по очевидной причине: через текст можно объяснить посетителю о необходимости выполнения действий.

Многие разработчики допускают ошибку: продумывают иллюстрации, которые дополняют текстом. Ошибка заключается в том, что пользователь может увлечься рассматриванием иллюстраций или заскучать от обилия визуально невыразительного текста. Чтобы лендинг был завлекающим, рекомендуется создавать прототип в следующей последовательности:

•

создание общего макета;

•

определение темы текстовых блоков на каждом экране;

•

проработка дизайна, который будет визуально объединять лендинг от начала до конца;

•

написание всех недостающих текстов.

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

Рассмотрим примеры лендингов, которые послужат примером при разработке вашего следующего проекта.

В подборку мы намеренно не включили лендинги, которые разрабатывали сами. Наши лучшие работы можно посмотреть на странице No-code.

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

1. Ovechkin-800

Отличный пример вовлекающего сторителлинга. Лендинг посвящен российскому хоккеисту Александру Овечкину — третьему игроку в истории НХЛ, забросившему 800 шайб. Первый экран встречает крупным заголовком и фотографиями хоккеиста и приглашает посмотреть мини-фильм о пути к успеху. Видео поделено на эпизоды, управлять которыми можно в нижней части экрана. Каждый эпизод дополнен интерактивными графиками и ключевыми фактами, а также подкреплен лонгридом, который раскрывает тему эпизода подробнее.

2. Darko Pasalic

Портфолио фотографа-любителя Darko Pasalic, разработанное студией Bornfight, запоминается нестандартным расположением пунктов меню внизу экрана и интересной подачей фотографий. Можно посмотреть все фотографии, а можно отфильтровать их по настроению, времени суток и, самое интересное, по цвету. Просто выберите любой цвет в цветовом круге — на странице отобразятся фотографии соответствующего оттенка.

3. Rolling Beast

На лендинге представлена интерактивная 3D-модель популярного японского горного курорта. С моделью можно взаимодействовать и посмотреть траекторию движения на каждой трассе, а также скорость и время спуска на разных ее отрезках. Пользователь может заранее изучить информацию для выбора наиболее подходящей горнолыжной трассы и ее комфортного прохождения.

4. Notoriousnooch

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

5. Криминальный Омск

«Криминальный Омск» — пиксельный лендинг с отсылкой к интерфейсам программ, которыми пользовались полицейские из боевиков 90-х годов прошлого века. Несмотря на олдскульность, на сайте представлена актуальная статистика по различным правонарушениям, которые произошли в городе за последние 5 лет.

6. Klarna

The Checkout — глобальное ежегодное исследование наших покупок от финтех-компании Klarna. Лонгрид с ключевыми трендами прошлого года увлекает и удерживает внимание благодаря нестандартному дизайну, ярким цветам и иллюстрациям с пиксельным ховер-эффектом.

7. Memoapp

Memoapp — приложение для изучения иностранного языка по мемам. Веселый анимированный персонаж приглашает учить английский вместе, дружелюбно показывая, как это будет быстро и просто. Лендинг выполнен в контрастных цветах, которые органично выглядят внутри темной темы. Кнопка имеет интересный эффект — по ховеру из нее «сыпятся» разные эмодзи, намекая, что учиться будет весело.

8. Хdacademy.elephant.is

Farago Projects — одностраничный сайт креативного агентства, глядя на который, складывается ощущение, что его собрали в табличном редакторе, дополнив большим количеством красивых фэшн-фотографий.

9. Tommaso D'intino

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

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

Еще одна «фишка» лендинга — раздел About. Интересное сочетание разных шрифтов внутри одного текста и залипательный эффект следования за курсором удерживают внимание пользователя и выделяют сайт среди похожих.

10. Non-objective

Оригинальный лендинг креативного агентства. Дизайнеры студии убедительно показывают, что могут предложить множество дизайн-решений в зависимости от задачи. Чтобы доказать это, они разместили на своем сайте более 80-ти вариантов дизайна циферблата часов.

11. Julia Plaza

Сайт видеоредактора и монтажера Julia Plaza представляет собой шоурил, отличительная особенность которого — в том, что пользователь может сам менять порядок воспроизведения фрагментов видео.

12. YUANN

Лендинг-портфолио кинорежиссера из Японии тоже встречает шоурилом, но отличается подачей. Навигация по фрагментам видео стилизована под киноленту, листая которую, пользователь может выбрать интересный ему сюжет. Каждый сюжет сопровождается оригинальной 3D-анимацией, с которой можно взаимодействовать.

13. monologue.to

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

14. Sandbox.cloudflare.com

Сайт используется для тестирования и анализа потенциально вредоносных файлов, URL-адресов и другого контента в безопасной, изолированной среде («песочнице»). Но, несмотря на узкоспециальную аудиторию, обладает стильным дизайном. В нём выделяются необычная типографика и лаконичные иллюстрации терминала. Это пример того, как эффектность и информативность могут органично сочетаться и вместе работать на благо продукту.

15. CYLNDR

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

Тренд на минимализм, который продиктован широким диапазоном сайтов (от Apple до Tesla) остается актуальным из года в год. В данном случае пользователю демонстрируют только ключевую информацию. Причем нередко лендинг остается без иллюстраций — только с текстом. Чтобы достичь успеха при таком дизайне важно на первом экране в нескольких словах объяснить преимущество своего предложения.

16. Afterdarktour.nike.com

Сайт Nike Afterdark Tour координирует серию ночных полумарафонских забегов для женщин, проводимая компанией Nike, чтобы объединить и поддержать женщин-бегунов. Он доказывает, что большое количество контента на одной странице не помеха тому, чтобы создать приятный и лаконичный дизайн. Вся информация на лендинге легко считывается, а эстетичные фото и анимация позволяют узнать все детали забега: от маршрута до правил.

17. Brand.ai

Еще один нестандартный лендинг для продвижения нестандартного продукта. Дизайн лендинга визуализирует его назначение — «операционная система для брендов», интерактивный гайдлайн для поддержания консистентности и удобного управления. Контрастные цвета, крупные акценты и максимально понятный интерфейс привлекают внимание и презентуют продукт как доступный и понятный инструмент, с которым легко взаимодействовать.

18. Coinsetters.io

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

19. Dolsten.com

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

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

20. Experiencethebestyou.com

Интерактивный квиз тревел-компании Klook, подбирающий «лучшее путешествие». Яркий оранжевый фон, минимализм, карточки-сцены с иллюстрациями и текстами приглашают пользователя в сторителлинг-путешествие с персонажами-архетипами и мягкой завязкой на бренд Klook.

21. Blueyard.com

Это сайт венчурного фонда BlueYard Capital: портфель по направлениям (Криптовалюта, Инженерия, Биология), краткие кейсы и манифест «Utopia vs Oblivion» — «Идеальный мир против забвения». Дизайн минималистичный, с крупной типографикой, тёмным фоном и акцентом на ключевые смыслы.

22. Squarespace / Circle

Дизайн, тона и типографика. Страница профессионального сообщества дизайнеров Squarespace / Circle — ода минимализму.

Фотоконтент идеально подходит под описание и соответствует общему дизайну сайта. Создателям странички удалось рассказать о сообществе без лишних элементов и слов: минимум текста, максимум эстетики. Продумано до мелочей, достойно высшей оценки.

23. Magicxlogic.com

Сайт компании, которая предлагает креативные услуги для брендов, стартапов и идей в стадии разработки. Минималистичный лендинг с крупной типографикой, много воздуха и продуманная верстка; концепция — «маленькая, но очень ответственная команда, которая просто делает свою работу».

24. Letters.app

Лендинг приложения Letters. app предназначен для врачей и предлагает им сделать главной ценностью пациента, а не бумажную работу. Это невидимый помощник врачей для генерации писем к пациентам, с назначениями и напоминаниями о приёме. «Пишите всего за секунду письма, которые будут говорить с пациентами как вы», — предлагает лендинг. У страницы минималистичный дизайн с большим количеством воздуха, крупной типографикой и спокойной цветовой палитрой, ассоциирующейся с интерьером дорогой клиники.

25. 2024.today.design

Это годовой шоукейс дизайн-студии Today: ролик с ключевыми кейсами и текстами о «годе перемен к лучшему», блоки с проектами и благодарностью клиентам. Дизайн — полноэкранное видео, крупная типографика, минимум навигации; концепция — праздничная ретроспектива и манифест про влияние дизайна на изменения.

26. Laserbysonymusic.com

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

27. Superhi.plus

SuperHi Plus — программа для создателей контента с финансированием, менторством и инструментами co-ownership. Лендинг в духе мягкого брутализма: двухколоночная сетка, крупная гротескная типографика, анимации и интерактив с падающими шариками. Он позиционируется создателями как «кооператив для креаторов, а не платформа».

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

28. Catch fish and chips

На странице кафе Catch fish and chips все просто и со вкусом. Динамичный слоган, постепенно заполняющийся водой, — нестандартное решение для индикатора загрузки.

При скролле появляется анимация из серий фотографий — любопытный ход, чтобы удержать внимание и показать процесс приготовления блюд в кафе. В хедере страницы размещены кнопки «Меню» и «Контакты»: ненавязчивое побуждение изучить позиции и забронировать столик.

29. Midlife.engineering

Одностраничник Midlife Engineering — онлайн-синтезатора для звуковой терапии: пользователь собирает треки в стиле «эмбиент» для фокуса и расслабления, используя графческий интерфейс в виде клавиатуры с различными эффектами. Дизайн напоминает культовый OP-1 Teenage Engineering; позиционирование — «игровая, но серьёзная» терапия для перегруженного ума.

Лендинг на главной странице сайта, как правило, используют компании, которые предлагают один продукт. В таком случае на одной странице можно разместить минимальный объем необходимой пользователю информации: данные о продукте, о команде, отзывы и т. д. Другие страницы сайта можно посвятить подробному рассказу об истории компании и кейсах.

30. Casa-lunara.com

Посадочная страница для коллекции очков Casa Lunara. Пользователь найдёт здесь линейки солнцезащитных очков и сможет сконструировать модный аутфит с одним из предметов коллекции: это хорошая подсказка, как вписать продукт Casa Lunara в образ. Дизайн — тёмный, кинематографичный, с WebGL-сценами и крупной редакционной типографикой; концепция — модный «уличный люкс», который формирует комьюнити.

31. Properprompts.ai

Лендинг создан для продвижения гайда по работе с Mijourney — популярной ИИ, генерирующей изображения. Яркие контрастные цвета, отличная работа с текстом и выразительные изображения акцентируют внимание пользователя на пользе продукта и призывают сделать покупку.

32. Valentine.getfreewrite.com

Промо-сайт компании FreeWrite, презентующий аналоговую печатную машинку в романтичном ярко-красном дизайне. Цветовая гамма лендинга перекликается с продуктом, а типографика выполнена в ретро-стиле. Интересные детали — курсор в виде сердца и эссе о красном цвете на одном из экранов лендинга.

33. Yeti Cycles SB150

Хорошая работа с типографикой, эффектные slowmotion-видео, крупные фотографии с детализацией модели велосипеда целиком и его отдельных частей. Подробная информация об особенностях велосипеда открывается прямо на странице. Реализована эффектно — с помощью выезжающих справа блоков. Это отличный пример непрерывного взаимодействия.

34. Columbus1919.com/trittico

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

35. Healthblocks.ai

Лендинг продвигает цифровой продукт HealthBlocks — приложение для здоровья нового поколения, которое превращает здоровый образ жизни в игру, активно используя при этом ИИ-технологии. Геймификация помогает пользователям прививать себе здоровые привычки. В дизайне страницы использованы пастельные тона и мотив кубика, или блока — отсылка к названию приложения.

36. Water.falmec.com/en/

Лендинг презентует коллекцию моек, смесителей и аксессуаров «Water» от производителя кухонных аксессуаров Falmec. Страница выглядит как погружение в океан: это ощущение создают фон и анимация, а также продуманная цветовая гамма изображений. А дизайн с обилием «воздуха» усиливает его ещё больше.

37. HelloFresh

«Аппетитный» лендинг компании, которая занимается доставкой свежих продуктов для самостоятельного приготовления сложных блюд, не оставит равнодушным даже сытого человека. И хотя лендинг изобилует фото вкусной еды, в целом дизайн минималистичный и аккуратный.

38. Elliott.mangham.dev

Этот лендинг создал Эллиотт Мангхэм, разработчик сайтов на фрилансе из Великобритании, и превратил его в своё портфолио. Интересное решение — горизонтальная прокрутка вместо привычной вертикальной и анимация наградных сертификатов, которые появляются по нажатию кнопки-«переключателя». Кстати, работы Эллиотта 12 раз получали награду «Сайт дня» популярного ресурса Awwwards!

39. 15th.plus-ex.com/

Это юбилейный сайт студии Plus X: архив ключевых проектов, наград и инсайтов за последние 5 лет с манифестом «Beyond Design, Into Experience» и намётками будущих направлений студии. В дизайне используются тренды экспериментальной типографики, крупные полноэкранные блоки, анимированный скролл-сторителлинг. Всё это, вместе с видео и текстами о проектах, создаёт эффект полноценной онлайн-витрины. Интересно, что визуал сайта строится вокруг единого символа, который проходит через все разделы и связывает прошлые кейсы с будущими экспериментами. Это «х» (часть названия студии), который в трёхмерной изометрии превращается в звезду, похожую на типографский символ астериск (*).

40. Kuratemusic.com

Лендинг Kurate Music — витрина независимого британского лейбла, который живёт в том же ритме, что и его артисты. Здесь манифест бренда, каталог музыкантов и релизов, треки можно слушать прямо на сайте. В разделе Careers молодые исполнители отправляют демо в надежде попасть в ростер. Дарк-мод, крупный логотип, лайв-карточки и плавные анимации сразу считываются как сигнал: это музыка не для всех, а для своей сцены, для тех, кто сегодня делает новый звук.

41. Thinkforever.com

Это сайт Forever — объединения нескольких дизайн-студий. Он презентует группу и рассказывает, как она помогает брендам работать с инновациями; транслирует эстетику и ценности. Дизайн — тёмный, с очень крупной типографикой, параллакс-анимациями и секционной структурой «01−06». Это почти манифест: минимум графики, максимум смысла и движения, акцент на идее «коллектива сильных студий, который больше суммы частей».

42. Cosmic-sans.blast-foundry.com

Лендинг, посвященный шрифту — почему бы и нет?.. Компания BLAST, коллаборация шрифтовых дизайнеров, создала шрифт Cosmic Sans и подробно рассказала о нём на сайте-одностраничнике. Здесь можно познакомиться с историей создания шрифта, подробно рассмотреть все детали и сделать покупку. Нужно ли упоминать, что весь лендинг создан с помощью одного шрифта — Cosmic Sans! Что касается графики, то она подчёркнуто минималистична и связана с темой космоса.

43. Mikatalo.com

Mikatalo — сайт с нордическим характером. Он принадлежит финско-португальской строительной компании, которая занимается в основном премиальными виллами, а также изготовлением бетонных конструкций. На странице расположены кейсы, отражена география Финляндия/Португалия и описаны преимущества компании. Дизайн минималистичный, много воздуха, огромная типографика и светлая палитра. Можно охарактеризовать это как «архитектурный» стиль, передающий типичную скандинавскую эстетику.

44. x.astral.de

Это юбилейный сайт «10 Years Astral», посвящённый десятилетию дизайн-студии Astral. Студия считает своей сильной стороной 3D-визуализации и иммерсивный сторителлинг, и эти приёмы используются в создании лендинга: он рассказывает об основных вехах истории студии, и все экраны объединяет символика объемного десятигранника.

Мобильный лендинг — это разновидность лендинга, оптимизированная для просмотра на смартфонах/планшетах. Главное отличие от условных десктопных лендингов — размещение информации с учетом двух факторов. Вертикальная ориентация экрана и сравнительно маленький физический размер экрана. То есть объем информации должен быть предельно ограничен, при этом блоки с контентом должны быть достаточно крупными.

45. Tinyvilla.peachworlds.com

Сайт модульного малогабаритного дома: описание форматов, сценариев использования и контакты. Минималистичный лендинг с мягкой палитрой, крупными заголовками и 3D-презентацией дома в PeachWeb; концепция — «готовая вилла как продукт» для устойчивой современной жизни.

46. Monomode.co.jp/10th/

Основная гамма сайта — монохромная (отсылка к названию компании), но на экране смартфона такое решение выглядит недостаточно эффектно. Поэтому разработчики добавили цветные акценты на фоне, игривую графику и яркий курсор. Лендинг представляет собой юбилейный сайт агентства monomode: история, спецпроекты, мерч, манифест Лендинг одновременно подводит итоги и задаёт тон следующему десятилетию.

47. 21tsi.com

Сайт спортивного холдинга 21TSI: миссия, манифест, направления развития и приглашение присоединиться или инвестировать. Это иммерсивный лендинг с кинетическими скролл-анимациями, которые выглядят особенно эффектно при листании на экране телефона. Такое визуальное решение транслирует технологичность компании и её направленность в будущее.

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

02

CSSDA (CSS Design Awards). Награда за креатив и технические инновации в веб-дизайне для студий, агентств и соло-дизайнеров.

03

FWA (Favourite Website Awards). Одна из самых старых и престижных digital-наград, отмечает экспериментальный и инновационный веб-дизайн.

Awwwards. Международная премия за лучший веб-дизайн и интерфейсы: оценивают дизайн, юзабилити, контент и техническую реализацию.

01

02

Landing Love. Подборка сайтов с акцентом на анимации и motion-дизайн, каждый проект сопровождается видеозаписью скролла.

03

Landingfolio. Галерея лендингов + библиотека компонентов и шаблонов, удобно смотреть структуру и блоки страниц.

Lapa Ninja. Галерея из более чем 7000 лендингов с полноразмерными скриншотами и категориями; плюс бесплатные ресурсы (UI-киты, книги).

01

Godly. Кураторская подборка «только топа» — смелые, экспериментальные сайты разных типов, в том числе и лендингов.

04

05

One Page Love. В этой коллекции лендингов легко ориентироваться благодаря фильтрам: по используемым в лендинге шрифтам, инструменту и даже составу команды-разработчика.

Следите за топовыми разработчиками сайтов, чтобы не только изучать новые работы, но и следить за тем, как они формируют узнаваемый «почерк» агентства.
Рекомендуем заглянуть в портфолио Uplab!

Для таких ресурсов как Behance и Dribbble лендинги — лишь одна из сотен категорий работ, которые там собраны. Но зато там удобные фильтры, которые помогут найти именно одностраничники. Там можно найти работы молодых и очень креативных дизайнеров со всего мира: обращайте внимание на оценки пользователей, чтобы понять, что их цепляет.

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

Лендинг пейдж (landing page) или просто «лендинг» — это интернет-страница, которая при помощи краткой презентации продукта побуждает пользователя совершить целевое действие. Например, купить билет на мероприятие, оставить заявку на расчет стоимости услуги, подписаться на рассылку, зарегистрироваться. Цель лендинга: сделать из посетителя сайта клиента. Мы сделали краткую инструкцию по составлению лендингов и подобрали 60 интересных примеров.