54 примера потрясающего дизайна лендингов

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

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

Надеемся, что среди них вы найдете вдохновение для вашего лендинга.

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

Содержание статьи

Электронная коммерция
Развлекательные сайты
Лендинги-портфолио
Розничная торговля
Интернет-проекты
Сфера услуг

Электронная коммерция

1. Luhse Tea

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

2. Fit For A Frame

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

3. Shop Locket

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

4. White Lotus Aromatics

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

5. Evel

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

6. Lega-lega

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

7. Urban Originals

Фишка этого дизайна — простота. Простое меню и яркий слайдер отлично сочетаются.

8. Scotch & Soda

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

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

Читайте также: Лендинг vs главная страница: ключевые отличия

Развлекательные сайты

9. Clouds over cuba

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

10. Universeries

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

11. Jacqui co

Этот сайт выше всех похвал. Блестяще продуманный дизайн и обилие интерактивных элементов никого не оставят равнодушным.

12. Pottermore

В дизайне этой страницы, посвященной франшизе о Гарри Поттере, использованы знакомые фанатам цвета, фразы и имена.

13. Heath Life

Эта страница не только выглядит красиво, она еще и очень функциональна: множество интерактивных элементов, интеграция с Google Maps, использование вкладок.

14. Uncrate

Uncrate и после редизайна не меняет своей традиции расположения всех разделов сайта в удобном верхнем навигационном меню.

15. The good man

Этот сайт демонстрирует всю мощь графического дизайна и веб-разработки. Лучше зайти на него и самостоятельно убедиться в этом.

16. Silktricky

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

17. Magic Leap

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

18. Life and times

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

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

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

Читайте также: 10 примеров лендингов необычных стартапов

Лендинги-портфолио

19. Hello monday

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

20. Jib

В этом примере очень интересное сочетание цветов. Более того, на странице у всех элементов использована одинаковая структура фонов, под дерево.

21. Ride for the brand

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

22. Andy Patrick design

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

23. This is the brigade

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

24. Built by buffalo

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

25. Galpin

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

26. Made by Vadim

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

27. Art&code

Иконки и ничего лишнего. Хороший пример минималистичного дизайна.

28. Riley Cran

Страница-портфолио отображает самое главное — примеры работ.

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

Читайте также: 20 советов для создания идеального портфолио

Розничная торговля

29. Rei

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

30. Austin beerworks

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

31. Jaquet droz

Ничто не отвлекает посетителя от созерцания прекраснейших часов.

32. Italio kitchen

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

33. TV safety

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

34. Grey Goose

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

35. Toyota

Toyota сделала сайт в стиле Pinterest для любителей Camry. Здесь можно найти множество фотографий, статей, статистики.

36. Got Milk?

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

37. Buffalo Wild Wings

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

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

Читайте также: Как создать успешный ecommerce-бренд?

Интернет-проекты

38. Chrome Web Lab

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

39. Viddy

На этой странице интеграция с Facebook облегчает процесс регистрации и заметно увеличивает количество новых пользователей сервиса.

40. Who is Wildlife?

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

41. Prezi

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

42. Impress a penguin

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

43. СSS piffle

Плавающая красная кнопка в середине экрана делает свое дело: на нее очень хочется нажать.

44. Fannabee

На этом лендинге при скроллинге используется параллакс-эффект, восхищающий посетителей.

Читайте также: Обновления LPgenerator: parallax-эффект, изображение на всю ширину, запрет редиректа на мобильную версию

Сфера услуг

45. Captain Dash

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

46. Woodwork

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

47. Sagmeister walsh

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

48. Madwell NYC

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

49. Ryan Edy

Это страница профессионального фотографа, и ее дизайн помогает нам увидеть самое главное — фотографии. Даже меню спрятано в «гамбургер».

50. Oliver Rassel

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

51. Quarter Rest Studios

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

52. Fancy Rhino

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

53. Flint Boutique

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

54. Blind Barber

Этот лендинг делает акцент на центре страницы, привлекая внимание посетителей к кнопке «Узнать больше» об этом слепом парикмахере.

Читайте также: 10 примеров лендинг пейдж из сферы рекламных услуг

Заключение

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

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

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

По материалам: hubspot.net  Изображение: freepik.com 

18-06-2016

Примеры landing page с оригинальным дизайном

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

Дизайн лендинга и хенд-мейд

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

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

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

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

Тык на картинку, чтобы перейти на лендинг и увидеть его вживую!

Пример лендинга в нише свадьбы

Пример 1. Классический пример лендинга в формате «главная страница». Этот лендинг посвящен свадьбе неких Трейси и Дэни, листая вправо можно подробнее ознакомиться с подробностями размещения, программой мероприятия и т.д.

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

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

Пример лендинга в нише студия дизайна

Пример 2. Первый экран лендинга небольшой, но известной в своем регионе дизайн-студии. И снова формат «главной страницы» со скроллингом вправо. Кстати, формат страницы при желании можно заменить на привычный вертикальный лендинг (нарисованный пластиковый стаканчик с надписью «skinny version»).

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

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

В следующем примере представлен дизайн лендинга агентства, которое занимается SMM:

Пример 3. В дизайне этого лендинга использованы милые дудлы-пузыры (смешные создания, которые улыбаются и ставят лайки).

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

Еще один пример дизайна посадочной странице от сербской дизайн студии:

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

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

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

Пример лендинга в нише веб-дизайн

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

Посадочная страница веб-студии AlsterCoud проводит пользователя по всем этапам создания проекта, заодно демонстрируя сильное портфолио. Экскурсия дополняется качественными и тематическими векторными иллюстрациями.

Пример в нише мобильный провайдер

Пример 6 Первый экран лендинга по продаже сим-карт лучше оценивать «вживую». Милые рукописные шрифты и иллюстрации дополнены анимацией.

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

Пример лендинга в нише дизайн интерьера

Пример 7. Эта посадочная страница не сразу раскрывает свои секреты, но стоит кликнуть на стрелку и вы оказываетесь в милой нарисованной деревне, в которой каждый домик — это детализированный дизайн интерьера спальни.

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

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

