12 советов для икон дизайнера

В работе дизайнера, часто могут понадобиться иконки, которые нельзя скачать на стоках или сайтах по типу Flaticon. Например, вы не можете найти какую-то иконку, или клиент требует от вас оригинальный сет. А еще вы можете брать индивидуальные заказы на создание иконок, и неплохо на этом зарабатывать. Умение самостоятельно рисовать хорошие иконки, всегда пригодится в работе дизайнера. Для этого не обязательно обладать навыками иллюстратора. Нужно всего лишь соблюдать несколько простых правил. Итак, поехали!

Определитесь со стилем

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

Все иконки в наборе должны быть в одном стиле

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

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

Смысл иконки должен быть понятным для пользователя

Используйте сетку

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

Все иконки должны иметь одинаковые пропорции и размер

Соблюдайте толщину линий

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

Толщина линий у всех иконок должна быть одинаковой

Скругленные углы

Если в ваших иконках скруглены углы, например 2 px., следите за тем, чтобы этому правилу следовали все другие иконки. Может показаться что это мелочь, но это так же придаст набору органичность и единство формы.

Если у ваших иконок скругленные углы, то этому правилу должен подчиняться весь набор

Детализация

Чем меньше размер иконок, тем меньше должна быть детализация. Тогда иконка не будет сливаться в цветовое пятно. Делать иконки детализированными или минималистичными решать вам, но, если у ваших иконок высокая детализация, желательно применять более тонки линии.

Чем меньше размер иконки, тем меньше должна быть детализация

Цвет

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

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

Добавьте особенности

Что бы еще больше объединить ваш набор в одно целое, вы можете добавить какую-то фишку вашим иконкам. Например, разомкнутые линии контуров.

Мелкие детали, еще больше объединят ваш набор

Как сделать иконки более оригинальными

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

Экспериментируйте со стилем, и его сочетаниями

Используйте целые числа в размерах

Используйте только целые числа в размерах, чтобы при экспорте в растр, ваша иконка была четкой и не размытой. Желательно привязать их к пиксельной сетке.

Правильный экспорт

Не забывайте об экспорте иконок. Перед экспортом нужно перевести все контуры в кривые, и объединить фигуры. Не лишним будет оставить исходный файл с контурами, чтобы иконки можно было легко отредактировать.

Как можно заработать на иконках

Вы можете превратить создание иконок в дополнительный доход. Это можно сделать, продавая свои иконки на таких сайтах как Iconfinder, Iconscout или Noun Project.

Надеюсь эти простые советы помогут сделать ваши иконки гармоничными и неповторимыми. Спасибо за прочтение!

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sergei Tikhonov

Sergei Tikhonov

UI design | Illustrations | Icons https://dribbble.com/DizSergei

More from Medium

Why Responsive Design is Vital for Your Digital Publishing Business?

Miller’s Law

Making my first logo

How to Animate 3D Stikbots Using Mixamo