Иконки для лендинга: Иконки Landing page — скачивайте бесплатно в PNG и SVG

21.07.2023 alexxlab

Содержание

Изображения и иконки для Landing Page

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

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

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

Разместите реальные фотографии

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

Изображения, показывающие результат или процесс

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

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

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

Покажите ассортимент вашего товара

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

Создайте видео о товаре/продукте

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

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

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

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

Flickr
Pixabay
New old stock
Vecteezy. com
Pdpics

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

Перейти к следующему уроку: “Создание главного экрана”

Попробуйте конструктор сайтов LPmotor и
создайте свой Landing Page всего за 15 минут

Документы:

Полезные ссылки:

Функциональность:

О компании:

при поддержке Фонда Развития Интернет Инициатив

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

Бесплатный звонок по России

8 800 200 51 47

Шаблоны:

[email protected]

Видеоинструкции

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 руководства по стилю для визуального вдохновения

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

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

8 способов создать безупречные фото для лендинга
Как создавать объясняющие и промовидео: инструкция
Создание инфографики в Canva за 15 минут
Обзор популярных онлайн сервисов для создания логотипа
5 принципов гештальт-психологии для создания запоминающихся изображений

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

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

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

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

08-06-2020

11 678 иконок целевых страниц — бесплатно в SVG, PNG, ICO

Получите неограниченный доступ к более чем 6,3 миллионам активов

Получите неограниченное количество загрузок

Оптимизация целевой страницы Значок

Целевая страница Значок

Оптимизация целевой страницы Значок

Просмотр целевой страницы Значок

Целевая страница Значок

Оптимизация целевой страницы Значок

Целевая страница Значок

Оптимизация целевой страницы Значок

Целевая страница Значок

Впечатление целевой страницы Значок

Целевая страница Значок

Оптимизация целевой страницы Значок

Целевая страница Значок

Дизайн целевой страницы Значок

Оптимизация целевой страницы Значок

Целевая страница Значок

Целевые страницы Значок

Целевая страница Значок

Оптимизация целевой страницы Значок

Целевая страница Значок

Оптимизация целевой страницы Значок

Целевая страница Значок

Вход на целевую страницу Значок

Выход из целевой страницы Значок

Целевая страница Значок

Технология целевой страницы Значок

Целевая страница Значок

Целевые страницы Значок

Целевая страница Значок

Целевая страница Icon

Советы по веб-дизайну: как использовать значки на целевой странице | by Icons8

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

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

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

Итак, приступим!

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

Самый простой способ эффективно использовать пространство веб-страницы — распределить элементы по горизонтали. Вот пример:

IBM Watson целевая страница

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

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

Или структурный блок фактов с иконками:

Как видите визуальное представление информации более привлекательно, поэтому Apple использует его.

Нижний колонтитул на целевой странице iPhone X

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

Очевидный способ сделать список красивым — поставить галочку:

Партнерская программа Stripe стр. Тренер по фитнесу Шаблон целевой страницы от Tilda

Основные функции

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

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

Чтобы получить числовые значки, найдите «цифру 4» или «4 в кружке» на Icons8.

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

A Целевая страница тура на Tilda использует большие точки и горизонтальные элементы вместо простого списка.

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

Придайте преимуществам эмоциональную окраску

Визуальная метафора привлекает внимание посетителя и помогает понять смысл вашего сообщения.

Блок преимуществ на лендинге компании Тильда шаблон

Дайте визуальные синонимы услугам

Один из стандартных блоков услуг в Tilda Publishing

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

Вот раздел страницы до редизайна:

Booz Allen Hamilton Страница экспертизы

А вот переработанная версия с иконками. Мы будем использовать значки в стиле Windows 10. Какой из них вам нравится больше?

Переработанный сервисный блок для Booz Allen Hamilton

Примените фирменный цвет к своим значкам

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

