Сетки и ключевые формы: руководство по созданию гармоничных иконок

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

«Порядок — это базовый компонент жизни, независимо от того, восстаете ли вы против него, нуждаетесь в нем или игнорируете его». Улисс Фолкер

Введение 

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

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

Всемогущие сетки
Олимпийская пиктограмма, авторы: Отл Айхер и Герхард Йокш (1972)

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

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

Иконка для интерфейса Macintosh, автор: Сьюзен Кэр (1984)
Ключевые формы
Ключевые формы в руководстве Google Material Design

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

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

Иконка Google Material, нарисованная на основе круга
Помощь, а не ограничение

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

Строим сетку

Сетка состоит из 4 основных элементов: 

  • фрейма, который обозначает границы рабочей области; 
  • безопасной зоны по периметру фрейма; 
  • основной сетки, которая задает базовое выравнивание и пропорции; 
  • дополнительной сетки, которая обеспечивает более высокий уровень детализации и свободы.
Фрейм 12x12px

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

Безопасная зона — 1px

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

Основная сетка 12x12 модулей

Основная сетка — базовый каркас, определяющий общую композицию и пропорции иконок. Благодаря ей все иконки в наборе строятся по одним и тем же правилам и выглядят гармонично. Основная сетка состоит из модулей.

Дополнительная сетка 24x24 подмодулей

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

Определяем ключевые формы

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

Ключевые формы, выровненные по сетке 24x24

Круги и квадраты. Чтобы иконки смотрелись гармонично, круги должны быть немного больше квадратов. Аналогичное правило действует в типографике — буквы «О» чуть-чуть выступают за пределы строк, что создает ощущение баланса.

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

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

Соотношение ключевых форм

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

Практические примеры

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

Иконки из набора Micro

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

Иконки из набора Sharp

Sharp — более сложный набор на основе сетки 24x24px. Все иконки — простые, геометричные, с острыми углами. Такой подход позволяет максимально точно следовать сетке — мы просто заполняем нужные модули, что выглядит резковато, но очень аккуратно. Если вам интересен такой строгий подход, познакомьтесь с набором Sharp здесь.

Иконки из набора Flex

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

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

Иконки Core Line, до и после применения ключевых форм

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

Иконка, подогнанная под ключевую форму

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

Отступление от ключевых форм

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

Иконки из наборов Core, Flex, Plump и Sharp, которые мы доработали за последние несколько месяцев на основе ключевых форм

Оптическая коррекция

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

Когда можно отступить от сетки

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

Слева: иконка идеально выровнена по сетке; справа: оптически скорректированная иконка
Иногда необходимо отступить от сетки, чтобы правильно выровнять элементы

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

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

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

Когда можно отступить от ключевых форм

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

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

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

Слева: иконка идеально выровнена по ключевой форме (квадрат); справа: оптически скорректированная иконка
Иногда необходимо увеличить расстояние между элементами, чтобы повысить читаемость и создать ощущение визуального баланса

Как проверить, достаточно ли сбалансированными получились ваши иконки? Старый добрый способ — размыть значки и посмотреть на них как на некие абстрактные «пятна». Все ли они занимают одинаковое пространство? Или некоторые иконки чрезмерно выделяются на общем фоне? Если у вас такое же плохое зрение, как и у меня, вы можете просто снять очки. 🙃

Заключение

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

Маленький подарок — файл Figma с базовыми сетками и ключевыми формами.

Источник:
Streamline
arrow