Макет лендинга – 36 бесплатных шаблонов лендинг пейдж

landing page — .PSD

Найдено по тегу: landing page


Стильный макет сайта о путешествиях

Современный, стильный, профессиональный и привлекающий внимание веб-дизайн, который легко отличит…

  • Макеты сайтов
 732

Минималистичный, темный макет для портфолио

Чистый и минималистичный макет, выполнен в темных цветах, отлично подходит…

  • Макеты сайтов
 959

Яркий макет музыкального сайта

Яркий, изящный и стильный psd макет для музыкального сайта. Разработан…

  • Макеты сайтов
 794

Макет сайта для игрового проекта

Макет был разработан в первую очередь для игровых веб-ресурсов. Хотя…

  • Макеты сайтов
 1048

Макет блога о путешествиях

Потрясающий, бесплатный psd макет блога о путешествиях, созданный с использованием…

  • Макеты сайтов

psd.in.ua

10 бесплатных шаблонов лендингов в PSD

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

Новые лендинги

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

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

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

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

1. Axit — PSD лендинг

PSD-шаблон лендинга с чистым современным дизайном. За счёт грамотной организации слоёв, легко поддаётся кастомизации.

Axit — PSD лендинг

Скачать

2. Appz — PSD лендинг для приложений

PSD-шаблон лендинга, который отлично подойдёт для презентации мобильных приложений. Дизайнер Michael Reimer.

Appz — PSD лендинг для приложений

Скачать

3. Woo — шаблон лендинга

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

Woo — шаблон лендинга

Скачать

4. Take — шаблон лендинга мобильного приложения

Шаблон целевой страницы для презентации мобильных приложений, автор Blaz Robar.

 Take — шаблон лендинга мобильного приложения

Скачать

5. New Providence — бесплатный лендинг в PSD + HTML

Бесплатный шаблон целевой страницы с чистой цветовой гаммой, сбалансированной типографикой и высококачественной графикой.

New Providence — бесплатный лендинг в PSD + HTML

Скачать

6. Корпоративный лендинг

PSD-шаблон корпоративного лендинга в минималистичном стиле, автор Al Rayhan.

Корпоративный лендинг

Скачать

7. Лендинг в PSD

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

Лендинг в PSD

Скачать

8. Fun Weather — шаблон лендинга для приложения

Бесплатный PSD-шаблон лендинга для приложений, связанных с погодой, прогнозом погоды.

Fun Weather — шаблон лендинга для приложения

Скачать

9. Офисный лендинг

Бесплатный PSD-шаблон обычного офисного лендинга от Vivek Ravin.

Офисный лендинг

Скачать

10. Land.io — шаблон лендинга

Красивый набор UI для создания целевых страниц, включает в себя много полезных элементов для использования в проектах. Автор Peter Finlan.

Land.io — шаблон лендинга

Скачать .Sketch

И в качестве бонуса парочка интересных шаблонов от Монстров.

Design Studio Free landing page

Land.io — шаблон лендинга

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

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

Free Resturant landing page

Land.io — шаблон лендинга

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

  • создание целевой страницы, ориентированной на будущее;
  • стильный и минималистичный внешний вид;
  • полноразмерный заголовок;
  • имеется доступ к значкам с идеальной пиксельной структурой;
  • простота редактирования шаблона.
Скачать Демо

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

danilin.biz

Создаем макет правильной Landing Page

Сразу хочется отметить, что в рамках данной статьи никаких философствований на тему веб-дизайна не будет. Речь же пойдет о фундаменте любого Landing Page — а именно, о черно-белых макетах, блочности, и о способах влияния на пользователей вашего LP.

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

Cегментируем ЦА

Сегментирование целевой аудитории

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


Есть крайне популярный среди маркетологов метод сегментирования ЦА по модели 5W:

  1. ЧТО? — какая услуга требуется, можно так же описать ее характеристики
  2. КТО? — описываем портрет ЦА, пол, возраст, финансовое положение
  3. ПОЧЕМУ? — мотивация к заказу услуге,
  4. КОГДА? — в какой диапазон времени проблема должна быть устранена?
  5. ГДЕ? — Места поиска потенциального исполнителя