Xero целевая страница Intercom целевая страница чата Stripe 9026 1 страница партнерской программы
Icons8 имеет несколько цветовых схем для любой иконки. Диалог Colorization позволяет изменить любой цвет многоцветных значков.
Иконки8 различных цветовых стилей для иконки в правом столбце. Диалоговое окно модуля перекрашивания Icons8, где вы можете изменить несколько цветов значка.
Добавьте веса значкам с фоновой формой
Иногда в вашем списке преимуществ не так много слов, но не волнуйтесь, просто добавьте фоновую форму к каждому значку, чтобы сделать их жирными и последовательными.
Тильда Целевая страница квартир Шаблон
Shopify использует круглые формы, чтобы объединить различные формы значков на своей домашней странице:
Используйте гибкую настройку фона в Icons8 в соответствии с вашим стилем.
Визуальная привязка раздела
Если рассматривать разделы страницы как большую часть нашего предложения, становится ясно, что эти части на самом деле являются списками, так почему бы не привлечь внимание посетителя с помощью значков для каждого раздела?
A целевая страница веб-службы раздел шаблона использует значок вложения A целевая страница вакансии использует значки с цифрами в кружках в качестве разделителя разделов Значок местоположения используется на целевой странице конференции шаблон Несколько значков вместе ( стакан 61 , сердце , круассан ) на лендинге кофейни
Оригинальный разделитель
Все новое – это хорошо забытое старое 😉 Первоначально использованный в книжном дизайне, текстовые разрывы сейчас встречаются не часто, наверное, только в лонгридах:
«Разрывы текста — те места, где автор хочет вставить пробел, но не новую главу или раздел — многие авторы используют их, и они часто создают проблемы для макета книги» (8 решений дилеммы разрыва текста). )
Однако разделитель частей является одним из вариантов форматирования Medium:
И у Tilda Publishing их целый ряд:
По сути, любая простая фигура в материальном стиле (заполненная и плоская), например, 3 точки или звездочки, лист или звезда могут быть разделителями частей.
Уточните тарифные планы с помощью метафор
Тарифные планы — очень популярный тип блоков на целевых страницах. Очень важно четко донести цену до потенциального клиента, поэтому компании используют иконки для лучшего разделения тарифных планов.
Рычаг страница с ценами Algolia страница с ценами Toggl блок планов Digital Ocean страница с ценами 9 0260 В одном из блоков тарифного плана Тильды создателю предлагается указать иконку каждой колонки
«Вы не можете заставить людей покупать ваш продукт» (Дэвид Огилви, рекламный магнат)
Создавайте привлекательные главные изображения
Если контент-маркетинг является королем, вы хотите, чтобы ваши статьи выделялись, потому что иногда статья является целевой страницей.
Изображение героя в Realtimeboard Пост в блоге состоит из иконок Sprout Social используют иконки почти во всех превью статей Auth0 выбрали минималистичный способ иллюстрации для своих статей — один значок Heap Analytics использует значки в превью некоторых сообщений блога, чтобы показать тип контента простой предварительный просмотр вашего контента для социальных сетей рассмотрите Cosmic Pedro от Icons8 или Emoji Pics Composer от Amplifr.
Создавайте осмысленные интерактивные кнопки
Кнопки являются важной частью любого блока призыва к действию на целевых страницах. Многие маркетологи предпочитают четкие большие кнопки призыва к действию, не отвлекающие внимание. Скорее всего, у вас много кнопок на целевой странице, и лучше бы они были разными и чтобы было понятно, что происходит после нажатия на них.
Простая стрелка означает еще одну страницу с дополнительными сведениями.
Даже с чистыми сделанными на заказ фотографиями Square использует значки, чтобы проиллюстрировать значение ссылок в списке целевых страниц.
Среди множества CTA-блоков и форм на Тильде есть кнопка с иконками для популярных случаев, таких как загрузка файла или просмотр видео.
Значки типов файлов могут использоваться для обозначения того, какой тип файла получит пользователь или какой тип медиаконтента будет показан по ссылке.
Быстрые книги На целевой странице используется значок воспроизведения в кружке для кнопки просмотра видео
Получение положительного отзыва
Для любого продукта или услуги обратная связь с клиентом является сигналом того, делает ли бизнес что-то правильно или неправильно. Сбор отзывов клиентов может быть непростым, но вы должны попросить оценить работу/новостную рассылку/статью/продукт. Вот как это делает Medium с помощью кнопки аплодисментов:
По данным Hubspot, получить комментарий намного сложнее, чем поставить лайк.
Но даже кнопка «Нравится» достойна внимания дизайнера. Вы бы предпочли нажать на кнопку со значком или без него?
С помощью блока голосования Тильды вы можете настраивать изображения и использовать значки обратной связи из библиотеки Icons8:
Сделать обычный вид привлекательным
Иконки добавят вкус любому сухому контенту.
Страница вакансий Airbnb Целевая страница Dropbox Блок контактов в Шаблон целевой страницы кафе от Tilda
Иногда логотип не нужен, но страница с ним выглядит солидно. Многие малые предприятия или субпродукты крупных брендов имеют простой логотип для дифференциации и просто для ясности.
Baremetrics использует значки геометрических форм для каждой крупной функции продукта Tilda’s целевая страница летнего лагеря шаблон использует значок палатки на обложке
Создание привлекательных целевых страниц может не требовать огромных усилий, если у вас есть хоть немного вдохновения и пара хороших инструментов:
Библиотека значков с поиском и настройками значков, например Icons8
Конструктор веб-страниц с хорошей библиотекой блоков, например Tilda Publishing
Попробуйте применить кейсы из статьи на текущей или следующей целевой странице, измерьте конверсию и расскажите о результатах!
Находите это полезным? Поделитесь с теми, кто может использовать его тоже.