Как найти примеры сайтов

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

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

Но проблема в другом: если ориентироваться на сайты конкурентов или блуждать по сайтам в поисках более-менее вменяемого дизайна — можно и не найти ничего симпатичного. А чтобы найти самые трендовые и современные примеры дизайна, лучше искать в других источниках.

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

Где брать примеры дизайна сайта?

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

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

1. «Золотой сайт» и «Золотое приложение»

Премия «Золотой сайт» и «Золотое приложение» проводится каждый год. Жюри на основании критериев анализирует и отбирает лучшие сайты и приложения за прошлый год.

Хороший дизайн не стареет — можно посмотреть сайты и более поздних лет.

2. Tagline Awards

Премия «Tagline Awards» — крупнейший digital-конкурс в Европе, как они сами пишут о себе. Отбираются не только проекты по веб-дизайну, но также и в других номинациях: чат-боты, сайты агентств, интранет-порталы, рекламные кампании и креатив и другое. Заходите посмотреть лучшие решения в индустрии.

3. Tilda Publishing

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

4. Рейтинг Рунета

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

5. Кириллица Дизайн

Сайт «Кириллица Дизайн» собирает интересные решения в веб-дизайне среди отечественных сайтов. Здесь представлены более экспериментальные примеры сайтов, чем в предыдущих источниках.

6. Land-book

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

7. Behance

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

8. Uprock

Сайт Uprock собирает библиотеку кириллических сайтов с удачным дизайном. Сейчас доступно уже более 300 сайтов на русском.

9. The FWA

Проект The FWA отбирает лучшие сайты каждый день. Если вы хотели чего-то нестандартного — заходите и выбирайте удачные примеры.

10. Awwwards

И последний сайт Awwwards.com тоже собирает необычные примеры сайтов в разных стилях со всего мира. Плюс этого сайта — в удобном фильтре: сайты можно отфильтровать по цвету, направлению или стране.

Грамотная разработка дизайна сайта: выбираем визуальный стиль

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

Стиль — это набор характерных, узнаваемых черт дизайна.

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

Стиль «скевофорфизм» по оформлению подражает объектам из реального мира. Был популярен примерно до 2012 года.

Когда скевоморфизм устарел, на смену ему пришла полная противоположность — flat design (плоский дизайн). У элементов полностью пропал объём, дизайн стал плоским.

Затем безликий flat design заменил material design от Google. В материал-дизайне осталось лучшее от флэт-дизайна, но вернулись тени и объем.

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

Классический стиль — это те самые корпоративные сайты, которые мы привыкли видеть каждый день.

«Брутализм» — новый стиль, который пришел на смену аккуратным интерфейсам. Брутализм экспрессивен и не будет уместен для корпоративного сайта или блога, но хорошо подойдет для PR-акции или рекламы.

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

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

Почему важно подбирать антипримеры и примеры дизайна сайта

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

А если подобранный визуальный стиль вам не понравится — будет затрачено время на доработку сайта. И вам всё равно придется подбирать примеры, чтобы объяснить дизайнеру, какой стиль всё-таки вам ближе.

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

Антипримеры

Кроме примеров, также важно приложить антипримеры. Антипример — не значит сайты с плохим дизайном, антипример — это стиль, который не подходит для решения вашей задачи.

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

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

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

UI-kit, как ориентир для дизайнера

Если вы внимательно смотрели предыдущие изображения с типичными стилями веб-дизайна, то наверняка заметили не сайт, не приложение, а просто набор элементов — это называется UI-kit.

UI-kit — это набор готовых и оформленных элементов, которые дизайнеры используют в работе.

