Как сделать свои иконки еще лучше. Часть 1

Дизайн 1 819 просмотров 1 0
Рисуешь иконки? Сделай их лучше! Часть 1

Выбор векторов для веб-дизайна — это очень ответственная задача. Любая минимальная деталь может оттолкнуть пользователя, и он просто закроет сайт. Один маленький нюанс, и дизайн сайта уже не выглядит таким целостным. Когда просматриваешь сотни наборов иконок в день, в голове крутится только две мысли «неплохо, но немного не то» и «то, что надо!». Так вот, обычно разница между этими двумя характеристиками минимальная, но она очень здорово влияет на цену набора и может кардинально повлиять на дизайн ресурса в итоге.

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

Как пример была взята иконка с изображением корги. Мило, правда?

На картинке ниже примеры «до/после».

risuesh ikonki sdelaj ix luchshe! chast 1

Три атрибута качества

Обычно, хорошо отрисованные иконки характеризуются тремя свойствами: форма, эстетическая целостность и узнаваемость. При разработке нового набора изображений нужно придерживаться определенного подхода — двигаться от общего (форма) к частному (узнаваемость). Даже если ты создаешь одну иконку, все эти три атрибута должны присутствовать и формировать единый дизайн. Конечно, можно намного больше выделить характеристик, тогда это вызывает вау-эффект. Но неплохо начать и с этих трех.

1. Форма

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

risuesh ikonki sdelaj ix luchshe! chast 12

2. Эстетическая целостность

Разнообразные элементы, которые используются вместе в одной иконке и в их наборе, и формируют эту целостность. Это и закругленные или квадратные края, конкретная величина углов (2 или 4 пикселя), толщина линий (2 и 4 пикселя) и стиль (к примеру, flat), а также цветовая палитра и многое другое. Эстетическая целостность набора — это ряд элементов, которые и связывают твои изображения в маленькую коллекцию. Обрати внимание, приведенные ниже иконки имеют ряд общих черт — это и 2-пиксельные закругленные углы, и носы в форме сердца.

risuesh ikonki sdelaj ix luchshe! chast 11

3. Узнаваемость

Это то, что делает твое изображение уникальным. Успех иконки выражается в том, насколько легко зритель может понять, что она из себя представляет или какое действие описывает. Узнаваемость заключается как и в прорисовке деталей, которые человек ассоциирует в конкретным предметом/животным/действием, так и в довольно неожиданных деталях — например, нос в форме сердца у собаки. Стоит учитывать, что данный аспект должен не только делать твою иконку понятной для зрителя, но и придавать твоему набору уникальность и оригинальность. В связи с этим, эстетическая целостность и узнаваемость являются неразрывными свойствами. Посмотри на изображение ниже. Ты наверняка узнаешь две разные породы собак — корги и хаски, но с другой стороны понимаешь, что эти два изображения являются частью одной коллекции.

icon-design-05-opt

Сейчас мы рассмотрели основные атрибуты качественной иконки. В следующей статье предлагаем разобрать шесть простых шагов, в ходе которых ты узнаешь, как привести эти три свойства к идеалу.

Читай также:

5 правил, которые сделают ваш Landing Page лучше

Упрощение интерфейса: новый тренд в мире мобильного дизайна

Личный опыт: как получить работу дизайнером, не получая образования

comments powered by HyperComments
comments powered by HyperComments

Теги

Об авторе: Sasha

Sasha

Фотограф. Улавливаю прекрасные мгновения в жизни людей :)

Мы Вконтакте

Яндекс.Метрика