Некоторые Особенности Творческих Идей Для Лендингов В Веб-Дизайне. Дизайн лендинга как сделать


13 небанальных идей для крутого лендинга

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

Текстовые и визуальные лайфхаки

Обращайтесь напрямую к клиенту

Речь идет не о банальном «Здравствуйте, мы компания Х и работаем на рынке с бородатого года». Это скучно и никого не цепляет. А вот парень из подмосковного Солнечногорска сделал удачный оффер и вынес контактную информацию в начало лендинга. Никаких заумных фраз и козыряния многолетним опытом. Человек обращается к читателям точно так же, как общался бы с ними «вживую».

Обращайтесь напрямую к клиенту

Обыграйте название продукта или услуги в тексте лендинга

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

Обыграйте название продукта или услуги в тексте лендинга

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

Внедряйте символику и отсылки

Лендинг – это «лицо» товара или услуги в интернете. Ассоциации с устойчивыми и всем знакомыми символами (историческими, социокультурными и т. д.) сделают это лицо узнаваемым. Ева Кац использовала в продвижении школы личного продюсирования эстетику советских транспарантов: большие белые буквы на красном фоне, печатный шрифт.

Внедряйте символику и отсылки Как оформлять тексты для сайта, чтобы их читали

Чувственная подача инфы на грани фола

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

Чувственная подача инфы на грани фола

Подайте информацию в формате квеста

99 % лендингов начинаются с оффера. Туроператор Grand Tour пошел другим путем – он не стал раскрывать выгоды для клиента в первом экране, а вовлек посетителей в мини-квест, где с каждым скроллом открывается новая информация об услуге. На главной странице Grand Tour, оформленной в виде лендинга, реализованы сразу несколько удачных примочек для захвата внимания. Здесь и всплывающий текст, и интерактивная анимация, и звуковые эффекты.

Подайте информацию в формате квеста

Поиграйте со шрифтами

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

Поиграйте со шрифтами

Придумайте креативный футер

Весь лендинг «Котофабрики» пестрит креативом, но их футер просто огонь. Ребята беззлобно простебались над стереотипными блоками о гарантиях (в самом деле, кто читает те мелкие тексты?) и сделали убедительное предложение.

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

Задействуйте юмор

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

Задействуйте юмор

Технические лайфхаки

Анимация при скролле

Создатели лендинга-презентации iPhone X использовали технологию Canvas, позволяющую рисовать прямо на странице. Готовых плагинов под нее нет, вся эта красота реализуется через JavaScript.

Анимация при скролле

Видео во всплывающем окне

Видео без автовоспроизведения не всегда красиво вписываются в дизайн посадочной страницы. Поэтому создатели лендинга для сервиса Evernote спрятали видеоролики в картинки. Сделать такое можно любым плагином для создания модальных окон, в которое встраивается видео. Например, LightBox или Easy Modal.

Видео во всплывающем окне

Интегрированные в лендинг инвойсы

Веб-сервис управленческого учета «Финолог» предлагает удобный и лаконичный счет на оплату, с заполнением которого разберется любой. Сделать подобное можно любым хорошим плагином для создания форм: Contact Form 7, JS Forms или через онлайн-сервис JBCallme.

Интегрированные в лендинг инвойсы 12 примеров великолепных лендингов: черпаем вдохновение у профессионалов

Прелоадер (анимация при загрузке лендинга)

Яркий пример такого решения – посадочная страница компании Piratecode. Анимация при загрузке реализуется через JavaScript или через плагин Preloader.

Прелоадер (анимация при загрузке лендинга)

Визуальный конструктор товара в лендинге

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

Визуальный конструктор товара в лендинге

Итак, что в итоге:

  • Не бойтесь креативить. Лендинг – это не операция на сердце, его всегда можно исправить. Пробуйте разные варианты, оценивайте конверсию посредством А\Б-тестирования.
  • Вдохновляйтесь идеями конкурентов. Вдохновляться ≠ плагиатить. Любую идею можно переработать, улучшить и дополнить.
  • Познакомьтесь с возможностями разных плагинов и задействуйте их в работе.

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

kak-sdelat-krutoy-lending-nebanalnye-idei

