Эффективный дизайн лендинга: типы, фишки, идеи. Как сделать дизайн лендинга


Дизайн целевой страницы в Фотошоп

Финальный результат:

В этом уроке вы узнаете, как создать дизайн элегантного лендинга для вымышленного сервиса "дневник благодарности".

Мы начнем с разметки, очень быстро разработав макет при помощи Adobe Photoshop. Мы будем использовать некоторые базовые и средние по сложности техники, чтобы создать этот дизайн, а затем иметь возможность переделать его. Давайте начнем!

Материалы для урока

Чтобы следовать шагам урока вам потребуются некоторые (бесплатные) материалы:

Готовим документ

Шаг 1

Мы начнем с создания нового документа Photoshop. Для этого перейдите в меню Файл > Создать (File > New). Используйте настройки, указанные ниже. Вы можете создать документ любых предпочитаемых размеров, в интернете нет фиксированной ширины.

Шаг 2

Давайте добавим несколько направляющих, чтобы дать нашему шаблону достаточно места и сделать его сбалансированным. Я не всегда использую преднастроенную сетку, но установка направляющих линий обеспечит аккуратность и поможет определить ширину нашего сайта. Перейдите в меню Просмотр > Новая направляющая (View > New Guide) и установите несколько направляющих. Я обычно выбираю 1000px для ширины сайта и добавляю несколько линий по краям, чтобы оставить свободное место.

Заметка: Направляющие, используемые в этом уроке: вертикальные на 200px, 500px, 700px, 900px и 1200px.

Совет: Вы также можете использовать Photoshop плагин GuideGuide , чтобы ускорить процесс.

Шаг 3

Согласно с Этикетом Photoshop, мы аккуратно все организуем, чтобы было легко управлять документом и редактировать его. Давайте создадим три группы слоев и назовем их Заголовок, Контент, Подвал. Чтобы создать группу, перейдите в меню Слои > Новый > Группа (Layer > New > Group) и назовите каждый, как было указано выше. Для быстрого создания групп, кликните по иконке папки в панели слоев.

Работаем над зоной заголовка

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

Шаг 1

Для начала давайте создадим фон блога. В группе "Заголовок" нарисуйте прямоугольник черного #000000 цвета, используя инструмент Прямоугольник (Rectangle Tool). В моем случае я нарисовал фигуру размером 1400x728px и поместил ее в верхней части документа.

Теперь загрузите фотографию Chillin’ in the sun, перетяните ее в документ Photoshop и разместите над слоем с прямоугольником. Переименуйте слой с изображением во что-нибудь понятное, например я использовал IMG. Нажмите и удерживайте кнопку Alt и переведите указатель мыши на слой с фото, пока не увидите маленькую стрелку, указывающую вниз, после чего кликните левой кнопкой мыши и отпустите ее. Вы только что создали обтравочную маску (Clipping Mask). Для завершения, уменьшите Непрозрачность (Opacity) слоя IMG до 70%, чтобы текст, который мы поместим наверх, был читаемым.

Теперь нажмите Ctrl + T, чтобы изменить размер фото под ваши нужды.

Совет: Удерживайте кнопку Shift и вы сможете трансформировать фото пропорционально.

Шаг 2

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

Создайте новую группу с названием "Навигация", поместите ее под группой "Заголовок". После этого, выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте белый прямоугольник между первой и последней вертикальной направляющей. Установите высоту на 60px, чтобы элементы навигации могли "дышать" и выглядели опрятно. Наконец, передвиньте блок навигации на 30px вниз, чтобы получить эффект невесомости, который отлично смотрится с нашим изображением.

Шаг 3

Теперь давайте нарисуем логотип и добавим несколько ссылок, чтобы придать нашей панели пригодный для использования вид. Для логотипа я просто написал "Grttd", используя шрифт Playfair Display (Bold Italic) размером 26px и темно-серым цветом #0e0e0e.

Для ссылок навигации я использовал шрифт Source Sans Pro 14px с увеличенным расстоянием между буквами. Для главного призыва к действию "Sign up" я использовал Жирный (Black) зеленый #96c218 цвет. Мы закончили с группой "Навигация", поэтому сверните ее, кликнув на маленькую иконку треугольника рядом с именем группы.

