Руководства, Инструкции, Бланки

как создать лендинг пейдж пошаговая инструкция img-1

как создать лендинг пейдж пошаговая инструкция

Категория: Инструкции

Описание

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

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

Привет всем! Друзья, предлагаю Вам гостевой пост от моего хорошего друга и коллеги по цеху, SEO-аналитика Руслана Галиулина. Руслан рассказывает в своем материале о том, как создать лендинг пейдж максимально эффективно и не пожалеть о потраченном времени. Поехали.

Доказанный факт: 98% посетителей ничего не покупают при первом посещении сайта. Знаете, что они думают при этом? — «Я просто смотрю».

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

Разберемся детально, что это такое, как его создать самостоятельно и избежать досадных ошибок.

Лендинг пейдж — это гарантия дохода?

Landing, посадочная, целевая страница — за громкими названиями скрывается обычный web-документ. Его начинка такая же, как у привычных сайтов — Html, CSS, JS. Что же превращает стандартный набор кодов в инструмент для мощного давления на клиента? Все то, что не дает размыться вниманию — конкретность и лаконичность.

  • Создание целевых страниц под рекламу Яндекс.Директ или AdWords помогает точечно настроить соответствие по группе ключевых слов. Это позволяет снизить стоимость клика.
  • Повышенный коэффициент конверсии работает на увеличение прибыли даже при неизменном количестве посетителей.
  • Удобство использования целевой страницы упрощает для клиента визуальное восприятие информации.

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

Программы и плагины для создания Landing Page

Существует четыре базовых способа создания LP своими силами:

  • Онлайнсервисы: LPgenerator, PlatformaLP, LPmotor. Удобны для быстрой компоновки страниц, есть готовые шаблоны, обучающие видео и подсказки. Не требуют никаких навыков — разберется даже новичок. Но есть и минусы — бесплатное создание возможно только в тестовый период. Все остальное время придется сидеть на абонентской плате, да еще и зависеть от корректной работы сервиса.
  • Визуальныередакторы: Adobe Muse, Microsoft Expression Studio, Serif WebPlus, Web Builder, Web Page Maker. Удобные и интуитивно понятные инструменты. Подходят для создания уникальных сложных макетов. Минус — высокая цена, как правило, не оправдывается, если создавать страницы разово.
  • ПлагиныдляWordPress: EasycomingSoon, ResponsiveAdminMaintenancePro, WordPress Landing Pages, Wppage. Для владельцев сайтов на WordPress — самый простой способ получить лендинг. Не требуют навыков, приличный выбор аддонов. Минусы — скромный выбор тем по умолчанию, требовательность к параметрам хостинга, платная дополнительная функциональность.
  • HTML редакторы: DreamWeaver, Brackets, Sublime Text, Gedit, KompoZer, блокнот. Начнем с минусов — нужны хотя бы базовые знания Html и CSS. Часть редакторов платная. Плюсы — большинство представленных программ не потребует ни копейки вложений. Независимость от параметров сервера — сайты работают даже из папки на компьютере.

Несомненно, для умеющих кодить предпочтителен вариант с использованием Html-редакторов. Он дает полную свободу творчества и независимость от работоспособности сторонних сервисов. К тому же, это единственный вариант, при котором может не потребоваться не только покупка, но и скачивание программ. Например, блокнот по умолчанию стоит в Windows, а и Gedit — в Ubuntu. Именно вариант с редакторами мы рассмотрим как базу для создания собственной посадочной страницы.

Лендинг бесплатно своими руками: пошаговая инструкция

Создадим пример странички продажи инфопродукта с кнопкой заказа.

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

Что это за расширения?

  • Live Preview — возможность предпросмотра сверстанного кода с учетом респонсивности.
  • Html hint — подсказки при вводе тегов. Достаточно набрать первую букву, чтобы всплыл наборчик. Избавляет от необходимости писать по буквам километры кода, ускоряет работу.
  • io — прибирает выделенный код, создает аккуратные отступы. Это помогает сохранить структуру кода и не запутаться при верстке блоков.
  • JS CSS Minifier — сжимает код. Это ускорит загрузку сайта. Используется, когда код уже не требует правок и готов к публикации.
  • Right click — расширение для поддержки правого клика. Используется, чтобы копировать и вставлять куски кода — например, повторяющиеся.