texterra.ru

Некоторые Особенности Творческих Идей Для Лендингов В Веб-Дизайне / WAYUP

Целевая страница или лендинг или landing page – та страница, та информация, которая впервые, в большинстве случаев, знакомит пользователей (и потенциальных клиентов) с брендом и его услугами/товарами. Это даже не сайт в привычном для нас понимании. Это более сложная вещь, выразимся так, которая представляет информацию всё ту же, что и на сайте, но в более сжатом и конкретном виде, как говорится, «по делу без излишеств». Казалось бы, что выглядеть это должно скучным и унылым, а на деле даже тот, кому и услуги бренда-то не нужны, «зависают» на страничках и смотрят, читают, пытаются узнать, как оформлено и прочее. Представьте, что такой пользователь бывает магическим способом еще заворожен так, что все равно умудряется что-то купить/заказать или уж точно, добавить страничку в закладки.

Вот почему? Как они (веб-дизайнеры) это делают?

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

Не все так просто

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

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

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

Или компания Кухни Plaza имеют свой лендинг, что поначалу кажется нагроможденным и «тесным». Будто бы собрали всю имеющуюся информацию и решили «запихнуть» её на один холст (и другими словами первые эмоции не передать). Но на деле оказывается несколько иначе. Вся информация четко рассортирована, представлены основные категории кухонь по категории и стилям. Буквально в самом начале можно увидеть, что существует услуга дизайнера, советы по подбору и расчету. Разумеется, что и все контакты всегда на виду.

Аналогично четко сформированы цели на tomorrowsleep, truevault, codecombat, и пользователю не нужно задумываться, чего от него хотят или какие услуги представляет бренд. Все на виду.

Персональный дизайн

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

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

Для примера взгляните на bs-garage, blockscore (Нашли решение индивидуализации в том, что поскольку услуги доступны для широкого круга людей, то и персона обозначена общей и всем знакомой иконкой. Но при этом чувство персонализации все равно существует и это «приятно» для пользователей), interfacelovers, codecombat, parishendzel, feedprojects, dreamerstories., amaioswim

Шаблонность 

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

В результате появляются такие лендинги как pinestreet, youate, ginventory, baronfig. Структура каждого из них узнаваема и не оригинальна (по сути), но визуализация в целом, оформление, расположение отдельных элементов, типографика придают каждой целевой странице свой характер и уникальность.

Ясность CTA

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

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

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

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

В свою очередь целевая страница Taster's Club  решает сразу несколько идей, что мы описали выше. Это и персональный подход, и яркие CTA, и создание дизайна понятного для разного типа пользователей. Интерес в данном случае представляет тот момент, что данный лендинг является и домашней страницей виски-клуба.

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

 

Если же кликнуть на JOIN NOW, то начинается настоящая забава. Изначально предстоит выбрать свой клуб (тип виски), который вам более всего нравится и затем увидеть возможные варианты членства и цены для приобретения. Уже затем можно еще раз кликнуть по кнопке «Присоединиться» и перейти к форме для заполнения платежной информации.

Иерархия, поток и примеры целостности

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

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

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

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

Особый интерес представляет и еще одна секция – HOW IT WORKS. Люди в большинстве своем заняты чем-то и не любят сложностей, поэтому секция стала идеальным способом устранить любые сомнения. Всего в трех шагах показывается, как работает компания и что, и зачем должен сделать пользователь: консультация – график работы – конечный результат. Банально, скажете вы, это и так понятно. Одно дело понятно, но никогда не мешает лишний раз повторить и проговорить.

Еще об одном лендинге нельзя не упомянуть для пристального рассмотрения. Patreon знаком тем, кто  ищет добровольной поддержки для своего хобби, творчества (для доанта). Уникальность лендинга в том, что используется несколько иной подход. Вместо того чтобы просить денег у пользователей на тот или иной проект, владельцы, наоборот, приглашают к участию в этом процессе, поддерживая и привлекая творческих и заинтересованных пользователей, как «покровителей искусств». Это совершенно иной подход, нестандартный.

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

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

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

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

Выводы

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

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

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

wayup.in

