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

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

Введение 

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

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

Всемогущие сетки

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

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

Ключевые формы

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

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

Помощь, а не ограничение

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

Строим сетку

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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