Создание иконок. Зачем? А главное как?

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

Что точно есть у хорошей иконки?

Идея – пользователь, даже не читая подписи к иконке, должен однозначно понимать, что данная иконка означает. Да, это бывает весьма непросто, особенно когда речь идет о создании иконок для узкоспециализированных сайтов. Разделы «двухсторонние шипорезные станки» или «абстрактное самосознание» заставляют немного задуматься над идеей для иконки. А кто говорил, что будет легко?

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

Детализация – несмотря на то, что иконки, как правило, маленького размера, подходите к их созданию как к полноценному проекту. Игнорирование мелких деталей непременно ухудшит впечатление.

Рецепт создания весьма прост:

1. Определяемся с концепцией и стилем

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

Цветные / монохромные — цвет должен соответствовать стилю и тематике, лучше расставляет акценты и привлекает внимание; монохромные — делают дизайн более «легким», при наличии большого количества информации помогают не перегружать проект.

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

Большие/маленькие – от размера иконок напрямую зависит уровень детализации.

2. Рисуем скетчи-наброски

После того, как определились со стилем начинаем делать скетчки-наброски иконок, искать образы. На наш взгляд, более продуктивно изначально рисовать скетч на бумаге, т.к. это помогает быстрее и проще вносить изменения (поверьте их будет много), а также продумывать детали, над которыми надо будет работать в будущем. Скетчи предварительно можно показать заказчику, согласовать концепцию, внести правки на начальном этапе.

3. Ограничение количества цветов

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

4. Соблюдаем единство стиля

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

5. Масштабирование

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

Конечно, как и в любых правилах, при создании иконок тоже бывают исключения. И, к примеру, яркая и пестрая цветовая гамма будет оправдана в данном проекте. Или клиент хочет именно так, а никак иначе… но грамотное взаимодействие с клиентом это уже тема другого поста.

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

https://www.flaticon.com
Одна из самых больших коллекций, найдете практически все, что придет в голову.

https://icons8.ru
Более 86 тысяч бесплатных иконок в любом формате.

https://iconmonstr.com
Приличная коллекция в классическом черно-белом стиле.

https://www.pixeden.com/free-icons-set
Наборы иконок различных размеров в png формате. Не всегда удобно при масштабировании, советуем использовать формат svg.

http://pixelsmarket.com/tag/icons/
Агрегатор, с ссылками на сайты, где можно найти бесплатные иконки неплохого качества.

http://www.graphicsfuel.com/category/icons/
Различные наборы цветных иконок на любую тему.

Следуйте нашим советам, если решили создать что-то действительно интересное, а главное качественное. Обращайтесь к нам за помощью, если что-то пока еще не получается.

А для тех, кто дочитал до конца, бонусом бесплатные иконки «рост полезной микрофлоры».