Дизайн иконок: Поэтапное руководство по созданию иконок / Хабр

Содержание

11 бесплатных наборов иконок для дизайнеров — Дизайн на vc.ru

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

К счастью, вам не нужно рисовать иконки самостоятельно — в большинстве случаев можно воспользоваться готовыми наборами. Представляем вашему вниманию несколько отличных наборов иконок, которые вы можете использовать на своем следующем лендинге. А самое лучшее в них то, что они еще и бесплатны!

1. 730+ прозрачных иконок

Этот огромный набор из 730+ иконок для UI в форматах SVG, PNG64 и Iconfont может оказаться очень полезным для многих дизайнерских проектов. Он охватывает все основные тематики: базовые (файлы, папки, Wi-Fi, батареи питания и даже значок дискеты), музыка, коммерция, ПО, стрелки, погода… Если вы ищете полный набор прозрачных иконок, это то, что вам нужно.

2. Travel-иконки

Этот набор иконок имеет различную цветовую гамму и дизайн, в том числе и простые плоские дизайны, которые гарантированно подойдут любому сайту, UI/UX или другому дизайн-проекту travel-тематики. Они станут идеальным решением для заголовков разделов, описаний преимуществ и других категорий контента, а необычный дизайн «от руки» поможет выделить ваш дизайн среди конкурентов.

3. Эго-иконки

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

4. Набор иконок азиатской кухни

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

5. Набор космических иконок

Лучшие бесплатные коллекции векторных иконок / Хабр

Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.

Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face, SVG, EPS, AI, PSD, Sketch.

В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.

Responsive Icons (100 иконок, PSD, AI, EPS, SVG)

Icon-Works (130+ иконок, Webfont)

Feather (130 иконок, PSD, SVG, Webfont)

Linea (730+ иконок, SVG, Webfont)

Icony (100 иконок, SVG, PSD)

Free iOS Icons Pack (100 иконок, PSD, Webfont)

Touch Icons (340 иконок, PSD, AI, SVG)

Simple Line Icons (100 иконок, AI, EPS, SVG, PSD)

Themify Icons (320+ иконок, SVG и Webfont)

Elegant Line-Style Icons (100 иконок, AI, SVG)

Pixeden Icon Font Pack (170 иконок, Webfont)

Summer and Essentials Icon Set (50 иконок, EPS, AI, PNG)

Webicons (100 иконок, AI, EPS)

Stroke Icons (80 иконок, PSD, AI, Webfont)

Microns (231 иконок, SVG, Webfont)

Outlined Icons (150 иконок, PSD, SVG, AI, Webfont)

LineIconSet v1.0 (200 иконок, EPS)

Someicons (153 иконок, EPS, SVG)

Universal Icons (100 иконок, SVG)

Flat Color Icons (300+ иконок, SVG)

Iconia (100+ иконок, Webfont)

Typicons (336 иконок, SVG, Webfont)

Geoph (80 иконок, AI, PSD)

Evil Icons (70 иконок, SVG)

Stroke Gap Icons (200 иконок, AI, PSD, SVG, Webfont)

Unigrid (100 иконок, AI)

Amenities (100 иконок, EPS, PSD)

Elegant Icons (360 иконок, Webfont)

Lightwing (60 иконок, Webfont)

Tonicons (500 иконок, EPS, Sketch, Webfont)

Epic Icons (1000+ иконок, Webfont)

Lynny Icons (900+ иконок, EPS, AI)

Helium (100 иконок, AI, EPS, SVG, Webfont)

Essential Icons (77 иконок, EPS, PSD, AI, SVG)

Dripicons (95 иконок, Webfont)

Cinema (200 иконок, SVG)

Open Iconic (200+ иконок, SVG, Webfont)

Twig (100+ иконок, SVG, Webfont)

MFG Labs Iconset (160+ иконок, Webfont)

PrestaShop Icons (300+ иконок, EPS, Webfont)

