Иконки в веб-дизайне

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

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

Рассмотрим использование иконок для обозначения преимуществ магазина спортивных товаров:

Доверьтесь профессионалам:

Гарантия качества. У нас вы приобретете только сертифицированный товар.

Большой опыт работы. Компания на рынке более 10 лет.

Фирменная служба доставки для наших клиентов.

Более 2000 довольных покупателей по всей стране.

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

А теперь попробуем их убрать.

Доверьтесь профессионалам:

Гарантия качества. У нас вы приобретете только сертифицированный товар.

Большой опыт работы. Компания на рынке более 10 лет.

Фирменная служба доставки для наших клиентов.

Более 2000 довольных покупателей по всей стране.

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

Важно правильно подобрать иконки и расположить. Если перенасытить сайт изображениями, либо иконками внимание пользователя поплывет. Использовать значок над каждой фразой крайне не желательно. С помощью иконок мы видим самое важное в тексте, подмечаем детали. Абсолютно весь текст не может быть важным.

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

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

Где брать иконки?

Icons8

Большое количество иконок разных стилей: flat, material design, в пастельных тонах и т.д. Доступны для скачивания в форматах PNG, EPS, SVG, PDF; в разных размерах (можно указать свой). Преимущество сайта в том, что иконки бесплатны. Ограничение лишь на формат и размер. Можно изменять стилистику и размер.

365cons

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

Freepik

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

Iconmonstr

Бесплатный сайт с оригинальным названием. Здесь не нужно указывать авторство и прочую атрибутику. Более 4420 иконок в более 300 коллекций (категорий) доступных для использования в личных и коммерческих целях.

Flaticon

Более 1,5 млн. векторных иконок доступных в PNG, EPS, SVG, PSD и BASE 64 форматах. Вы можете бесплатно скачивать и использовать иконки, но требуется указание авторства. Либо же можно купить лицензию 9,99 евро в месяц.

Подводя итог

Несколько советов для тех, кто собирается работать с иконками:

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

Понравилось? Поделись этим с другими!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.