Создание иконок, разрушающих языковой барьер

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

Вот почему в музыкальных плеерах есть перемотка назад, вперед, и иконка “play”; вот почему таможенный контроль аэропорта включает иконку c офицером; и почему три линии известны как “гамбургер меню”.

3 простых совета по улучшению иконки приложения

Создание иконок

Создание иконок – это процесс, в котором вид линий, форм и пространства определяет, насколько хорошо покажут себя иконки по отдельности и в составе группы. Линии должны быть одинаковыми по толщине, одинаково соединены (с одинаковыми углами, скруглением и так далее). Когда это возможно, повторяйте одинаковые формы, углы и негативное пространство. Например, если комплект иконок включает скругление  всех углов в 4px, сохраните это правило для всех остальных иконок – используете вы Illustrator или Sketch, или выбираете иконки на The Noun Project.

Иконки в коде

SVG и CSS анимации позволяют создавать хорошие иконки для любого сайта, и не мешают работе файлов шрифтов. Вы можете пойти несколькими путями: использовать SVG, чтобы создать динамичные, игривые анимации, или менять цвета через CSS с помощью hover. Самое лучшее в SVG то, что вам не нужно постоянно экспортировать пиксельные картинки для адаптивных сайтов, что улучшит их интерактивность.

Вот 3 сайта с отличными иконками:

The St Louis Murmuration FestivalСоздание иконок

Восхитительный сайт, созданный для фестиваля, с тонкими, минималистичными и достаточно понятными иконками.

Grosse LaterneСоздание иконок

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

Austin City Limits FestivalСоздание иконок

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


Перевод с Creating web icons that break the language barrier

Автор оригинального текста Sam Kapila


Понравилось прочитанное? Не забудьте поделиться с друзьями: