Что такое «иконка» (значок, пиктограмма) в графическом дизайне?

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

В инфографике, презентации или на сайте иконки:

помечают важную информацию,

наделяют информацию эмоциями,

помогают быстрее ориентироваться.

Стили иконок

• веб 2.0 — яркие цвета, закругленные углы, отражения, градиенты;
• скевоморфизм — подражание реальным объектам (кожа, дерево, ткань), объемные элементы;
• минимализм — минимум цветов, чаще черный/серый, нет объема, теней, градиентов;
• плоский (flat) — яркие цвета, отсутствие объема, теней, градиентов.

Виды иконок

полые / сплошные — линейная обрисовка формы, пустая внутри или форма с заливкой цветом;

цветные / монохромные — цвет соответствует стилю и тематике, монохромные — чаще всего серые или черные;      

тематические — рисованные, гранж, ретро, футуристические, «мультяшные» и т.д.

Форматы иконок

Растр — распространен, прост в использовании, масштабируется точками

• JPEG — тяжелый файл, непрозрачный фон
• PNG — легкий файл, прозрачный фон (универсальен для презентаций и инфографики)
• GIF — анимация

Вектор — менее распространен, непрост в использовании, масштабируется без потерь качества

• SVG — анимация, изменение цветов отдельных элементов
• AI — популярен, масштабируется

Размеры иконок

3 полезных совета по работе с иконками:

• единый стиль для всех иконок в одной презентации или инфографике (см. стили и виды иконок);
• выбирайте оригинальные иконки и наборы;
• используйте только там, где это необходимо (не используйте просто «для красоты»).

3 вредных совета по работе с иконками:

• скачивайте иконки по отдельности на разных сайтах;
• используйте стандартные (шаблонные иконки), которые видели уже тысячу раз;
• главный принцип в работе: «Чем больше иконок, тем лучше».

3 способа искать иконки:

• вкладка «картинки» в браузере, кнопка «клип-арт»;
• тот же поиск на английском языке выдает гораздо больше результатов;
• специализированные сайты на русском и английском языке.

14 сайтов с бесплатными иконками:

• iconbird.com
• ru.freepik.com
• www.smashingmagazine.com
• www.flaticon.com
• www.behance.net
• pixelsmarket.com
• www.graphicsfuel.com
• www.icojam.com
• mariodelvalle.github.io
• graphicsbay.com
• iconmonstr.com
• www.iconfinder.com
• www.webalys.com
• www.streamlineicons.com

 

Icons made by Vectors Market from www.flaticon.com