Пример лендинга в нише «игры»

Пример 8 Кнопка лендинга предлагает ни много ни мало — «убить всех хипстеров!». Однако оформление сайта доставляет.

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

Пример лендинга в нише алкогольные напитки

Пример 9. Желтый на желтом — не самое лучшее решение, скажете вы? Только не в этом случае! Удачный пример, как можно использовать дизайн этикетки в качестве фона. Так у пользователей не останется шанса не узнать нужное пиво на полке в магазине.

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

Пример 10. Лендинг, рекламирующий новозеландское вино со скроллингом вверх, выполненный в стильной и сдержанной меловой стилистике.

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

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

Вывод:

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

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

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

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

С использованием материалов статьи «Lovely Website Designs with a Hand-Drawn Feel and Awesome Sketchy Illustrations».

50 бесплатных ресурсов с графикой для ваших лендингов

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

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

Содержание статьи  

Бесплатные стоковые изображения

1. Pexels
2. StockSnap
3. Landing Stock
4. Photo Creator
5. Nappy

Бесплатные векторные иллюстрации

6. Drawkit
7. Humaaans
8. UnDraw
9. Open Peeps
10. Lukasz Adam Free Illustrations

Бесплатные иконки

11. Noun Project
12. Ionicons
13. Simple Icons
14. Icons
15. Animaticons

Бесплатные шрифты

16. Google Fonts
17. Use & Modify
18. Fontfabric
19. Dafont
20. Font Squirrel

Бесплатные стоковые видео

21. Coverr
22. Mixkit
23. Videezy
24. Life of Vids
25. Videvo

Бесплатные инструменты графического дизайна

26. Crello
27. Canva
28. Gravit Designer
29. Inkscape
30. Pencil

Бесплатные инструменты для создания макетов

31. Shotsnapp
32. Screely
33. Screenpeek
34. MockupsJar
35. Mockup World

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

36. Remove
37. Social Sizes
38. Fotor
39. Pixel Editor X

Бесплатные инструменты для создания скриншотов

40. Collabshot
41. Giphy Capture
42. ScreenToGif
43. ShareX
44. Snappy
45. Lightshot

Вдохновение для дизайнеров

46. Behance
47. Dribbble
48. Httpster
49. Microcopy Inspirations
50. InspoFinds

Вместо заключения

Бесплатные стоковые изображения

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

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

1. Pexels

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

2. StockSnap

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

3. Landing Stock

Landing Stock — это нишевый сайт с бесплатными стоковыми фотографиями для специально для посадочных страниц. Созданный лондонским продуктовым дизайнером Крейгом Барбером (Craig Barber), Landing Stock содержит только высококачественные и минималистичные фотографии, которые хорошо кадрируются и оставляют достаточно места для текста на ваших лендингах.

4. Photo Creator

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

5. Nappy

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

Читайте также: 23 сайта для поиска оригинальных бесплатных изображений

Бесплатные векторные иллюстрации

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

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

6. Drawkit

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

7. Humaaans

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

8. UnDraw

UnDraw — это постоянно обновляемый дизайн-проект Катерины Лимпитсуни (Katerina Limpitsouni), содержащий «иллюстрации с открытым исходным кодом для любых ваших идей». Здесь представлены красивые изображения в формате SVG, которые вы можете использовать совершенно бесплатно и без указания авторства. 

9. Open Peeps

Нужно что-то более рисованное? Тогда обратите внимание на библиотеку иллюстраций в стиле «от руки» Open Peeps. Векторная графика в форматах SVG и PNG с открытым исходным кодом доступна для Sketch, Figma, Studio и XD. При желании можно сделать пожертвование.

10. Lukasz Adam Free Illustrations

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

Читайте также: 10 трендов веб-дизайна на 2020 год

Бесплатные иконки

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

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

11. Noun Project

Основанный Софьей Поляковой (Sofya Polyakov), Эдвардом Боатманом (Edward Boatman) и Скоттом Томасом (Scott Thomas), сайт The Noun Project содержит более 2 000 000 тщательно отобранных иконок, доступных для бесплатного использования. 

12. Ionicons

Ionicons — это премиальные иконки для использования на лендингах, а также в iOS, Android и десктопных приложениях. Созданные командой Ionic Framework, все они бесплатны и имеют открытый исходный код.

13. Simple Icons

Созданный Дэном Личем (Dan Leech), Simple Icons предоставляет бесплатные иконки популярных брендов в формате SVG.

14. Icons

Этот ресурс предоставляет целую библиотеку бесплатных иконок в форматах PNG и SVG. Помимо того, что сайт имеет русский интерфейс, его создатели также всегда следят за тенденциями. Так, недавно они сделали раздел «Иконки на тему COVID-9» для тех из компаний, которые ищут новые пути для маркетинга во время пандемии.

15. Animaticons

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

Читайте также: 11 бесплатных наборов иконок для дизайнеров

Бесплатные шрифты

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

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

16. Google Fonts

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

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

17. Use & Modify

Use & Modify — персональная подборка «классных, панковских, профессиональных, неполных и странных шрифтов» с открытым исходным кодом, которые можно бесплатно использовать и модифицировать.

18. Fontfabric

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

19. Dafont

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

20. Font Squirrel

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

Читайте также: Как выбрать правильный шрифт для своего лендинга?

Бесплатные стоковые видео

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

Если у вас есть продукт или услуга, которые могут вызвать эмоциональный отклик у посетителей, используйте видео, создающее эмпатию и вызывающее эмоциональное возбуждение — тогда люди охотнее кликнут по СТА.

21. Coverr

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

22. Mixkit

Mixkit — это галерея тщательно отобранных высококачественных видео и анимации, созданных одними из самых талантливых авторов в мире, с лицензией на бесплатное использование.

23. Videezy

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

24. Life of Vids

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

25. Videvo

Videvo предлагает массу видеороликов для бесплатного использования в личных и в коммерческих целях. При использовании видеоклипов с лицензией Creative Commons 3.0 следует указывать авторство.

Читайте также: Как видео и gif-анимация повышают конверсию лендинга?

Бесплатные инструменты графического дизайна

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

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