Этот редактор выбран из-за бесплатности, настраиваемости и удобства работы. Для присоединившихся к верстке примера — пишите код там, где удобно и привычно.

Общая концепция

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

  • информация о предложении;
  • кнопка заказа;
  • призыв к действию;
  • преимущества;
  • контакты.

Далее нужно решить, в каком виде расположить эти элементы, как они будут сочетаться между собой, какая нужна цветовая гамма. Чтобы организовать все это, используются разные инструменты — можно сделать макет в Photoshop или Gimp (бесплатный аналог), скомпоновать картинку в собственной голове или же применить Moqups. Последний вариант оптимален для быстрого наглядного прототипирования.

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

Добавлен файл стилей и шрифт для отображения иконок.

Из стандартных элементов фреймворка собран шаблон «рыба» — чтобы не тратить время на Html-код. Сервисов для генерации подобной «рыбы» множество. Сборка происходит простым перетаскиванием блоков в нужные места. Мы использовали сервис Layout.it.

Для блока предложения за основу взят встроенный класс бутстрапа jumbotron.

Приводим в порядок получившийся шаблон.

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

background: url(../img/fon.jpg) top center no-repeat;

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

@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed';/* импорт шрифта для заголовков */

И дополнительно выведен в нужном месте:

h1, h2, h3, h4, h5, h6 <

font-family: 'Roboto Condensed', sans-serif; /* Гуглфонт вывод */

После этого точечно добавлен цвет шрифта заголовка в джамботроне, а также тень для него.

text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);

Зная высоту и вид заголовка, настраивать шаблон удобнее. Мы добавили место под будущее фото инфопродукта справа от текста. Сделано это опять же с помощью Bootstrap. Для разделения джамботрона на колонки использован этот код:

<div class="col-sm-6 col-md-5 col-lg-offset-1">

<div class="col-sm-6 col-md-5 col-lg-offset-1">

Вокруг будущей фотографии продукта

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

Шаг 2. Изменяем вид кнопки заказа и добавляем курс

Для модификации кнопки мы ввели отдельный класс jbutton. Его добавление позволяет точечно менять размер и цвет кнопки, не сталкиваясь с кодом Bootstrap.

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

Теперь представим товар лицом — вставим фото в отведенное для него место. У читателя это, разумеется, будет собственное изображение. Чтобы вставить картинку используем этот код:

<div class="col-sm-6 col-md-5 col-lg-offset-1">

<img class="imgcat" src="http://vovka.su/kak-sozdat-samomu-lending-pejdzh-i-ne-pozhalet-o-potrachennom-vremeni/assets/img/kurs.png"/>

В CSS прописываются дополнительные параметры:

Это ограничитель размера фото и поддержка респонсивности.

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

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

<div class="col-md-4 text-center">

Оформить можно классическим списком или подчеркнуть встроенными иконками. Наш вариант с иконками. Прописать их очень легко:

<i class="fa fa-star-o fa-3x"></i>

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

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

Мы сделали вариант с отзывами в три колонки, прописав им класс col-lg-4. Начинка состоит из аватаров и блоков цитат:

<div class="avatar"> <img src="http://vovka.su/kak-sozdat-samomu-lending-pejdzh-i-ne-pozhalet-o-potrachennom-vremeni/assets/img/1.jpg" /> <p>Имя клиента</p></div>

<blockquote> Текст отзыва </blockquote>

Путь к картинке аватара задан стандартно тегом img.

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

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

В шаблон добавлены эти строки:

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

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

Дополнительно на первом экране задана анимация текста при загрузке страницы:

<p class="animated fadeInDown">

На этом процесс завершен. Посадочная страница готова.

5 признаков того, что Landing page не сработает

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

Признак №1 — нет ни рекламы, ни продвижения