Создание 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 family: Source Sans Pro
  • font style: Bold
  • font size: 16px
  • 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, меньший - 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. Добавляем к линии эффект 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

Дизайн Landing Page - как его качественно разработать?

Здравствуйте, уважаемые читатели! Что является самым главным при создании лендинг пейдж? Трудно расставить приоритеты, так как особое внимание следует уделить и структуре, и составлению УТП, и дизайну. И всё-таки: разработка дизайна занимает особое место в процессе создания лендинга. Так как именно внешняя составляющая зачастую цепляет посетителя и заставляет его просмотреть страничку до конца.

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

В этой статье мы поговорим о том, каким должен быть дизайн landing page и как его разработать.

Основные требования

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

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

Вне зависимости от цветовой гаммы, в дизайне лендинга должны быть:

  • Аккуратность.
  • Гармоничность цветов.
  • Читаемые шрифты.
  • «Вкусные» изображения.

Поговорим о каждом их этих пунктов отдельно.

Аккуратность

Налепленные друг на друга надписи, плохо выровненные картинки, непропорциональные размеры шрифта и изображений – такие недостатки встречаются на многих сайтах. При рисовании дизайна необходимо руководствоваться принципами композиции. Любой профессиональный дизайнер знаком с такими вещами как: масштаб, пропорции, соблюдение симметрии. Аккуратно выполненный дизайн приятен глазу и не отталкивает. Если же дизайнер не особо старался (или работу выполнял какой-то дилетант), то сайт в целом выглядит уже как-то не очень…

Гармоничность цветов

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

Шрифты

Вы наверняка видели шрифты, которые, хоть и выглядят красиво, читаются с великим трудом. Они больше годятся для оформления свадебной атрибутики, но никак не для сайта. Для своего лендинга следует выбирать простые, хорошо читаемые шрифты. Предпочтение лучше отдавать шрифтам без засечек (например, Arial или Open Sans), так как он более читаем на экранах мониторов. Шрифт с засечками используется в основном в печатном тексте.

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

Изображения

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

Если вы планируете использовать на посадочной странице фотографии, сделанные собственноручно, то вам наверняка будет полезна статья о том, как правильно фотографировать товар. Прочитать её можно ЗДЕСЬ.

Кое-что ещё о дизайне

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

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

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

Даёт ли рисованный лендинг какие-то преимущества? Безусловно, он задерживает внимание посетителя. Но поверьте: создать цепляющий landing page можно и без использования рисованного макета. Поэтому заказывать его или нет – решать только вам.

Как сделать дизайн

Если вы не дизайнер, то у вас есть два пути:

  1. Найти и скачать шаблон, на основе которого будет разрабатываться landing.
  2. Обратиться к профессиональному дизайнеру, который за определённую плату качественно выполнит проект. Создание макета обычно производится в Фотошопе.

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

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

Сравните сайты, сделанные на шаблоне, с сайтами, имеющими уникальный дизайн, и сами всё поймёте.

Пришли к решению заказать landing page? Готов предложить вам свои услуги. Оставьте заявку на разработку лендинга ЗДЕСЬ. Если вам необходим только дизайн, то готов обсудить и реализовать ваш проект. С примерами работ вы можете ознакомиться на странице «Портфолио». Буду рад любому сотрудничеству!

Если у вас остались вопросы, напишите мне на электронную почту или оставьте комментарий к этой статье. Отвечаю всем!

С уважением, Сергей Чесноков, руководитель веб студии

on-www.ru

Как сделать идеальный landing page — разработка дизайна лендинга на примере удачных сайтов

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

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

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

Содержание:

  • Как найти сайты, у которых есть чему поучиться.
  • Анализ на примере трех вариантов.
  • Используем изученную информацию.

Найдите компании со схожими задачами

Отличный прием для поиска источника вдохновения – найти компании, которые занимаются решением проблем, аналогичных вашим.

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

То есть, вместо прямолинейного подхода:

«Владельцы мопсов, пользующиеся специальными выдвижными поводками, считают их слишком длинными для кафе».

Попробуйте что-то вроде:

«Позволяет чувствовать себя комфортно в новых местах».

