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

Dmitry Mikhaylov — Sun, 17 Apr 2022 15:42:05 +0000

Кто я и почему об этом пишу?

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

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

Поехали!

Стиль

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

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

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

Соблюдайте правила внутри стиля

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

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

Простота

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

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

Используйте фреймы

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

Детализация

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

Не бойтесь экспериментировать

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

Нарушайте правила

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

Бесплатный пак иконок

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

Спасибо!

Если вы узнали что-то новое или статья была вам полезна — жмите клапс 👏 (можно несколько раз).

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

Dribbble | Instagram

UXPUB 🇺🇦 Дизайн-спільнота: Dmitry Mikhaylov