Перевод статьи Скотта Льюиса из Iconfinder о том, как можно улучшить дизайн иконок и на что смотрят инспекторы при проверке.
Когда я проверяю иконки, загруженные на Iconfinder, я несу ответственность перед нашими дизайнерами и нашими клиентами, я должен убедиться, что все иконки премиум-класса на сайте имеют максимально возможное качество. Но разница между «не достаточно хорошим» и «премиальным качеством» часто очень мала и обычно предполагает минимальные изменения. В этой статье я изложил свои рекомендации по дизайну в виде восьми простых шагов. Эта статья должна рассматриваться как рекомендации и руководство, а не как догматическая книга правил. Опытный дизайнер знает, когда он или она может нарушить эти правила.
В примерах иллюстраций, приведенных в этой статье, я переделаю иконку собаки (точнее, корги), которую недавно отправил пользователь Iconfinder по имени Кем Бардли. Иконка была недостаточно хороша для Премиум, поэтому я предоставил Кему несколько простых указаний, и с небольшой переработкой изображение было готов к утверждению в качестве иконки для коллекции Премиум.
Три атрибута дизайна иконок
Хорошо продуманные иконки соответствуют методическому и продуманному подходу к трем основным атрибутам, которые составляют любой дизайн. При разработке нового набора иконок я рассматриваю каждый из этих атрибутов в итеративном подходе. Даже если я создаю только одно изображение.
- Структура — структура является формой, лежащей в основе изображения. Если проигнорировать детали иконки и нарисовать линию вокруг основных фигур, образует ли они квадрат, круг, горизонтальный или вертикальный прямоугольник, треугольник или более органичную форму? Самые успешные иконки следуют простым, узнаваемым рисункам или формам. Основные геометрические фигуры — круг, квадрат и треугольник — создают визуально устойчивую основу для дизайна.
- Характер — символ значка состоит из элементов, которые используются в одной иконке или в сете. К этим элементам относятся такие вещи, как закругленные или квадратные углы, вес линий, стиль (плоский, линия, заполненная линия или глиф), цветовая палитра и многое другое.
- Идентичность. «Идентичность» иконки — это ее сущность или то, что делает иконку уникальной. Идентичность определяет, работает ли она или нет. Краеугольным камнем того, насколько хорошо работает иконка, является распознавание или ясность: насколько легко зритель распознает объект, идею или действие, которое он изображает.Характер и идентичность часто пересекаются. Элементы идентичности, используемые несколькими иконками, становятся частью характерного сета.
Восемь шагов
Шаг 1. Всегда начинайте с сетки
Для целей этой статьи мы будем использовать сетку 32 х 32 пикселя. Сетка, которую я использую, также содержит несколько направлений для создания основной формы, которой я следую для каждого дизайна иконок.
Внешние 2 пикселя моей сетки — это то, что я называю «запретной зоной». Я избегаю попадания какой-либо части иконки в это пространство, если это не является абсолютно необходимым.
Частью структуры иконки является общая форма и ориентация. Если нарисовать линию вокруг внешних краев значка — форма обычно будет квадратом, кругом, треугольником, горизонтальным прямоугольником, вертикальным прямоугольником или диагонально-ориентированным прямоугольником.
Круглые значки расположены по центру сетки. Круглые иконки обычно касаются всех четырех внешних краев области содержимого, но не переходят в «запретную зону» (но есть распространенный сценарий нарушения этого правила, если какой-либо акцент или второстепенный элемент значка выходит за пределы круга).
Квадратные значки также центрированы в сетке, но в большинстве случаев не расширяются до самых внешних краев области содержимого. Посмотрите на изображение Square Layout ниже. Есть три концентрических квадрата, обозначенных голубым, оранжевым и светло-зеленым. Большинство моих иконок будут выровнены по квадрату посередине (оранжевый на рисунке ниже). Выравнивание по каждому квадрату, определяется визуальным весом самой иконки, и требуется лишь практика, чтобы понять, когда и какой размер использовать.
Внутри 32-пиксельного квадрата вы заметите вертикальные и горизонтальные прямоугольники размером 20 на 28 пикселей. Я свободно следую этим прямоугольникам для иконок, которые имеют горизонтальную или вертикальную ориентацию, и стараюсь ориентировать размеры любых значков таким образом, чтобы они соответствовали размерам этих прямоугольников с размерами 20 на 28 пикселей.
Диагонально ориентированные значки выровнены по краям круглой области содержимого, как показано на рисунке ниже. Обратите внимание, что крайние точки пилы приблизительно выровнены по краям круга. Это та область, где вам не обязательно быть точным.
Помните, что вам не нужно следовать сетке и руководствам точно каждый раз. Сетка предназначена для того, чтобы помочь вам сделать ваши иконки непротиворечивыми, но если стоит выбор между созданием классной иконки и соблюдением правил, нарушайте правила — просто делайте это осторожно.
Шаг 2. Начните с простых геометрических фигур
Разрабатывайте иконки так же, как вы рисуете эскизы: сначала создавая грубую форму основных фигур с помощью простых кругов, прямоугольников и треугольников. Даже если моя иконка окажется в основном органической по природе, я начну с инструментов формы в Adobe Illustrator. Когда дело доходит до создания значков, особенно для экранов маленького размера, незначительные вариации краев, возникающие из-за рисования от руки, делают значок менее изысканным. Начало работы с базовыми геометрическими формами помогает сделать края более точными (особенно вдоль кривых), помогает быстро настроить относительный масштаб элементов в проекте и гарантирует, что я следую своей сетке и форме.
Шаг 3. Углы, изгибы и края
Насколько это возможно, без придания дизайну чрезмерной механической и скучной формы, углы, изгибы и края должны быть математически точными. Другими словами, ориентируйтесь на цифры и не пытайтесь измерять на глаз или от руки, когда дело доходит до этих деталей. Несоответствие в этих элементах может снизить качество иконки.
Углы
В большинстве случаев я придерживаюсь углов 45 градусов или кратных. Сглаживание под углом 45 градусов происходит равномерно (активные пиксели выровнены вплотную), поэтому результаты получаются четкими, а идеально диагональная природа этого угла представляет собой легко распознаваемый рисунок, который очень нравится человеческому глазу. Этот узнаваемый шаблон обеспечивает согласованность набора иконок и единство стиля. Если я должен нарушить это правило, я пытаюсь делить пополам (22,5, 11,25 и т.д.) или кратно 15 градусам. Каждый случай индивидуален, поэтому я принимаю решение, которое следует использовать в каждом конкретном случае. Преимущество использования углов в 45 градусов состоит в том, что шаг в сглаживании все еще довольно равномерный.
Изгибы
Одна из наиболее заметных областей, которая может ухудшить качество иконки и создать разницу между Premium / professional и любительским внешним видом — это изгибы (кривые). В то время как человеческий глаз может обнаружить очень незначительные отклонения в точности, рисованием от руки не всегда может достичь высокого уровня точности. Я полагаюсь на геометрические формы и цифры как можно чаще, чтобы создавать кривые, а не пытаюсь рисовать их вручную. Когда мне нужно создать изгибы вручную, я использую клавишу Shift или, что еще лучше, плагины VectorScribe и InkScribe от Astute Graphics для еще более точного управления моими кривыми Безье.
Края
Я не всегда использую закругленные края, но когда я делаю это, я обычно использую радиус 2 пикселя. Но значение, которое нужно выбирать, зависит от стиля, в котором вы хотите рисовать ваши иконки. Я использую 2-пиксельные края, потому что углы четко закруглены, но не настолько сильно, что это придает иконкам более «пузырьковый» вид. Используете ли вы закругленные углы или нет, это эстетическое решение, которое будет принято как часть общего стиля сета.
Шаг 4. Pixel-perfection
Pixel-perfect в наши дни является популярным модным словом в дизайне иконок и пользовательских интерфейсов, но это важно, особенно при проектировании для экранов небольшого размера. Сглаживание по краям иконки при небольших размерах может сделать рисунок нечетким. Пространство между линиями, которое не выравнивается по пиксельной сетке, будет сглаженным и станет размытым. Выравнивание иконки по пиксельной сетке делает края идеально четкими на прямых линиях и более четкими на точных углах и кривых. Как я упоминал выше, углы в 45 градусов являются вторыми лучшими по сравнению с прямыми линиями, поскольку пиксели, используемые для определения угла, располагаются друг над другом идеально по диагонали. То же самое верно для краев и изгибов: чем математически точнее, тем четче будет сглаживание. Однако следует отметить, что «пиксельное совершенство» является менее важной проблемой, по крайней мере для сглаживания, для больших размеров и для дисплеев с более высоким разрешением, таких как ретина.
Шаг 5. Толщина линий
Когда дело доходит до толщины линий, я считаю, что толщина в 2 пикселя идеальна, но 3 тоже может иногда быть необходимо. Более 3 пикселей и сет может потерять свою сплоченность. Я предпочитаю 2 пикселя и 4 пикселя толщину линий. В идеале я стараюсь, чтобы размеры были кратны 2 пикселям. Иногда отдельная деталь значка может потребовать нарушения этого правила, но я стараюсь придерживаться его как можно больше. В большинстве случаев следует избегать очень тонких линий, особенно в стилях glyph и flat. Если вы намеренно не создаете иконки в линейном стиле, вам не следует полагаться на тонкие линии для создания форм. Вы должны полагаться на свет и тень, чтобы определить формы.
Шаг 6. Используйте согласованные элементы дизайна и отличительные признаки на иконках
Хеммо де Йонге из Dutch Icon выступил с блестящей речью на Icon Salon 2015, в которой подробно рассказал об этом элементе дизайна иконок. В своем двух-летнем проекте по созданию иконок для правительства Нидерландов, Хеммо и его партнер по дизайну включили в каждую иконку «засечку». Не у каждой иконки есть засечка, но у большинства есть. Этот отличительный признак, используемый консервативно, но последовательно в наборе иконок, действительно может помочь связать сет.
Шаг 7. Не перегружайте иконки деталями и декором
Иконки должны быстро отображать объект, идею или действие. Слишком много мелких деталей вносят сложность, которая может сделать иконку менее узнаваемой, особенно при меньших размерах. Уровень детализации, который вы включаете в один значок или в набор иконок, также может быть важным аспектом характера и идентичности. Хорошее эмпирическое правило для определения правильного уровня детализации в иконке состоит в том, чтобы включать только минимальное количество деталей, необходимых для прояснения смысла.
Шаг 8. Добавьте уникальность
Кажется, что число очень талантливых дизайнеров иконок, создающих действительно высококачественные сеты, многие из которых доступны бесплатно, растет с каждым днем. К сожалению, многие из этих дизайнеров слишком сильно полагаются на следование существующим тенденциям или копирование стилей самых популярных дизайнеров. Как творческие профессионалы, мы должны смотреть за пределы индустрии на архитектуру, типографику, промышленный дизайн, психологию, природу и на любую другую область, которую мы можем найти. Поскольку в наши дни очень много наборов иконок выглядят одинаково, еще важнее сделать дизайн уникальным. Уникальность также помогает сделать значки более узнаваемыми, что является важным аспектом идентичности.
Эти простые шаги следует рассматривать как отправную точку, а не как окончательное руководство. Не существует единого способа дизайна иконок. В этой статье я изложил основы моего собственного подхода к дизайну, но у других дизайнеров, безусловно, есть свои мнения и методы. Лучший способ стать хорошим дизайнером — это смотреть как можно больше материала, читать много статей, регулярно делать наброски (я всегда ношу с собой свой альбом для рисования), а также практиковаться, практиковаться, практиковаться.
[ratings]
Последнее изменение: 5 февраля 2020 в 19:03.