Советы по созданию иконок +бесплатный пак иконок

Всем привет, меня зовут Дмитрий Михайлов, я Старший Дизайнер в Lifetime+. Lifetime+ это цифровая лаборатория с быстрым выездом на дом. Комплексный сервис для контроля здоровья и связи с врачом. Как и в любом проекте здесь не обойтись без большого количества иконок. В какой-то момент мне просто надоело отрисовывать иконки по отдельности и я решил создать пак со всеми необходимыми иконками (Который по мере необходимости также будет пополняться)

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

Поехали!

Первым делом нужно определиться со стилем. Если зайти на Dribbble и вбить “icons”, или зайти на тот же flaticon, можно встретить огромное количество иконок в абсолютно разных стилях. У каждого стиля есть своя задача и потребности. Главное чтобы иконки не смешивались и каждый набор следовал своему собственному стилю. Это делается для того, чтобы у иконок был одинаковый визуальный вес и гармоничность.

В моем паке 6 разных стилей: Light (Stroke), Broken, Line two tone, Filled, Two tone, Glass.

Этих стилей более чем достаточно, чтобы покрыть большую часть задач.

Внутри одного конкретного стиля нужно также придерживаться его правил. К примеру в линейных иконках не нужно заигрываться с разной толщиной линий.

Бывают конечно и исключения, когда например для крупных деталей используется толщина линий 2px, а для мелких 1px. Тогда этому правилу должны придерживаться и все остальные иконки в наборе.

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

Чем проще и понятнее иконка, тем лучше.

Т. к. все иконки разного размера, в силу своих особенностей, все они должны находится во фрейме одного размера. Я предпочитаю использовать фрейм 24х24px.

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

Любую иконку можно сделать более оригинальной и непохожей на другие. Например сделать их двух цветными, сломать некоторые грани или же вовсе сделать их стеклянными (Нужно же следовать последним тенденциям)

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

Ну и напоследок мой пак иконок — Figma Community

Если вы узнали что-то новое или статья была вам полезна — жмите ^

А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.

Dribbble | Instagram