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

Комментарии

Lisa Hakimova
кого поцеловать в лобик за такую статью?
Процесс разработки UI/UX дизайна и чем он может помочь дизайнеру
Большое спасибо за информацию!!!
18 уроков фотографии для новичков

Статьи по теме

7 комментариев

  • 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

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

  • http://vk.com/id11927668 Юрий Харченко

    Почитал вашу дичь, которую вы несете про вектор и растр. Вы серьезно? По вашим словам все сайты нынче в векторе. А про то что пиксель не может попадать идеально в пиксельную сетку «не, не слышали». В первом случаем толщина квадрата 5pt, во втором 6 pt. Ах и да, это векторные объекты. Есть еще вопросы?

Комментарии для сайта Cackle