Дизайн лендинга: 99 фишек + 37 примеров

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

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

99 фишек с примерами

Фишки буду приводить сразу на примерах. Так будет понятнее и удобнее. Правда, если вдруг что-то не поймёте, то просто переходите на сайт указанный в заголовке. И всё смотрите своими глазами.

1. Сайт - Dogstudio.com

Интерактивная смена цветов

Цветовой окрас 3D элементов и фона изменяется с прокручиванием колесика мыши. 

Интерактивный 3D дизайн

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

2. Сайт - Stuart.com

Фоновое видео

Для эффективного использования пространства landing page используется видео на фоне вместо изображения. Видео способно быстро поведать пользователю информацию о деятельности компании.

Бегущие контент-элементы

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

Несколько кнопок

Такая уловка, как две кнопки с целевым действием на одном экране, способна значительно повысить конверсию. В данном случае эта возможность реализована тремя кнопками "Get started", "Get in touch" и "Request a delivery".

Расширенная форма

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

Счетчик цифр (прямого отсчета)

Цифры в таком счетчике увеличиваются до необходимого значения при прокрутке страницы на этот блок.

Линейный слайдер

Представляет собой слайд при перелистывании которого переход происходит от одной точки линейки к следующей.

Слайд-шоу из фото и описаний

Раскрывает личностные и профессиональные качества основных членов команды. Удобно смотреть в автоматическом режиме перелистывания с возможностью его остановить.

Проявление элементов с определенной частотой

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

Интерактивная карта

Удобная и необычная карта, управляемая и перемещаемая мышью. Выглядит достаточно эффектно и необычно.

Фокусировка на выбранной области

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

3. Сайт - Lastdaysofivory.com

Мультипликация

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

4. Сайт - Siftnewstherapy.com

Анимированные иллюстрации

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

Пошаговая двухсторонняя лента с интерактивными элементами

С одной стороны ленты текстовые блоки, описывающие продукт, с другой - интерактивные элементы (графики, таблицы и т.д.), являющиеся иллюстрациями к тексту. Посреди ленты указывается номер шага.

Меняющееся расположение элементов

Статичные текстовые и интерактивные блоки меняются сторонами размещения с каждым новым шагом.

5. Сайт - Craftcms.com

Авторские иллюстрации

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

Лента вращается путем перетаскивания мыши

Интересный эффект - горизонтальная лента из превью примеров работ прокручивается перетаскиванием мыши, а не прокручиванием ее колесика.

Плавающие элементы

Иконки не жестко закреплены, а обладают плавающим эффектом, особенно проявляющемся при прокрутке страницы.

Падающая тень и имитация глубины

Благодаря падающим теням имитируется глубина и нахождение иконок как-бы над остальным контентом.

Интересно. Оценивайте качество рекламных каналов с сервисом сквозной аналитики Roistst. С его помощью вы узнаете Слабые места воронки продаж, сократит рекламный бюджет и увеличите прибыль. Кликайте -> Roistat. (по промокоду “INSCALE1120” +7500 руб. на баланс сервиса для тестирования)

6. Сайт - Leafshave.com

Трехмерная графика

3D графика становится все более популярной. Этот элемент дизайна заставляет посетителей дольше оставаться на сайте и детальней его изучать.

Отображение контента в зависимости от точки клика

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

3D анимация в 2D дизайне

В настоящем в тренде находятся соединения 3D и 2D графики. В данном случае 3D анимация реализована в 2D дизайне.

7. Сайт - Happy.tools

Видео во всплывающем окне

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

Удобная форма

Удобно получать доступ к материалам сайта, создавать на нем аккаунт, подписываться на рассылку через аккаунты других популярных систем (например, через Вконтакте, Facebook, Google и т.д.)

8. Сайт - Rewind.youtube

Hover-эффект при наведении курсора

То есть отклик элементов веб-сайта на наведение или прокрутку курсора мыши (например, они увеличиваются, поворачиваются и т.д.). Например, анимационный элемент на первом экране сайта реагирует на мышь и при клике – всплывает видео.

Смена слайдов при прокручивании колесика мыши

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

9. Сайт - Amberbridge.ru

Динамическая подмена контента

Landing page с автозаменой контента, зависящего от аудитории, обычно обладает более высокой конверсией в сравнении с обычными сайтами. Подменяться могут заголовки, изображения, тексты форм, кнопок и т.д. В данном примере контент зависит от utm-метки – измените ее значение и заголовок страницы также изменится.

Всплывающая снизу форма

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