Subway (300+ иконок, Webfont)

Entypo (400+ иконок, Webfont)

Fundation Icons (100+ иконок, Webfont)

Ionic Icons (~750 иконок, Webfont)

Material Icons (~1000 иконок, SVG, Webfontg)

Font Awesome (1000+ иконок, Webfont)

Squid Solid, Flat and Line Icons (150 иконок, EPS, AI, PSD, SVG)
Roundicons (60 иконок, PNG, SVG, EPS, PSD, AI)

Retinaicons (200 иконок, AI)

Swifticons (92*3 иконок, EPS, AI, PSD, Sketch SVG)

Ballicons 2 (36 иконок, PNG, SVG, PSD)

Больше спасибо всем за внимание.

7 основных принципов в дизайне иконок

В одном из разделов нашего блога вы можете найти и скачать бесплатные иконки сгруппированные по десяткам разных тематик и стилей. А сегодня мы решили поделиться с вами полезными советами по созданию собственных материалов. По аналогии со статьей про основные виды кнопок пользовательского интерфейса, думаем, вам будет полезно посмотреть наиболее важные признаки качества и ключевые характеристики дизайна иконок: лаконичность, читабельность, простота, выравнивание и др. (всего 7 штук).

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

Четкость

Основная задача той или иной иконки – оперативно передавать информацию.


Панель приборов автомобиля Prius Prime

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

Ясность этих символов уменьшается по шкале так:

Сложно разобраться с иконкой, в которой используется незнакомый вам смысл. Сигнальная лампочка, отвечающая за «ремень безопасности» (3-я слева) вполне очевидна. А вот значок «система управления с электроприводом» (крайний справа) более запутан.

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

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

Стрелочка – важный и самый популярный знак в системе навигации:

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

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

Читабельность

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

Многим пользователям программы Amtrak  будет непросто расшифровать иконку приложения «вокзал» (самая первая), так как ее сделали достаточно мелкой. У Transit аналогичная проблема — их «расписание» имеет слишком маленькое расстояние между изображениями папки и зажима:

Небольшая правка значительно улучшает ситуацию (ниже увеличен отступ для зажима):

Работая с несколькими фрагментами/объектами внутри иконки, обязательно оставляйте пространство между ними. Тонкие линии (и чем их больше) утяжеляют рисунок, и его сложнее расшифровать.

Авторы карт Google Maps проделали отличную работу в этом направлении — все символы читабельны даже при маленьком размере экрана:

Выравнивание

Для сбалансированного вида иконки, возможно, придется делать оптическое выравнивание ее элементов.

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

Аналогично тому, как работники типографии вносят мелкие правки в структуру шрифта дабы создать оптической иллюзию баланса (

точки выходят за пределы центра над буквами «i» и «j», а буква «О» немного выходит за границы):

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

Вывод: не ориентируйтесь лишь на одни цифры, доверяйте своим глазам.

Лаконичность

Идея, выраженная с помощью всего лишь нескольких слов, эффектна и элегантна. Вот вам фраза:

Обучая других тому, что знаете, вы углубляете свое понимание темы.

Однако можно сказать буквально то же самое в сжатой форме:

Когда один преподает, учатся двое.

Красиво и ёмко!

Сервис Material наглядно демонстрирует данный принцип в своей документации по юзабилити. Вместо использования:

Есть вариант пиктограммы для сайта попроще:

Краткость просто необходима при создании иконок, ведь очень часто приходится работать с экранами маленьких размеров. Старайтесь подобрать правильное количество деталей для своего рисунка, не стоит ими напрасно злоупотреблять.

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

В некоторых случаях интерфейс требует более красочного стиля иллюстраций. Например, детализированные значки на вебсайте Yelp – отличный способ показать популярные запросы поиска еды/ресторанов. Креветка, изображенная на иконке тайской кухни, просто восхитительна:

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