Более 90% компаний не находит свои сайты в топ-10, даже набрав в «Яндексе» название собственного бренда? Что уж говорить о посадочных страницах, вес которых априори ниже, чем у морд перелинкованных сайтов? Причина провалов кроется в подходе «покупатель сам придет». Не придет. Он не подозревает о вашем существовании. Его нужно привести. Продумайте, каким путем будет добыт трафик.

Признак №2 — проблемы с дизайном

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

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

Ни одного лишнего элемента.

Дэвид Огилви — основатель одного из крупнейших международных рекламных агентств, сказал еще в 1983 году:

«8 из 10 человек читают ваш заголовок. Но только 2 из 10 читают остальное»

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

Признак №4 — неправильный или унылый заголовок

Заголовок лендинга должен обещать, манить, заставлять желать большего. Если это не так — клиент уже потерян.

Но даже супер-заголовок не сработает, если предложение будет отличаться от того, что посетитель ожидал получить. Если юзер пришел по клику с рекламы «70% скидка на брюки - жми сюда», то на целевой странице должно быть предложено 70% снижение цен на штаны. Не 30%, не 50% — 70 процентов! Слишком часто рекламные обещания не погашаются на лендингах. Разочарованный посетитель ничего не купит, даже если предложение выгодно и без скидки.

Признак №5 — некорректный призыв

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

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

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

Помогла статья? Оставь комментарий!

Я желаю всем успехов в создании лендинг пейдж!

Другие статьи

Делаем своими руками бесплатный лендинг пейдж

Делаем своими руками бесплатный лендинг пейдж. Урок 1. Что такое лендинг пейдж.

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

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

Лендинг пейдж в рунете сократили, как ЛП.

Заказать лендинг пейдж по адекватной цене от 5 000 руб. до 10 000 руб. на cms Wordpress. На основе платной премиум темы вы получите в собственность лендинг страницу, за которую не придется платить ежемесячно. Вордпресс является гибкой платформой и позволяет разрабатывать продающие одностраничники с красивым дизайном, а не только многостраничные интернет-магазины.

Сегодня у нас с вами практический урок с техническими моментами. Итак…

Лендинг пейдж – это обычная веб-страничка в интернете, созданная по известным технологиям HTML, CSS, Java, с добавлением изображения и текста. Текст называется продающим и пишется по законам копирайтинга. Landing page можно сделать вручную или на любом движке с помощью плагинов.

Как создать лендинг пейдж своими руками. Пошаговые уроки и практика. 1 шаг. Определимся, какие знания и навыки нам понадобятся.
  1. Мы будем делать продающую страницу на HTML, CSS.
  2. Нам нужно написать короткий смысловой текст, побуждающий пользователя сделать нужное нам действие.
  3. Картинка, служащая либо фоном веб-странички, либо отдельным элементом.
  4. Код формы. Если вы ведете рассылку в e-mail сервисе, то подписную форму сгенерируете там же. Если это форма регистрации на сайте, то код возьмете с сайта.
2 шаг. Как сделать макет лендинг пейдж.

В корне страница index.html;

Для картинок папка «images» или «image»;

Для файлов стилей папка «css».

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

Лучшая программа для создания лендинг пейдж.

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

Основа для веб-документа:

<meta name="Description" content="Описание" />

<meta name="Keywords" content="Ключевые слова" />

<div> Здесь будут блоки с Div версткой</div>.

Верстка может быть табличная, но лучше с дивами - <div> Тег Div</div>.

Вы можете пойти по двум направлениям:

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

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

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

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

Идеальная основа для макета лендинг пейдж – это три блока: заголовок, текст и форма или кнопка заказа, подписки.

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

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

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

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

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

Все, ничего лишнего.

Дополнительные шашечки. Нужны ли они? Как провести анализ.

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

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

Для того, чтобы узнать какой вариант вашей страницы будет конверсионным, пользуйтесь А/Б тестированием. Сервисы для этого: Google Website Optimizer, сервис рассылок, которым вы пользуетесь. Очень удобный интерфейс и возможность провести тестирование разных вариантов одной продающей страницы в смартреспондере http://smartresponder.ru/

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