Шаг 4

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

Так как у нас довольно темный фон, для верхней части более логично использовать бледный текст, чтобы создать высокий контраст и обеспечить читабельность. Я использовал белый #FFFFFF текст, набранный шрифтом Source Sans Pro (Black) 80px с высотой строки 86px. Поместите его примерно на 120px ниже от панели навигации, чтобы у текста было достаточно места, и он воспринимался как важный.

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

Для более вдохновляющих комбинаций оцените: Google Web Fonts Typographic Project  и статью A Beginner’s Guide to Pairing Fonts.

Для этого урока я использовал белый #FFFFFF шрифт Playfair Display (Italic) размером 26px и переместил его на 40px ниже от основного заголовка.

Шаг 5

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

Создайте новую группу, назовите ее "Пример", затем выберите инструмент Эллипс (Ellipse Tool) и, удерживая нажатой клавишу Shift, нарисуйте круг. В моем случае его размер 60x60px. После этого поместите чье-либо лицо над кружком и, удерживая клавишу Alt, наведите указатель мыши на слой с кругом, пока не увидите маленькую стрелку, указывающую вниз, после чего кликните левой кнопкой мыши и отпустите ее, чтобы создать Обтравочную маску. Теперь вы можете изменить размер изображения, нажав Ctrl + T.

Для этого урока я использовал случайное лицо с User Inter Faces.

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

Теперь нам нужно поместить индикатор беспрерывных заметок. Давайте создадим другой круг, на этот раз меньший и разместим в нем число. Просто, но понятно и отлично справляется со своей работой. Для цвета круга я заново использовал прежний зеленый #96c218 цвет. В моем случае, размер круга 30x30px, текст внутри него белый #FFFFFFSource Sans Pro (Bold) 14px.

Теперь давайте назовем нашего пользователя и объясним, что означает цифра. Выберите инструмент Горизонтальный текст (Horizontal Type Tool), введите имя и длину беспрерывного пользования сервисом. В моем случае я использовал шрифт PT Serif (Bold Italic) 16px для имени и Source Sans Pro (Regular) 13px для объяснения. Убедитесь, что высота строки достаточная, чтобы элементы могли "дышать".

Отлично, последнее, что мы сделаем перед переходом в группу "Контент". Нам нужен элемент Призыва к Действию (Call To Action - CTA), чтобы пользователь мог сделать что-нибудь после того, как увидел изображения и прочитал заголовки. Создайте новую группу "CTA", установите основной цвет на белый #FFFFFF и выберите инструмент Прямоугольник (Rectangle Tool). После этого нарисуйте прямоугольник, в моем случае его размер 280x60px. Обратите внимание на согласованность высоты кнопки и навигационной панели.

После этого, напишите убедительное описание для кнопки. Я использовал "START LIVING →", цвет - тот же темно-серый #0e0e0e, шрифт Source Sans Pro (Semibold) 16px с трекингом (Tracking) 140.

Шаг 6

Теперь мы закончили с группой "Заголовок". Давайте откроем группу "Контент" и создадим еще одну - "Описание". Мы поместим заметный заголовок с более детализированным описанием всего сайта. Важно повторить CTA-элемент, поэтому пользователю не нужно будет много раздумывать, и он сможет произвести действие, когда будет готов.

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и поищите "сильный" шрифт для вашего заголовка. В моем случае, я использовал красивый и элегантный, но авторитетно выглядящий Playfair Display (Black) 60px. Убедитесь, что у этого заголовка достаточно свободного места, я сместил его на 100px вниз от изображения в заголовке.

Выберите инструмент Горизонтальный текст ( Horizontal Type Tool), затем создайте прямоугольник, кликнув и перетянув указатель мыши. В моем случае это блок размером 600x140px, в котором я поместил убедительный текст, чтобы заставить пользователя кликнуть на кнопку. Для чистой визуальной иерархии, текст описания должен быть меньшим и не таким тяжелым. В нашем примере использовался серый #666666 шрифт PT Serif (Regular) 18px, высота линии 28px. Весь элемент нужно сместить на 50px вниз от заголовка, чтобы получился чистый и профессиональный макет.