Фишка в том, что UI-kit уже оформлен в определенном стиле! И вы можете поискать в поисковике вместо примеров сайта — UI-kit`ы, они вполне сойдут в качестве ориентира для дизайнера.

Увидев UI-kit, опытный дизайнер без труда определит, в каком стиле вы хотите дизайн.

Вместо послесловия

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

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

Начну с того, что этот рейтинг субъективный, примеры лендингов взяты из интернета. В статьях по запросам «лучшие лендинги» можно увидеть большое количество примеров из зарубежной практики или крупных брендов, и так мало примеров, которые можно применить для малого бизнеса в России.

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

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

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

3 критерия выбора лучших лендингов

Как выбрать лучший лендинг? Как составить список ТОП-50 крутых лендингов?

Для этого определим, какие задачи решает лендинг.

Хороший лендинг решает 3 задачи:

1. Конвертирует посетителя в заявку/обращение;
2. Доносит суть предложения, информирует пользователя о продукте;
3. Вызывает эмоции или интерес от просмотра, и заодно формирует доверие к компании.

Из этих задач вытекают следующие критерии выбора:

• Смысловой слой: понятно, куда я попал, что здесь предлагают (оффер, дескриптор, выгоды торгового предложения). С помощью него доносишь мысль, что твой продукт — лучший и заказать стоит у тебя.
• Визуальный слой или дизайн лендинга должен:
  • Привлекать внимание и вызывать желание купить;
  • Помогать лучше воспринимать содержимое страницы;
  • Управлять вниманием пользователя;
  • Быть интуитивно понятным, простым, удобным;
  • Выделяться среди других сайтов, чтобы пользователь побывав один раз, не смог забыть и равнялся уже на твой лендинг.
• Доверие, почему я могу доверять информации на сайте? Это про живые, реальные (не стоковые) фотографии высокого качества о компании, персонале, процессе работы и продукте. Плюс видео, отзывы, сертификаты, кейсы со скриншотами.

Курс по автоворонкам в соцсетях

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

Атмосферность, визуал и продуманная структура — 10 из 10.

Продажа сока алоэ

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

Ну и дизайн: свежий и легкий, полное попадание в точку.

Школа хоккея для детей

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

Запоминающийся и уникальный оффер (авторская методика тренера, который воспитал 12 чемпионов мира), игрок сборной России (супер прокачка доверия, профессиональный игрок и звезда причастен к этой школе), бесплатное оборудование и коньки, пробное занятие — есть хотя бы одна причина на эту тренировку не пойти?

Продажа батутов

Что важно при продаже товара на лендинге? Ммм… Товар? Верно.

Чёткое изображение товара продает, вкупе с девушкой, которая выглядит подтянуто, как раз благодаря занятиям на батутах.

Дополнительные гарантии на товар и заманчивые буллеты (обеспечим рекламными материалами на сумму 250 000, научим увеличивать количество клиентов на мастер-классе) усиливают желание оставить заявку на расчет.

Продажа бытовок

Часто на лендинге делают большое количество элементов, из-за которых сложно акцентировать свое внимание.

В этом примере ничего не отвлекает от продукта: сильный оффер (с расширенной гарантией: бесплатный сервис и обратный выкуп до 70% от стоимости); однотонный фон; при переключении кнопок показывается вид бытовки внутри и снаружи, а при наведении на плюсы: преимущества и выгоды этой модели.

Продажа кухонь

Еще один пример, где простота — залог успеха.

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

Просторный дизайн с воздухом, сочетание цветов — просто, понятно и со вкусом.

Продажа автозапчастей

Колоритный лендинг-промо в восточном стиле.

Интересная задумка — японский самурай вместо нагакатана держит в руках амортизатор.

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

Курс для начинающего кондитера

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

Продажа портретов на холсте

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

Фото персонала с фирменным логотипом, в процессе работы, говорит нам — да, мы настоящие.

Каждый блок показывает с какой заботой к клиенту подходит компания.

Производство сцен

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

Просто пройдемся по заголовкам:

1. Посмотрите видео за 3 минуты и узнайте, почему государственные структуры и частные компании выбирают нас;
2. За 7 лет работы мы выиграли 290 тендеров и произвели более 358 сценических комплексов;
3. Вы экономите до 30% затрат;
4. Производим сцены повышенной безопасности и долговечности независимо от масштаба проекта;
5. Абсолютная надёжность сцен, подтверждённая испытаниями.

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

Лендинги для агентства недвижимости

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

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

Профессиональная фото и видеосъемка объекта, 3D-тур, размещение объявлений на 44 площадках и 7 языках, партнерская сеть из 450 агентств — с таким агентством недвижимости продажа не заржавеет.

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

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

Лендинг для строительной ниши

Одностраничник для b2b-сегмента. Оформление выглядит солидно и внушает доверие, что это надежная большая компания.

Такие факты, как: 56 контрактов с заводами по всему миру, объекты принимают 1-е лица государства и блок с выполненными работами, даёт понимание для какой аудитории делался этот лендинг.

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

• Вызов замерщика;
• Оценка качества штукатурки;
• Узнать условия рассрочки;
• Связаться с руководителем напрямую;
• Узнать условия экспресс-выезда бригады;
• Пришлите смету другой компании и получите более выгодное предложение;
• Получите инструкцию.

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

Примеры для мебельной ниши

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

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

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

Лендинг по продаже товара

Пример в котором применяется ограничение по времени в виде таймера обратного отсчета. В блоке карточек с продукцией на кнопках не написано КУПИТЬ, а более интересный и нестрессовый призыв — зафиксировать цену со скидкой.

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

А всё благодаря профессиональной фотосъемке (все фотографии на лендинге — собственные) и раскрытию продукта.

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

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

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

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

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

Можно сделать летающий подстаканник по всему сайту, но зачем?

Покажи пользователю, то что он ждет от товара, закрепи успех — продающим видео, сделай акцию, подарок бонусом и бесплатную доставку. Всё, profit.

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

Гарантия 3 года на замену любой детали, хороший ход, учитывая, как батут будут разносить дети, а еще уверенность в своем продукте, что он не «Made in China».

Доставка за 4 часа и сборка за час подтолкнет тех, кто готов совершить спонтанную покупку. Главное, эти условия соблюсти.

Лендинг напичкан конверсионными формами различных форматов:

• Подберём под ваш бюджет от 10 готовых композиций;
• Получите более 10 вариантов наборов шаров;
• Получите 3 визуализации оформления вашего помещения.

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

Визуализация книги, отрывки страниц и аудио от автора вовлекает в процесс изучения и помогает принять «правильное» решение по покупке.

Лендинг для магазина одежды

Легкое первое касание с клиентом через получение промокода на скидку.

Живые фото с производства, показывающие как, кто и где изготавливает шубу.

Лендинг для интернет-магазина

Интрига: Посмотрите, как блоки PITON работают даже при экстремальных -60°C. Увеличенная гарантия и замена брака на 3 новых — это ли не говорит про качество блока питания?

Лендинг по оптовой продаже

Простой понятный дизайн, с разными призывами к действию:

• Получить по специальной цене со скидкой;
• Получить 6 видов кофе на пробу;
• Получить информацию о распродажах.

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

5 бесплатных образцов для оценки качества — много ли конкурентов могут себе такое позволить? Явное конкурентное преимущество.

Лендинг по продаже курсов

Длинный лендинг курса по воспитанию детей. Структура по иерархии выглядит так:

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

На первом экране фэнтези девушку снимают на камеру — это привлекает внимание.

Факты в цифрах о тендерах в России показывают, как выгодно начать заниматься госзакупками.

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

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

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

Лендинг для вебинара

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

Лендинг для мероприятия

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

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

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

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

Забавный первый экран с фриковатой бабушкой, но он сразу врезается в памяти. Сайт сделан для социальной акции по бесплатному восстановлению зубов.

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

Лендинг для сферы услуг

Открытая форма на расчет с акцией с ограничением по времени — интересный вариант на главном экрана по чип-тюнингу.

Сравнительная таблица компании с другими поставщиками выглядит убедительно, если обосновывать свои преимущества перед конкурентами.

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

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

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

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

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

Факт + его подкрепление (случаи из практики) убеждает человека не рисковать и обратиться к профессионалу.

Фирменные иллюстрации выделяют среди конкурентов, а анимация придаёт живости.

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

Первые блоки по предрейсовым и предсменным медосмотрам показывает, как происходит процесс осмотра.

Какой предприниматель не хочет сэкономить? 

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

Лендинг для фотографа

Сайт для фотографа в нежных пастельных тонах.

Лендинг для стоматологии

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

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

Примеры лендингов медицинской тематики

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

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

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

Лендинг для детской ниши

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

На пробном занятии получи скидку 10%, сертификат для друга и фирменную кепку.

Стрессовый призыв к действию — собеседование у методиста на текущей версии сайта. 

Важно обосновать буллеты, чтобы не выглядело, как громкое высказывание, и здесь это грамотно сделано:

• Кембриджский экзамен успешно сдают 98%;
• Опережение школьной программы на 2-6 лет;
• Свободное общение + игра + простые задания на 15 минут в день.

Лендинг для b2b

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

Легкий первый шаг —  получить презентацию.

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

Примеры лендингов по франшизам

3D модель в разрезе визулизирует будущий собственный ювелирный салон. 2-ой блок с цифрами показыает масштабы франшизы. Ну а ролик о компании это +100 к доверию. 

Убедительный landing page известной франшизы ВилГуд. Простой дизайн с большим количесвом цифр и графиков, то что нужно для серьезных инвестиций. 

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

HR лендинг по вакансиям

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

Страница стажировки у крупного ритейла для получение анкет. Дизайн разработан под молодёжную аудиторию.

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

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

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

Лендинги на Тильде

Одностраничник на Тильде школы шахмат — простой, понятный, анимация придаёт живости при чтении. Подробнее про лучшие конструкторы landing page в 2023 читай здесь.

Структура похожа на другие сайты по франшизам (найдена идеальная формула?).

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

Одноэкранный лендинг

Не всегда нужен длинный лендинг. Иногда можно обойтись одним экраном, как в этом примере. Этот сайт разработали мы, он успешно отработал и принёс 42 лида за первый месяц запуска. Конверсия составила 11%.

Что такое лендинг: о главном за 60 секунд

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

Посадочная страница в отличие от многостраничного сайта, показывает более высокую конверсию (> 5%), благодаря проработанной структуре и текстам под целевую аудиторию с одним ключевым действием.

Конверсия — это отношение людей совершивших целевое действие к общему числу посетителей. 100 человек перешли на одностраничник, 5 оставили контакты, значит конверсия равна:
5 лидов / 100 человек * 100% = 5%.

Несколько примеров целевых действий:

1. Вызвать замерщика;
2. Рассчитать стоимость;
3. Получить консультацию;
4. Скачать инструкцию;
5. Подобрать оборудование;
6. Заказать звонок;
7. Зарегистрироваться на мероприятие;
8. Подписаться на рассылку;
9. Узнать ошибки.

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

Лендинг является продолжением рекламного сообщения.

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

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

Когда создаётся посадочная страница, важно нацелить её только на одну из аудиторий (если их несколько).

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

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

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

1. Структура лендинга сделана на основе болей, критериев и потребностей целевой аудитории, а не из головы или как у конкурента;
2. Дизайн управляет вниманием и помогает лучше воспринимать текст. Не отвлекает от изучения, в нём каждый элемент несёт пользу для раскрытия продукта и вызывает эмоции. С помощью дизайна визуально ориентируем пользователя, что здесь происходит.
3. Контент это текст, фото и видео.

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

   Фото владельца, сотрудников и процесса производства самого продукта — повышает доверие и конверсию. Один раз сделал фотосессию — работает на тебя и твою компанию много много лет.

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

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

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

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

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

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

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

В статье: сайт онлайн-курсов по гуманитарным наукам от медиа-проекта «Страдающее Средневековье», сайт и интернет-магазин сети салонов для кудрявых, лендинг выставки, посвящённой Алексею Балабанову, лонгрид об игре-головоломке Тетрис и другие проекты. Это вторая подборка для вдохновения читателей VC: сайты можно сохранить как референсы, или познакомиться и поддержать новый проект. Первую подборку смотрите по ссылке.

Так и ходи

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

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

Балабанов — выставка-путешествие

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

Обложка, сделанная из нескольких слоёв текста и изображений, выглядит как плакат. Шапка при скролле фиксируется вверху страницы. В меню выделен пункт с целевым действием — покупкой билетов. Жёлтый цвет сразу бросается в глаза, позволяет быстро найти ссылку и оплатить посещение выставки. В бегущей строке посетитель сайта может прочитать о ключевых особенностях экспозиции: её площадь, наличие аудиогида, количество тематических зон. Организационную информацию о выставке и правила посещения тематически вынесли в конец лендинга — в блок «Титры». Выставка проходит до 15 января 2023 года.

Страдариум

Сайт онлайн-курсов по гуманитарным наукам от медиа-проекта «Страдающее Средневековье». Сайт выполнен в контрастных цветах с отрисованными границами модулей и изогнутыми линиями в оформлении. Анимация по ховеру с инверсией цвета добавляет дизайну динамики и интерактивности.

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

Monday4me

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

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

Светлячок

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

RisePack

Сайт производства вакуумных и термоусадочных пакетов. Основной цвет сайта — молочный, а жёлтый и синий используют для акцентов и интерактивных элементов, например, для кнопок. На сайте можно оформить заказ продукции. Для этого нужно кликнуть на кнопку «сделать заказ» и заполнить форму.

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

Клиника «Апельсин»

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

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

Ano-identity

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

Тетрис

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