Кнопка-якорь для перемещения по лендингу

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

Неподвижная плашка с меню и номером телефона

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

Анимированная кнопка обратного звонка

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

10. Сайт - Rzcollection.com

Параллакс-эффект

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

Автоувеличение случайных элементов

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

Интересно. Чтобы не терять посетителей, рекомендую проверять Ваш сайт на доступность. Делать это просто с сервисом мониторинга ping admin. Он отслеживает работу вашего сервера и как только что-то перестанет работать отправляет вам уведомление. Кликайте и тестируйте -> Ping admin

11. Сайт - Mystaticself.com

Интерактивное меню-картинка

Анимированный рисунок, реагирующий на движение мыши подсвечиванием соответствующего сектора - это меню сайта.

Всплывающие снизу разделы сайта

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

Вспышки света и зернистость фона

Создают необычный и не заезженный эффект работающего оборудования.

Смена цвета фона для различных пунктов меню

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

Кстати. Создайте собственный сайт через конструктор. В арсенале любой сайт от лендинга до интернет-магазина, готовые шаблоны, мобильная версия, корзина, платежи и еще +10 инструментов. Кликайте и тестируйте -> Mottor

12. Сайт - Springsummer.gucci.com

Совмещение традиционного искусства и современных технологий

Такие альянсы смотрятся с одной стороны элегантно, а с другой - ультрасовременно. Например, в данном случае мы видим совмещение классических эффектов живописи и параллакса.

Процент загрузки в цифрах

Отображаемый процент при загрузке показывает сколько относительных единиц осталось до полной загрузки сайта.

Надпись “Loading” или “Загрузка”

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

13. Сайт - Mymotherbeforeme.com

Минималистичный легкий дизайн

Отсутствие вычурности и дизайнерских наворотов позволяет сосредоточиться на основных элементах лендинга и облегчает восприятие контента пользователями.

Эффект солнечных бликов

Придает солнечности и также подчеркивает ностальгический характер сайта.

Встроенная музыка с возможностью отключить

Звучащая ностальгическая музыка отображает идеологию сайта. Ее можно выключить с помощью соответствующей кнопки меню. 

14. Сайт - Ditisbobo.nl

Интерактивная анимация

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

Курсор с подсветкой

Курсор мыши, подсвеченный в данном случае полупрозрачным кругом, намекает на какие-то скрытые функции, которыми в данный момент он обладает. Или же просто повышает внимание к данной области сайта.

Синхронное перелистывание всех фото при клике мышью

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

Палитра цветов

Отображение палитры доступных для изделия цветов позволяет потенциальным клиентам лучше ориентироваться в ассортиментом ряде.

Анимационные линейки

Интересное решение - анимированные линейки для отображения размеров товара.

Модифицирующийся экран

Все элементы экрана меняют свое положение, исчезают или появляются новые при прокручивании колесика мыши.

15. Сайт - Оснащение фитнес клубов

Кнопка с подсветкой

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

Рамка вокруг целевых слов

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

Интерактивная шкала

Элемент поможет разнообразить лендинг. В данном случае используется для выбора площади.

Переключатель опций

Реализован для выбора типа оборудования и включения дополнительных функций.

Лайфхак. Повышайте конверсию сайта через квизы. Алгоритм очень прост: посетитель проходит тест, рассказывает потребность и оставляет контакты; Вы связываетесь с ним и предлагаете тот продукт, который реально нужен. Кликайте и создавайте Ваш первый квиз -> Marquiz

16. Сайт - Maze.design

Изометрический дизайн

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

Анимация

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

17. Сайт - Gyrosco.pe

Интерактивная схема

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

18. Сайт - Unbounce.com

Инфографика

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

Анимированные скрины

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

19. Сайт - Гриль-зона

Элемент в форме речевого облака

Может использоваться и для цитирования и как контейнер для любого текста. В данном случае применено для обозначения вида товара (зоны отдыха) на соответствующим фото в слайдере.

Размытый и легкий фон

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

20. Сайт - Лайк Кар

Треугольные элементы

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

21. Сайт - Sundaybreakfast.org

Рукописный шрифт

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

22. Сайт - Tweakr.io

Общее фото и описание команды - статичные элементы

Это позволяет дать развернутые сведения о команде, одновременно подчеркивая командный дух и создавая неформальную атмосферу.

23. Сайт - Majortom.com

Проявляющиеся надписи

Надписи проявляются постепенно, сверху вниз: вначале рисуется контур, затем плавно заполняется цветом.

