Как сделать в фотошопе лендинг – Создание Landing Page в Adobe Photoshop — пошаговая инструкция — SkillsUp

Содержание

Создание Landing Page в Adobe Photoshop - пошаговая инструкция - SkillsUp

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

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 - совершенно бесплатный шрифт, который можно без проблем сказать с серверов Гугла.

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

  • font familySource Sans Pro
  • font styleBold
  • font size16px
  • text color:
     #aed572

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

 

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

Шаг 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, меньший - 18

pt.

Вот так заголовки выглядят после придания им эффекта 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. Добавляем к линии эффект Gradient Overlay со следующими параметрами:

Используем тот же шрифт, который мы использовали для заголовков и пишем призыв к действию, например надпись 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 1px Stroke layer effect. Use the Horizontal Type Tool (T) to input some text in the shape. Добавьте пару эффектов по вкусу: например Drop Shadow и 1px StrokeНапишите текст-рыбу для поля ввода.

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

Шаг 11: Finita la comedia

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

Источник: designinstruct.com/

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов

skillsup.ru

Целевая страница с помощью Photoshop

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

 

 

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

 

Ресурсы для урока

Шаг 1: Основные настройки документа

Для этой целевой страницы, мы будем использовать системы сеток. Это популярная 960 Grid System, которая поможет выравнять элементы страницы. 

С официального сайта  960 Grid System скачиваем  ZIP файл и открываем PSD файл с 12 колонками. Этот файл называется 960_grid_12_col.psd. Файл находится внутриemplates\photoshop

Давайте изменим ширину и высоту холстаPSD, чтобы получить немного больше места для работы. Переходим к  Image> Canvas Size и устанавливаем idth - 1200 пикселей и  Height - 1330px

Leave about 245px from the top of the layout for our main header image.

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