Согласованность (последовательность)

Чтобы вся коллекция иконок выглядела гармонично, нужно придерживаться единой стилистики при ее создании. До появления операционной системы iOS 13 иконки Apple содержали символы с разной шириной линий, размерами и заливкой:

Взгляните на пример выше. Не выглядят ли некоторые объекты тяжелее остальных?

Каждый из значков архива обладает неким «визуальным весом», что может быть определен следующими параметрами: форма, размер, наполненность и толщина штрихов. Использование одинаковых характеристик в рамках одной коллекции иконок и обеспечивает ее целостность.

Недавно компания Apple скорректировала свои наработки и презентовала набор SF Symbols, отличное дополнение к шрифту San Francisco. SF Symbols тяготеет к более графическому стилю. Включает в себя несколько разных вариантов реализации тех или иных символов. Причем от значка к значку, их контуры и заливки стали гораздо гармоничнее.

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

Набор Phosphor насчитывает более 700 элементов. Несмотря на то, что каждый символ имеет индивидуальную форму, все они одинаково «весят» и отлично сочетаются друг с дружкой:

Индивидуальность

У всех профессиональных архивов иконок есть свой характер. В чем его уникальность? Как он характеризует бренд? Какое настроение передает?

Всеми любимый интерфейс программы Waze полагается на свой дизайн. Их цветные объемные изображения очень причудливы.

Значки Twitter мягкие, легкие и четкие:

Картинки из редактора Sketch изысканные и воздушные (визуально напоминает красочные иконки Icojam):

Смайлики из Freemojis просто очаровательны:

Соответствующие коллекции для Android создают самые разнообразные настроения на вашем экране. Здесь и абстракция, и пиксели, и пузырьки, и неон:

Простота использования

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

Организация

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

Документирование

Сформулируйте ключевые положения вашего архива иконок.

Для примера рассмотрим принципы Phosphor:

  • Четкость. Все должно быть понятно, символы читабельны и узнаваемы. Что бы вам ни хотелось продемонстрировать, никогда не жертвуйте внятностью изображения.
  • Лаконичность. По возможности используйте минимум деталей. Стиль Phosphor очень прост. Каждая линия должна нести в себе определенный смысл.
  • Индивидуальность. Проявите оригинальность. Добавьте немного неповторимых штрихов, чтобы освежить картинку.

Список технических требований для него:

  • Размер элемента 48×48 пикселей.
  • Выравнивание по центру 1,5px.
  • Закругленные концы.
  • Рисуйте сплошные линии (т.к. ломаные обычно сложные для восприятия).
  • Используйте прямые элементы, идеальные дуги и 15° угловые приращения.
  • Если нужно, корректируйте изгибы.

По возможности делайте общедоступную онлайн-документацию.

Тестирование

Проверьте согласованность элементов между собой. Удостоверьтесь, что иконки нормально смотрятся в контексте и при соответствующих размерах. Чтобы проверить основные принципы дизайна иконок (четкость, выравнивание, лаконичность, читабельность и согласованность), расположите их рядом.

Инструменты

А если у вас есть возможность, реализуйте дополнительные инструменты/сервисы для упрощения работы с вашим набором. Так, иконками Material легко пользоваться благодаря специальной онлайн библиотеке. Она позволяет легко отыскать нужный вам объект, загружать разные темы оформления (стили), выбирать форматы, а также цвета и размеры материалов:

Создатели коллекции Font Awesome хоть и пренебрегли некоторыми принципами, однако сделали свои иконки максимально доступными для рядовых пользователей. Они предложили несколько методов работы: с помощью библиотеки, CDN, шрифта иконок и SVG. Еще один крутой инструмент здесь – публичное обсуждение, помогающее определить самые востребованные для внедрения объекты + информация о тех, что еще находятся в процессе разработки.

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

15 лучших и крупнейших библиотек иконок / Блог компании Edison / Хабр