Вертикально ориентированные шрифты

Нестандартный элемент, способный привлечь внимание, и необычно организовать пространство страницы.

Интерактивная анимационная кнопка

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

Загружающийся круг

В данном примере круг грузится сегментами и одновременно со словами, обозначающими ключевые виды деятельности компании.

Логотип

Отображаемый лого при загрузке сайта - эффективное использование этого времени.

24. Сайт - Embacy.io

Цветные плоские плашки

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

Смена направления прокрутки

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

Индикация количества просмотренных экранов

Длина красной горизонтальной полосы сверху увеличивается с каждым прокрученным экраном.

25. Сайт - DK-SPORT

Градиентное затемнение фото

Особенно удобно в случае, если на фото нужно поместить надпись - с одной стороны и ее будет видно и фото останется в достаточной степени распознаваемым.

Фото в миниатюре-превью для слайдера

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

Интерактивный выбор цвета

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

Затенение цветом фонового изображения

Такой прием позволяет одновременно передавать информацию о компании (на фото), с другой - колорировать лендинг фирменными цветами.

Светло-серый фон на фото

Этот прием с одной стороны позволяет не сливаться с фоном (как, например, белый), с другой - выделить изображения товаров на фоне остального контента.

Кстати. Интегрируете CRM-систему с Вашим сайтом, чтобы посетители сайта сразу попадали к Вам в базу, так Вы не потеряете ни одного клиента. К тому же там много фишек, которые помогут сделать из сайта просто бомбу продаж и еще автоматизировать бизнес-процессы. Кликайте -> Мегаплан

26. Сайт - Airbase.com

Иллюстрации в стиле инфографики

Иллюстрации, выполненные в упрощенной технике и с применением узнаваемых символов.

Акцентирование цветом

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

Бегущая строка из логотипов

Непрерывно бегущая горизонтальная строка (слева направо или наоборот) - необычное и не заезженное решение.

27. Сайт - Dotphotonraw.com

Белый шрифт на темном фоне

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

2D иллюстрации

Плоские иллюстрации (особенно в соединении с плоским дизайном сайта) смотрятся интересно и еще долго будут сохранять свою популярность.

28. Сайт - Absurd.design

Юмористические элементы

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

Плавное появление контента

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

Прозрачная плашка с кнопками меню

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

29. Сайт - Boni corset

Совмещение фото и схемы

Такой прием представляет товар гораздо нагляднее, чем использование только схемы.

Двухстороннее фото в стиле “было” и “стало”

Такой прием очень эффективен в таких областях, как похудение, косметические и парикмахерские услуги, реставрация (мебели, сантехники и т.д.) и проч.

Счетчик обратного отсчета

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

30. Сайт - Edu.pixton.com

Яркие насыщенные цвета

Яркие цвета - один из трендов в веб-дизайне. Применяя данную фишку Вы точно выделитесь на фоне конкурентов.

Плоский дизайн

Плоский дизайн (упрощение форм и линий, отсутствие теней и объема) с одной стороны - достаточно прост, с другой - выразителен и по-прежнему популярен.

31. Сайт - Drift.com

Плитки-посты из социальных сетей

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

32. Сайт - Couple.co

Коллаж из фотографий от клиентов 

При наведении курсора мыши на фото – всплывает ник клиента в Instagram. При клике на фото – происходит переход на страницу компании в Instagram. 

33. Сайт - Salesforce.com

Плейлист из видео-отзывов

Видео-отзывы, организованные в плей-лист - неожиданное и редкое решение.

Видеоколлаж, как заставка плей-листа

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

34. Сайт - Йога

Аудио отзывы

Отзывы в формате голосового сообщения - очень необычное и редко встречающееся решение. 

Выдержки из комментариев в социальных сетях

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

35. Сайт - Hubspot.com

Таблица

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

36. Сайт - Symboldesign.co

Ретро иллюстрации

Иллюстрации в стиле ретро - один из трендов настоящего времени. Так что советую их использовать.

37. Сайт - AD

Черно-белый (монохромный) дизайн

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

Коротко о главном

В заключение темы хочу дать Вам несколько советов по внедрению нового дизайна лендинга:

• Не бойтесь менять то, что у Вас уже есть;
• Воплощайте смелые и не заезженные идеи;
• Находите баланс между "контрастными" элементами;
• Проводите а/б тестирование и оставляйте лучшие решения;
• Не забывайте следить за конкурентами.

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

Нашли ошибку в тексте? Выделите фрагмент и нажмите ctrl+enter