После прочтения текста пользователь может захотеть попробовать сервис, поэтому будет разумно повторить кнопку CTA-элемента. Откройте группу "Заголовок", найдите группу "CTA" и дублируйте ее, нажав Ctrl+J. После этого, переместите ее в "Описание" и измените цвет кнопки на прежде использованный зеленый #96c218, для текста мы используем белый #FFFFFF цвет. Сместите кнопку на 50px вниз для последовательного расстояния между элементами.

Пока выглядит хорошо. Давайте поместим простую линию, визуально разделяющую блок описания от текста. Выберите инструмент Линия (Line Tool), установите Толщину (Weight) на 1px и нарисуйте горизонтальную линию от первой до последней вертикальной направляющей. В уроке я использовал светло-серый цвет #e6e6e6, который не слишком заметен, но при этом отлично выполняет свою работу.

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

Шаг 7

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

Перейдите в группу "Заголовок", найдите в ней папку "Пример". Дублируйте всю группу, нажав Ctrl + J, затем переходите к группе "Вдохновение". Мы будем повторно использовать наш пример с верхней части и покажем некоторые истории пользователей, чтобы вдохновить посетителя к действию.

Переименуйте группу в "Истории" и избавьтесь от зеленого индикатора. Также нам понадобится изменить цвет текста на темно-серый #0e0e0e, чтобы он был читаемым на белом фоне. Используйте другое изображение для аватара и напишите мнение человека и его местоположение более светлым серым #666666, чтобы больше влиять на посетителя.

После этого создайте текстовый блок с размером примерно 300x160px, используя инструмент Горизонтальный текст (Horizontal Type Tool) и напишите пример сообщения в дневнике благодарности. Я использовал шрифт PT Serif (Italic) 16px темно-серого цвета #666666, использованного ранее.

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

Шаг 8

Теперь, когда мы закончили с группой "Вдохновление", давайте перейдем к последней секции нашего лендинга. Финальный CTA-элемент (с некоторыми дополнительными деталями) поощрит пользователей зарегистрироваться, введя email адрес.

Создайте группу с названием "Email", перейдите к предыдущей папке, чтобы найти слой с заголовком, после чего дублируйте его, нажав Ctrl + J, и переместите в новосозданную группу. Измените заголовок на что-нибудь побуждающее к действию и переместите его примерно на 100px вниз от линии, сохраняя при этом согласованность.

Отлично! Теперь установите основной цвет на светло-серый #f5f5f5, выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте блок для поля email. Он должен быть такой же высоты, как и главная CTA кнопка, а ширина не так важна. В моем случае его размер 430x60px. Затем выберите инструмент Горизонтальный текст (Horizontal Type Tool) и напишите "Введите ваш email" или что-нибудь в этом роде. Убедитесь, что используете достаточно темный текст, который будет легко читаем.

Теперь переходите к группе "Описание" на панели слоев и найдите группу "CTA". Дублируйте ее, нажав Ctrl + J, затем переместите в группу "Email". Поставьте кнопку справа от поля email и отцентрируйте весь элемент.

Шаг 9

Мы почти закончили! Давайте свернем все группы и откроем папку "Подвал". Установите основной цвет на темно-серый #2d2d2d и, используя инструмент Прямоугольник (Rectangle Tool), нарисуйте прямоугольную фигуру полной ширины с высотой около 230px. Это будет фон для подвала, который поможет контрастно выделить зону контента.

Перейдите в папку "Навигация" и слой с логотипом, дублируйте их, нажав Ctrl + J, затем перейдите в группу "Подвал". Измените цвет на белый #FFFFFF, после чего переместите навигацию примерно на 50px ниже от края прямоугольника.

Наконец-то, возьмите инструмент Горизонтальный текст (Horizontal Type Tool) и поместите несколько ссылок, которые могут пригодиться пользователям. Убедитесь, что сгруппировали ссылки для легкости в навигации. Для урока я взял шрифт Source Sans Pro (Semibold) 16px для заголовков групп и PT Serif (Regular) 14px для самих ссылок.

Поздравляем!

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

Я буду рад услышать ваши отзывы и увидеть результаты этого урока!

Автор: Tomas Laurinavicius

photoshop-master.ru

