Давайте поговорим немного о сетках.

Сетка. Сетки. Сетки. Сетка. Надо использовать модульные сетки. Надо работать с сеткой. А ты используешь сетку? Быть может, вы уже слышали не раз о сетках и, быть может, вы уже даже пробовали с ними работать. А, возможно, наоборот, вы сейчас не понимаете, о чем я, собственно, веду речь. Итак, давайте разбираться вместе, что это такое и зачем они нужны, сетки эти.

Если говорить простыми словами, сетка — это инструмент, который помогает структурировать рабочий процесс в дизайне. Заметьте, я не сказала в каком именно дизайне она используется, а знаете почему? Потому, что она используется буквально везде! Просто в каждом дизайне есть свой вид и тип сетки или аналогичный инструмент. Например, если мы говорим с вами про графический дизайн, то в нем используются сразу несколько типов сеток.

Как найти частное от деления двух последующих чисел Фибоначчи (т.е. 8 делим 5 или 5 делим 3), результат очень близок к золотому сечению 1,6 или φ (фи). Посмотрите, например, на свою ладонь. Средняя длинна ваших четырех пальцев будет равна 1,6 к длине ладони.

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

Давайте посмотрим ряд примеров и начнем с построения логотипа. Проведите внимательный анализ и принцип построения логотипа на базе числа Фибоначчи и золотого сечения.

Перед вами стоит задача подобрать идеальный размер подзаголовка и заголовка для набора текста. Предположим, что для основного текста вы используете размер шрифта 12 кегль. Чтобы высчитать размер подзаголовка, мы 12 умножаем на 1,6 и получаем 19. Чтобы высчитать размер заголовка, проделаем то же самое, только перемножив значение подзаголовка на число φ (фи). Готово! У нас с вами есть теперь идеально пропорционально подобранные кегли шрифта.

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

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

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

Посмотрите примеры. Да, именно на этом разрешении оно будет работать! Смотрится отлично! А что если мы делаем под мобайл? Или что если мы откроем данный сайт на очень вытянутом мониторе? Поэтому данные примеры для интерфейсов с наложением спирали выглядят немного нелепо. Но с другой стороны, они помогают распределить массы и концентрацию объектов, пусть не идеально на все возможных разрешениях, но какую-то часть смогут покрыть.

Принцип работы данного вида сетки очень прост. Сперва необходимо поделить макет на 9 одинаковых частей. Затем, расположить основные элементы на точках, которые образуются при пересечении прямых. Проанализируйте примеры использования третей. Данная сетка отлично будет работать в рекламных баннерах, плакатах, фотографиях. Если вы хотите еще больше приблизить вашу работу к идеальной, стороны вашего макета и стороны у 9 получившихся прямоугольников при делении должны быть пропорциональны соотношению 1:1,6.

Свободный вариант использования сетки. Вы берете за основу прямоугольник (желательно в пропорциональном соотношении 1:1,6) и начинаете его вращать и располагать, основываясь на ваших чувствах. Безусловно, не забываем про расстояния между прямоугольниками. Желательно, в данные расстояния привнести тоже какую-то логику (использовать одинаковое расстояние или в пропорциональном увеличении). Далее, когда вы закончите работу над сеткой, просто помещаем в нее основные элементы вашего дизайна. Отлично подойдет при разработке плаката или какой-то абстракции.

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

А используют ли ее в проектировании интерфейсов? Ответ — и да и нет. В UI дизайне используется колончатая сетка, которая, в зависимости от разрешения экрана, немного видоизменяется. Многие интерфейс-дизайнеры ошибочно говорят, что они работают с модульной сеткой. Да, они безусловно могут работать (и надо работать!) не только с колонками, но и соблюдают ритм относительно горизонталей. Однако, когда данные круто спроектированные макеты приходят к разработчику... они не используют и не смотрят на горизонтальную сетку, а работают только относительно вертикалей, то есть колонок.

Так как тогда быть дизайнеру? И какой смысл использовать горизонтальную сетку? Вы, скорее, должны выработать определенную структуру отступов между элементов. Безусловно, если у вас идеальная дизайн-система (например, как в material, где все построено на 8 пиксельной сетке), и ваши отступы имеют структурированные пропорциональные значения при расположении относительно горизонтальной сетки (когда нет такого, что есть отступ в 13 пикселей, а все остальные кратны двум), то тогда вперед! Используем горизонтальную сетку для удобства. Но, если выше перечисленные условия не соблюдаются, то можно просто работать с системой отступов. Например, между заголовком H1 и текстом вы всегда делаете отступ в 30 пикселей, а между текстом и кнопкой 40.

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

Уже давно есть стандартные параметры для построения сетки на просторах интернета. Например, Bootstrap или, опять-таки, если мы говорим про разработку интерфейса в стиле material, то вы пойдете в раздел гайда смотреть какую сетку они используют и, задав нужные параметры в Figma, Sketch и т.д., начнете с ней работу.

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

