Как вставить иконку? / Дизайн-советы

Собрал для вас самые частые ошибки при работе с иконками: презентация, сайт, карточка товара, афиша, банер, объявление в подъезде – если вы хотя бы раз ставили в макет пиктограмму, то эта статья для вас.

ОБЪЯСНЯЕМ НА ПЧЁЛКАХ

Вот вы опять сидите делаете презентацию.

Или делаете креатив для соц.сети. Или комментируете визуалы на чужом сайте.

Или может вы делаете меню для кафе.

Как понять, нормально сделано или нет?

Особенно, если вы сами ничего в этом не понимаете. Что в целом нормально.

Не можем же мы разбираться во всём?

ВЖАЛЕННЫЙ

МАКЕТ

Как понять плох ваш макет или нет? Если там есть иконки - то сразу смотрим на них. Если на макете хотя бы одна иконка стоит вот так - у меня для вас плохие новости. Это вжаленная иконка. Как и макет

В ЧЁМ

ПРОБЛЕМА-ТО?!

Здесь проблема не одна, а целых четыре.

Вы удивитесь, но все они встречаются повсеместно.

Например, если вы читаете этот пост на паспортном контроле в аэропорту, то посмотрите на то, как выглядит макет на экране про «снимите обложку с паспорта» или «список запрещенных к ввозу предметов». Уверен, вы поймете о чём я говорю.

ЛИШНИЙ ФОН?

ПРОБЛЕМА Nº1

Иногда мы так спешим поставить иконку в макет, что мы быстро ищем её в интернете, находим, ставим и забываем, что там могут быть какие-то артефакты, водные знаки, псевдо-пнг, и один пятачок знает, что ещё. Фон можно добавлять, но осознано, и только тогда, когда нужно как-то отбить иконку уже в контексте вашего макета.

ПОПЛЫЛО?

ПРОБЛЕМА Nº2

Нравится ли вам есть холодный стейк, или пить капучино на прокисшем, или может быть вы фанат разбавлять гель для душа водой, чтобы «осталось наподольше?» Если нет, то не надо кормить глаза людей низкокачественными картинками. Это неуважительно.

Присмотритесь, не поплыло ли? Если поплыло, познакомьтесь с SVG-форматом иконок. Это улёт.

РАЗНЫЙ СТИЛЬ?

ПРОБЛЕМА Nº3

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

ВСЁ РОВНО?

ПРОБЛЕМА Nº4

«Это какие-то неправильные пчёлы». А ещё лица команды, логотип вашей компании, фото продукта, и даже фотография. Многие люди плющат всё подряд и не краснеют. Чтобы понять, что чувствуют все остальные, просто возьмите свою фотку и сплющите.

Как вам? В общем, пропорции - это очень важно!

ДЛЯ ТЕХ, КТО ВЕРИТ В КРАСОТУ

ЛИШНИЙ ФОН?

Следите за фоном иконки. Делайте «подложку» осознано.

РАЗНЫЙ СТИЛЬ?

Иконки должны быть как из коробочки или одного улья

ПОПЛЫЛО?

Кажество иконок и разрешение должно быть на высоте.

ВСЁ РОВНО?

Плющить и вытягивать иконки не надо. Больно им и всем вокруг.

Вывод:

Иконки - это святое!

Не оскорбляйте чувства ваших клиентов.