Эффективный дизайн лендинга: типы, фишки, идеи

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

Предварительные вопросы

До разработки лендинга ответьте на вопросы:

Чего вы ждете от ваших посетителей?

  • Заполнить лид-форму. 
  • Подписаться на рассылку. 
  • Купить продукт. 

Что вы предлагаете? 

  • Простой продукт (джинсы, конфеты или офисную мебель).
  • Сложный продукт (тренинг, курс, юридические услуги).

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

Советы по созданию лендинга  

Точный заголовок

Заголовок страницы сообщает главную идею – ценностное предложение.

Простой дизайн

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

Связь с рекламной кампанией

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

Поясняющее видео

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

Ориентируйтесь на пользователя

Все мы любим, когда говорят о нас, а чужое хвастовство – не очень. Объясните посетителю, какие выгоды он получит. Покажите, как именно вы поможете.

Меньше точек выхода

Ограничьте «попытки к бегству». Это вопрос вежливости – оставить дверь открытой, не заставлять мучиться с прокруткой и кнопками «вернуться», особенно в мобильных версиях. Но будьте осторожны: фиксируйте внимание посетителя на вашем предложении. Поэтому – минимум  ссылок.

Не гонитесь за размерами

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

Релевантные картинки

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

Простота действий

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

Правильные цвета

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

Психология цвета в бизнесе: влияет ли цвет на конверсию? 

Отзывы

Отзывы – залог доверия. Для 70% людей важно мнение тех, кто пользуется продуктом.

Мобильность

Мобильный трафик способен удвоить конверсию. И сейчас составляет до 60-80% в некоторых нишах. Адаптируйте посадочную страницу под мобильные телефоны и планшеты.

Говорите «спасибо»  

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

Время загрузки

Если посадочная страница загружается долго, пользователи не будут ждать, а уйдут к конкурентам. Результат – пустые клики, потеря целевого трафика. Хороший лендинг – «легкий» лендинг. 

Незаметные на первый взгляд мелочи создают рабочую посадочную страницу и ее безупречный дизайн.

yagla.ru

Дизайн лендинга - сколько стоит разработка с уникальным и красивым дизайном

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

Что такое лэндинг?

Landing page переводится, как «посадочная страница». Этот раздел создаётся для сбора контактов посетителей. Разумеется, на ней обычно размещается продающий текст о товаре или услуге. Как правило, пользователь попадает на посадочную страницу с сайтов-доноров, социальных сетей, через email-письмо (откуда и название landing page).

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

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

  1. Автономная страница. Лэндинг в этом случае представляет собой одностраничный самостоятельный сайт. Наиболее простой в оформлении вариант, так как дизайнерские ходы ничем не ограничены. Имеет высокую конверсию.
  2. Микросайт. Лэндинг, состоящий из 2-5 страниц. Обычно такие порталы создаются для сложных товаров и услуг, которые приходится подробно описывать. Довольно простой в оформлении, однако здесь важно соблюдать единство стиля на всех страницах.
  3. Лэндинг на основном сайте. Посадочная страница является частью главного портала. Довольно сложный вариант в оформлении, так как надо соблюдать дизайн основного сайта, а он часто плохой. При этом структура лэндинга должна включать различные элементы главного портала (шапку, футер), которые нередко отвлекают внимание пользователя.

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

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

  1. Акцентирование на нужных элементах. Для успешной продажи нужно довести ключевые аргументы до посетителя, для чего следует сделать акцент на некоторых блоках и фразах. Поэтому в лэндингах часто применяются контрасты и другие приёмы, которые выделяют определённые места страницы.
  2. Разбавление текста картинками, иконками, пространством. Особенностью лэндинга является то, что читатель далеко не всегда хочет его читать. Поэтому нужно разбавлять текст фотографиями, графическими и анимированными элементами, следить, чтобы пространство было не загружено.
  3. Кнопки. Им нужно уделять особое внимание, ведь именно нажатие на них является целевым действием. Кнопка обязательно должна быть крупной, красивой и контрастной. Текст на ней делать во всю ширину не надо, он должен подчиняться обычным правилам графического дизайна.
  4. Стоковые изображения нужно применять с осторожностью. Обычно картинки из фотобанков использовать можно не раздумывая, но в лэндинге нужно учитывать не только эстетическую составляющую, но также правдоподобность. Для блока с отзывами лучше подбирать фото не топ-моделей, а обычных людей.
  5. Скорость загрузки. Она актуальна на каждой странице у любого сайта. Но отличие лэндинга состоит в низкой заинтересованности посетителей, поэтому скорость загрузки должна составлять максимум 2-3 секунды. В идеале страница должна отображаться мгновенно.