В этой статье ознакомимся с 15 лучшими и крупнейшими доступными библиотеками иконок для веб-сайтов. Многие из них предлагают тысячи, а то и миллионы пиктограмм, так что обязательно найдётся именно то, что нужно.

Сразу уточняем: это не 15 самых лучших библиотек, а 15 из лучших. Разумеется, есть и другие, не менее замечательные, о которых я не упомянул или не знаю.
И, нет, это не рейтинг — список маркированный, а не нумерованный.


Перевод сделан при поддержке компании EDISON.

Мы занимаемся доработкой и сопровождением сайтов на 1С-Битрикс, а также делали сайты и приложения для Московского ювелирного завода.

Мы очень любим создавать и поддерживать сайты! 😉










The Noun Project — это громадная библиотека иконок, количество коих, по слухам, перевалило за 2 миллиона. Всё это создано самими участниками — у проекта огромное активное сообщество, к которому можно присоединиться.









iconmonstr — это библиотека значков, предлагающая более 4-х тысяч иконок, распределённых в три с лишним сотни различных коллекций. Библиотека поддерживается одним человеком. Очень круто, что SVG-версии можно получить в виде HTML-кода прямо на сайте, так что скачивание необязательно.









Good Stuff No Nonsense — и это библиотека, также созданная кем-то единолично. Всё отрисовано вручную.









Унифицированные иконки на Orion предлагаются в 4-х стилях:
Line, Solid, Color и Flat.
Адаптируется к любому типу проекта посредством изменяемой толщины линий, контролем цветности и отличной читаемости.









Доступный и как веб-сайт и как приложение, IcoMoon предлагает более 4 тысяч бесплатных иконок и автономное хранилище для них. Каждый пакет имеет подробное лицензирование, так что дизайнерам и разработчикам сразу ясно, на каких условиях возможно использование. Пользователи также могут создавать свои собственные шрифты из значков.









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









Когда дело касается разнообразия в выборе — Icons8 трудно превзойти с его ежедневно пополняемым легионом из более чем 85-ти тысячи значков. Чтобы найти нужную графику, можно поискать по тегам или же полистать какие-либо из 50+ имеющихся тематических коллекций.









Под два миллиона бесплатных векторных пиктограмм в форматах SVG, PSD, PNG, EPS или ICON FONT. Тысячи тысяч бесплатных значков в крупнейшей базе векторных иконок по свободной лицензии от Flaticon!

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









Ну и куда уж без Font Awesome, возможно, самой известной библиотеки иконок.









iconscout — это миллионы различных иконок на всевозможные темы, которые только возможно придумать. Здесь пользователи могут создавать собственные значки и делиться ими, а также составлять коллекции, которые потом могут просматривать другие посетители.









Iconfinder в настоящее время — одна из крупнейших библиотек с более чем 3-мя миллионами бесплатных и платных иконок, объединённых в более чем 25 тысяч наборов.








PixelLove — это более 5 тысяч иконок для платформ iOS и Android, предназначенных для дизайнеров, создающих мобильные сайты и приложения. Все иконки доступны в различных размерах пикселей.









Streamline Icons — это 10+ тысяч пиктограмм с тремя разными значениями толщины линий (Light, Regular, Bold).

53 категории, 720 подкатегорий и более 30 тысяч иконок.









Graphic Burger — это специализированный сайт, предоставляющий большое количество бесплатных и платных иконок и других графических элементов. Все значки хорошо оптимизированы, совместимы со всеми видами веб-сайтов и приложений. Разнообразие очень велико, можно выбрать значки, подходящие практически для любой темы.









Smashicons предлагает чрезвычайно насыщенную коллекцию с 175+ тысячами иконок. Однако, в отличие от некоторых библиотек, упомянутых выше, не все значки соответствуют одному и тому же стилю. Поэтому, если нужно чтобы веб-сайт/приложение имели единообразное оформление, стоит убедиться, что все требуемые пиктограммы содержатся в определенном наборе значков.

