Дизайн

5 простых правил создания красивых иконок

Статья от практикующего графического дизайнера Senya Ars, в которой он обобщил основные правила создания иконок.

1. Стиль

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

1-HP77v1hCGyJMIkt2jg94ZQby Justas Galaburda

2. Единство

Когда стиль уже есть, и нарисовано несколько иконок, очень важно не потерять общие черты, которые диктует стиль; если это не зацикленные обводки, то они должны прослеживаться на всех иконках. Толщина линий, скругления углов и.т.д.

1-RnGd0HK0pPnZXlPOCcuhYwА если это цветные, не монохромные иконки с множеством слоев, очень важно придерживаться одной цветовой гаммы.

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

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

1-f0AUb87BAfFmnkWfC6zB2g

4. Простота

Образ обьекта или объектов, который вы хотите передать с помощью иконки. В идеале одна иконка на один образ, но бывают случаи когда это невозможно и приходится объединять 2–3 образа в одну иконку. Рецепт такой: ровно столько элементов, сколько требуется, чтобы узнать предмет.

1-RL3XswXqGgOLwT5V2j1GNAОбразы здорового дизайнера

1-Eu4LFU-oMTMeNqWahQZ3YQОбразы курильщика

5. Pixel Perfect

Идеальные пиксели — это ваш пропуск в рай для дизайнеров, это то, о чем вы должны помнить и проверять на протяжении всей работы. Для чего это нужно? Иконки будут иметь четкие линии и границы. Это сделает вашу работу более качественной.

1-McSgqj0faNXtF_srgKcq-g

При кратном увеличении, если все точки стоят на пиксельной сетке, иконки будут выглядеть идеально.

1-vvcP_Bjt6Wbn00Kbt4cL8Q

Источник: designpub

  • http://vk.com/id13878421 Максим Проскурин

    Что еще за пиксели у векторных иконок? Или вы их чудрилы в png собираетесь перегонять????

  • http://vk.com/id291654276 Undefined Undefined

    Думаете у векторных картинок не бывает проблем с растеризацией? К тому же бывают задачи под которые png сохраняет большую актуальность (встраиваемые системы, например)

  • http://vk.com/id13878421 Максим Проскурин

    Время растра ушло. Будущее за вектором (это я про иконки)

  • https://plus.google.com/106768521670166896841 Денис Соколов

    А монитор у вас векторный или растровый?

  • http://vk.com/id13878421 Максим Проскурин

    Монитор UltraHD. А вот на смартфоне и ipad-e я прекрасно различаю где SVG а где растр PNG. И вектор смотрится просто отлично в отличие от пиксельной png графики

  • http://vk.com/id291654276 Undefined Undefined

    Время растра ушло — звучит довольно бредово

Free WordPress Themes