Как разработать уникальный дизайн лэндинга самостоятельно

Можно воспользоваться различными конструкторами и CMS системами. Их очень много, поэтому сервисы для создания landing page лучше рассматривать отдельно.

В первую очередь нужно выбрать тип дизайна. Он делится на несколько видов:

  1. Минималистический дизайн. В этом случае убираются все ненужные элементы, при этом они упрощаются по оформлению. На странице создаётся очень много свободного пространства.
  2. Фотографический дизайн. Так как основной элемент оформления – фотография, то к ней предъявляется множество требований. Она должна быть интересной, высокого разрешения и от профессионального фотографа.
  3. Текстурный дизайн. В этом случае каждый элемент выполнен в виде какой-то текстуры: дерева, железа, ткани и прочего. Такой приём очень хорош для лэндингов, которые продают товар с выразительной структурой (одежду, прибор, пищу).
  4. Типографический дизайн. В нём преобладают шрифты и буквы. В идеале на странице должны присутствовать лишь они. Крайне сложный способ оформления, так как в нём идёт сознательный отказ от множества приёмов дизайна.
  5. Иллюстрационный дизайн. Основным способом украшения являются иллюстрации. Они задают определённый стиль «ручной работы» и аляповатости. При этом они могут сочетаться с текстурным и типографическим оформлением.
  6. Анимированный дизайн. В этом случае создаётся большое количество анимированных элементов, которые движутся самостоятельно или реагируют на мышку. Такой тип для дизайнера довольно простой, но крайне сложный для верстальщика.

При создании элемента любого размера и уровня – от крупного блока до отдельной буквы – нужно соблюдать стандартные правила дизайна:

  1. Шрифты. Они бывают с засечками и без. Практика показала, что для офлайн-текстов больше подходят буквы с засечками, а для онлайн-статей – без них. Для лэндинга нужно выбирать 2-3 варианта шрифтов. Один – для обычных текстов, второй – для заголовков.
  2. Сетка. Все блоки должны ставиться по сетке bootstrap. Её задача – выровнять элементы страницы так, чтобы всё содержимое выглядело аккуратным.
  3. Пространство. Налепленные друг на друга тексты смотрятся крайне не эстетично, поэтому для лучшего дизайна следует оставлять больше пространства между блоками.
  4. Цвета. На сайте допускается использование 2-3 главных цветов, если не считать белого, чёрного и серого оттенка. При этом стоит избегать чистых насыщенных кислотных тонов, они сильно режут глаза, мешают читать.
  5. Баланс и симметричность. Симметричность желательно соблюдать всегда. Если это невозможно сделать, то нужно чем-то уравновешивать пространство для создания баланса.
  6. Ритм. Старайтесь соблюдать заданный изначально ритм. Нередко блоки делают разных размеров и цветов. Их смена при прокрутке должна быть ритмичной.

Отдельные приёмы, которые можно применять лишь для некоторых элементов:

  1. Контраст. Его можно использовать для выделения каких-то блоков, кусков текста, иллюстраций, кнопок. Контраст может быть по форме, размеру, цвету, текстуре.
  2. Граница. Выделить объект иногда лучше границей, а не контрастом. Границу всегда нужно делать в стиле выделяемого элемента, а не фона.
  3. Пространство. Лучший способ выделить объект, не выделяя его, – это оставить вокруг блока много пространства.
  4. Текстура. Интересный приём, который нужно применять аккуратно, не надо увлекаться. Текстура обязана быть неяркой и нерезкой, она не должна оттягивать на себя внимание.
  5. Составные конструкции. Приём заключается в том, что одни элементы составляются из других. Например, буквы в логотипе можно сделать из веток и листьев.

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

Стоимость дизайна лэндинга

