Агрегатор сервисов Прокомоды, рейтинги и обзоры
сервисов для бизнеса в одном месте

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

Содержание

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

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

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

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

1. Сайт - Dogstudio.com

дизайн лендинга dogstudio
Dogstudio.com

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

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

дизайн лендинга смена цветов
Интерактивная смена цветов

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

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

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

2. Сайт - Stuart.com

дизайн лендинга Stuart
Stuart.com

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

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

дизайн лендинга фоновое видео
Фоновое видео

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

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

дизайн лендинга бегущие контент элементы
Бегущие контент-элементы

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

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

дизайн лендинга несколько кнопок
Несколько кнопок

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

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

дизайн лендинга расширенная форма
Расширенная форма

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

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

дизайн лендинга счетчик цифр
Счетчик цифр (прямого отсчета)

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

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

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

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

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

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

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

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

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

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

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

дизайн лендинга интерактивная карта
Интерактивная карта

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

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

дизайн лендинга фокусировка на выбранной области
Фокусировка на выбранной области

3. Сайт - Lastdaysofivory.com

дизайн лендинга Lastdaysofivory
Lastdaysofivory.com

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

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

дизайн лендинга мультипликация
Мультипликация

4. Сайт - Siftnewstherapy.com

дизайн лендинга Siftnewstherapy
Siftnewstherapy.com

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

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

дизайн лендинга анимированные иллюстрации
Анимированные иллюстрации

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

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

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

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

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

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

5. Сайт - Craftcms.com

дизайн лендинга Craftcms
Craftcms.com

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

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

дизайн лендинга авторские иллюстрации
Авторские иллюстрации

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

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

дизайн лендинга лента вращается путем перетаскивания мыши
Лента вращается путем перетаскивания мыши

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

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

дизайн лендинга плавающие элементы
Плавающие элементы

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

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

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

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

6. Сайт - Leafshave.com

дизайн лендинга Leafshave
Leafshave.com

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

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

дизайн лендинга трехмерная графика
Трехмерная графика

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

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

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

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

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

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

7. Сайт - Happy.tools

дизайн лендинга Happy tools
Happy.tools

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

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

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

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

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

дизайн лендинга удобная форма
Удобная форма

8. Сайт - Rewind.youtube

дизайн лендинга Rewind youtube
Rewind.youtube

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

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

дизайн лендинга Hover эффект при наведении курсора
Hover эффект при наведении курсора

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

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

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

9. Сайт - Amberbridge.ru

дизайн лендинга Amberbridge
Amberbridge.ru

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

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

дизайн лендинга динамическая подмена контента
Динамическая подмена контента

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

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

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

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

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

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

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

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

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

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

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

дизайн лендинга анимированная кнопка обратного звонка
Анимированная кнопка обратного звонка

10. Сайт - Rzcollection.com

дизайн лендинга Rzcollection
Rzcollection.com

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

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

дизайн лендинга параллакс эффект
Параллакс-эффект

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

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

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

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

11. Сайт - Mystaticself.com

дизайн лендинга Mystaticself
Mystaticself.com

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

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

дизайн лендинга интерактивное меню картинка
Интерактивное меню-картинка

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

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

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

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

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

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

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

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

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

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

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

дизайн лендинга Springsummer
Springsummer.gucci.com

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

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

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

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

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

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

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

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

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

13. Сайт - Mymotherbeforeme.com

дизайн лендинга Mymotherbeforeme
Mymotherbeforeme.com

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

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

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

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

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

дизайн лендинга эффект солнечных бликов
Эффект солнечных бликов

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

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

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

14. Сайт - Ditisbobo.nl

дизайн лендинга Ditisbobo
Ditisbobo.nl

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

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

дизайн лендинга интерактивная анимация
Интерактивная анимация

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

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

дизайн лендинга курсор с подсветкой
Курсор с подсветкой

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

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

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

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

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

дизайн лендинга палитра цветов
Палитра цветов

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

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

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

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

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

дизайн лендинга модифицирующийся экран
Модифицирующийся экран

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

дизайн лендинга
Оснащение фитнес клубов

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

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

дизайн лендинга кнопка с подсветкой
Кнопка с подсветкой

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

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

дизайн лендинга рамка вокруг целевых слов
Рамка вокруг целевых слов

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

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

дизайн лендинга интерактивная шкала
Интерактивная шкала

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

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

дизайн лендинга переключатель опций
Переключатель опций

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

16. Сайт - Maze.design

дизайн лендинга Maze design
Maze.design

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

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

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

Анимация

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

дизайн лендинга анимация
Анимация

17. Сайт - Gyrosco.pe

дизайн лендинга Gyrosco
Gyrosco.pe

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

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

дизайн лендинга интерактивная схема
Интерактивная схема

18. Сайт - Unbounce.com

дизайн лендинга unbounce
Unbounce.com

Инфографика

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

дизайн лендинга инфографика
Инфографика

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

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