26. Crello

Crello — «бесплатный онлайн-редактор видео, изображений и анимации для соцсетей и веба». Вам даже не нужны навыки дизайна, чтобы начать использовать его. Crello предоставляет огромный выбор из более чем 5000 готовых анимированных шаблонов. Кроме того, сайт доступен на русском языке.

27. Canva

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

28. Gravit Designer

Gravit Designer — это полнофункциональное приложение для векторного графического дизайна, доступное на всех платформах. Бесплатная версия поставляется с 500 МБ облачного хранилища.

29. Inkscape

Inkscape — это высококачественный профессиональный инструмент для работы с векторной графикой, доступный для Windows, Mac OS X и GNU / Linux. Является свободным и открытым программным обеспечением. Есть русский интерфейс.

30. Pencil

Pencil — бесплатная альтернатива Adobe XD. Это мощный инструмент с открытым исходным кодом, позволяющий создавать прототипы для веб-приложений, мобильных и десктопных приложений. Доступен для всех платформ.

Читайте также: Визуальный маркетинг: 25 инструментов для работы с графикой

Бесплатные инструменты для создания макетов

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

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

31. Shotsnapp

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

32. Screely

Screely позволяет мгновенно превратить снимок экрана в макет без использования Sketch и Photoshop. Просто загрузите свое изображение, а приложение сделает за вас все остальное.

33. Screenpeek

Скопируйте и вставьте URL своего лендинга или сайта в Screenpeek, и всего за 10 секунд он создаст привлекательный макет. Это приложение, созданное Хансом Пейджелом (Hans Pagel) и Филиппом Куном (Philipp Kuhn), бесплатно только для макетов iPhone.

34. MockupsJar

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

35. Mockup World

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

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

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

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

36. Remove

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

37. Social Sizes

Social Sizes, созданный Питером Ассенторпом (Peter Assentorp), обеспечивает дизайнеров лучшими размерами изображений и видео для социальных сетей. Шаблоны для Sketch, Adobe XD и Photoshop включены и доступны для бесплатного скачивания.

38. Fotor

Fotor — это не только графический дизайнер, но и фоторедактор со множеством функций: обрезка, вращение, выравнивание, изменение размера и добавление эффектов к любому изображению — и все это в окне браузера. Также здесь можно создавать фотоколлажи.

39. Pixel Editor X

Pixel Editor давно известен как базовый, но надежный фоторедактор, доступный для бесплатного использования в браузере. Недавно вышла новая версия — Pixel Editor X. Она имеет больше инструментов для редактирования и интегрируется с Dropbox. Доступен интерфейс на русском языке.

Читайте также: 7 лучших бесплатных альтернатив Adobe Photoshop

Бесплатные инструменты для создания скриншотов

40. Collabshot

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

41. Giphy Capture

Это бесплатное приложение для Mac позволяет легко захватывать часть экрана и экспортировать ее в файлы GIF и MP4. Также всего за пару кликов возможна запись экрана в формате GIF до 30 секунд.

42. ScreenToGif

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

43. ShareX

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

44. Snappy

Snappy — это профессиональное приложение для создания и совместной работы над снапшотами для iPhone, iPad и Mac. (Версия для Windows «скоро выйдет», можно подписаться на новости, чтобы узнать о выходе первым).

45. Lightshot

Еще одно бесплатное приложение для Mac и Windows, а также браузеров Chrome, Firefox, IE и Opera, Lightshot позволяет вам захватывать любую часть экрана, загружать ее на их сервер и получать короткую ссылку. Вы также можете добавлять на скриншоты линии, стрелки и текстовые аннотации.

Читайте также: Оптимизация изображений как важная составляющая CRO-процесса

Вдохновение для дизайнеров

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

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

46. Behance

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

47. Dribbble

Dribbble — это еще одно популярное и успешное онлайн-сообщество для демонстрации творчества. В то время как Behance представляет в основном завершенные работы, Dribbble специализируется на меньших «снапшотах» работы в процессе выполнения.

48. Httpster

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

49. Microcopy Inspirations

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

50. InspoFinds

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

Читайте также: 21 руководства по стилю для визуального вдохновения

Вместо заключения

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

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

Просматривать и покупать подходящие картинки одного из ведущих фотобанков, Fotolia, можно не выходя из личного редактора LPgenerator. Встроенная Галерея содержит более 50 миллионов изображений, векторов и иллюстраций. Ежедневное обновление и профессиональный отбор позволят вам найти именно то, что нужно, ведь качественные изображения — важный фактор, напрямую влияющий на показатели лендинга.

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

По материалам: creativeboom.com Изображение: freepik.com

08-06-2020

39 примеров оригинального дизайна лендингов

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

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

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

1. Beurre & Sel

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

2. Hackery, Maths & Design

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

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

3. The Drawing Room

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

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

4. We Love Noise

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

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

5. Ende

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

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

6. Edward Carvalho Monaghan

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

7. Huys

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

8. KathArt

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

9. Wacom

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

10. Amsterdam Dance Event

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

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

11. Cropp

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

12. Neue Yorke

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

13. Juliana Bicycles

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

14. Esquire

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

15. Institut Choiseul

Сайт для учебного заведения Institut Choiseul выглядит как привлекательный разноцветный паззл. Контент разделен на блоки разного цвета, соседствующие друг с другом. Если прокрутить страницу вниз, то можно увидеть — текст на ней расположен в более традиционной манере, однако каждая статья помещена в отдельный блок.

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

16. Award

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

17. Harry’s

Компания Harry’s занимается продажей мужских бритв. Их лендинг — это образец отлично спроектированного пользовательского опыта. Все элементы на странице расположены традиционным образом, что наилучшим образом отвечает требованиям целевой аудитории. Понятный и четко структурированный дизайн производит на приятное впечатление. Все изображения выглядят элегантно и мужественно, но в то же время лишены излишней брутальности.

18. The King’s of Summer