После таких радикальных изменений в мышлении вы перестанете прочесывать сайты магазинов «Товары для животных», а переместите свой взор на онлайн-площадку AirBnb по поиску и аренде жилья по всему миру.

Пример №2. Допустим, ваша компания пытается решить проблему отсутствия общего средства коммуникации между разработчиками, дизайнерами и бизнесом. Если рассматривать данную сферу, то лидирующими проектами с похожими стремлениями и целями будут:  Airtable, Intercom и Slack.

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

Новые тренды в дизайне landing page

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

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

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

Теперь взглянем на будущее:

Airtable  — февраль 2018

Intercom  — запус 5-го февраля 2018

 Slack  — август 2017

Обучение на примере удачных сайтов

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

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

1. Блок хедер

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

Основные наблюдения по хедеру:

  • Он весьма привлекательный и объемный.
  • Остается в самой верхней части экрана (кроме Intercom — там фиксированное меню при прокрутке).
  • 5–6 ссылок.
  • Есть элемент для призыва к действию (CTA). Лучший вариант у Intercom — кнопка CTA объединена с запросом на введение адреса электронной почты.

2. Заголовок и подзаголовок

Что сразу бросается в глаза:

  • Короткий заголовок: 3–5 слов.
  • Текст должен быть понятным, темного цвета и выделяться жирным шрифтом.
  • Подзаголовок содержит следующую информацию: кто мы, что мы умеем делать, в чем наши преимущества.

3. Главная иллюстрация

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

Airtable 

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

Intercom 

  • Стиль на любителя, но он хорошо демонстрирует ссылки на сообщения и открытые письма.

Slack 

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

4. Оптимизация CTA через запрос на регистрацию

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

Некоторые особенности дизайна в нижней части страницы

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

Основные детали:

  • Вся информация представлена достаточно кратко.
  • Логотипы клиентов оформлены в спокойных серых тонах.
  • Повторение похожих полей призыва к действию (т.е. запроса на регистрацию).
  • Достаточно объемные футеры.

Суммируем все полученные полезные подсказки

В итоге получился следующий дизайн (разрабатывался для Reqfire.com):

Вот что удалось почерпнуть в качестве вдохновения при создании дизайна landing page из рассмотренных выше проектов:

  • Хедер можно делать похожий, но с более свободным пространством.
  • Для заголовка выбираем эффектный и солидный шрифт, например, Libre Baskerville.
  • Главное изображение: ознакомившись вариантом из Slack, было бы неплохо постараться создать иллюстрацию, демонстрирующую функции вашего приложения/сервиса, но без использования скриншота.
  • Бонус: вы также можете добавлять видео или простую анимацию.

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

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

studio-rgb.ru

Как создать выдающийся лендинг: секреты экспертов

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

Согласно совместному исследованию Google и Базельского университета (University of Basel), пользователи оценивают эстетическую привлекательность и воспринимаемую функциональность сайта примерно за 1/20-1/50 долю секунды. Это меньше, чем нужно на щелчок пальцами. И за это время посетитель решает, дать вам шанс или уйти к конкурентам.

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

Читайте также: Азбука лендинга: что нужно знать каждому маркетологу?

Лендинг пейдж должна преследовать одну цель (да, только одну)

«Лучшие посадочные страницы просты и сфокусированы на одной цели», объясняет Шар Биггерс (Shar Biggers), основатель нью-йоркской дизайн-студии PROVOKE, работавшей над проектами для Хиллари Клинтон (Hillary Clinton), Sephora, Squarespace и Clinique.

Прежде, чем начать работу над текстом или дизайном, сформулируйте цель лендинга.

«Это звучит просто, но часто существуют элементы, о которых клиент не задумывался», объясняет Симон Смит (Simone Smyth), основатель дублинской студии HyperBrow Studio.

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

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

 Разные цели — разные страницы.

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

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

Читайте также: 5 самых интересных конверсионных ошибок

Запишите все, что знаете о клиентах

Итак, разрабатывая посадочную страницу, сперва необходимо задуматься об ее цели. А во-вторых? Понять аудиторию.

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

«Для начала я знакомлюсь с бизнесом клиентов, их отраслью и тем, что делают их конкуренты», объясняет Шар.

