UXPUB

UXPUB - сообщество из 2,369 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Советы по созданию иконок +бесплатный пак иконок
Dmitry Mikhaylov
Dmitry Mikhaylov

Опубликовано

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

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

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

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

Поехали!

Стиль

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

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

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

Image description

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

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

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

Image description

Простота

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

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

Image description

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

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

Image description

Детализация

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

Image description

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

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

Image description

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

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

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

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

Image description

Спасибо!

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

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

Dribbble | Instagram

Обсуждение (0)