Сайт, представленный на скриншоте ниже, создан компанией Tumblr с целью мотивировать людей посмотреть фильм The King’s of Summer. На страницах сайта можно увидеть множество фотографий, GIF-анимаций, а также сюжетные линии из кинофильма. Его структура далека от типичной, но пользователи получат огромное удовольствие, прокручивая страницу вниз. Заголовок сайта будто бы написан вручную, что создает ощущение, что перед нами альбом с любимыми фотографиями.

Необычное расположение блоков контента и анимация, постоянно возникающая перед глазами, удерживает внимание посетителей. Даже если вы еще не видели фильм The King’s of Summer, глядя на этот сайт, у вас сложится свое собственное мнение и впечатление о нем.

Необычное расположение блоков контента и анимация удерживает внимание посетителей

Твитнуть цитату

19. World Baking Day

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

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

20. Paper & Paint

Лендинг Paper & Paint является примером весьма оригинального способа взаимодействия с пользователями. Перемещаясь по страницам сайта, вы будто перескакиваете от раздела к разделу. Расположение элементов соответствует рекламируемому продукту (обои и краски для отделки помещений). Навигация скрыта от глаз пользователей и возникает только тогда, когда вы переходите к подбору цветовой палитры. Изображения отображаются во всю величину страницы, а стрелочки «призывают» перейти к следующему слайду.

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

21. Newsweek

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

22. Abby Putinski

Оригинальный подход к дизайну сайта-портфолио демонстрирует Эбби Путински. Она позиционирует себя как креативного иллюстратора и графического дизайнера. Сразу после загрузки появляется приветственное окно, предлагающее ознакомиться с работами автора. Как только вы закрываете это окно, вы видите карту с «приключениями» дизайнера.

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

23. Baumastisch

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

24. Norwich University of the Arts

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

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

25. Trask Industries

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

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

26. Adam Hartwig

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

27. Contad

На этом лендинге все обладает эффектом анимации: CSS, HTML, JavaScript и SVG. Это очень увлекательный интернет-ресурс. Яркие цвета привлекают внимание пользователей, а страницы наполнены замысловатыми иллюстрациями. Единственный минус — сайт разработан исключительно для стационарных компьютеров с мышками. Кроме того, анимация функционирует только в браузере Chrome.

28. Музей Национальной Академии (National Academy Museum)

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

29. Эндрю Маккарти (Andrew McCarthy)

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

30. Майкл Эдвардс (Mikael Edwards)

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

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

31. Designer’s Friend

Стоит зайти на страницу данного сайта, как перед вами предстает не совсем привычное зрелище. Вы ведь никак не ожидаете увидеть на странице HTML-код, не так ли? Все, что вам нужно знать о компании, содержится прямо в коде, где тэги играют роль заголовков. Специальное окошко с названием «Совет дня» (Tip of the Day) помогает пользователю ориентироваться на сайте:

32. Hatched

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

33. Institute for Emerging Issues

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

34. Into The Arctic

Внешний вид лендинга Into the Arctic завораживает пользователей с первого взгляда. На заднем плане страницы проигрывается видео, которое иллюстрирует цель создания ресурса. Панель навигации также выполнена в особой манере: как только вы наводите на нее курсор, то перед вами открывается дополнительная информация. Шрифты, использованные на сайте, очаровательны, а остроумные цитаты «цепляют» пользователей. В целом, дизайн сайта исполнен безупречно.

35. Джон Джейкоб (John Jacob)

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

36. Impress

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

37. Postable

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

38. Национальный Музей ЛГБТ (National LGBT Museum)

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

39. Лукас Никитчук (Lucas Nikitczuk)

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

Заключение

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

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

По материалам: smashingmagazine.com 

28-02-2016

Landing Page для курсов рисования

Cегодня будет рассмотрена не слишком конкурентная ниша — а именно, курсы рисования. Как обычно, разберем два примера из ТОПа поисковиков, после чего посмотрим, что может предложить наш LP Store.

Лендинги Рунета

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

Ниже линии сгиба все более-менее выравнивается. Процесс обучения подан через 4 пункта, проиллюстрированные интуитивно-понятными иконками.

Лид-форма тоже достаточно неплоха, хотя проблема со шрифтами в некоторой мере остается.

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

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

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

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

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

Как итог: хорошая целевая страница с рядом крайне удачных находок.

Шаблоны LP Store

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

Если вас заинтересовал данный шаблон, приобрести его можно здесь.

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

17-11-2015

Как создать правильный прототип landing page

Мы продолжаем серию выпусков о том, как создать лендинг пейдж.

Напомню, если вы пропустили:
• Из чего состоит создание landing page? Введение
• Анализ рынка и конкурентов при создании лендинг пейдж. Часть №1
• Как анализировать Ц.А при создании landing page. Часть№2

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

Правила создания лендинг пейдж, как и в жизни есть несколько этапов:
1. Подготовка
2. Сбор ресурсов и информации
3. Продакшн
4. Тестинг

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

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

Зачем нужен прототип landing page

1. Экономия времени – изначально гораздо проще нарисовать всё в чёрно белом варианте и менять детали, чем менять в готовом дизайне, а ещё хуже в лендинге который уже завёрстан в интернет.
2. Безопасность заказчика – получая прототип на руки, Вы чётко видите как и где будет располагаться контент и если вам не понравится прототип, Вы сможете «докручивать» его бесконечно.
3. Поэтапность работы – Текст – прототип – дизайн – вёрстка. Именно такие этапы позволят создать Вам лендинг пейдж с высокой конверсией.

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

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

• Omnigraffle,
• ConceptDrawPro,
• Pidoco,
• BalsamiqMockups
• moqups.com — эту программу очень рекомендую, сейчас сидим полностью на ней. Там к стати если зарегестрироваться есть возможность создавать два проекта бесплатно!

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

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

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

Вот пример одного из прототипов, лендинга по ритуальным услугам:

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

Прототип landing page, выводы

1. Прототип нужен для многих факторов (описал выше)
2. Идеальный вариант рисовать прототип, в спайке со студией, то есть они рисуют а вы помогаете.
3. Без прототипа, вполне можно создавать страницы приземления, скорее всего это будет прототип дизайнера или руководителя на листке А4, кстати вот смешной пример, как я рисовал его для дизайнера и пример что получилось в итоге:

Видео на эту тему:

Прототип landing page: Uni Consulting, moqups и несколько лайфхаков

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

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

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

Поехали!

Знакомьтесь, вот крутая программа для создания прототипов:

Moqups.com

Плюсы:

• Условно бесплатная
• Можно создать бесплатный проект
• Удобный интерфейс
• Простая в использовании
• Можно импортировать картинки
• Есть возможность создавать очень сложные по архитектуре сайты
• Вы можете работать в проекте одновременно

Минусы:

• Бесплатный аккаунт не дает возможности экспортировать проект
• При покупке аккаунта Вы ограничены 10 активными проектами
• Работая одновременно, иногда слетают изменения одного из пользователей
• Нет history, позволяющей откатить проект до какого-то этапа (только revisions)
• Мы не нашли приложения для таблетов

Кстати, вот видеообзор того, как работать с этой програмкой:

Зачем вообще нужен этот moqups?

Мы пустились с места в карьер… Зачем вообще используется эта программа? Ответ простой: для создания прототипов.

Специалисты Uni Consulting с уверенностью заявляют, что этап прототипирования — один из наиболее важных при создании лендинг пейдж.

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

Вот пример прототипа нашей студии (первые три с половиной разворота)

Несколько предварительных выводов

1. Прототип нужен для создания «скелета» будущего сайта
2. Лучше, чтобы прототип создавали профессионалы
3. Прототип посадочной страницы — это помощь дизайнеру
4. Также он отображает структуру, логику повествования
5. Наглядность помогает клиенту понять, как примерно будет выглядеть сайт

Что Вас ждет в этой статье

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

Вы узнаете о:

• Видах прототипов
• Делегировании и ответственности в прототипировании
• Технических нюансах создания структуры и концепции прототипа
• О «фишках» и нашем опыте работы

Ну и в конце статьи Вас ждет приятный бонус 😉

Виды прототипов страниц захвата

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

Этапы разработки прототипа

1. Скетч, зарисовка

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

• Отрисуйте общие элементы
• Проработайте идеи визуализаций
• Подумайте над «фишками» и нестандартными элементами
• Работайте на идеи и креатив

НЕ нужно:

• Четкой прорисовки
• Засиживаться больше 2-х часов
• Заниматься каким-то очень уж творчеством (разрисовывать это цветными карандашами, нанимать дизайнера и так далее)

Цель этого этапа — запустить Ваш мозг.

2. Неподробный прототип

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

На практике это выглядит как большие прямоугольники, рабочие заголовки и заметки. Например, мы выделяем на блок с преимуществами один разворот. Это отображается прямоугольником. Ставим рабочий заголовок «Компания в цифрах». Естественно, в итоге мы сделаем что-нибудь, вроде:  «7 причин разработать landing page в Uni Consulting», но на этапе неподробного прототипа мы просто схематически показываем, какое содержание должен нести тот или иной блок.  Заметкой можно указать, что там будет. Например, 7 клипартов с заголовком и коротким описанием. На этом этапе не парьтесь над отрисовкой форм и кнопок — просто набросайте структуру и общие смыслы.

3. Подробный прототип

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

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

Вот несколько примеров прототипов от Uni Сonsulting

Продажа лекарственных трав и растений (первый разворот):

И еще один разворот с инфографикой:

Несколько правил создания landing page и прототипов к ним

• 1. Используйте разные призывы к действию

Не сработала первая кнопка — сработает пятая.

• 2. Открытые формы захвата лучше, чем закрытые

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

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

Пример оттуда же, только с закрытой формой:

То есть, нужно сделать два действия: нажать на кнопку и заполнить форму.

Оба вида хороши, но 90% наших лендингов включают только открытые формы. Они более действенные.

• 3. Разработайте собственную систему коммуникаций и правок в прототипе

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

• Копирайтинговые (синий цвет)
• Заметки по дизайну и функционалу (желтые)
• Клиентские и другие пометки (зеленый)

После того, как исправления (если это были исправления) внесены, то их удаляет не тот, кто правил прототип, а тот, кто принимает работу.

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

4. Отрисовывайте все формы и попапы

Не ленитесь отрисовать и пронумеровать (!) каждый попап. У нас нумерация идет большими красными цифрами, а сами попапы отрисовываются в отдельной вкладке проекта.

5. Не «мельчите»

Ширина экрана в проекте moqups у нас составляет 1600 пикселей, а длина соответствует длине прототипа.

Также мы оставляем поле из одного квадратика с каждой стороны для заметок. Это практично.

6. Выделяйте кнопки

Мы всегда выделяем кнопки ярким цветом, чтобы их было хорошо видно.

7. Учитывайте функционал

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

8. Создавайте Thank You Page

Это может быть одно предложение, а может быть целая страница с видео-благодарностью.

9. Следите, чтобы все элементы меню были подписаны

10. Называйте проект понятно и просто

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

Специально для Вас команда Uni Consulting разработала чеклист для проверки своего прототипа на маркетинг, «начинку» и смысловое наполнение. Скачайте его и проверьте свой сайт.

Чеклист для проверки прототипа К статье

Передача прототипа и его подготовка к дизайну

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

Держите еще один внутренний чеклист нашей компании:

Чеклист_для_создания_и_оформления_прототипа_статья 

Кто должен делать прототип landing page

Хороший вопрос, ответ на который я до сих пор ищу. Правда, у нас есть свое решение.

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

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

Но дизайнер — не копирайтер и уж точно не обязан быть маркетологом. Он может сделать красиво и креативно… но это не будет продавать.

Тогда копирайтер. Да, вы правы, во время прототипа создается продающий текст. Правда, и тут не обходится без «но»: мы крутимся по кругу: а как же дизайн и маркетинг?

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

Пример прототипа: Продажа тренингов по карьерному росту (несколько разворотов):

К чему мы пришли?

Мы считаем, что прототип следует создавать тому, у кого это лучше всего получается. Например, у нас эту работу прекрасно выполняет копирайтер Полина. Да, у нее получилось не сразу, но сейчас она делает это лучше, чем многие «гуру-маркетосы».

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

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

Напоследок