Для каждого пункта определяется с десяток характеристик. В результате такого сегментирования у меня получались выборки более чем из 50 различных групп для сервиса по ремонту компьютеров. Я бы не стал использовать настолько глобальный подход при проектировании (но вам все равно придется сделать это на этапе запуска рекламной кампании).

Менее замороченный способ

Пример сегментирования ЦА для LP выездного компьютерного сервиса:

Категория 1 Категория 2 Категория 3
Кто такой? Девушки до 40 лет, средний достаток Мужчины до 50 лет, средний достаток Девушки до 25 лет, студентки, низкий достаток
Чего хочет? Починить компьютерную технику на дому Починить компьютерную технику на дому или в сервисе Очень дешево и быстро починить компьютерную технику на дому
Чего боится? Немытого вонючего мастера, разглашения персональных данных Повторения проблем, разглашения персональных данных Завышения цен, отсутствия гарантийного обслуживания

Зачем нужна эта таблица?

  1. Не понимая свою аудиторию, вы не сможете говорить с ней на одном языке. Например, для ЦА с высоким достатком не работают такие мотивационные тригеры как:
    • Скидка 50%
    • Успевай, до конца акции осталось: 0 дней, 2, часа, 30 секунд!
  2. Без понимания страхов клиента, вы не сможете отработать его возражения, либо что еще хуже, — вы начнете отрабатывать некорректные возражения.

Анализ УТП

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

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

Гарантия Скорость Сертификаты Видеоотзывы
Мы 1 год 1 час Да Да
Конкурент_1 5 месяцев 30 минут Да Нет
Конкурент_2 Нет 2 часа Да Нет
Конкурент_3 1 год 1 час Да Нет

Почему это важно?

Проанализировав всех игроков, и определив свои сильные стороны, вы повышаете шансы на создание уникального LP. Избегайте шаблонности, удивляете и вовлекайте!

  1. Если 80% конкурентов дают гарантию на услуги в рамках 1 года, это уже не уникальное предложение, а необходимость. Соответственно делать на этом акцент будет крайне глупо
  2. Если у конкурентов проблемы с репутацией, и нет отзывов, то можно разместить 3 — 6 видеоотзывов клиентов в рамках 2-го экрана вашего LP.

Определение блочности лэндинга

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

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


Пример расстановки блоков LP (Тематика: «Компьютерный сервис на дом»):

  1. Для импульсивных — сразу даем форму + заголовок + УТП — создаем ожидания
  2. Знакомим с ценами — прайс лист (возможность заказа из прайса)
  3. Показываем отзывы
  4. Даем форму
  5. Показываем команду
  6. Показываем награды (сертификаты)
  7. Последняя форма (УТП + призыв + контакты)

Пример макета страницы в Axure

Пример прототипа

В данном случаи, отработаны возражения по завышенным ценам, по компетенциям, по доверию. Проектирование самого лэндинга (расстановка блоков занимает 20% времени, а продумывание концепции, анализ ниши и конкурентов — остальные 80%)

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


15 советов к созданию продающего LP

  • Всегда делайте 1 лэндинг под 1 направление
  • Хороший офер в первом экране LP —  это уже пол дела
  • УТП компонуем в первом экране (там же, где и офер)
  • Не сравнивайте себя с конкурентами, это вызывает тревогу
  • В один экран помещаем только 1 логический блок (не нужно валить все в кучу)
  • Каждые 2-3 блока — выводим форму захвата
  • Создавайте ожидания у клиента путем графики, кейсов
  • Телефон — большим текстом в шапке сайта (цифры одного размера)
  • Кнопка «Заказать звонок» — не должна отвлекать внимания на себя
  • Избегайте сложной подачи контента, упрощайте
  • Под каждой кнопкой целевого действия, описывайте дальнейший сценарий (если кнопка заказа звонка — то «мы свяжемся с вами в течении 10 минут»)
  • Отзывы клиентов только в виде скриншотов с соц. сетей, либо в формате видео (или на фирменном бланке). Любой другой формат уже не вызывает доверия
  • Персонализированные лэндинги (услуги) — работают лучше, используйте фото мастеров, команды
  • Не используйте дибильные формулировки: недорого, быстро, лучший, самый и др. Пишите по существу, или вообще не пишите
  • Чем меньше полей в формах — тем выше конверсия (имя, телефон, почта)

kondrashov.online

Отправить ответ

avatar
  Подписаться  
Уведомление о