01 Определить ширину рабочего "холста".
Размер артборда, фрейма и т.д., название зависит от программы, в которой вы работаете. Если мы говорим про desktop, то тут размер будет варьироваться от 1200-1920 px, все зависит, конечно же, от требований, вида продукта и целевой аудитории. Например, вы проектируете систему для бухгалтеров и знаете, что они в основном работают на ноутбуке 13 дюймов — вы остановитесь на ширине от 1260-1440 максимум. А вот если вы делаете супер красивый лендинг с анимациями, иллюстрациями на целевую аудиторию — то тут, скорее всего, вы возьмете разрешение не меньше 1440 чтобы покрыть инструментарий в виде макбуков или аймаков с ретиной и потрясающим разрешением. Для примера давайте остановимся на 1440.

02 Определить количество колонок.
Количество колонок зависит от сложности контента в вашем продукте. Чем больше колонок вы используете в сетке, тем больше у вас есть вариативность использования и расположения блоков. Если вы разрабатываете сложный новостной портал, вам, скорее всего, понадобится не менее 12 колонок, а то и все 16 или вообще аж 24! Для нашей сетки давайте возьмем 12 колонок.

03 Определить кегль шрифта (размер) для основного текста.
На этом этапе надо понять, какой кегль вы будете использовать для основного наборного текста. В интерфейсе рекомендуется использовать минимально 12 кегль. Однако, как показывает практика, сейчас в среднем ресурсы берут за основу 14 кегель и больше. Выбор кегля зависит от многих факторов:
– Вида гарнитуры. Каждая гарнитура имеет свои пропорции и величину символов в кегельной шпации (об этом мы подробнее говорим на предмете по типографике);
– Вида продукта. Например, если это новостной портал, то задача стоит отобразить больше текста и не стоит использовать очень большой кегль. И наоборот, если это продающий лендинг, где используется мало текста, следует использовать более крупные кегли, привлекающие внимание. Давайте остановимся на 14 кегле.

04 Определить высоту строки для основного текста.
Если мы не говорим о какой-либо декоративной гарнитуре, а речь ведем об антикве, то скорее всего, для 14 кегля нам следует использовать не менее 20 px для интерлиньяжа. Интерлиньяж — междустрочный пробел, расстояние между базовыми линиями соседних строк. Интерлиньяж = высота строки 20 px.

05 Определить расстояние между колонками.
Межколончатое расстояние будет равняться высоте строки — 20 px. Вообще, цифра, которую мы вывели в предыдущем пункте, ляжет в основу микромодуля, но об этом мы будет говорить чуть позже. Сейчас только стоит обратить внимание, что 20 кратно 5 и 4.

06 Определить размер контейнера для контентной области.
Ваш контент не будет ложиться на весь артборд, справа и слева будут оставаться "уши". Респонсивность сайта до определенного размера будет происходить за счет увеличения или уменьшения ширины размера колонок и "ушей". Давайте с вами пойдем от обратного и определим, какую величину мы хотим оставить для ушей. Пусть будет по 82 px с обоих сторон. Итого, размер контейнера для контентной области у нас получился 1276 px.

07 Определить ширину колонок.
А тут уже дело за малым: посчитать! В помощь для вас мы собрали несколько онлайн калькуляторов для создания сеток. Итак, давайте подведем итог:
1440 — артборд
1276 — контентная область (по 82 "уши" с каждой стороны)
12 — колонок
20 — расстояние между колонок
88 — ширина колонки

08 Построить горизонтальную сетку.
Этот пункт не является обязательным. Почему? Мы об этом с вами говорили выше, когда вели речь о модульных сетках. Но:
– если вам удобнее при проектировании интерфейсов работать с горизонтальной сеткой, то строим
– если вы строите сетку, скажем для верстки книги или презентации. Да-да, как вы поняли, данная схема преркасно подойдет для построения модульной сетки в графическом дизайне. В этом случае, вы строите ее обязательно!

На свое усмотрение вы соединяете необходимое количество строк: 2, 3 и т.д. Все! Ваша сетка готова для работы. Фух, наконец :)

Один из очень часто задаваемых вопросов на собеседовании на позиции Junior (начинающего дизайнера). Возможно его интерпретирует немного иначе: "вы используете сетку в своей работе?", "расскажите как работать с сеткой?" и т.д. Вообще, ответ на этот вопрос я бы предложила выстроить по такому плану (однако постарайтесь уложить свой рассказ максимум в 3-4 минуты):
1. Что такое сетка и ее виды;
2. Зачем нужна;
3. Как построить (именно вот об этом пункте стоит уточнить, хотят ли послушать его или все же идем дальше).

Итак, зачем же нужна сетка? Давайте пройдемся по пунктам:
1. Чтобы ваши макеты были четко структурированы;
2. Сетка необходима для команды разработчиков, так как относительно ее верстается макет;
3. Шаблонизирование — вам не надо каждый раз придумывать, какой сделать отступ;
4. Пропорциональность — тут надо копать и изучать историю сетки, что мы и делаем в рамках курса UI UX дизайна. Если коротко, еще со времен древней Греции человек стремился сделать все пропорциональным и обоснованным.