Цветные иконки. Примеры использования иконок в веб-дизайне
Иконки PSD – незаменимый элемент любого дизайна UI , не уступающий по важности даже шрифтам, однако на практике редко кто занимается разработкой собственных иконок для каждого веб-проекта. С другой стороны, на поиск подходящих по качеству и оформлению иконок также уходит немало времени, но сегодня мы решили помочь вам, и подготовили подборку бесплатных наборов иконок на все случаи жизни.
01. Icons8
Icons8 — набор из 20 тысяч плоских иконок в любых форматах, размерах и цвете! Здесь представлены такие категории, как бизнес, одежда, еда и многие другие. Icons8 можно скачать в виде приложения для Mac или в виде ZIP-архива .02. Freepik
Яркая коллекция векторных иконок от специализированного ресурса Freepik – лишь одна из множества представленных. Она идеально подойдет для деловых и независимых проектов. Дополнительно скачать PSD иконки можно в форматах .AI , .EPS и .SVG .
03. Iconfinder
Этот набор, выполненный в черно-белом цвете, содержит комбинацию четких функциональных и эмоциональных векторных иконок. Кроме стандартных иконок этот набор содержит иконки в виде сердец и глаз, что позволит вам придать собственным проектам эмоциональный окрас.
04. 195 flat flag PSD icons
Отличный набор иконок PSD для сайта, который можно использовать при разработке международного сайта, интернет-магазина или блога о путешествиях. В набор входит 195 бесплатных иконок с закругленными углами.
05. Metro UI Icon Set
Если вы фанат Windows 8 , то вам стоит познакомиться с этим бесплатным набором иконок. Он включает в себя 700 хорошо оформленных иконок, которые можно свободно применять в проектах любого типа.
06. Modern UI Icons
Еще один набор бесплатных иконок, который можно использовать при создании пользовательского интерфейса программного обеспечения для Windows или для Android/iOS . Скачав данный набор, вы получите 1000 плоских, созданных вручную, иконок, в том числе даже иконки для шторки приложений в Windows Phone .
07. 350 pixel perfect icons
Невероятный набор из 350 идеально четких иконок для приложений или сайтов. При этом их можно изменять в размере без потери качества.
08. 80 mini icons
80 идеально четких миниатюрных иконок, которые можно скачать как в PSD-формате , так и в виде иконического шрифта. Эти опрятные и утонченные социальные иконки PSD идеально подойдут для проектов любого типа.
09. Simple and practical web icon vector graphic
Множество полезных иконок, которые можно использовать в личных и коммерческих проектах.
10. Free flat icons
Набор иконок, выполненных в плоском стиле, среди которых можно выделить календарь, электронную почту, часы, карты и многое другое.
11. Mono icons
Набор, который включает в себя 108 уникальных монохромных иконок, выполненных в стиле минимализма. Все они доступны в формате PNG при размере 32 на 32.
12. Metrize icons
Бесплатная коллекция в стиле Metro , которые можно использовать в собственных приложениях и веб-проектах. Иконки социальных сетей PSD бесплатны как для личного, так и для коммерческого использования. В архиве представлены не только форматы PSD , SVG , ESP и AI , но также и веб-шрифты.
13. Tab Bar Icons iOS 7
Элегантный набор иконок, разработанных под вдохновением от iOS 7 , который вы можете использовать в собственных приложениях. Скачать иконки можно в следующих форматах: PSD , AI и ESP .
14. Chunky Pika Icon Set
Иконки в стиле Pika , созданные агентством Dutch Icon из Дании. Этот набор включает в себя 42 идеально четких иконки.
15. Iconic
Еще один набор простых, но привлекательных иконок, которые идеально подойдут для минималистических дизайнов. Iconic представляет собой open source набор, который можно скачать в PNG , SVG , SWC и других форматах, что позволит адаптировать их под собственные дизайны.
16. 44 Shades of Free Icons
Набор из 44 иконок. Он содержит PSD иконки для форума, что позволит без труда отредактировать и адаптировать их под собственные проекты.
17. Token icon set
Token включает в себя 128 уникальных иконок, доступных в формате ICO в размерах 16 на 16 пикселей, 32 на 32 пикселя и 256 на 256 пикселей, а также в формате PNG в размере 128 на 128 пикселей. Каждая иконка представлена в темном и светлом вариантах, и дополнена PSD-файлом .
18. Flat icons (PSD)
Пестрые иконки в плоском стиле, которые можно скачать в формате PSD и отредактировать под собственные нужды.
19. Free 32px icons set
Набор, в котором вы найдете иконку PSD любого назначения: Skype , Facebook , Twitter , RSS , чашка кофе, “лайк ” и многое другое.
20. 48 flat designer icons
Если вы фанат минимализма, то этот набор точно вам понравится. Он состоит из 48 бесплатных иконок, отражающих офисные задачи, социальные аспекты, а также путешествия. Все они представлены в форматах AI и PNG , и их можно масштабировать без потери качества.
21. Plex icons set
Набор включает в себя свыше 100 иконок, среди которых календари, антивирус, часы, электронная почта, приложения Microsoft Office , социальные сети, а также многое другое.
22. Vectory mini free
Набор из более чем 1000 иконок PSD , разработанных командой Icojam . Все они представлены также в формате PNG . Они идеально подойдут для использования при разработке нового сайта, так как их можно бесплатно использовать как в личных, так и коммерческих проектах.
23. Eldorado mini free
Очередная коллекция мини-иконок от Icojam , в которой представлено свыше 1200 иконок в размере 40 на 40 пикселей.
Уверен, что красивый набор иконок пригодится всегда. Значки и иконки, при правильном их использовании, являются очень ценным инструментом для дизайнера. Они притягивают наше внимание или обращают внимание на какую-либо вещь. У многих пользователей сайтов функционал запоминается исключительно визуально т.е. с помощью картинок.
Эта коллекция иконок выпущена в помощь дизайнеру. Коллекция абсолютно бесплатна. Пожалуйста, прочитайте лицензионное соглашение перед использованием значков — лицензия может время от времени меняться. Значки также могут оказаться полезными для корпоративных проектов, блогов, интернет-журналов, дневников, интернет-приложений. Пожалуйста, не стесняйтесь предлагать свои наборы иконок в комментариях к данному посту.
Иконки для web приложений.
Chalkwork HTML является бесплатным набором HTML-тематические иконки. Они прекрасно сочетаются со всей семьей иконок Chalkwork. Эти иконки Вы можете устанавливать абсолютно бесплатно для личных и коммерческих целей. Комплект доступен в 3 размерах и 6 форматов: прозрачный PNG, TIF, GIF, BMP, ICO Windows и Mac ICNS.
Иконы рука указатель.
Бесплатные иконы, которые включают 36 рук-указателей, 6 различных типов с 6 цветовыми вариантами. Также имеется исходник.psd формата.
452 иконки свободно доступных для частных и коммерческих целей.
Базовая комплектация.
42 высококачественные иконки в 64 × 64, 32 × 32 × 16 и 16 размеров. Mac OS, Win and .PNG-formats. Mac OS, Win и. PNG-формате.
Эта бесплатный пакет икон предназначен для использования в личных и коммерческих проектов, и должен быть использован без присвоения. Комплект не может быть перераспределен. Комплект включает в себя 26 стильных икон разработанных Midtone Design Studio. Каждая икона является.PNG 48 × 48px. Значки были созданны дизайнером Jonatan Кастро Фернандес.
Комплект Файл статус иконки включает 16 икон, которые могут быть использованы для веб-приложений.
Danish Royalty Free.
Дизайн: Jonas Rask.
Иконы Onebit Set.
80 красивых иконок в резолюции 48 × 48px,. PNG.
Скачать также часть1.
On Stage Icons Set.
Набор содержит 49 свободных векторных иконок, в том числе PSD, которые могут быть полезны для корпоративных и личных проектов. Вы можете использовать набор бесплатно, без каких-либо ограничений. Иконки доступны в формате PNG в резолюции 128 × 128 пикселей. Также включены иконки формата.PSD.
Этот набор содержит 9 браузеров иконок в 64 × 64, 32 и 32 × 16 × 16 пикселей. Включает в себя основные браузеры, как Mozilla Firefox, Internet Explorer, Opera, Google, Chromeи многие другие.
Milky Icons Set.
Набор содержит 131 икону в большинстве своем зеленого цвета, что имеет очень приятный внешний вид для темного фона.
Марк Джеймс (FamFamFam) создал большой набор 1022-гладкую шелковистого цвета 16 × 16 иконы в формате PNG.
В четвертой части «кокеток» добавлено еще 50 икон. Основное назначение этих икон – это добавить любовь и игривость Вашим проектам. Иконки следующих размеров: 16 × 16px, 32 × 32px, 48 × 48px, 64 × 64px и 128 × 128px и 32-битной прозрачности PNG формата файла.
В 5 части «кокетка» содержится 50 высококачественных иконок. Размеры: 16 × 16px, 32 × 32px, 48 × 48px, 64 × 64px и 128 × 128px и 32-битной прозрачности PNG формата файла.
Иконки для e-commerce (электронная коммерция).
Chalkwork платежи доступна в 3 размерах и 6 форматов: прозрачный PNG, TIF, GIF, BMP, ICO Windows и Mac ICNS.
Значки бесплатны для личного использования, а также бесплатны для коммерческого использования, но и дизайнеры требуют ссылок на веб-сайте. The archive contains the icons in all sizes, Windows, Mac and PNG formats. Архив содержит значки всех размеров, Windows, Mac и PNG форматах.
23 значка кредитные карточки бесплатно для свободного скачивания.
Комплект свежих икон.
Этот набор содержит 59 растровых и векторных иконок. В комплект входят иконки в PNG, ICO и ICNS форматов. В EPS векторный файл доступен также.
Полезные наборы иконок.
Набор бесплатных мультимедийных векторных иконок различных цветов и стилей.
Fortune 500 бэджи.
Свыше 200 иконок известных брендов, PSD включены.
Комплект из 50 пассажирских и пешеходных символы, разработанные AIGA теперь доступна в Интернете бесплатно. Есть EPS и GIF формат.
Аудио иконы.
Небольшой набор из 48 × 48px иконы: M-Box, на M-Audio Axiom 25 Midi-клавиатура и монитор TAPCO S5 колонок. Эти иконы являются бесплатными для личного использования. Имеются в.ICNS, .PNG.
Социальные наборы иконок.
Социальные медиа мини упаковка иконок.
Этот набор состоит из 30 (16 × 16) тонко разработанных социальных медиа мини иконок. Они могут свободно использоваться в некоммерческих целях.
Социальные иконки в виде облаков. Формат.PNG.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Набор содержит 16 социальных икон (прозрачной) PNG формата.
Эти иконки содержат Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo and You Tube icons. Все иконы в четырех размерах: 16 × 16, 32 × 32, 64 и 64 × 12 × 128px. И все они являются свободными.
Каждая иконка в формате. JPG и поставляется в двух размерах: 48 × 48px и 96 × 96px. Каждая иконка темносерая на белом фоне.
YouTube, Delicious, RSS, Twitter, Facebook, Flickr, Digg, StumbleUpon, mySpace, Feedburner, Skype, Yahoo, Last.fm, Linkin, Reddit and Gmail.
Dead-Простые Социальный медиа Иконы | Мастер Fidgeter.
Просто, чисто и красиво. 16 × 16px мини-социальных икон.
28 иконок в формате PNG (256 × 256, 128 × 128, 48 × 48, 32 × 32, 16 × 16), ICO (256 × 256, 128 × 128, 48 × 48, 32 × 32, 16 × 16) и ICNS (256 × 256, 128 × 128, 48 × 48, 32 × 32, 16 × 16).
В этот набор входят иконки для Blip.fm, Digg, Facebook, Firefox, Flickr, Meneame, Myspace, Technorati, Twitter, Vimeo, WordPress, Youtube, LastFM, RSS, Blogger, GMail, Reddit and StumbleUpon. Иконки доступны в размерах 24 × 24, 32 × 32, 48 и 48 × 64 × 64. Выпущен под лицензией Creative Commons.
Циркуляр социальные иконы.
ZIP-файл включает в себя 3 размера на 17 иконок: 128 × 128px, 64 × 64px и 32 × 32px. There is an icon for the following: Blogger, Delicious, DesignFloat, Digg, Facebook, Flickr, Google, a heart icon that will work for anything (such as bookmark), MySpace, Reddit, an RSS icon, StumbleUpon, Technorati, Twitter, WordPress, Yahoo! Дизайн Eli Burfordиз Австралии.
Красивые наборы иконок.
Стиль почты.
Коллекция иконок мешочков была разработана Paul Kadysz. Она содержит 5 высококачественных иконок. На этот раз у нас есть 3 различных форматах (. ICO,. Icns и. PNG) и 6 размеров! 512px-16px (except .png). 512px-16px (кроме. PNG). Вот как набор выглядит.
350 бесплатных красивых иконок на рабочем столе, также могут быть использованы online. Дизайн мастер David Lanham.
30 бесплатных иконок, которые имеют размер: 256 × 256, 128 × 128, 64 × 64, 48 × 48, 32 × 32, 24 × 24, 16 × 16 пикселей и форматах PNG, ICO и icns.
Проекты иконок для бесплатного скачивания.
Набор содержит 18 красивых значков, связанных с управлением проектами. Набор включает в себя иконы адрес карты, гистограммы, календарь, часы и времени, конференц-устройство, контакты, документы, проекты, поиск, карта сайта и т.д. Абсолютно бесплатно. Использование для любых целей.
Полезный набор векторных икон (256 × 256 пикселей). Он содержит книги, кисти, пастель, клип, цветные карандаши, документ, ластик, блокнот, палитра, ножницы.
Несмотря на то, что изменения тенденций дизайна пользовательского интерфейса, в этом году не были столь значимыми, как мы наблюдали в предыдущие годы, именно , явно стали более совершенными, более специализированными, полностью охватив и смешав все лучшие стили от ранее популярных иконок.
Возможно, этот год выдался не особо «урожайным» для дизайна иконок, но тем не менее, несколько интересных наборов, которые заслуживают вашего внимания, всё же засветились на горизонте. В этом обзоре предлагаю на рассмотрение 50 лучших(сугубо на мой взгляд) бесплатных коллекций иконок, появившихся в открытом доступе в течении 2017 года. Все наборы абсолютно бесплатные и доступны для скачивания без каких бы то ни было ограничений. Под каждым изображением есть ссылки на ресурсы, перейдя по которым, вы сможете подробно ознакомится с понравившимся набором иконок и при желании скачать.
Контурные или линейные иконки очень популярны в мире веб-разработки, так как отличаются особой простотой форм и минимализмом, не жертвуя при этом информативностью. К тому же, в большинстве своём, представленные пиктограммы можно использовать не только для сайтов, они также отлично подходят для приложений на платформе Android и iOS.
По-настоящему огромная коллекция качественных иконок на все случаи жизни. На сегодняшний день представлено около 60,000 иконок в любом формате, размере и цвете. Библиотека ежедневно обновляется и пополняется, от 3 до 20 иконок в день.
Количество:
60 000 +
Форматы:
SVG, AI, EPS, PNG, PDF, Fonts
Пакет включает в себя 1800 иконок на белом и черном фоне в форматах: .sketch .psd .ai .svg .eps и .png .
Небольшой набор качественных линейных иконок в формате .ai
Бесплатный пакет из 70 векторных иконок в форматах .sketch .ai
Векторные иконки в форматах Ai, EPS и SVG
Хороший набор из 90 бесплатных контурных иконок, а так же представлены иконки со сплошной фоновой заливкой, для Sketch и Illustrator.
Bytesize
Отличный набор бесплатных иконок в формате SVG . Каждый значок кодируется вручную по сетке 32 x 32 и использует штрих SVG, что обеспечивает максимальную гибкость стиля; это означает, что вы сможете настроить вес, цвет, размер и, при необходимости, сделать края иконок округлыми или квадратными.
В наборе представлены 38 контурных иконок популярных инструментов редактора изображений, для свободного скачивания доступны иконки в форматах AI, EPS, SVG и прозрачного PNG (1024px).
Замечательный набор абсолютно бесплатных, контурных иконок в форматах .png .pdf .svg .sketch .ai
Небольшой набор качественных мини-иконок.
Форматы
: AI, EPS, PNG, SVG
Размеры
: 16 x 16, 32 x 32
Иконки на чистом CSS
В этом разделе обзора представлены ресурсы предоставляющие в свободный доступ пакеты иконок разработанные на чистом CSS. Отличная альтернатива использованию изображений в качестве иконок. Для подключения таких библиотек иконок достаточно одного файла.css , также в большинстве своём, данные ресурсы предоставляют возможность подключения наборов иконок напрямую со своих серверов, что достаточно удобно.
В комплекте 512 иконок, библиотека регулярно пополняется.
Небольшая библиотека иконок на чистом CSS.
Наборы красочных разноцветных иконок
Набор из 30 цветных линейных иконок в свежих пастельных тонах. В комплект входят иконки в векторном формате (SVG) и PNG разных размеров.
120+ Бесплатных красочных иконок в формате PSD
Коллекция из 30 плоских изометрических иконок. Все иконки, включенные в набор, полностью редактируются и настраиваются в Illustrator. В комплекте различные размеры PNG.
Форматы
: AI, EPS, PNG
Размеры
: 57px, 114px, 228px, 456px, 912px
Набор из 24 разноцветных иконок с водной спортивной тематикой. Иконки поставляются в формате SVG и разработаны с использованием лёгкой, летней цветовой схемы и оптимальной масштабируемости.
Наборы иконок в материальном дизайне
Такие иконки призваны стать стандартными для приложений, выполненных в унифицированном стиле «материального» дизайна, который Google представила в версии Android 5.0. В то же время, они одинаково хорошо подходят и для Android-приложений, и для iOS, и для веб-приложений.
250 иконок в Sketch формате
Это набор из 900+ иконок Google для приложения Sketch. Все они изначально из библиотеки Google, которая периодически обновляется и пополняется.
Иконки символов и пиктограмм
Бесплатные наборы иконок различных символов и пиктограмм.
Universal Themes — Набор векторных иконок
В комплект входит 100 векторных иконок, которые разработаны с учетом современных требований веб-дизайна, иконки представлены в формате SVG, поэтому вы сможете редактировать, масштабировать и изменять цвет иконок до тех пор, пока не получите нужный вам результат.
Комплект из 90 симпатичных, многоцелевых иконок в форматах .sketch и .ai
Бесплатный набор иконок в форматах PSD, AI, EPS, PDF, SVG, Sketch, Webfont
Хорошо проработанный бесплатный набор из 70 базовых иконок в двух вариантах, для светлого и тёмного фона. Файлы AI и SKETCH в комплекте.
Бесплатная библиотека из 100 шрифт-иконок, также в архиве предоставлены все коды для демонстрационной страницы, форматы веб-шрифтов и.SVG-файлы.
В набор пользовательского интерфейса UI включены 100 векторных иконок, которые разработаны с учетом особенностей пользовательских интерфейсов, иконки в формате SVG, контурные и цветные версии. Вы можете свободно использовать эти иконки в своих личных и коммерческих проектах.
Наборы графических и веб-дизайнерских иконок
Этот набор содержит 33 полностью масштабируемых векторных иконки в контурном стиле. Каждая иконка доступена в EPS, AI, PSD, PNG и SVG форматах.
25 Иконок из категории дизайн фигур
Впечатляющий набор красивых иконок ручной работы, состоит из 25-ти легко редактируемых и готовых к использованию иконок, доступных абсолютно бесплатно. Поставляется в двух цветовых вариантах (mango & icicle) и всех удобных форматах: AI, EPS, SVG и PNG.
Вы можете использовать эти иконки для личных и коммерческих проектов.
Форматы
: AI, EPS, SVG, PNG
Размеры
: 16 x 16, 32 x 32
Набор иконок художественных инструментов
Набор бесплатных иконок содержит векторные файлы в форматах Illustrator AI и.SVG, а также в формате PNG, доступны варианты, как в цветовом, так и в линейном стилях, в 5-ти размерах (32px, 64px, 128px, 256px и 512px)
Иконки представлены во всех удобных для работы форматах: EPS, AI, SVG и PNG.
Комплекты плоских иконок
В этом разделе представлены бесплатные наборы иконок на самую различную тематику в лучших традициях плоского стиля. Использование плоских иконок в дизайне позволит сделать сайт или приложение стильным, современным и более понятным для пользователя.
Blobs
Бесплатный набор из 1000+ иконок в яркой цветовой гамме, представлены в форматах (AI, PSD & SVG)
Flat Line — Набор иконок UX & eCommerce
83 иконки в плоском стиле для пользовательского интерфейса и электронной коммерции
По-настоящему огромная библиотека иконок в различных стилях для личного и коммерческого использования, в том числе большой выбор иконок в плоском дизайне. Бесплатно доступны иконки в разных размерах до 72px и в формате PNG. Вы можете скачать как весь пакет, так и каждую понравившуюся иконку по-отдельности, предварительно выбрав нужный вам размер
Набор иконок для оформления рабочего пространства, представлен в свободный доступ в форматах AI & EPS.
В наборе представлены 70 различных иконок пользовательского интерфейса, в форматах SVG и PNG.
Наборы иконок для бизнеса и электронной коммерции
Набор из 36 бесплатных иконок для банков и денег, эти иконки с плоским стилем идеально подходят для приложений или веб-сайтов, связанных с банковой деятельностью. Иконки представлены в векторных формах(AI, PSD, EPS, PNG & SVG) и следовательно, легко редактируются и изменяются.
Набор выполнен в плоском стиле, в комплекте 50 ярких иконок, охватывающих все основные области электронной коммерции, включая иконки состояния корзины, иконки способов оплаты, доставки, иконки торговых категорий и многое, многое другое. Представлены иконки в двух форматах SVG и PNG, вы можете свободно использовать их в своих личных и коммерческих проектах.
50 красочных иконок в плоском стиле по бизнес тематике, представлены в форматах AI и SVG, поэтому их можно бесконечно масштабировать, не теряя при этом качества изображения, идеально подойдут для адаптивных веб-дизайнов. Вы можете свободно использовать их в своих личных и коммерческих проектах.
Бесплатный набор из 40 векторных иконок по теме электронной коммерции. Бесплатная версия содержит файлы форматов Adobe Illustrator (.ai), PDF и Encapsulated PostScript (.eps).
Наборы иконок на погодную тему
Пакет иконок погодной тематики, содержащий 30 замечательно отрисованных иконок в форматах .png и .sketch . Отлично впишется в дизайн приложений и веб-сайтов о погоде.
Большой пакет шрифт-иконок CSS с 222 иконками погоды, готовыми к подключению в Bootstrap или любой другой проект, для которого нужны высококачественные метеорологические иконки. Набор регулярно обновляется и пополняется.
Конечно, представленные в подборке ресурсы, это лишь малая часть всего многообразия дизайнерских разработок представленных ранее и появившихся в течении этого года. Популярные и давно хорошо себя зарекомендовавшие ресурсы, в большинстве своём не нуждаются в представлении, так что в данном обзоре попытался выделить сравнительно новые и качественные работы. Надеюсь кому-нибудь пригодится.
С Уважением, Андрей
Грамотно расставленные акценты на сайте помогают дизайнерам и маркетологам завладеть вниманием пользователя и направить их на целевые действия: покупку, связь с менеджерами или просто понимание предоставленной информации. Одним из таких инструментов являются иконки - изображения, которые используют для обозначения какой-либо информации. В этой статье мы расскажем о значении иконок в веб-дизайне на конкретных примерах, как правильно выбрать и использовать их на сайте .
Зачем дизайнеры используют иконки
Даже самые маленькие детали на сайте имеют значение для дизайна. Иконки - это не только экономия места на экране, но и установление связи с клиентом. Использование иконок упрощает восприятие информации, ведь привычные образы вызывают ассоциации с определенными действиями. Рассмотрим пример использования иконок для обозначения преимуществ магазина мебели:
Если мы уберем сопутствующие изображения, скорость восприятия меняется:
С иконками достаточно окинуть взглядом экран, чтобы понять, о чем идет речь и что нам хочет предложить компания. Грузовик традиционно обозначает доставку, а иконка документа - сертифицированную продукцию. Во втором примере нужно вчитываться в текст, чтобы понять смысл. Это происходит потому, что человек мыслит образами. Пользователь связывает картинки с ассоциациями, которые они вызывают, и тем самым воспринимает информацию.
Еще одна функция иконок - помощь пользователю сориентироваться в интерфейсе . Есть несколько универсальных символов, которые используются в дизайне для направления пользователя, например:
- значок лупы означает поиск информации;
- иконка дома ведет на ;
- картинка сердца или звезды - избранное;
- нажав на изображение флага можно поменять язык на странице;
- силуэт человека в шапке сайта ведет в личный кабинет;
- иконка тележки означает добавление товара в корзину или переход на страницу оформления заказа.
Такие изображения добавляют на сайты интернет-магазинов для облегчения покупки:
С помощью иконок клиент не теряется на новом ресурсе и понимает, какие действия он может сделать.
Как с помощью иконок повысить конверсию сайта
Как любой контент на сайте иконки требуют продуманного подхода. При правильном использовании изображения могут стать еще одним инструментом повышения конверсии и управлением поведением покупателей. Что можно сделать для стимулирования продаж?
1. Привлечь внимание к преимуществам компании
Посещая сайты мы привыкли «прокручивать» страницы. Иконки помогают пользователю обратить внимание на важную информацию и задержаться взглядом на особенностях компании и персональных предложениях. Например, на бесплатной доставке или прилагаемых к заказу подарках.
Информация о работе магазина, условиях оплаты и доставки формирует доверие у клиента и убеждают сделать выбор в пользу этого магазина, а не его конкурента.
2. Расскажите, как сделать заказ или как работает компания
Чтобы новые клиенты знали по какому алгоритму работает магазин или оказываются услуги, расскажите об этом с помощью иконок:
Так вы сэкономите место на сайте и клиенту не нужно будет читать полотна текста, чтобы понять как сделать заказ.
3. Расскажите о товаре с помощью изображений
В карточки товаров можно добавлять не только текстовые описания, но и изображения для обозначения характеристик или дополнительных параметров. Как сделать идеальную карточку читайте .
4. Выделяйте акции и специальные предложения, а также нужные категории товаров
Чтобы посетитель сайта обратил внимание на акцию или нужный раздел, добавляйте иконки. Например, с помощью красных изображений, список акций становится намного заметнее:
Также с помощью иконок и различных плашек можно выделять нужные категории товаров, популярную продукцию, товары со скидками, новинки и прочее.
Какие иконки используют в дизайне
Использование самых разнообразных иконок, отличных по размеру, стилю, цвету и расположению является распространенным приемом среди дизайнеров. Обычно мы встречаем иконки на главном экране под большим слайдером, на страницах «услуги» или «контакты», в шапке сайта. Из-за такого разнообразия возникает вопрос: какие иконки лучше использовать для дизайна? Рассмотрим виды иконок и постараемся ответить на этот вопрос.
Линейные
Это иконки, которые состоят из линий или контуров. Строгие и минималистичные изображения используются как для навигации, так и в информационных блоках. Линии могут быть тонкими или толстыми, иногда изображения заливают однотонным цветом. Одна из особенностей применения таких картинок - необходимость создать условия, чтобы они не потерялись на странице среди окружающего контента.
Линейные иконки сочетаются как со строгим деловым стилем, так и придают дизайну сайта изящность и лаконичность .
Иллюстрации
Вместо тонких линий и ясных контуров используют специальные цветные рисунки. Такие картинки придают сайту красочности, бросаются в глаза при просмотре страницы.
Иллюстрации разрабатываются дизайнерами в стилистике сайта, рисуются специально для каждого проекта. Иконки такого стиля способны оживить дизайн, придать «свежести» и индивидуальности . Небольшие иллюстрации можно смело использовать как самостоятельные элементы, они будут заметны среди основного контента. Еще больше примеров использования иллюстрированных изображений можно посмотреть .
Объемные
Некоторые веб-дизайнеры отходят от трендов «плоского» и минималистичного дизайна и используют вместо иконок самостоятельные изображения. Это могут быть вырезки из фотографий продукта или тематических картинок.
Такой подход следует использовать с осторожностью, чтобы не перегружать дизайн сайта лишними изображениями и отвлекать клиента от целевых действий. Если использовать объемные иконки, остальные элементы не должны быть нарисованными и мешать стилевому единообразию сайта.
Простые элементы
В некоторых случаях на сайт размещают не картинки, а простые геометрические фигуры или цифры, чтобы не загромождать дизайн элементами. В этом примере дизайнеры решили оформить самые распространенные вопросы клиентов пунктами:
А здесь вместо картинок использовали простой элемент галочку:
Такие иконки не отвлекают внимание пользователя от основной информации, но и не «цепляют» взгляд.
Шрифтовые иконки
Это особый вид иконок, который подключается к сайту как шрифт, у которого вместо символов векторные изображения. Плюс таких иконок - возможность изменять цвет, тени, размеры и другие свойства CSS. Пример данного вида - шрифт FontAwesome.
Иконки встраиваются в HTML код как обычный класс с именем «fa» с помощью тегов или . Пример использования:
Где «address-book» - название иконки-книжки. Изображения удобно использовать для обозначения мелких элементов, например, на странице «контакты», в формах или в меню.
Примеры использования иконок в веб-дизайне
Мы разобрались, как иконки различаются по стилистике и методам внедрения. Теперь рассмотрим деление элементов по назначению на реальных примерах.
Иконки для навигации
С помощью иконок пользователь всегда знает как перейти к формам заказа, в личный кабинет, к поиску или просмотру понравившихся товаров.
Информационные иконки
Иногда иконки используются, чтобы о чем-то рассказать клиенту: о продукции, компании или предоставить полезную информацию.
Такой контент прост для восприятия и побуждает пользователя воспользоваться услугами компании или купить предложенный товар. К этому пункту также можно отнести информацию о принципах компании, интересных фактах о товарах и прочее.
Социальные доказательства
Клиентам важно, что кто-то покупает товары магазина, обращается за предлагаемыми услугами. Это заставляет их верить, что продукция качественная и пользуется спросом. Через иконки можно донести до посетителей сайта информацию о количестве купленных товаров, опыте работы компании и прочее:
Исследования агентства Wider Funnel показывают, что размещение на веб-сайтах элементов социального доказательства повышает продажи в 9 из 10 случаев. Поэтому такой прием можно считать инструментом увеличения конверсии интернет-магазинов и продающих сайтов .
Призыв к действию
Иконки встраивают в контент, который приводит пользователя к целевым действиям на сайте:
В этом примере рассказывается об этапах работы, которые отмечены порядковыми номерами и небольшими иконками для привлечения внимания и структурирования информации. У первого действия расположена кнопка с призывом оставить заявку на сайте.
Разделы каталогов
Чтобы разделить одну категорию товаров от другого и вызвать ассоциации с определенным продуктом, иконки используют в оформлении разделов каталога:
Таким образом каталог не превращается в простой список товаров, каждая категория выделяется из общего перечня продуктов .
Социальные кнопки
Продвижение в социальных сетях - одно из маркетинговых направлений многих компаний. Чтобы магазин часто мелькал в лентах пользователей и напоминал клиентам об акциях, на сайте размещают значки социальных сетей с ссылками на группы и страницы:
Эти иконки узнаваемы, поэтому на них обращают внимание и присоединяются к группам и сообществам, через которые можно призывать клиентов к новым покупкам.
Фильтры
Иконки можно использовать в фильтрах для товаров. Узнаваемые изображения помогут клиентам сориентироваться в каталоге и выбрать нужный продукт или услугу:
Например, в интернет-магазине кофе сделали фильтр по способу приготовления и добавили иконок, чтобы клиент мог понять незнакомые термины и выбрать нужный товар.
Применение иконок в веб-дизайне помогает клиентам воспринимать информацию и привлекает внимание к важным моментам на сайте . Рассмотрим основные правила использования иконок, чтобы дизайн веб-страницы выглядел гармонично и был удобным для посетителей.
Создавая иконки для клиентов, дизайнеру важно не только учитывать ее назначение, но и соответствие изображений общему стилю веб-сайта и окружающему контенту. Как правильно использовать иконки в ?
1. Иконки должны быть узнаваемыми и ассоциироваться с окружающим текстом
Основное предназначение иконки - облегчить пользователю восприятие текста. Выполняет ли изображение свою функцию зависит прежде всего от того, насколько понятно посетителю, какой объект или действие эта картинка обозначает.
Например, если вы собираетесь обозначить доставку товара земным шаром, будут ли ассоциироваться перевозки с планетой? Этот значок подойдет для клиентов, находящихся далеко от офиса компании, но что, если ваш пользователь проживает в вашем городе? Поэтому при создании иконок нужно думать в первую очередь о целевой аудитории .
Тот же самый вопрос связан с возрастом ваших клиентов. К примеру, вы обозначаете написание комментария печатной машинкой - если основными посетителями являются школьники, узнают ли они данный символ? Клиент не должен думать о значении картинки, смысл должен быть понятен с первого взгляда.
2. Дополняйте иконку текстом
Само по себе изображение несет в себе только декоративную функцию. Чтобы придать значку смысл, рассказывайте о том, что она обозначает.
Если вы используете несколько иконок одновременно, они должны быть согласованы друг с другом, чтобы не получилось так:
Иконки должны создавать стиль, а не нарушать его. В данном примере мы видим три «нарисованных» изображения и одно строгое и лаконичное. Оно выбивается из общего ряда и нарушает согласованность интерфейса.
4. Прозрачный фон облегчает восприятие
Использование прозрачного фона увеличивает скорость восприятия. Цветной фон создает визуальный шум, из-за которого иконки кажутся одинаковыми. Сравните:
При просмотре иконок с синим фоном вместо мгновенного понимания, что нарисовано на картинке, приходится всматриваться и различать образы. Это схоже с чтением текста, где тоже приходится напрягать зрение и понимать смысл. Поэтому использование непрозрачного фона облегчает визуальное восприятие и легче интерпретируются посетителями страниц.
5. Используйте векторную графику, если это возможно
Применение векторной графики в веб-дизайне значительно упрощает работу дизайнеру - не теряет в качестве после изменения размеров, можно с легкостью поменять цвет и другие параметры, а также эффектно использовать анимацию. Больше о векторе в вебе можно узнать .
В веб-дизайнеры уделяют особое внимание деталям - самостоятельно отрисовывают иконки, кнопки, формы, создавая индивидуальный стиль для компаний и интернет-магазинов. Обращайтесь к нам и мы разработаем для вас уникальный ресурс, где будут гармонично сочетаться основной контент и декоративные элементы.