Я надеюсь, материал был полезен, и если это так — ставьте лайки и пишите комментарии, давайте вместе обсуждать этот вопрос.

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

Автор: Станислав Цыс

Каждому по Landing Page. Наболевшее / Хабр

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

Сатира на большинство «лендинг пейджей»

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

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

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

Особо находчивые продают пачки шаблонов «эффективных landing page», а кто-то пошел еще дальше и так рынок получил универсальные онлайн-сервисы для самостоятельного «проектирования» landing page.

Все ли так просто, как 1-2-3?

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

К сожалению, обычно, все это сводится к таймеру конского размера, в период действия которого нам предлагают 20-30-50-100% скидку, сковородку и доставку снегурочкой в бикини.

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

Помешательство на техниках

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

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

Давайте вспомним о пользователях

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

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

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

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

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

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

Как «родить» персонаж?

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

Сперва необходимо провести серию интервью со всеми ответственными сторонами. Такими сторонами могут быть:

• директора
• менеджеры
• консультанты
• продавцы
• итд

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

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

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

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

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

Теперь дело за картой эмпатии (Empathy Map). Она необходима для формирования полноценного образа каждого персонажа и выглядит примерно вот так:

Заполнить ее после интервью будет довольно просто и лучше это делать вдвоем.

Формируем потребности

В итоге, в карте эмпатии будут записаны те самые потребности, которые и нужны для создания крутого лендинга. Если проектируется полноценный сайт, то работу следует продолжить, создав карту идеального пути (Customer Journey Map). Но в лендинге ведь одна страница, так что опустим.

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

Что со всем этим делать?

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

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

Например, проектируя лендинг для сервиса СМС-рассылки мы обнаружили, что ни один из множества конкурентов не предлагает ничего большего, чем просто сервис рассылки. Вместе с тем, из интервью с бизнесом четко прослеживалась необходимость помощи клиентам в обучении правильному СМС-маркетингу. Такое обучение не только повысило бы лояльность клиентов, но и увеличило бы прибыль самого бизнеса за счет более частных рассылок. По этому мы предложили заказчику составить руководство по эффективному СМС-маркетингу и давать его каждому клиенту, пополнившему счет на некую минимальную сумму. Таким образом мы сформировали УТП (уникальное торговое предложение). Далее были спроектированы две версии лендинга. В первой версии руководство транслируется как одна из особенностей сервиса, во второй – как УТП с таймером. По окончании технической реализации мы запустим A/B-тест и определим какой вариант оказался наиболее успешным.

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

Главный инсайд этой статьи – думайте! Перестаньте штамповать шаблонные решения без какой либо аналитики и предварительной работы. Уважайте себя и бизнес клиента.

Дизайн целевой страницы Вдохновение для вашего следующего макета

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

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

Но сначала: каковы некоторые передовые методы проектирования?

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

Они сверхфокусированы

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

Они продолжают прокрутку до минимума

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

Они используют релевантные привлекательные визуальные эффекты

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

Они поддерживают единый брендинг

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

Они используют шаблоны F или Z

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

Не уверены, способствует ли конверсиям ваш текущий дизайн? Попробуйте наш анализатор Unbounce Landing Page Analyzer и посмотрите, как ваша целевая страница оценивается по девяти различным категориям эффективности.

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

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

А теперь давайте посмотрим на несколько красивых дизайнов!

Лучшие примеры дизайна посадочных страниц

1.Индокитай

Изображение любезно предоставлено Indochino. (Щелкните изображение, чтобы увидеть полную страницу.)

Если вы создаете красивую целевую страницу, это помогает иметь привлекательный продукт, о чем уже рассказала компания Indochino. Страница, созданная с помощью Unbounce, является примером того, как Indochino предлагает не только индивидуальные костюмы, но и красивые целевые страницы.

Вот что, по нашему мнению, делает этот дизайн целевой страницы потрясающим:

• Отличные визуальные эффекты : Если у вас есть привлекательный продукт, покажите его.Здесь мы можем увидеть смоделированные костюмы Indochino, а динамическая поза помогает посетителям увидеть, насколько элегантно выглядит продукт в контексте использования.
• Использование пространства : Не менее важно, что посетители имеют всю необходимую информацию без тонны прокрутки. Кнопка CTA заметна и сфокусирована. Дизайн этой страницы простой и сдержанный, но он выполняет свою работу.
• Фирменный : текст заголовка здесь набран шрифтом, похожим на логотип компании, что помогает создать ощущение единообразия бренда.

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

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

2. Зола

Изображение любезно предоставлено Золя. (Щелкните изображение, чтобы увидеть полную страницу.)

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

Вот что делает страницу Zola привлекательной:

• Единый брендинг : Это не сразу видно, если вы впервые посещаете сайт, но бренд Zola использует оттенки голубовато-серого (см. Сердечки на логотипе компании).Фон сохраняет эти цвета, а также обеспечивает отличный контраст для изображений — этот белый свадебный торт нуждается в контрастном фоне, чтобы выделяться.
• Simplicity : Главный сайт электронной коммерции Zola довольно загружен. Если целевая страница включала какую-либо стандартную навигацию, посетители могли отвлекаться, щелкая мышью вместо запуска своего реестра, что является целью страницы. Сохранение простоты означает, что больше посетителей завершат действие, вместо того, чтобы бесцельно бродить по сайту.Эта страница идеально подходит для направления их платной рекламы, чтобы снизить цену за клик.

3. Lujo

Изображение любезно предоставлено Lujo. (Щелкните изображение, чтобы увидеть полную страницу.)

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

Вот что нам нравится на этой странице:

• Потрясающие (и согласованные) визуальные эффекты : не только отличная фотография продукта, но и поддержка Z-шаблона дизайна целевой страницы, усиливая при этом посыл бренда. Слоган Луджо — «поставить жизнь на паузу», и все, что есть в визуальных эффектах на этой целевой странице, усиливает этот бренд — от шляпы от солнца, покоящейся на видеобоксе, до туфлей и чая со льдом.Дизайн должен работать рука об руку с обменом сообщениями, чтобы текст и изображения объединялись для создания общего впечатления, которое имеет смысл. У Lujo это хорошо получается на этой целевой странице.
• Очевидное USP : Прямо под фотографиями Lujo формулирует — с текстовыми и дизайнерскими элементами — три уникальных аргумента: бесплатная доставка, пятилетняя гарантия и новозеландское мастерство. Поиск способа тонко воплотить эти три идеи в дизайн означает, что посетителю, возможно, не нужно будет продолжать изучение, прежде чем нажимать эту кнопку CTA — они видят эти основные преимущества, и это может заключить сделку.