Цена зависит от количества экранов, сложности ТЗ и запросов самого веб-дизайнера. Разберём каждый пункт отдельно:

  1. Длина лэндинга измеряется экранами. Логично предположить, что чем их больше, тем дороже дизайн. Изменение цены обычно пропорционально длине.
  2. Сложность ТЗ зависит от количества элементов на странице. Минималистические лэндинги стоят дешевле, так как в них меньше деталей. Иллюстрационный дизайн потребует ручной прорисовки, поэтому будет значительно дороже.
  3. Запросы дизайнера – самый сложный компонент стоимости. Можно найти хорошего исполнителя, который согласится сделать работу бесплатно для своего портфолио. При этом существуют веб-дизайнеры, требующие десятки тысяч за одну страницу.

htn.su

как улучшить дизайн landing page, повысив при этом конверсию? / Хабр

Лендинг — двигатель продаж? Далеко не всегда это так, бывает, что продукт настолько тяжело понять, исходя из информации на landing page, что продажи падают: посадочная страница отталкивает потенциальных клиентов. Мы продолжаем публиковать материалы, которые могут быть полезны молодому бизнесу для повышения конверсии. Из данной статьи Peep Laja, дополненной примерами, можно узнать, как добавить дополнительную информацию «не для всех» на продающую страницу не создавая помех массовому посетителю, и правда ли уродливые лендинги продают лучше, чем страницы с хорошим дизайном. Статья написана от первого лица. Не покидайте страницу

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

Выпадающие окошки с информацией

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

Вынесение информации в лайтбокс

Вы можете «спрятать» информацию в ссылку, которая будет не выводить на другую страницу, а открывать лайтбокс с информацией, как в данном примере:

Используйте Sidecar-блок или нечто подобное

Компания Digital Telepathy разработала инструмент, который был назван Sidecar. С его помощью, кликая на ярлычок, можно вызвать всплывающее окно с информацией, спрятанное сбоку страницы, и снова его скрыть.

Хороший дизайн действительно имеет значение

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

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

Показать полную версию

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

Если говорить о крайностях, то иногда это выливается вот в это:

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

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

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

Пример с форума: «Я хочу узнать причину того, почему уродливые сайты конвертируют настолько больше покупателей, чем «профессионально» сверстанные. Я протестировал эту гипотезу на некоторых из моих продуктов и понял, что это действительно так. В одном случае я наполнял сайт красивыми картинками, графиками, а в другом – просто выложил обложку электронной книги и текст, больше ничего. ВО втором случае конверсия была просто сумасшедшая! Почему?».

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

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

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

• №1: “Если ваш сайт выглядит так же шикарно, как новенький BMW, то пользователи, будут предполагать, что продукт и стоит как BMW”

Покупатель понимает реальную стоимость продукта. Если бы BMW продавались по цене Suzuki – все бы ездили на BMW и были довольны. Поэтому, если ваш сайт выглядит как BMW, но продукт стоит как Isuzu – вы и ваш клиент только выиграете. Например, планшеты iPad продаются лучше всех остальных в мире. Вы когда-нибудь видели их сайт (и ценник)?

• №2: “Поверьте, никто не любит рекламу”.

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

• №3: “Для того, чтобы сделать читабельный и доступный сайт, хватит и технологий двухгодичной давности».

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

• №4: «Сайты Google, Amazon, eBay, Craigslist довольно примитивны и уродливы».

Прежде всего, они вовсе не «уродливые», а довольно качественные (за исключением Craiglist, пожалуй). Кроме того, если вы не заметили, то дизайн Google подвергся глобальной переработке, потому что они воспринимают эту проблему всерьез. Сайты Amazon и eBay также подвергались «косметическому ремонту».

Ebay — старый интерфейс:

Ebay — новый интерфейс:

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

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

• №5: “Уродливые сайты очень простые”

Это не аргумент. Почему красивые сайты не могут быть простыми? Посмотрите на Simple, Blossom, Customer.io или на минимализм от Google. Сейчас можно найти невообразимое количество простых, но от этого не менее красивых сайтов.

Пример — лендинг Blossom:

• №6: “Самое главное — контент, дизайн — лишь дополнение”

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

