Изображения и иконки для Landing Page
Визуальный контент подкрепляет информацию о продукте/услуге, заинтересовывает и привлекает внимание посетителя.
После того, как вы поработали над текстовым контентом, самое время приступить к подбору изображений для вашего лендинга. Давайте грамотно расставим акценты на визуальном контенте.
Опишите ваш товар. Будет идеально, если вы сделаете это, используя графику или видео. Подумайте, что было бы интересно посетителям узнать о товаре, какие самые частые вопросы о товаре/услуге возникают у клиентов.
Разместите реальные фотографии
Путем большого количества тестов мы пришли к выводу, что реальные уникальные снимки гораздо больше привлекают посетителей, и конверсия таких сайтов выше.
Изображения, показывающие результат или процесс
Чтобы в разы быстрее подвести посетителя к целевому действию, разместите изображения, отображающие результат от покупки этого товара/услуги.
Используйте изображения высокого качества
Используйте изображения высокого качества
Хорошие картинки с высоким качеством делают ваш сайт более интересным в визуальном плане. А чтобы качество изображений никак не влияло на скорость загрузки сайта, сжимайте картинки с помощью сервиса TinyPng.
Покажите ассортимент вашего товара
Важная деталь: лендинг служит отличным инструментом для продвижения одного-двух товаров. Поэтому размещайте оптимальное количество товаров, чтобы ничто не отвлекало посетителя от главного целевого действия.
Создайте видео о товаре/продукте
Конверсию вашего сайта гарантированно повысит размещение видеоконтента о товаре/услуге. Посетителю сайта проще и быстрее просмотреть видео, чем читать характеристики. Подробное видео поможет посетителю более внимательно изучить ваше предложение. Чтобы вставить видео в редакторе LPmotor, посмотрите эту инструкцию.
Наш конструктор LPmotor уже содержит встроенную библиотеку изображений, с помощью которой вы сможете быстро найти готовые иконки и изображения для вашей посадочной страницы:
Бесплатные сервисы картинок
Вот несколько сайтов, где вы можете выбрать и скачать качественные изображения:
- Flickr
- Pixabay
- New old stock
- Vecteezy.
com - Pdpics
comНо обязательно проверяйте, насколько часто фотография используется на других сайтах, с помощью Google Images. Ведь бесплатными источниками изображений пользуются все.
Перейти к следующему уроку: “Создание главного экрана”
Попробуйте конструктор сайтов LPmotor и
создайте свой Landing Page всего за 15 минут
Документы:
Документы:
Полезные ссылки:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
8 800 200 51 47
Видеоинструкции
50 бесплатных ресурсов с графикой для ваших лендингов
На просторах интернета существует масса ресурсов с бесплатными материалами для дизайна посадочных страниц. Речь идет о шрифтах, шаблонах и макетах, векторных иллюстрациях, стоковых фотографиях, иконках и даже видеороликах — обо всех основных ресурсах, которые могут понадобиться вам в ваших проектах.
При этом халява вовсе не означает плохое качество.
В этой статье мы подобрали для вас перечень бесплатных ресурсов с графикой высокого качества, чтобы вы могли приступить к созданию лендинга как можно скорее. Все эти сайты актуальны на июнь 2020 года. Если вы из будущего, то некоторые ссылки могут не работать, также мог измениться и дизайн самих ресурсов.
Содержание статьи
Бесплатные стоковые изображения
1. Pexels
2. StockSnap
3. Landing Stock
4. Photo Creator
5. Nappy
Бесплатные векторные иллюстрации
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
Бесплатные инструменты для создания макетов
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 с открытым кодом обеспечивает запись экрана, вебкамеры и скетчборда со встроенным редактором.
Доступно на русском языке.
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
Дизайн иконок целевых страниц, темы, шаблоны и загружаемые графические элементы на Dribbble
Посмотреть ✨ РепроКоннект ✨
✨ РепроКоннект ✨
Посмотреть 🥳 CommandBar
🥳 CommandBar
Посмотреть портфолио Design Exploration
Разработка портфолио
Посмотреть атомный ребрендинг
Атомный ребрендинг
Просмотр абстрактного пользовательского интерфейса для страниц функций
Абстрактный пользовательский интерфейс для страниц функций
Посмотреть веб-дизайн Ninox
Веб-дизайн Ninox
Посмотреть аксиому 🌍
Аксиома 🌍
Веб-сайт View Space (карта пользовательского интерфейса)
Космический сайт (UI карта)
Посмотреть 🌀
Просмотр Testportal — Домашняя страница веб-сайта
Testportal — домашняя страница веб-сайта
Посмотреть маркетинговый веб-сайт OpenColony
Маркетинговый веб-сайт OpenColony
- Посмотреть 🔥 Incident. io
🔥 Incident.io
Посмотреть Invoker 🟣🔵
Инвокер 🟣🔵
View Space — первый полностью цифровой банк в Грузии
Space – первый полностью цифровой банк в Грузии
View Header Exploration — Маркетинг в социальных сетях
Исследование заголовков — маркетинг в социальных сетях
Просмотр веб-взаимодействия Fygo
Веб-взаимодействие Fygo
Просмотр концепции целевой страницы для веб-канала уведомлений на сайте
Концепция целевой страницы для веб-канала уведомлений на месте
Посмотреть посадочную площадку Propeda
Посадка Пропеда
Просмотр 3D-иконок для целевых страниц
3D-иконки для целевых страниц
Просмотр кошелька — Hero Header v6
Бумажник — Hero Header v6
Посмотреть веб-сайт KiCon 2.
0Веб-сайт KiCon 2.0
Посмотреть целевую страницу веб-сайта Color Generator
Генератор цветов Целевая страница веб-сайта
Просмотр сайта Potion — полная реконструкция
Сайт Зельеварения — полная реконструкция
Посмотреть 🎷
Зарегистрируйтесь, чтобы продолжить или войдите в систему
Загрузка еще.
..
Как создать потрясающие целевые страницы с помощью иконок
Очень важно привлечь внимание потенциального потребителя в этот день сканирования и беглого просмотра материала. На самом деле, по мнению нейробиологов Массачусетского технологического института, человеческий мозг может воспринять картинку всего за 13 миллисекунд. При первом посещении веб-сайта большинство посетителей просматривают страницу в поисках эстетически привлекательной информации, и только после этого начинают читать. Таким образом, даже если у вас есть фантастический продукт или услуга с выдающимся текстом, вы рискуете потерять потенциального потребителя, если не покажете его должным образом.
Вот почему дизайн необходим для общения с клиентом. Независимо от того, насколько важной или увлекательной является информация, которую вы предоставляете, если вы не можете привлечь внимание своих посетителей, вы потерпели неудачу.
Значок — это простой и эффективный способ привлечь людей к содержанию вашего сайта.
В этой статье мы покажем вам, почему вы должны использовать иконки на своем веб-сайте и как сделать это эффективно.
Создайте отличную целевую страницу в значках с помощью Magezon Page Builder
Содержание
- Как значок помогает создать лучшую целевую страницу
- Повышение удобочитаемости (визуальная привязка) за счет предоставления структурированной информации
- Сделать целевую страницу более привлекательной и представительной
- Как использовать значки на целевой странице 908
- Используйте различные значки, чтобы привлечь внимание к определенным функциям
- Замените маркеры
- Сделайте CTA и кнопку более привлекательными для глаз
- Украсьте пункты меню, чтобы сделать их более привлекательными (панели навигации, панель навигации)
- Использование значков для перехода в социальные сети (кнопка для FB, Instagram и т. д.)
- Получение отзыва
IconmonstrКак Icon помогает создавать лучшую целевую страницу
Icon любой интерфейс, дорожный знак, клавиатура и т. д. Они помогают нам лучше понимать и интерпретировать информацию. Более того, мы можем быстро передать концепцию не только в офлайне, но и онлайн с помощью значков. Поэтому очень важно понять, как и зачем их использовать.
В веб-дизайне иконки повсюду. При правильном внедрении они могут значительно улучшить дизайн UI/UX целевой страницы и пользовательский опыт. Иконки особенно эффективны для помощи посетителям в сканировании веб-сайта, поскольку они дают визуальную подсказку о материале. Давайте рассмотрим, почему вы должны использовать значки в дизайне своего веб-сайта и как эффективно использовать значки на целевой странице.
Повышение удобочитаемости (визуальная привязка) путем предоставления структурированной информации
- Составьте отличный список
Источник
Хотя использование слов для передачи понятий является наиболее прямым методом, слишком много текста может наскучить читателям.
Они потеряют концентрацию и полностью проигнорируют сообщение. В результате использование значков целевых страниц для представления этих задач и характеристик может быть гораздо полезнее. Они обеспечивают разнообразие раздела и наглядное толкование темы. Это значительно упрощает пользователю подключение значка к понятию и понимание указанных функций или функций.
- Создание красивого упорядоченного списка
Источник
Значки для веб-страниц могут сделать ваш отсортированный список более привлекательным. С другой стороны, стандартные пули могут быть утомительными. Слишком большое количество маркированных списков может сбивать с толку и непродуктивно с точки зрения удобочитаемости. Чтобы привлечь внимание к абзацам и другим блокам текста, вы можете использовать интересные символы вместо обычных маркеров. Только будьте осторожны, чтобы не переусердствовать.
→ Используйте конструктор целевых страниц, чтобы упростить процесс: 10+ лучших бесплатных конструкторов целевых страниц для привлечения потенциальных клиентов 2022
Сделайте целевую страницу более привлекательной и представительной
Иконки бывают разных стилей.
В конкретных иконках используются тени и рельефы, плоскости, линейные, 3D-эффекты и другие эффекты. Добавление индивидуальности ко всему дизайну достигается за счет использования определенного стиля в ваших символах.
С визуальной точки зрения перспективные значки могут добавить привлекательности веб-сайту. В результате для более корпоративного дизайна очень важно выбрать символы, которые эстетически соответствуют эстетике вашего сайта.
Если ваша фирма требует серьезности и профессионализма, избегайте банальных иконок. С другой стороны, если ваша компания обслуживает молодежь, почему бы не использовать более привлекательные символы?
Если ваша фирма требует серьезности и профессионализма, избегайте банальных значков (Источник: Justia)
Как использовать значки на целевой странице обработка информации. Использование значков эффективно добавляет содержания даже к самому простому тексту, обеспечивая эффективное общение без лишних слов. Иконки следует использовать для привлечения внимания к вашему контенту, а не для того, чтобы отвлекать внимание или заменять его.
Использование различных значков для привлечения внимания к определенным функциям
Хотя услуги по размещению объявлений являются реалистичным и важным элементом эффективного маркетинга, списки по своей природе пресны и неинтересны. Добавление символов в списки функций поможет сделать их более интересными.
Иконки для дизайна веб-сайтов служат визуальным приглашением для пользователей опробовать определенные функции вашего веб-сайта. Таким образом, иконки должны привлекать внимание ваших пользователей и направлять их к нужной части. Как только вы привлекли их внимание, объясните, почему эта функция такая фантастическая.
Подумайте о том, что вы пытаетесь сказать с помощью содержания, и основывайте символы на этом. Какова основная тема сайта или статьи? Используемые цвета? Какова модная тенденция? Современный? Классический? Иконки должны визуально интегрировать концепции, представленные в материале, и общую идентичность веб-сайта.
Замените пули
Стандартная пуля имеет устаревший дизайн и, скорее всего, вам надоест, поэтому вы можете подумать о том, чтобы выразить свои мысли с помощью более привлекательных символов.
Галочки, например, и стрелки. Это, несомненно, привлечет внимание пользователей.
Пули труднее различить и вспомнить, чем значки. В отличие от них, которые все одинаковые, символы значительно более различимы и, как следствие, идентифицируемы. Также намного проще идентифицировать разные фрагменты текста. Однако не переусердствуйте, так как слишком много чего-то плохого.
Сделайте призыв к действию и кнопку более привлекательными для глаз
Прежде всего, кнопка призыва к действию — это кнопка. Однако недостаточно просто нарисовать зеленый прямоугольник с закругленными краями. Ваш призыв к действию состоит из двух частей: дизайна и содержания. Несколько исследований показали, что и то, и другое оказывает значительное влияние на коэффициент конверсии. В результате вы должны сделать его очевидным и привлекательным.
Используйте значки для дизайна веб-сайта, чтобы они служили визуальным приглашением для пользователей опробовать определенные функции вашего веб-сайта.
Таким образом, иконки должны привлекать внимание ваших пользователей к части и направлять их к ней. Как только вы привлекли их внимание, объясните, почему качество такое фантастическое.
В призыве к действию следует использовать значки веб-страниц. Это не то же самое, что слова, но они могут многое сказать и стать важной функцией кнопки CTA. Иконки, скорее всего, используются для дополнительной мотивации, в сочетании с фразами или просто заменяют обычные кнопки. Просто поддерживайте моду, чтобы пользователи узнавали ваши товары так же хорошо, как ваши символы на кнопках!
→ Получите вдохновение для своей кнопки CTA: 25 проверенных примеров CTA для всех платформ
Одним из наиболее важных факторов удобства использования веб-сайта является простота навигации. Посетители с большей вероятностью останутся на веб-сайте, чтобы найти то, что они ищут. Вот почему вы должны улучшить взаимодействие с пользователем, что увеличивает количество посещений веб-сайта и потенциально увеличивает доход и прибыль.
Иконки, как мы все знаем, помогают в визуальном объяснении понятий. Кроме того, они также могут использоваться в качестве отличительных признаков при навигации по веб-сайту, например, для упрощения поиска и отслеживания определенного контента на сайте. В качестве примера предположим, что ваша компания предлагает пять различных услуг, каждая из которых представляет собой отдельный символ на веб-странице. Если новая страница включает в себя тот же логотип службы в основной области, что и предыдущая страница, пользователю будет намного легче понять, в какую службу он или она погружается, после нажатия на один из значков службы.
Большинство символов социальных сетей легко узнаваемы благодаря их распространенности в нашей повседневной жизни. Вам не нужно знать название платформы, чтобы распознать синие символы «F» для Facebook и эмблему синей птицы для Twitter. Вот почему большинство людей также понимают, что происходит, если они нажимают на такие символы на веб-сайте или в электронном письме.
Это фантастический шанс для маркетологов и владельцев компаний использовать символы социальных сетей в своей маркетинговой стратегии. Вы можете использовать их на своей домашней странице, в статьях блога или на веб-сайтах.
Включение кнопок социальных сетей на ваши целевые страницы — отличный способ облегчить посетителям доступ к вашим учетным записям в социальных сетях. Там они могут узнать больше о продуктах и услугах вашей компании.
Получить отзыв
Кнопка обратной связи — это скрытая вкладка на вашем веб-сайте, онлайн-курсе или в веб-приложении. Когда ваши потребители сталкиваются с проблемой или у них есть предложение, они могут использовать кнопку обратной связи, чтобы предоставить вам немедленную обратную связь на странице.
Включение символов кнопки обратной связи для веб-страниц дает несколько преимуществ. Например:
- Привлеките внимание ваших клиентов
- Добавьте очарования вашему веб-сайту
- Покажите вашим потребителям, что вы цените их вклад и заинтересованы в том, чтобы услышать, что они говорят.
- Вместо того, чтобы люди обсуждали проблемы в социальных сетях, обратная связь доставляется через частный канал под вашим контролем.
Список библиотек/источников значков
Вот список значков для веб-дизайна, которые помогут вам обновить веб-сайт:
1. The Noun Project
The Noun Project, одна из самых больших библиотек иконок для коллекций дизайнов веб-сайтов в Интернете, содержит символы практически для всего, что вы можете придумать. Сайт предлагает множество разнообразных символов, созданных разными художниками, поэтому создатели онлайн и приложений могут выбрать отличительные визуальные эффекты, которые потребители не видели сотни раз. Это коллекция символов с возможностью поиска и большим количеством значков.
Особенности:
- Существуют как бесплатные, так и платные варианты загрузки.
- Программа для Mac с наборами значков.
- Практически ежедневно добавляются новые значки.
2.
CanvaCanva — это веб-сайт, который предоставляет своим клиентам бесплатную и платную платформу для дизайна. Тысячи бесплатных иконок на Canva помогут вам улучшить свой дизайн на профессиональном уровне. Библиотека стоковых фотографий Canva полна значков для веб-дизайна, от простых вывесок до знаковых символов, которые вы можете использовать в своих проектах, чтобы передать свое сообщение без использования слов.
Особенности:
- Существуют как бесплатные, так и платные варианты загрузки.
- Доступно для iOS, Windows и даже мобильных приложений.
- Недавно обновленные иконки.
3. Библиотека значков Orion
Orion — это проект Pixeden, целью которого является создание веб-иконок с широкими возможностями настройки, которые можно редактировать прямо из веб-приложения. С помощью веб-приложения вы можете вносить различные изменения в свои символы, в том числе линейные, сплошные, цветные и плоские, и все это в согласованном и точном дизайне.
Если вы точно знаете, что ищете, вы можете использовать окно поиска или просмотреть их пакеты значков, чтобы получить значок для нужного вам дизайна веб-сайта.
Особенности:
- Тысячи бесплатных иконок, и многие другие, если вы перейдете на их профессиональную подписку.
- Лицензия «Атрибуция не требуется» включена в план Pro.
- Чтобы изменить значки, используйте этот простой и понятный онлайн-инструмент.
4. Iconmonstr
Iconmonstr — это библиотека иконок, содержащая более 4000 элементов, разделенных на более чем 300 категорий. Чтобы гарантировать, что их можно использовать в различных дизайнерских приложениях, каждый набор символов включает контуры и заполненные версии изображений. Хорошей новостью является то, что вы можете получить код с веб-сайта, поэтому вам не нужно ничего скачивать.
Особенности:
- Все значки доступны для бесплатного использования.
- Полезный набор символов.
- Можно выбрать один из четырех различных форматов загрузки.
- Они оптимизируют и упрощают значки для использования в Интернете.
5. Freepik
Freepik, как следует из названия, имеет большую коллекцию бесплатных изображений, векторов и значков целевых страниц. Коллекция значков сайта насчитывает более 100 000 изображений, которые посетители могут искать или изучать по теме. Символы варьируются по сложности от простых до сложных с выбором линии, заливки и цвета. Каждый из них имеет свой собственный набор ограничений, когда дело доходит до лицензирования.
Особенности:
- Использование в личных и коммерческих целях бесплатно.
- Значки PNG, EPS и SVG доступны для загрузки.
- Другие векторы и изображения будут готовы к изменению в качестве иконок.
- Регулярно будут появляться новые значки.
6. Flaticon
Эта коллекция содержит более миллиона векторных иконок. Пользователи Flaticon могут загружать бесконечное количество иконок и полностью контролировать элементы дизайна.
Все значки могут быть настроены в соответствии с конкретными требованиями дизайнеров к цвету и размеру. Кроме того, пользователи также могут создавать символьные шрифты для личного и коммерческого использования.
Особенности:
- Доступны как бесплатные, так и платные варианты подписки.
- Каждый месяц будут появляться новые наборы иконок.
- Существует несколько типов файлов на выбор.
- Доступны как растровые, так и векторные значки.
7. Smashicons
Библиотека Smashicons содержит более 175 000 иконок, что делает ее одной из самых полных коллекций иконок для веб-дизайна. В отличие от некоторых других перечисленных библиотек значков, не все эти символы здесь имеют одинаковый дизайн. В результате, если вы хотите сохранить единообразный внешний вид своего веб-сайта, вы должны гарантировать, что все символы, которые вы используете, включены в определенный набор значков.
В отличие от других сайтов со значками, Smashicons требует, чтобы пользователи платили 5 долларов в месяц за использование значков для дизайна веб-сайта.