4. Panoply

Изображение любезно предоставлено Panoply. (Щелкните изображение, чтобы увидеть полную страницу.)

В отличие от некоторых других примеров, инструмент анализа данных Panoply не имеет особо привлекательного продукта, который можно было бы продемонстрировать — я имею в виду, в конце концов, это аналитическое программное обеспечение, а не шикарный костюм. Но целевая страница Panoply (разработанная Directive Consulting) является великолепным свидетельством того факта, что дизайн и красота важны даже для технических продуктов и услуг B2B.

Это то, что, по нашему мнению, делает эту целевую страницу красивой (и эффективной):

• Умные визуальные эффекты : Творческая демонстрация пользовательского интерфейса Panoply в тонкой (но понятной) манере — одна из самых больших побед этой целевой страницы. . Интересные визуальные эффекты всегда важны, даже если продукт не подходит для фотографии.
• Социальное доказательство : Включая в первую очередь отраслевые награды и отзыв от GoDaddy — и делая это таким образом, чтобы он соответствовал общему дизайну — это еще один отличный штрих.Посетителю не нужно никуда переходить на целевой странице, чтобы знать, что отраслевые эксперты доверяют Panoply.

5. Daily Harvest

Изображение любезно предоставлено Daily Harvest. (Щелкните изображение, чтобы увидеть полную страницу.)

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

Вот что нам нравится на этой странице:

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

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

6. Greats

Изображение любезно предоставлено Greats. (Щелкните изображение, чтобы увидеть полную страницу.)

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

Вот почему мы думаем, что это (о нет, не говорите этого) «отличный» пример дизайна целевой страницы:

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

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

7. Unbounce

Изображение предоставлено Unbounce. Эй, это мы! (Щелкните изображение, чтобы увидеть полную страницу.)

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

Вот то, что, на наш взгляд, отлично выглядит:

• Анимация : Время загрузки целевой страницы — не самая простая вещь, которую можно показать на статическом изображении (как мы обнаружили), но это очевидно, если добавить анимацию.
• Визуальная иерархия : Встраивание наиболее важной информации в этой анимации в общий макет F помогает посетителям читать.Анимация — и содержащиеся в ней визуальные элементы — помогают сделать то, что в противном случае могло бы быть довольно скучной целевой страницей, более динамичным и интересным.
• Функции текста : Мы набили эту целевую страницу статистикой, чтобы подтвердить наши заявления о медленной загрузке страниц, и мы хотим, чтобы эти цифры появлялись, поэтому они часто выделяются жирным шрифтом. Если на целевой странице много текста, разбейте его на отдельные абзацы и выделите важную информацию жирным шрифтом. Это облегчает посетителям сканирование и принятие мер.

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

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

Еще больше примеров отличных целевых страниц (связанный контент)

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

1. Доказательство тому — пудинг. Ознакомьтесь с коэффициентами конверсии, советами инсайдеров и более красивым дизайном, прочитав 12 целевых страниц с высокой конверсией (которые заставят вас пожелать, чтобы вы их создали).
2. Все еще не чувствуете? Мы тебя прикрыли. Вы найдете массу вдохновения и новых идей для целевых страниц в книге «Лучшие примеры целевых страниц, которые вы должны сохранить для своего файла Swipe».
3. Иногда создание целевых страниц для мобильных кампаний — это совсем другое дело. Вот примеры мобильных целевых страниц, которые вам не по зубам.
4. Наконец, если вы продвигаете приложение для iOS или Android, не ищите ничего, кроме этих невероятных примеров целевых страниц для мобильных приложений, прежде чем начать создавать свои собственные.

.

Как создать систему дизайна посадочных страниц

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

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

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

В этом руководстве я покажу вам, как создать систему дизайна целевой страницы, которая позволит вам быстро (за секунды!) И легко публиковать столько вариантов пользовательской целевой страницы, сколько вы хотите.

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

Но как построить этот двигатель? С динамическим дизайном целевой страницы с использованием CMS. Или в данном случае — Webflow CMS.

И всего 6 шагов:

1. Создайте свой контент : выберите элементы на странице
2. Создайте свои коллекции : создайте базу данных в Webflow CMS, из которой ваши страницы будут извлекать ресурсы
3. Создание элементов коллекции : создание элементов коллекции, то есть ваших целевых страниц
4. Создайте свою целевую страницу : Создайте реальную страницу, которая будет извлекать контент из вашей Коллекции
5. Свяжите поля вашей коллекции : сопоставьте элементы на странице с полями в коллекции
6. Опубликуйте свой сайт : разместите свои страницы в Интернете несколькими щелчками мыши

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

Holy macaroni — Я только что сделал целевую страницу на этой гифке!

Шаг 1.Создайте свой контент

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

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

• Navigation: В то время как общая мудрость гласит, вы не должны включать в себя навигацию на целевые страницы, я думаю, что это спорно.Я не видел, чтобы один постоянно превосходил другого.
• Раздел героя : Герой обычно содержит заголовок, подзаголовок, изображение или видео — все они сосредоточены на том, чтобы рассказать посетителю, что такое ваша компания / продукт. Это должно быть ориентировано на выгоду, а не на особенности.
• Призыв к действию : Вы хотите, чтобы это было как можно проще, чтобы уменьшить трение.
• Обзор / решения : Покопайтесь немного глубже, чтобы рассказать людям, что делает ваш продукт и как он решает проблему, с которой сталкивается ваш клиент.Это также должно быть ориентировано на выгоду, а не на функции.
• Функции : Опишите ключевые аспекты вашего продукта, которые помогут решить эту проблему.
• Вторая форма регистрации : Я обнаружил, что наличие другой формы регистрации внизу может увеличить коэффициент конверсии для определенных страниц.

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