• №7: “Я протестировал эффективность уродливого старого дизайна и нового усовершенствованного – и старая версия выиграла!”

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

• №8: “Смотрите – кейс”.

Бывает, что версия с плохим дизайном действительно продает лучше. Почему? Эффективность лендинга напрямую связана с призывом к действию в нужное время в нужном месте. В «красивой» версии обычно предлагается минимум текста (в том числе рекламного), а затем неожиданно предлагается заплатить. Неудивительно, что это не работает. Так называемая «уродливая» версия обычно продает идею еще до того, как предложит заплатить за нее, с помощью простого описания продукта. В подобных кейсах нужно всего лишь взять текст и его структуру из «уродливой» версии и качественно улучшить ее внешний вид, тогда и результат станет лучше.

• №9: “Но этот уродливый сайт и так отлично продает!”

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

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

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

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

Эти впечатления оказывают сильное влияние на конверсию.

Заключение

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

Источник: conversionxl.com/how-to-design-kickass-long-form-sales-pages/#.

habr.com

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

11 мес. назад

Дизайн лендинга в фотошопе. Как сделать дизайн лендинга в фотошопе: первый экран Присоединяйтесь в мой...

1 г. назад

Бесплатно учись веб-дизайну – https://vk.cc/6Nfr7f Блог о веб-дизайне и интерфейсах – http://maximsoldatkin.com Создаем веб-диз...

2 г. назад

Подпишись на мой блог вконтакте. https://vk.com/freelanceblog Скачать шаблоны и иконки из видео https://yadi.sk/d/wbt_S4Zg34A6Lo ...

2 г. назад

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

2 г. назад

Это 2 часть практикума Landing Page. Здесь я расскажу, как делала дизайн лендинга в Adobe Photoshop CC 2015 Если досмотрите...

1 г. назад

Мой сайт: http://creade.ru Группа Вконтакте : http://vk.com/creade Подпишитесь на мой канал: ...

4 г. назад

Бесплатно учись веб-дизайну – https://goo.gl/quBJFk Лучшие Landing page за 13 минут Вы не знаете, что такое лендинг пейдж?...

3 г. назад

Создайте дизайн своего собственного сайта (Landing Page) всего за полтора часа эффективной работы в Photoshop. Скачат...

2 г. назад

Cоздание лендинг пейдж - http://journal.egostile.net - - - 4 минутный скринкаст по дизайну одностраничного сайта.

10 мес. назад

Дизайн лендинга в фотошопе. Как сделать дизайн лендинга в фотошопе: второй экран Присоединяйтесь в мой...

10 мес. назад

Дизайн лендинга в фотошопе. Как сделать дизайн лендинга в фотошопе: третий экран Присоединяйтесь в мой...

8 мес. назад

Адаптивный дизайн лендинга. Как сделать дизайн адаптивного лендинга в фотошопе? Присоединяйтесь в мой...

9 мес. назад

Дизайн лендинга в фотошопе. Как сделать дизайн лендинга в фотошопе: шестой экран Присоединяйтесь в мой...

2 г. назад

Создаем Landing page в стиле Flat design. Учимся делать красиво и стильно. Все подписываемся и ставим лайки ) __ Подпиши...

1 г. назад

Новое видео. Любимая рубрика арбитражников) В нем я расскажу как создать шаблон для постов вконтакте и инст...

2 г. назад

Привет друзья! Hаконец-то закончил серии видео, а том "Как сделать фото дизайн для лендинг Пейдж" Ссылка ...

4 г. назад

Добрый день дорогие подписчики! Я наконец начинаю долгожданную серию практических уроков. В первом уроке...

9 мес. назад

Дизайн лендинга в фотошопе. Как сделать дизайн лендинга в фотошопе: пятый экран Присоединяйтесь в мой блок...

10 мес. назад

Дизайн лендинга в фотошопе. Как сделать дизайн лендинга в фотошопе: четвертый экран Присоединяйтесь в мой...

7 мес. назад

Как сделать дизайн продающего лэндинга? Всем привет, меня зовут Андрей, я помогаю Теледиректу развиваться...

10 мес. назад

Как сделать дизайн сайта в Figma? Speed Art.

www.meizer.kz