«Я объясняю им их же бизнес-процессы, их клиентов и цели конверсии/продаж, а также преимущества их бренда. Независимо от потребностей, эта информация всегда релевантна проекту».

Шар разработал конкретные дизайн-решения для нового лендинга Everwise — службы знакомств для менторов. Дизайн Шара сфокусирован на социальном доказательстве (кто использует услугу) и успехе клиентов (96% верных соответствий). Это мотивирует на регистрацию и получение дополнительной информации.  

Дизайн лендинга Everwise

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

Читайте также: Как управлять эмоциями вашей целевой аудитории?

Выделяйтесь дизайном

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

Хармут Эсслинген (Harmut Esslingen), немецкий дизайнер, который помог сформировать образ продуктов Apple в 80-х годах, придерживался руководящего принципа, согласно которому «форма следует за эмоциями».

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

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

«Многие наши клиенты запускали MVP или стартапы, и главная их забота заключалась в том, чтобы все сделать правильно. Но “правильно” для них — то, что принято считать обычным и правильном в их среде», объясняет Симон Смит.

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

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

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

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

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

«Все это актуально не только для основного сайта, но и для лендингов, баннеров, всплывающих окон и прочих инструментов цифровой рекламы. Моя любимая страница захвата email — от бренда Lenny».

«Ленни в вашем ящике дважды в неделю»

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

А это — панель инструментов редактирования лендинга.

Читайте также: Шаблон или индивидуальный дизайн лендинга: что подойдет вашему бизнесу?

Фокусируйтесь на пользовательском опыте, чтобы превратить посетителей в клиентов

Захватили внимание пользователя и убедили его остаться? Теперь начинается настоящая работа.

«При разработке выдающихся посадочных страниц, мы пытаемся минимизировать пользовательский дискомфорт. Для этого мы задаемся вопросами: “Улучшает ли это опыт?” и “Повышает ли это ценность бренда?”», объясняет Йеспер Бальцер (Jesper Balzer), управляющий директор ajukreizi, агентства в Копенгагене, работающего с такими клиентами, как Universal Music и Roskilde Festival.

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

«Лучшие рестораны Копенгагена. Презентация от шефов».

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

Аналогично, когда Симона попросили создать посадочную страницу для Научной галереи Дублина (Science Gallery Dublin), заказчики не сформировали четкого «запроса», кроме привлечения посетителей. Поэтому разработчики сосредоточились на создании уникального пользовательского интерфейса.

«Кому-то это покажется странным, но дублинская галерея знала свою аудиторию. Эти люди молоды, любопытны и считают, что отличаются от сверстников. Таким образом, задачей стало создание лендинга, резонирующего с этой конкретной аудиторией».

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

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

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

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

Читайте также: Оптимизируйте лидогенерацию и пользовательский опыт, используя 5 принципов психологии

Создавать. Измерять. Учиться. Повторять.

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

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

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

Подведем итог. Хороший дизайн лендинга состоит из пяти аспектов:

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

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

Высоких вам конверсий!

По материалам: crew.co Image source: Sketchy-G

18-04-2017

lpgenerator.ru

10 ошибок дизайна лендинга или как отвлечь пользователя от главной цели

Дизайн landing page – это лицо вашего проекта. Оно расскажет пользователю гораздо больше, чем любые слова на странице. Как макияж на девушке: аккуратный и со вкусом — выглядит дорого и красиво, а перебор с цветом или небрежный боевой раскрас – дешево и легкомысленно. Как создать дизайн лендинга, чтобы произвести эффект “Вау” и при этом не переборщить? Представляем вам 10 распространенных ошибок, которые может скрывать посадочная страница, и 10 советов о том, как их исправить. Вперед!

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

1. Злоупотребление триггерами

Триггеры – это различные фишки на лендинге, которые привлекают внимание пользователя и заставляют его делать полезные действия для владельца сайта. Они помогают увеличить конверсию на посадочной странице. Но, когда их слишком много, они затмевают главный смысл, который вы хотели донести, отвлекают посетителя сайта от целевого действия.Вот самый яркий пример лендинга, где количество триггеров зашкаливает. Попробуйте угадать, о чем этот сайт http://www.lingscars.com/.

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

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