Для остальной части макета зададим серый цвет ( # f0f0f0 ). Вы можете сделать это несколькими способами. В этом уроке мы использовали инструмент Прямоугольник. Выберите инструмент Прямоугольник на панели инструментов. На панели Options, убедитесь, что выбрана опция Shape Layers, и установите желаемый цвет: # f0f0f0 . Нарисуйте прямоугольник, который будет занимать весь холст , за исключением верхних 245px. Переименуйте слой на что-то вроде «base».

Шаг 2: Изображение header

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

Сделаем фото размытым. Сделать это можно несколькими способами, но мы будем придерживаться самого простого: Filter > Blur > Gaussian Filter. Установите  Radius - 4.0px .

Шаг 3: верхняя навигационная панель

Используйте Rectangle Tool (M), чтобы создать горизонтальную полосу прямоугольника вверху холста. Ее высота —  20 пикселей, а ширина занимает всю ширину холста.

Для слоя устанавливаем прозрачность Opacity - 5% . С помощью этого у нас получится полупрозрачная панель навигации. 

Переключитесь на инструмент Horizontal Type Tool (T).

Мы будем использовать  шрифт Sans Pro, который можно бесплатно загрузить на Google Web Fonts.

В панели Options настраиваем свой инструмент Horizontal Type Tool:

  • font familySource Sans Pro
  • font styleBold
  • font size16px
  • text color: #aed572 (a green color)

С помощью Horizontal Type Tool вводим номер телефона и вымышленный адрес электронной почты, или любой текст, который захотите. 

Также будем использовать несколько иконок с ресурса  Impressionist UI, либо другое бесплатные иконки. 

Цвет для иконок — белый (# FFFFFF). 

После того, как текст и иконки были размещены на нужном месте, применяем к ним тень Drop Shadow. 

 

 

Шаг 4: Логотип

Делаем видимыми направляющие, выбрав View> Show> Guides . Они помогут нам разместить ровно элементы будущего дизайна, в том числе логотип. 

Чтобы создать подобную форму, которую вы видите в левом верхнем углу нашего макета, пользуемся  инструментом Pen Tool (P). В создании ленты очень помогут направляющие. Для формы задаем светлый зеленый  цвет (# 79b02f).

Зададим для нашего логотипа некоторые стили. Начинаем с добавления светлого эффекта  Inner Shadow и прозрачностью 35%. 

 

Также добавим к логотипу некоторую глубину путем применения эффекта слоя Bevel and Emboss. Устанавливаем непрозрачность Opacity на 0% для Highlight Mode (потому что мы не нуждаемся в эффекте освещения) и устанавливаем непрозрачность для режима Shading Mode в на 15% 

Также добавим мягкий Gradient Overlay. Изменяем Blend Mode на Soft Light и Opacity ставим на 50% . 

Мы будет использовать эффект слоя Pattern Overlay для того, чтобы добавить некий узор к логотипу. Вы можете найти множество бесплатных узоров Photoshop на сайте subtlepatterns.com.

Устанавливаем непрозрачность в стилях слоя Pattern Overlay 5% .

Теперь с помощью инструмента Horizontal Type Tool вводим текст. Был использован шрифт Nevis, font style установлен Boldfont size - 36px.  Далее вводим буквы - «DM» .

После этого добавляем к текстовому слою тень Drop Shadow. 

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

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

Добавляем для текста Drop Shadow.

Шаг 6: Круги

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

Используйте Ellipse Tool, чтобы создать круги, а затем Line Tool с  Weight ​​в 5px , чтобы создать линию размером 5 пикселей, которая проходит через них.

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

Шаг 7: Кнопка

Дальше под заголовками будем создавать кнопку.

Ее будем создавать с помощью Rounded Rectangle Tool. На панели Options, нужно убедиться, что  выбрана опция Shape Layer, опция Radius установлена ​​на 3px и светлый зеленый  # 96c64f .

Затем создайте форму около пикселей шириной и 35px высотой.

Добавляем эффект  Drop Shadow.

Также добавляем эффект Inner Shadow. Устанавливаем Distance 1px  и непрозрачность - 30%.

К кнопке нужно также добавить эффект Bevel and Emboss. Он должен быть едва заметен, поэтому устанавливаем Opacityдля режима Highlight Mode - 0%  и прозрачность Opacity для режима Shadow Mode —  7%. 

 

Давайте добавим к слою Gradient Overlay. Устанавливаем режим смешивания  Blend Mode на Soft Light и Opacity на 60%.

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

  1. Создайте новый документ Photoshop (любого размера)
  2. Создайте новый слой и удалите слой фона по умолчанию
  3. Перейти к Select> All (который выделит область холста), чтобы выбрать весь холст
  4. Выберите Edit> Fill , чтобы заполнить слой
  5. Отмените выбор, перейдя в Select> Deselect
  6. Добавьте большой шум, нажав Filter> Noise> Add Noise
  7. Выделите весь холст снова ( Select> All )
  8. Перейдите к  Edit> D efine Pattern и сохраните шаблон

Теперь вы создали свой шаблон Photoshop.

Затем вернитесь в основной документ Photoshop и добавьте к кнопке эффект Pattern Overlay, используя шаблон, который вы только-что создали.

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

Теперь мы создадим небольшую форму, которая будет разделителем между иконой и текстом кнопки. Для создания этого используется Line Tool, чтобы создать вертикальную линию около 10 пикселей высотой.Примените Gradient Overlay для слоя с вертикальной линией.

Используйте тот же шрифт, который мы использовали для заголовка текста ( Nevis ),  ввести текст для веб-кнопки. Вводим фразу «Download it Now»

Делаем текст темно-зеленым цветом ( # 4d7500 ) и применяем эффект Drop Shadow, где цвет тени будет установлен белый  ( # FFFFFF ) и  Opacity на 30%.

Шаг 8

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

Во-первых, нужно использовать инструмент Elipse для создания от 4 до 5 кругов. Нужно удерживать нажатой клавишу Shift во время рисования кругов. 

Теперь, установите Fill для слоя с иконкой на 0% - это можно сделать в панели Layers.

После этого для слоя добавляем обводку  Stroke в  2px, темно-зеленый цвета.

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

Следуя шагам, которые мы выполняли для создания ленты логотипа, возле кнопки создаем светло-зеленую форму.

Уменьшите Opacity формы. 

Введите текст на ленте. В уроке был набран текст  «100% free».

Шаг 10: Раздел "Избранное"

Давайте работать с разделом «Избранное».

Используйте Rectangle Tool (U), чтобы создать прямоугольник шириной 220 пикселей и высотой 214 пикселей.

В нижней части прямоугольника добавляем зеленый прямоугольник ( # 91c04c ) высотой около 5 пикселей.

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

Используйте инструмент Horizontal Type Tool (T)  и шрифт Sans Pro, чтобы ввести название возле иконки — темно-серый цвет ( # 262626 ) и светло серый текст ( # 9c9c9c ).

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

Используйте шрифт  Nevis, font style -  Boldfont size - 18pt и введите текст. Используйте серый цвет такой же, как и для текста в предыдущих шагах. 

 

Акцентируйте внимание на последнем слое  («Контакты»), где будет размещена гиперссылка. В панели Character (если вы не можжете найти эту панель, перейдите к Window > Character), нажмите опцию underline, чтобы подчеркнуть текст. 

Добавляем Drop Shadow.

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

Шаг 11: футер

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

Используйте инструмент Horizontal Type Tool (T) и тот же шрифт, чтобы ввести текст заголовка, как на рисунке ниже. Мы будем делить наш футер на три части, и каждая из которых будет иметь заголовок. Как показано ниже, заголовок первого раздела "More About Us". К заголовку применяем эффект Drop Shadow с непрозрачностью в 1%.

Используйте тот же шрифт, чтобы написать следующий  текст. Для текста выберите светлый цвет ( # 7a7a7a ).

С помощью Line Tool (U) создаем простую серую линию, которая будет разделять каждый раздел. 

Следующий раздел футера будет иметь название  "Newsletter".  С помощью Rounded Rectangle Tool (U) и Radius в 3px создаем поле для ввода светло-серого цвета ( # f5f5f5 ).  Добавляем к тексту эффект  Drop Shadow. Добавляем к полю небольшую обводку Stroke в  1px.  Используйте инструмент Horizontal Type Tool (T), чтобы ввести в форму текст .

Наш последний раздел футера —  "Контакты ". В разделе размещаем иконки и текст. 

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

Исходный файл

Автор: STELIAN SUBOTIN 

Перевод — Дежурка

www.dejurka.ru

Создание дизайна Landing Page / Habr

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

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

Так научимся же создавать качественные и красивые целевые страницы. Разобьём урок на 3 части. Содержание, Оформление и Практика.

Хронология изложения материала будет идти ОТ НАЧАЛА ДО КОНЦА, так что вы можете смело брать эту статью на вооружение при разработке своего очередного продающего шедевра. Здесь я постараюсь собрать и учесть абсолютно все, что имеет отношение к опыту человечества в разработке целевых страниц и то, что действительно работает, пока такой формат продаж еще актуален.

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

Часть 1. Содержание Landing Page


1.1 Текст – это всё


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

О тексте по порядку.

1.2 Заголовок целевой страницы


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

Понимаете, в чем ошибка? Если пользователь набрал в поисковой строке «Пылесосы iRobot Roomba в Москве», то ему глубоко фиолетово кто вы, какие вы крутые и сколько вы лет на рынке. Он хочет видеть пылесосы iRobot Roomba и иметь возможность купить их в Москве. Чем точнее заголовок соответствует поисковому запросу, тем лучше ваша целевая страница.

Можно усилить заголовок словами «Лучшие, быстрые, самые мощные» и т.д. В результате должно получиться что-то вроде «Умные роботы пылесосы iRobot Roomba в Москве». Не стесняйтесь, это реально работает.

1.3 Меньше воды в тексте


Тут кроется очень заезженная, не всегда очевидная и, в то же время – серьезная ошибка. Вода. Пользователь чувствует воду, он читает текст до тех пор, пока его не начнет очень жестко тошнить от вашего текста. И даже если бы не было текста, а была только яркая картинка пылесоса в заголовке с ценой и кнопкой «Заказать» — то 50 из 100, возможно и купили бы этот пылесос. Но благодаря вашему тексту и потугам в сочинениях, на которые вы убили пол дня – целевая аудитория разбегается во все стороны с тошнотными позывами в сторону горе-страницы и ее автора, в частности.

Как избавиться от воды? Подкрепляйте каждое утверждение ФАКТАМИ, ЦИФРАМИ и ГРАФИКАМИ. Не нужно писать «У нас много довольных клиентов», напишите, сколько довольных клиентов, детализируйте и сегментируйте клиентов. Столько-то женщин приобрело пылесос, столько-то холостяков остались довольны чудо девайсом, столько-то часов данный пылесос сэкономил времени, столько-то часов проработал. Подкрепляйте каждое утверждение цифрами или не делайте утверждения вовсе, чтобы избавить посетителя от желания приобнять белого друга.

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

1.4 Не обманывайте


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

1.5 Выгода/Преимущества


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

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

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

1.6 Указывайте на то, что товар или услуга являются новинкой


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

1.7 Обязательно размещайте отзывы


Дополню. Размещайте НАСТОЯЩИЕ отзывы. Представьте себе ситуацию, зашел потенциальный клиент на целевую страницу, ознакомился с условиями, готов уже был приобрести товар, но наткнулся на типовые, сахарные отзывы, да еще и в придачу, на фотографии, которые уже где-то видел – либо на такой-же целевой странице, либо в каком-либо фотобанке, или в результатах поисковой выдачи. После того как пользователь почувствует обман – вы потеряете его навсегда. Покупают у тех, кому доверяют, у тех, кто лжет никогда не купят.

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

Каждый отзыв должен начинаться заголовком, которым может служить выдержка из текста самого отзыва с описанием преимущества для клиента, например, «Благодаря пылесосу iRobot Roomba я экономлю около 20 часов на уборке в месяц…». После заголовка идет текст отзыва. Затем, имя того, кто отзыв написал и кем он является – семьянин, ген. директор, бухгалтер, домохозяйка и т.д. Важно, чтобы отзыв был подкреплен не только хорошим заголовком, но и фотографией реального человека. Подчеркивайте важные достижения клиента (благодаря продукту или услуге, естественно) в тексте жирным выделением или цветом, соответственно и в дизайне при оформлении.

1.8 Гарантия возврата денег


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

Часть 2. Оформление Landing Page


2.1 Продукт в действии


Изображение товара в шапке или на первом экране – это всё. Если вы поняли всё безрассудство написания пустых, не подкрепленных фактами текстов, то уделите это время на создание яркой и красочной картинки товара в шапке. Уделите этому достаточно времени. Экспериментируйте, улучшайте товар или услугу в Фотошопе до тех пор, пока не получите достойный результат.

Очень часто мне приходится наблюдать такой позор, как протухшая на вид пицца в шапке, черно-белая картинка автомобиля, летающий в воздухе непонятный девайс и прочие ошибки. Нужно сделать так, чтобы продукт или услугу захотелось приобрести. Если это пицца, пусть она будет такая аппетитная, с плавленым сырком, яркая, что ее захочется съесть немедля. Добавьте красок продукту, дымка, поджаристую корочку. В пределах разумного, конечно. Покажите продукт в действии. Если это приложение для мобильных устройств – сфотайте пользователя с телефоном и вашей софтиной на борту или, на худой конец, скачайте Mockup PSD с телефоном в руке и разместите скриншот приложения в рабочем состоянии. Еду отображайте яркой, горячей и готовой к употреблению. Это должно быть в шапке. Кроме того, было бы не плохо выложить видео с презентацией продукта. Лаконичный заголовок, кнопка и продукт в действии…

2.2 Кнопка призыва к действию на первом экране


Тут ни чего сложного – размещайте кнопку призыва к действию («Заказать пылесос») на первом экране. Это, конечно, не значит, что не стоит размещать этот элемент ни где более, просто постарайтесь сделать так, чтобы, зашедший на сайт посетитель увидел возможность приобрести товар или заказать услугу сразу.

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

2.3 Забудьте о попандерах


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

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

2.4 Не делайте много полей в формах


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

2.5 Не стесняйтесь показывать лица, адреса и телефоны


Банально, но человек, если видит на целевой странице – карту, телефон или фотографии сотрудников, то подсознательно он уже доверяет проекту. Мне очень часто приходится убеждать клиентов не стесняться показать лица организации, адреса и телефоны. Видимо, отголоски 90-х дают о себе знать и привычка прятаться, лишь бы только купили и отвязались, берет свое начало именно в этот период, после распада Союза, когда были тяжелые времена и «Мы выживали, как могли».

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

2.6 Размещайте логотипы известных брендов


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

Итак, мы рассмотрели ключевые моменты, которые необходимо учитывать при разработке Landing Page. Давайте объединим все вышесказанное в следующем разделе, напишем текст и создадим дизайн целевой страницы в Фотошопе.

Разрабатывать Landing Page, волею судьбы, будем для Пылесоса iRobot Roomba. Пример абсолютно рандомный и пришел в голову в процессе написания данного мануала.

Для прохождения урока нам понадобятся исходные данные, которые вы можете взять с GitHub.

Часть 3. Практика


3.1 Текст Landing Page


Итак, после изучения 1 и 2 части у нас уже есть некоторое представление о том, какой должна быть «правильная» целевая страница. Этого вполне достаточно для того, чтобы написать текст. Обратите внимание, выше были приведены основные рекомендации, но в зависимости от продукта или услуги, могут добавляться свои пункты, секции и функционал – нужно изучить объект и немного подумать.

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

Текст.

  • Шапка: лого, изображение пылесоса, заголовок: «Умные роботы пылесосы iRobot Roomba в Москве», телефон, адрес, кнопка.
  • Секция с видео: «iRobot Roomba в работе». Под видео – кнопка.
  • Секция Модельный ряд (Фото – Цена – Старая цена — Купить):
    • Roomba 630
    • Roomba 870
    • Roomba 880
    • Scooba 450

  • Гарантия. Текст гарантии возврата денег под моделями.
  • Секция преимущества:
    • Заголовок: «Преимущества перед обычным пылесосом»
    • Подзаголовок: «Это исключительно «умная» техника, которая самостоятельно производит уборку помещения и после завершения работы возвращается на станцию для подзарядки»
    • #1. Экономит время. Вы экономите свои силы и время, тратя его на более приятные занятия.
    • #2. Не нуждается в управлении. Пылесос сам составляет для себя оптимальный маршрут, благодаря интеллектуальной системе AWARE.
    • #3. Компактный. Техника не займет много места и работает без подключения к электросети.
    • #4. Самозаряжаемый. Зарядки аккумулятора хватает на 2 часа, после чего робот самостоятельно возвращается на платформу для подзарядки.

  • Секция отзывы. Фото – Имя – Кто есть – Текст отзыва.
  • Секция поддержки клиентов. Фото специалиста – имя – контакты (телефон, соц. сети).
  • Секция Контакты. Адрес и карта с меткой.

3.2 Дизайн


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

Прежде, чем начнем делать дизайн, давайте определим, что нужно учитывать при создании дизайна (общие рекомендации):

  • Всегда учитывайте бренд, стиль продукта, айдентику, если таковые имеются, старайтесь рисовать сайт в одном стиле;
  • Старайтесь использовать не более 3-х цветов в дизайне и несколько производных оттенков;
  • Выберите приятные сочетания шрифтов для дизайна;
  • Не лепите элементы близко друг к другу – это признак дурного вкуса;
  • Соблюдайте вертикальный ритм при расположении элементов, дайте воздуха дизайну;
  • Не делайте слишком маленький интерлиньяж (line-height) между строками в текстовых блоках;
  • Не используйте картинки плохого качества в дизайне;
  • Сжимайте всю графику с помощью TinyPng или подобных инструментов.
  • Перед ресайзом изображения обязательно конвертируйте его в смарт объект в Photoshop, на случай, если вдруг придется увеличить картинку без потери качества.
  • В данном примере максимальная ширина контента равна 1170px (сетка Bootstrap, чистый файл в архиве references/bootstrap-1170.psd).

Теперь нарисуем дизайн по составленному в п 3.1 тексту. Углубляться в основы работы с Photoshop не будем, рассмотрим ключевые моменты при создании дизайна Landing Page. Все секции будут на всю ширину макета, а контент в пределах сетки Bootstrap. Установим шрифты Raleway из папки Fonts. Размеры и цвета вы можете посмотреть в готовом макете references/ready_design.psd.

Итак, по тексту.

  • Шапка: лого, изображение пылесоса, заголовок: «Умные роботы пылесосы iRobot Roomba в Москве», телефон, адрес, кнопка.

Сверху разместим логотип, справа – телефон и адрес. Разместим фоновое изображение таким образом, чтобы пылесос находился слева (первые 6 колонок сетки), а заголовок целевой страницы – справа. Кроме того, разместим кнопку заявки и псевдоссылку на просмотр видео.

  • Секция с видео: «iRobot Roomba в работе». Под видео – кнопка.

У секции имеется заголовок и подзаголовок, не забываем.

  • Секция Модельный ряд (Фото – Цена – Старая цена – Купить).

В следующей секции «Модельный ряд» отобразим 4 девайса. Новая цена, старая цена и кнопка заказать. Старая цена говорит посетителю о том, что работает система скидок и у него есть возможность купить аппарат дешевле. Каждый айтем размещаем в 3 колонки сетки.

  • Гарантия. Текст гарантии возврата денег под моделями. Данная секция крайне желательна, но, если у продавца нет такой опции в продажах, можно не выдумывать.

  • Секция преимущества:

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

  • Секция отзывы. Фото – Имя – Кто есть – Текст отзыва.

Реализуем следующим образом, без особых наворотов, в пределах 10-ти колонок, две из которых занимает фотография и имя, и 8 колонок отведено под сам отзыв. Отзывы должны быть с заголовками:

  • Секция поддержки клиентов. Фото специалиста – имя – контакты (телефон, соц. сети).

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

  • Секция Контакты. Адрес и карта с меткой.

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

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

habr.com

Notice: Trying to access array offset on value of type null in /var/www/www-root/data/www/schtirlitz.ru/wp-content/plugins/wpdiscuz/class.WpdiscuzCore.php on line 942 Notice: Trying to access array offset on value of type null in /var/www/www-root/data/www/schtirlitz.ru/wp-content/plugins/wpdiscuz/class.WpdiscuzCore.php on line 975

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

avatar
  Подписаться  
Уведомление о
Notice: ob_end_flush(): failed to delete and flush buffer. No buffer to delete or flush in /var/www/www-root/data/www/schtirlitz.ru/adv.php on line 309