дизайн лендинга анимированные скрины
Анимированные скрины

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

дизайн лендинга гриль
Гриль-зона

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

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

дизайн лендинга элемент в форме речевого облака
Элемент в форме речевого облака

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

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

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

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

дизайн лендинга лайк кар
Лайк кар

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

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

дизайн лендинга треугольные элементы
Треугольные элементы

21. Сайт - Sundaybreakfast.org

дизайн лендинга  Sundaybreakfast
Sundaybreakfast.org

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

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

дизайн лендинга рукописный шрифт
Рукописный шрифт

22. Сайт - Tweakr.io

дизайн лендинга Tweakr
Tweakr.io

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

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

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

23. Сайт - Majortom.com

дизайн лендинга Majortom
Majortom.com

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

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

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

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

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

дизайн лендинга вертикально ориентированные шрифты
Вертикально ориентированные шрифты

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

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

дизайн лендинга интерактивная анимационная кнопка
Интерактивная анимационная кнопка

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

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

дизайн лендинга загружающийся круг
Загружающийся круг

Логотип

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

дизайн лендинга логотип
Логотип

24. Сайт - Embacy.io

дизайн лендинга Embacy
Embacy.io

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

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

дизайн лендинга цветные плоские плашки
Цветные плоские плашки

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

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

дизайн лендинга смена направления прокрутки
Смена направления прокрутки

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

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

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

25. Сайт - DK-SPORT

дизайн лендинга DK SPORT
DK-SPORT

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

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

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

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

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

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

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

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

дизайн лендинга интерактивный выбор цвета
Интерактивный выбор цвета

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

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

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

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

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

дизайн лендинга светло серый фон на фото
Светло-серый фон на фото

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

26. Сайт - Airbase.com

дизайн лендинга Airbase
Airbase.com

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

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

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

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

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

дизайн лендинга акцентирование цветом
Акцентирование цветом

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

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

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

27. Сайт - Dotphotonraw.com

дизайн лендинга Dotphotonraw
Dotphotonraw.com

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

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

дизайн лендинга белый шрифт на темном фоне
Белый шрифт на темном фоне

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

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

дизайн лендинга 2D иллюстрации
2D иллюстрации

28. Сайт - Absurd.design

дизайн лендинга Absurd design
Absurd.design

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

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

дизайн лендинга юмористические элементы
Юмористические элементы

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

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

дизайн лендинга плавное появление контента
Плавное появление контента

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

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

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

29. Сайт - Boni corset

дизайн лендинга Boni corset
Boni corset

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

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

дизайн лендинга cовмещение фото и схемы
Совмещение фото и схемы

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

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

дизайн лендинга lвухстороннее фото в стиле было и стало
Двухстороннее фото в стиле “было” и “стало”

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

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

дизайн лендинга cчетчик обратного отсчета
Счетчик обратного отсчета

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

дизайн лендинга Edu pixton
Edu.pixton.com

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

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

дизайн лендинга zркие насыщенные цвета
Яркие насыщенные цвета

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

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

дизайн лендинга плоский дизайн
Плоский дизайн

31. Сайт - Drift.com

дизайн лендинга Drift
Drift.com

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

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

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

32. Сайт - Couple.co

дизайн лендинга Couple
Couple.co

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

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

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

33. Сайт - Salesforce.com

дизайн лендинга Salesforce
Salesforce.com

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

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

дизайн лендинга плейлист из видео-отзывов
Плейлист из видео-отзывов

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

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

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

34. Сайт - Йога

дизайн лендинга йога
Йога

Аудио отзывы

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

дизайн лендинга аудио отзывы
Аудио отзывы

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

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

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

35. Сайт - Hubspot.com

дизайн лендинга Hubspot
Hubspot.com

Таблица

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

дизайн лендинга таблица
Таблица

36. Сайт - Symboldesign.co

дизайн лендинга Symboldesign
Symboldesign.co

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

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

дизайн лендинга ретро иллюстрации
Ретро иллюстрации

37. Сайт - AD

дизайн лендинга AD
AD

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

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

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

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

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

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

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

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

Автор Анна Манойло
2 Комментариев
Виктор Потоловский

Спасибо за прекрасную статью. Предлагаю делать такие обзоры регулярными. Единственная просьба, давать сразу ссылку на сайт (можно не кликабельную). А то некоторые сайты из данного обзора найти не удалось.

Ответить    
Александра Зимовцева

Виктор, добрый день! Спасибо за обратную связь, учтем!)

Ответить    
Заберите подарок
Picture: Like
68 ФИШЕК МАРКЕТИНГА:
от привлечения до удержания

Скачайте методичку и внедрите самые актуальные фишки для увеличения продаж вдвое

Получить
Подпишитесь на рассылку
Picture: Subscribe
Дайджест новых статей
+ неопубликованное от in-scale

Получайте каждую неделю полезные и рабочие материалы для улучшения Вашего бизнеса

Подписаться