2. Баннеры (рекламные картинки)

Баннеры на лендинге — это табу. А если увлечься, то можно превратить свой лендинг в это:

Сразу и не поймешь о чем сайт, а значит главный смысл утрачен — http://www.arngren.net.

Вывод только один — не используйте баннеры на лендинге. Вообще. Никогда.

3. Кирпичи текста

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

Сайт услуг стоматологической клиники и кирпич текста на нем.

Делите текст на абзацы и блоки, разбавляйте картинками. Доносите суть кратко.Смотрите, как это делают титаны бизнеса: https://www.google.com/drive/На лендинге GoogleDrive не больше десяти предложений!

4. Нечитабельный текст

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

От белого текста на черном фоне глаза быстро устают.

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

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

5. Петросянство (много юмора)

Все любят посмеяться. Но когда юмора слишком много, он уводит внимание пользователя от главной цели.Вот пример лендинга, над которым можно долго смеяться -http://roltrol.by. Но, что вы узнали из него о товаре?

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

Или вот еще один пример:

Чувство юмора этим ребятам не занимать. Но вы бы «купили» у них? http://rafik.viplanding24.ru

Шутите меньше да лучше.

6. Цветовой перебор

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

«- Хочу яркий текст на ярком фоне!— Но текст будет не видно!— Так добавим белую обводку!»

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

Дополнительные краски они расставляют на точках захвата, чтобы сконцентрировать на них внимание.

Если весь ваш лендинг — это взрыв на лакокрасочном заводе, то не ждите высоких конверсий. Выбирайте чистый дизайн без лишних цветов.

7. Резкие начала роликов, неожиданные звуки

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

Осторожно! Просматривая следующий пример лендинга, вы как раз можете попасть в такую ситуацию —http://www.gordon24ever.com/:

Пример сайта с резким звуком

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

Звуки на лендинге оправданы только в двух случаях:Когда без них не передать концепцию:Здесь сам сайт о музыке — https://yearinmusic.spotify.com/en-GB/worlds-top-tracks/global/cheerleader-felix-jaehn-remix-radio-edit А здесь мелодия на сайте создает настроение для просмотра картин —http://www.monet2010.com/

Когда пользователь может включить звук по собственному желаниюВот удачный пример того, когда звук даже хочется включить самому:https://paris.kharkov.ua/# (нажмите на иконку в верхнем правом углу)

8. Навязчивые всплывающие окна

Источник изображения http://roltrol.by/img/welcome.gif

Бывает, заходишь на лендинг, еще не прочитал, о чем он, а тут бац — pop-up: “Вы были на сайте полсекунды. Почему вы ничего не выбрали? Может вам помочь?” и кнопка. Закрываешь всплывающее окно, через 2 секунды — новое: “Скачайте нашу новую книгу бесплатно”, начинаешь заполнять форму, а тут: “Почему вы до сих пор не заполнили форму?”. А иногда даже уйти спокойно не дают. Вот вам еще один контрольный pop-up в голову: “Почему вы уходите? ”, чтобы вы точно не вернулись на этот лендинг.

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

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

9. Прелоадеры (индикаторы загрузки сайта)

Пользователь, попавший на неизвестный сайт, ждет его загрузки не более 3-4 секунд. Мы уже писали, как сокращение скорости загрузки всего на 2,2 секунды сайта Mozilla принесло 10,28 миллионов дополнительный загрузок в год. Если на 5ой секунде перед глазами все еще будет белый экран, вкладку безжалостно закроют. Зная этот факт, некоторые владельцы сайтов, используют прелоадеры — легкую анимацию, которая, по их мнению, должна развлечь посетителя сайта или хотя бы сообщить ему о том, что контент грузится.

Пример прелоадера http://www.c945.com/

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

Прелоадер на лендинге известного бренда Tissot (http://www.t-touch.com/en-en/#!/t-touch-expert-solar)

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

10. Стоковые или некачественные фотографии

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

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

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

Какие выводы можно сделать?

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

http://texterra.biz/landing-page-design/

blog.icondesignlab.com