Три простых совета, которые помогут улучшить Ваш дизайн иконок / Хабр

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

1. Дизайн иконки должен быть узнаваемым


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

Иконка — это первая возможность для общения с пользователем, чтобы по первому взгляду можно было понять, цель вашего приложения. При проектировании иконки, имейте в виду очень важный момент: иконки обмениваются идеями с помощью метафорических ассоциаций — пользователь связывает иконку с определенным объектом или действием — и если этот объект или действие не сразу понятно для пользователей, он просто не работает. Таким образом, просто необходимо сделать свои иконки интуитивно понятными:
  • Не используйте абстрактные значки, так как абстрактные значки редко работают хорошо. Пользователь может и не опираться на предыдущий опыт, чтобы понять смысл значка. Иконка Game Center — отличный пример этой проблемы. Сама иконка — это группа красочных, стекловидных кругов. Это выглядит красиво, но люди обычно удивляются, и в недоумении гадают, что же означает эта иконка.image
  • Используйте иконки, которые легко узнаваемы потребителями. Есть несколько иконок, которые пользуются всеобщим признанием пользователей, такие как Дом, печать, лупа, конверт. Например, значок приложения Gmail использует конверт, который повсеместно ассоциируется с почтой.image

2. Стремитесь к минимализму


Найдите элемент, который отражает суть вашего приложения, и оставьте этот элемент, убрав все лишнее. Однажды великого итальянского скульптора Микеланджело Буонарроти спросили: — «Как вы делаете свои скульптуры?». В ответ на это он сказал: — «Я беру камень и отсекаю всё лишнее». То же самое и происходит с иконками. Уберите все лишние детали, которые не важны для вашей иконки, и она обретет смысл.

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

  • Не добавляйте на иконку несущественные слова, которые будут повторять имя приложения или говорить людям, что делать с вашим приложением, как «смотреть» или «играть», или вовремя акции добавить такую информацию, как «бесплатно». Используйте слова только когда они действительно необходимы или если это часть логотипа.image
  • Не добавляйте фотографические детали, потому что их трудно увидеть при малых размерах.image
  • Не используйте 3D модели на иконки приложений.image

Баланс в деталях важнее в оформлении вашей иконки и интуитивно понятный:
  • Когда вы используете конкретный объект для вашего значка, который выделяет несколько характеристик.
  • Дизайн иконки, который сразу же привлекает внимание и передает всю суть приложения.image

3. Проверьте свои иконки на различных фонах


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

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

  • В примере ниже иконка «Stocks» едва различима на темном фоне.image
  • Убедитесь в том, что ваш значок непрозрачен.image
  • Попробуйте свои значок на реальном устройстве с динамическим фоном.

Заключение


Теперь потребуется время, чтобы создать красивый и привлекательный значок, который прекрасно представит ваше приложение.

10 ошибок в дизайне иконок / Хабр

Интересная статья от Денис Кортунов, про главные ошибки в дизайне иконок.

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

#1 Недостаточная различимость иконок

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

Иконки из раздела Utilities в Mac OS X. Я постоянно путаю их и запускаю не то приложение.

Проблема усугубляется, если включен мелкий размер отображения значков.

#2 Слишком много элементов в одной иконке

Чем иконка проще и лаконичнее, тем лучше. Очень желательно, чтобы количество объектов в одной иконке было бы минимальным.

Но дизайнеры компании Microsoft, вдохновленные новым форматом иконок в операционной системе Windows Vista, решили не мелочиться и нарисовали «на все деньги»:

Каждая иконка являет нам мини-историю с закрученным сюжетом. Проблема только в том, что в мелких размерах совершенно нельзя понять что нарисовано. Да и в крупном размере воспринять иконку не просто.

#3 Лишние элементы