Во втором уроке мы продолжим практическое создание целевой страницы. Хорошим подспорьем при этом будут эти бесплатные видео уроки HTML, CSS, Dreamweaver и другие.

Прочтите еще статьи о посадочных страницах:

Создание Landing Page в Adobe Photoshop - пошаговая инструкция - SkillsUp - удобный каталог уроков по дизайну, компьютерной графике, уроки фотошопа, P

Что такое лэндинг пэйдж и с чем его едят?

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

Зачем нужны Landing page?

Потребность в так называемых "продающих страницах" возникла с бурным ростом интернет индустрии и усиливающейся конкуренцией. Благодаря грамотно продуманной логике страницы можно значительно повысить продажи не увеличивая при этом рекламных бюджетов. Лэндинги также помогают с большей эффективностью работать с привлеченным через разные каналы трафиком. К примеру, если вы используете контекстную рекламу, медийные сети и баннерную рекламу на разных площадках, то использование в качестве целевой страницы специально подготовленного лэндинга значительно увеличит ROI (возврат на инвестиции) ваших рекламных каналов. Как добавить к вашему сайту лэндинг пейдж? Вам нужно либо самостоятельно сделать эту страницу либо заказать разработку landing page у специализирующихся на этом компаний, например компании e-art. С заказом всё просто, заплатил денег - получил готовую сверстанную страницу. А вот с тем чтобы самому сделать подобную страницу дела обстоят немного сложнее. Предлагаем разобраться в создании пошагово:

Шаг 1: Подготовка

В создании лендинга мы будем полагаться на популярный инструмент 960 Grid System, который в поможет нам правильно расположить графику на рабочем пространстве чтобы потом насадить её на уже готовую схему блоков от 960 Grid System. В работе были использованы следующие шрифты: Source Sans Pro, Nevis и Bebas Neue, но вы можете использовать шрифты на ваше усмотрение. В качестве иконок использовался набор Impressionist Icons, который на данный момент является платным.

Для работы нам понадобятся скачать 960 Grid System. После скачивания разархивируйте его в папку и откройте PSD файл с 12 колонками под названием 960_grid_12_col.psd. он находится в папке templates\photoshop. Сперва нам нужно добавить немного рабочего места, поэтому перейдите в меню Image > Canvas Size и установите Width (Ширина) 1200px and Height (Высота) 1330px.