Примечание. Ни один из этих элементов не является обязательным — вы должны добавлять, удалять и настраивать в зависимости от того, что имеет смысл для вашего бизнеса. И что, естественно, работает.

Шаг 2. Создайте свои коллекции в Webflow CMS

Хорошо, теперь мы подошли к движку, который заставляет всю эту систему мурлыкать — Webflow CMS (система управления контентом). Здесь хранятся ресурсы (копия страницы, изображения, видео и т. Д.), Из которых будут извлекаться ваши целевые страницы.

Для начала перейдите в Webflow, откройте панель CMS, щелкните , создать коллекцию и назовите ее «Целевые страницы».

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

Поля, которые мы использовали в шаблоне:

1. Заголовок (текстовое поле)
2. Подзаголовок (текстовое поле)
3. Изображение героя / видео (поле изображения)
4. Текст кнопки (текстовое поле)
5. Кнопка ссылки (поле ссылки)
6. Название формы (текстовое поле)
7. Текст кнопки формы (текстовое поле)
8. Функции (поле с несколькими ссылками)

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

1. Название функции (текстовое поле)
2. Значок функции (поле изображения)
3. Описание функции (поле с форматированным текстом)

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

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

1. Открыть панель коллекции
2. Щелкните значок шестеренки справа от «Целевых страниц», чтобы открыть настройки коллекции.
3. Добавить новое поле
4. Выберите мультиссылку в качестве типа поля
5. Выберите коллекцию функций в качестве источника
6. Сохранить

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

Шаг 3. Создайте элементы коллекции

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

1. Откройте свою коллекцию на панели «Коллекции»
2. Нажмите Новая целевая страница
3. Добавить содержимое для каждого поля коллекции

‍
Шаг 4.Создайте свою целевую страницу

Теперь мы подошли к знакомой части: разработке реальной целевой страницы. Большинство из вас захотят, чтобы дизайнер сделал это за вас. Хорошая новость в том, что им нужно будет сделать это только один раз, и то, что они разработали, действительно будет работать . Им не нужно будет сначала передавать его разработчику — Webflow напишет реальный код в фоновом режиме во время разработки.

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

1. Используйте шаблон
2. Клонируйте набор пользовательского интерфейса (или любой клонируемый сайт Webflow), чтобы скопировать и вставить заранее разработанные элементы на вашу последнюю страницу.
3. Нанять эксперта по Webflow

На этом этапе не беспокойтесь о конкретной копии и изображениях.Просто настройте страницу так, как хотите, на основе элементов вашей Коллекции.

ICYMI: Здесь я создал клонируемый шаблон системы целевой страницы без стиля.

Шаг 5. Соедините поля Коллекции с элементами дизайна

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

Шаг 6. Опубликуйте свой сайт

Теперь, чтобы ваши страницы стали активными. Щелкните опубликовать. Это оно. Теперь посетите вашу страницу.

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

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

Вот еще один клонируемый системный шаблон целевой страницы, который поможет вам быстрее приступить к работе.

Вы можете создать его бесплатно на субдомене webflow.io — и добавить хостинг, когда будете готовы разместить их в своем собственном домене.

Удачной публикации!

Спасибо Адаму Танге, Барретту Джонсону, Сосо Сазешу, Риду Бенсону, Шеннон Фишер и особенно Джону Мур-Вильямсу за помощь в написании этого поста.

.

9 методов дизайна посадочной страницы, которые сделают вас героем конверсии

Вы тоже можете стать героем дизайна посадочной страницы! (Изображение Джулиана Фонга с Flickr).

Что случилось?

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

Вы нажали «Запуск». Он уходит. Из ваших кампаний идет поток, и вы начинаете видеть результаты.

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

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

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

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

1.Выберите контрастные цвета.

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

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

Взгляните на ту же страницу, когда она немного размыта, и посмотрите, что выделяется:

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

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

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

2. Показывайте реальных людей для реальных результатов

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

Вместо того, чтобы найти отличные фотографии реальных клиентов, которые воспользовались услугой, они заполняют БОЛЬШОЕ количество основного пространства бесполезной графикой.

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

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

То же самое и с отзывами. Использование настоящих фотографий вместо заполнителей или вообще без фото может повысить эффективность отзыва и существенно повлиять на коэффициент конверсии.

Суть в том, что убедитесь, что каждое изображение на вашей целевой странице имеет цель .Если он не добавляет ценности вашей странице, удалите его.

3. Покажите посетителям, куда смотреть

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

Если объект фотографии смотрит в камеру, в сторону текста или в сторону от текста, это может иметь большое значение в том, как посетители воспринимают вашу целевую страницу.

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

Это исследование отслеживания взгляда показывает, как взгляд женщины на фотографии увеличивает видимость продукта И заголовка (полное исследование):

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

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

4. Посадите визуальные подсказки

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

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

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

5. Не забывайте о Design Match

Это был рекламный баннер для кампании .

Обратите внимание на использование того же фонового изображения на их целевой странице.

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

Design Match — визуальный родственник Message Match. Это означает, что элементы дизайна — в частности, платные объявления и целевые страницы — должны быть согласованы как визуально, так и по содержанию .

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

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

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

6. Выберите правильные цвета

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

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

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

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

7. Be Visual

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

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

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

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

8. Заказать особо крупные элементы

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

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

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

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

9. Embrace Whitespace

Что объединяет вместе все элементы дизайна вашей целевой страницы?

Это не беспорядок, линии или другие элементы.

Это пробел .

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

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

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

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

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

Принять меры

Пришло время действовать. Начните тестировать свои целевые страницы и улучшать элементы дизайна.

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

Есть вопросы? Позвольте мне знать в комментариях ниже!

— Эрик Слоан

.

Анатомия идеальной целевой страницы | Лучшие советы по дизайну

Размещение и содержание

7. Держите его выше складки

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

8.Всегда будь тестирующим

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

9. Используйте изображения и видео, относящиеся к копии

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

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

10. Упрощайтесь с ссылками

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

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

.