Иконка должна легко «читаться». Чем меньше на ней элементов, тем лучше. Желательно, чтобы значимым было все изображение, а не только его часть. Поэтому необходимо обращать внимание на контекст, в котором будут использоваться иконки.

Возьмем для примера набор иконок для работы с базой данных:

На первый взгляд все вполне прилично.

Но если в приложении (или в отдельном тулбаре) все действия происходят только с базой данных, то мы можем (и должны) убрать незначимую часть:

Смысл не потерян, но значки стали более различимыми.

Вот реальный пример использования лишних элементов в иконках BeOS 5:

Галочки тут совершенно не нужны. Кстати, почему они красные?

#4 Нет стилевого единства набора

Именно общий стиль объединяет несколько иконок в набор. Объединяющими факторами могут быть: цветовая гамма, перспектива, размер, техника рисования или же комбинация этих свойств. Дизайнер может держать эти правила в голове, если иконок в наборе немного. Если же иконок много и над ними работают разные дизайнеры (например, иконки для операционной системы), создаются специальные инструкции. В этих инструкциях подробно описывают, как нарисовать иконку, чтобы она гармонично вписалась в набор.

Буйство стилей в файле shell32.dll из Windows XP. Именно этот набор иконок предлагается по умолчанию пользователю, который хочет сменить иконку.

#5 Ненужная перспектива и тени в мелких иконках

Прогресс не стоит на месте: в интерфейсах появилась возможность использовать полупрозрачность, пропали ограничения на количество цветов, плюс появилась мода на трехмерность. Но пошло ли это не пользу? Не всегда! Особенно, если речь идет о иконках размером 16×16 и меньше.

Для примера возьмем менеджер приложений из GNOME 2.2.0 (RedHat 9):

Перcпектива в иконках такого маленького размера совершенно не нужна и даже вредна.

А вот менеджер приложений из Windows XP:

По стандарту иконке в Windows XP положена двухпиксельная черная тень. Но в размере 16х16 тень получается слишком большой и выглядит «грязно». Особенно неудачно выглядит иконка Address book.

#6 Слишком оригинальные метафоры

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

Примером такой излишней оригинальности может служить иконка корзины в OS/2 Warp 4, которая не корзина вовсе, а шредер.

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

#7 Нет учета национальных и социальных особенностей

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

Предположим, нам нужно нарисовать иконку приложения для работы с электронной почтой. Логично использовать метафоры реальной бумажной почты. Например, почтовый ящик.

Изображения позаимствованы из статьи про почтовые ящики в Wikipedia.

Ответ можно найти в руководстве по созданию иконок для Mac OS X: используйте универсальные и легко узнаваемые изображения. Не фокусируйтесь на второстепенных аспектах элементов. Пример: для иконки электронной почты предпочтительнее будет использовать изображение почтовой марки, чем трудноузнаваемого почтового ящика.

Идея с маркой отличная, но изображение орла — крайне спорный момент. Хороших вестей такая птичка не принесет.

Однако, нужно учитывать не только национальные особенности. Позволю себе вспомнить один курьезный случай. Была нужна иконка фильтра данных, метафорой для которого зачастую является воронка, её и нарисовали:

Ответ клиента был таков: «Мне не совсем понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!».

#8 Изображения реальных элементов интерфейса в иконках

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

Хочешь переключить radiobutton, а нажимается вся иконка!

Или вот интересный пример из интерфейса браузера OmniWeb:

Обратите внимание на кнопки «Previous» и «Next». Редкий вид кнопок с подписями снизу! Ой! А они и не кнопки вовсе, а иконки!

#9 Текст внутри иконок

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

#10 Мимо пикселей

Как правило, эта проблема появляется, если рисовать иконки в векторном редакторе. В большом размере все выглядит красиво и четко. Но в реальности иконки мелкие и при растеризации анти-алиасинг «размывает» границы объектов.