Оставьте 245px сверху для нашей главной картинки в шапке страницы. Остальному пространству задайте серый цвет (#f0f0f0 ) с помощью инструмента Rectangle Tool. Просто выберите этот инструмент и нарисуйте прямоугольную область, покрывающую всё пространство ниже наших заветных 245px. отведенных под шапку. Обратите внимание, что при создании прямоугольника вы должны задать ему нужный цвет (#f0f0f0 ) в палитре.

Шаг 2: Изображение в шапке

Для изображения в хедере рекомендуем вам подобрать тематическую картинку достаточного разрешения - 1200 на245 пикселей будет в самый раз. Расположите картинку на свободном пространстве, которое мы оставили на предыдущем шаге, после чего размойте картинку любым известным вам способом. Например вы можете применить размытие по Гауссу перейдя в меню Filter> Blur> Gaussian Filter и поставьте радиус равным 4px .

Шаг 3: Панель навигации

С помощью Rectangle tool создайте прямоугольную область высотой 20px и шириной на всю рабочую область, после чего придайте полученному слою Opacity в 25% - таким образом мы добьёмся полупрозрачности слоя как это показано на картинке снизу.

Переключитесь на Horizontal Type Tool (T). В дальнейшем мы будем использовать шрифт Source Sans Pro - совершенно бесплатный шрифт, который можно без проблем сказать с серверов Гугла.

В опциях выставьте следующие параметры стиля:

После этого используйте Horizontal Type Tool чтобы написать выдуманный или реальный имейл и номер телефона. Справились? Переходим к иконкам. Как мы уже говорили выше, в данной работе использовался платный набор иконок, но вы можете вполне обойтись и бесплатным по этой ссылке - designinstruct.com/articles/resources/25-free-high-quality-minimalist-icon-sets/. Рекомендуем присвоить иконкам белый цвет (#ffffff). После того как надписи и иконки уже на своих местах - придайте им DropShadow эффект как это показано на рисунке.

В результате у вас должно получиться вот это:

Шаг 4: Лого-ленточка

В качестве логотипа вы можете использовать любое растровое или векторное изображение, либо же нарисовать фигуру средствами Adobe Photoshop. Перейдите в меню View > Show > Guides, таким образом вы включите предустановленные в 960 Grid System линии разметки. Если хотите получить подобную ленточку - используйте инструмент Pen Tool и попросту обведите нужный вам контур по линиям разметки, после чего придайте элементу зеленый (#79b02f ) цвет.

Теперь давайте придадим нашей ленте несколько дополнительных стилей, чтобы она стала выглядеть как полноценный лого. Начнем с Inner Shadow с Opacity на уровне 35% .

и добавим Bevel and Emboss. Для параметра Highlight Mode установите Opacity на уровне 0% (нам ведь совсем не нужен хайлайт эффект), в то время как для Shading Mode ставим Opacity в15%. Обратите внимание как это выглядит на рисунке:

После этого добавим Gradient Overlay к элементу. Параметр Blend Mode оставьте в позиции Soft Light. а Opacity на уровне 50%. Вот так должно выглядеть окно настройки эффектов:

Далее иcпользуем Pattern Overlay чтобы приаттачить к нашей стрелочке какой-нибудь интересный паттерн. По умолчанию установлено довольно небольшое количество паттернов, поэтому рекомендуем вам поискать интересные варианты на subtlepatterns.com. После того как выберете понравившийся вам паттерн, установите Opacity на уровне 5% чтобы у вас получилось нечто такое:

Теперь можно нанести какой-нибудь текст поверх нашего логотипа. Используйте Horizontal Type Tool и напишите нужные вам символы или текст. В нашем случае это буквы "DM " в шрифте Nevis (Bold 36px ) + Drop Shadow эффект.

Шаг 5: Заголовки

Для оформления заголовков был использован шрифт Source Sans Pro, заботливо выделенный Bold 'ом. Больший заголовок выполнен шрифтом с размером 24pt. меньший - 18pt .

Вот так заголовки выглядят после придания им эффекта Drop Shadow:

Шаг 6: Круги

Теперь нам с вами предстоит добавить на наш лендинг пейдж 3 круга: 2 круга одинакового размера + один побольше и соединить их линией в 5px. Чтобы сделать круги воспользуемся инструментом Ellipse Tool, а для линии подойдет Line Tool с толщиной линии в 5 px .

Далее используйте рандомный дефолтный свой любимый шрифт и напишите несколько надписей с ключевыми аспектами лэндинга. В самом большом круге добавьте +10pt к размеру шрифта.

Шаг 7: Кнопка призыва к действию (Call to action)

Итак, мы наконец-то добрались до call-to-action кнопки. Сделаем её с помощью инструмента Rounded Rectangle Tool. Выставьте радиус 3px + цвет #96c64f и нарисуйте элемент шириной 7px и высотой 35px. после чего добавьте к элементу Drop Shadow эффект:

Далее добавим Inner Shadow c Distance в 1px и Opacity на уровне 30%. Получим следующее:

И снова Bevel and Emboss для call to action кнопки. Этот эффект отлично справляется с задачей придания объёма элементам, именно поэтому мы его здесь и используем. Но с ним тоже не стоит особо перегибать, чтобы сделать эффект едва заметным, выставьте для опции Highlight Mode оставьте Opacity на уровне 0% а для Shadow Mode - на уровне 7% .

Далее добавляем к элементу эффект Gradient Overlay в режиме смешивания Soft Light с Opacity на уровне 60%:

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

  • Создайте новый документ любого размера
  • Создайте новый слой и удалите дефолтный бэкграунд
  • Перейдите в меню Select > All
  • Выберите Edit > Fill чтобы заполнить всё рабочее пространство
  • Далее снимаем выделение Select > Deselect
  • Добавляем достаточно заметный шум следующими действиями Filter > Noise > Add Noise
  • Снова выделяем всё рабочее пространство: Select > All
  • Переходим в меню Edit > Define Pattern

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

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

Далее нам нужно создать небольшой элемент, который будет служить разделителем между иконкой и текстом на кнопке. Для этого создаём вертикальную линию высотой в 10px с помощью инструмента Line Tool. Добавляем к линии эффект GradientOverlay со следующими параметрами:

Используем тот же шрифт, который мы использовали для заголовков и пишем призыв к действию, например надпись Download it Now. Придаём тексту тёмно зеленый цвет (#4d7500 ) и присваиваем эффект Drop Shadow с белым (#ffffff ) цветом тени и Opacity на уровне 30% .

Далее добавляем любую понравившуюся вам иконку или рисуем свою. В нашем случае это будет иконка облака.

Шаг 8: Ленточка рядом с кнопкой

Используйте ту же технику, с помощью которой мы рисовали ленточку для логотипа и дополнительно уменьшите Opacity чтобы сквозь ленточку была видна фоновая картинка. Это важно также чтобы не отвлекать посетителя от главного call-to-action. После того как ленточка будет готова, напишите на ней что-нибудь, например "100% free" .

Шаг 9: Секция основного контента

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

Используйте Rectangle Tool чтобы создать элемент шириной 220px и высотой 214px. Ниже полученного прямоугольника нарисуйте еще один маленький прямоугольник 5px высотой и светло-зеленым (#91c04c ) цветом. Используйте подготовленные сэты иконок и расположите выбранную иконку в центре верхней трети прямоугольника. Далее используйте Horizontal Type Tool и Source Sans Pro выбранный вами шрифт серого цвета (#262626 ) для заголовка и более светлый оттенок серого цвета для остального текста (#9c9c9c ). Дублируйте полученный элемент три раза чтобы в итоге у вас получилось 4 подобных элемента, замените иконки и заголовки на копиях. У вас должно получиться вот так:

Используйте Nevis или любой понравившийся вам шрифт в Bold размером 18pt и напишите какое-нибудь предложение. Цвет текста тот же самый, который мы использовали для Заголовков на предыдущем этапе, а зеленый цвет - это цвет зеленых прямоугольников, которые мы тоже делали на предыдущем этапе. Сделайте ударение на словосочетании "Contact Us" - оно будет ссылкой, поэтому сделайте его подчеркнутым.

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

Шаг 10: Футер, подвал. или как там его?

Используем Rectangle Tool чтобы создать элемент 1200px в ширину и 280px в высоту. Покрасьте его в серый цвет (#d0d0d0 ) - это и будет наш бекграунд для футера.

Используем Horizontal Type Tool и тот же шрифт что и раньше чтобы написать очередной Заголовок как на следующей картинке. Мы разделим наш футер на 3 секции и каждая из них будет иметь собственный заголовок. Как вы можете видеть на картинке, заголовок первого блока гласит "More About Us". Добавим к нему Drop Shadow эффект с параметром Opacity на уровне 50% и Distance в 1px .

Используйте тот же шрифт чтобы написать текст-рыбу и придайте ему более светлый оттенок (#7a7a7a ).

Используйте Line Tool чтобы создать простую серую линию, которая и будет служить разделителем между секциями.

Следующая секция будет называть "Newsletter". Создайте поле для ввода имейла с помощью Rounded Rectangle Tool с радиусом в 3px. Придайте бекграунде очень светлый серый цвет (#f5f5f5 ). Give it a subtle Drop Shadow effect. Give the shape a really subtle 1pxStroke layer effect. Use the Horizontal Type Tool (T) to input some text in the shape. Добавьте пару эффектов по вкусу: например Drop Shadow и 1pxStroke. Напишите текст-рыбу для поля ввода.

Последняя секция носит название "Contact Us". Она простая как двери и вряд ли отнимет у вас многов времени. Все шаги похожи на предыдущие, за исключением разве что более тёмных цветов для поля e-mail, location и phone number. Поэтому не будем особо на ней останавливаться.

Шаг 11: Finita la comedia

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