Источник — http://turbomilk.ru/
Или с мого блога — http://mmaxis.info/

3241 дизайн пакетов значков — Пакеты векторных значков — SVG, PSD, PNG, EPS и шрифт Icon

  • Авторы
  • Пакеты
  • Дополнительные инструменты

    Прочие товары

    Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрации

    Инструменты

    Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

    Google Suite

    Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
  • английский
    • Español
    • английский
    • Deutsch
    • Português
    • 한국어
  • Стать автором
  • Стоимость
  • Бесплатная регистрация
  • Логин
Авторизоваться регистр Редактировать профиль
  • Загрузки

    Что это?

  • Моя подписка
  • Следующий
  • Служба поддержки

  • Выйти
You look great! фильтры

Тип

Значок

пак


Лицензия

Все

Свободно

Премиум


Кураторское содержание

Выбор FlaticonНовинка

Сортировать по

,

501 дизайн пакетов значков пользовательского интерфейса — Пакеты векторных значков — SVG, PSD, PNG, EPS и шрифт Icon

  • Авторы
  • Пакеты
  • Дополнительные инструменты

    Прочие товары

    Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрации

    Инструменты

    Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

    Google Suite

    Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
  • английский
    • Español
    • английский
    • Deutsch
    • Português
    • 한국어
  • Стать автором
  • Стоимость
  • Бесплатная регистрация
  • Логин
Авторизоваться регистр Редактировать профиль
  • Загрузки

    Что это?

  • Моя подписка
  • Следующий
  • Служба поддержки

  • Выйти
You look great! фильтры

Тип

Значок

пак


Лицензия

Все

Свободно

Премиум


Кураторское содержание

Выбор FlaticonНовинка

Сортировать по

,

661 пакет значков для веб-дизайна — Пакеты векторных значков — SVG, PSD, PNG, EPS и шрифт Icon

  • Авторы
  • Пакеты
  • Дополнительные инструменты

    Прочие товары

    Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрации

    Инструменты

    Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

    Google Suite

    Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
  • английский
    • Español
    • английский
    • Deutsch
    • Português
    • 한국어
  • Стать автором
  • Стоимость
  • Бесплатная регистрация
  • Логин
Авторизоваться регистр Редактировать профиль
  • Загрузки

    Что это?

  • Моя подписка
  • Следующий
  • Служба поддержки

  • Выйти
You look great! фильтры

Тип

Значок

пак


Лицензия

Все

Свободно

Премиум


Кураторское содержание

Выбор FlaticonНовинка

Сортировать по

,

дизайнов значков приложений, тем, шаблонов и загружаемых графических элементов на Dribbble

×
  • Проводить исследования
    • Выстрелов

      Вдохновляйтесь дизайнами, которые поделились нашим талантливым сообществом
    • Лучшие дизайнеры

      Посмотрите рейтинги и узнайте, какие дизайнеры в тренде
    • Блог

      Удивительные интервью с лидерами индустрии дизайна, учебные пособия и многое другое
    • Еженедельная разминка

      Присоединяйтесь к веселью и проявите свои дизайнерские навыки с нашей еженедельной подсказкой
    • Плей-офф

      Смотрите снимки, над которыми треплются другие дизайнеры, и участвуйте сами
      • Команды
      • Продажа товаров
      • Встречи
      • Магазин Dribbble
      • О Dribbble
      • Объявить
  • Дизайнерам
    • Доска объявлений

      Найдите работу дизайнера своей мечты на Dribbble
    • Внештатные проекты профессионал

      Эксклюзивная доска проектов, идеально подходящая для фрилансеров и агентств.
    • Go Pro

      Для дизайнеров и дизайнерских команд присоединяйтесь к лучшим дизайнерам мира на Dribbble.
  • Нанять дизайнеров?
    • Укажите мою вакансию

      Опубликуйте свою открытую вакансию на доске объявлений №1 в мире для креативщиков
.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *