Сетка является важным, но отнюдь не ключевым инструментом при проектировании. Немало опытных современных художников и дизайнеров создают прекрасные композиции, не прибегая к её помощи. Однако нельзя не брать в расчёт тот факт, что сетки помогают дизайнерам создавать математически точные, функциональные и эстетичные проекты. Они позволяют системно и логично представить контент, подчинить текст и иллюстрации ритмичной и единой композиции и создать удобный для пользователей интерфейс.
Когда речь идёт о сетке, есть три базовых понятия:
- Колонка — область пространства, в которой располагается контент
- Межколонный интервал / Средник — пробел между колонками, который помогает разделять контент
- Поля — отступы, которые отделяют контент от краёв макета
Сетки классифицируют по-разному. Например, по характеру внутреннего разделения выделяют колонные, модульные, коллажные и совмещённые сетки.
В колонных сетках колонки отделены друг от друга одним или несколькими вертикальными разделителями — межколонными интервалами. Важное значение имеет размер межколонного интервала, который влияет на воздушность, напряжение и динамику макета.
![](https://awdee.ru/wp-content/uploads/2023/02/upload-e9adc9a4-9709-46e7-a3d7-e98cad78dc85-1024x719.png)
Модульные сетки — своего рода расширенная версия колоночной сетки: здесь к колонкам добавляются строки. Так появляются модули, которые можно использовать для организации элементов дизайна.
![](https://awdee.ru/wp-content/uploads/2023/02/a09af150-6c84-4236-8046-5ca199ffcb65__gridmanufacture.jpg)
Коллажная сетка состоит из блоков и не содержит межколонные интервалы. Такие сетки помогают объединять текст и иллюстрации.
![](https://awdee.ru/wp-content/uploads/2023/02/616fc23fcac7cb5733ac59cc_tpUgWVbnIT7Zzcs9UZsHPl4_TKQg4H5lwzCFMqYpDmwO_hceMFJgKL8mVDimbBJKYg6kqmNL4zmoqRbezw426itqLC4MTZi8MyVDvbpGFSGTp2X3cJSPwgftKaXCxrLND7olD6Is1600.jpg)
В совмещённой сетке можно использовать модули разного размера, чтобы создать визуальную иерархию с учетом важности контента. Она позволяет выполнять несколько задач одновременно.
![](https://awdee.ru/wp-content/uploads/2023/02/Untitled-1024x800.png)
Книги о сетках
«Модульные системы в графическом дизайне. Пособие для графиков, типографов и оформителей выставок», третье издание, Йозеф Мюллер-Брокманн
Книга представляет собой подробное пособие по использованию модульной системы в графическом дизайне и оформительской работе. Автор на примерах рассказывает о применении модульной сетки в дизайне книг, периодических изданий, корпоративной полиграфии, выставочных пространств, приводит исторические образцы архитектуры, типографики и дизайна и убедительно доказывает универсальность и эффективность модульного метода проектирования.
Пара цитат из книги:
Структурируя при помощи модульной сетки плоскости и пространство, дизайнер получает возможность организовать тексты, фотографии и графические изображения по принципам объективности и функциональности. Сокращается число форматов для изобразительных элементов. Величина иллюстрации определяется в соответствии с её значением для данной темы
Сокращение визуальных элементов и включение их в модульную систему создает впечатление продуманного единства, прозрачности, ясности, возникает порядок в оформлении. Логично организованный дизайн поддерживает достоверность информации и располагает к ней читателя
![](https://awdee.ru/wp-content/uploads/2023/02/Frame-1-2.png)
«Модульная сетка», Аллен Хёрлберт
Книга о сетках для газет, книг и журналов со множеством примеров работ известных дизайнеров, которые применяли сетку во всем многообразии её форм.
Цитата из книги:
Чтобы показать эффективность применения сетки и разнообразие её форм, мы проанализировали работы нескольких крупнейших художников-оформителей, творчество которых отражает широкий спектр современного дизайна. Надеемся, что это поможет читателю оценить преимущества и понять изъяны модульного конструирования, а также решить, что подходит лично ему в этой системе, а что нет
![](https://awdee.ru/wp-content/uploads/2023/02/7-3-1024x1024.png)
«Типографская сетка», Ганс Рудольф Боссхард
Книга о сетках, в которой немецкий типограф рассказывает о собственных сетках в хронологическом порядке. Ему неинтересны простые решения, иногда кажется, что он нарочно всё усложняет. Чтобы разобраться, нужно сравнивать полосы, вникать в комментарии, а иногда даже брать калькулятор и считать.
![](https://awdee.ru/wp-content/uploads/2023/02/3-3-1024x1024.png)
«Графический дизайн. Принцип сетки», Элам Кимберли
Много примеров, десяток упражнений, листы кальки с нарисованной сеткой, чтобы накладывать их поверх изображений.
![](https://awdee.ru/wp-content/uploads/2023/02/5-3-1024x1024.png)
«Making and Breaking the Grid: A Graphic Design Layout Workshop», Timothy Samara
Рядом с примерами расположены сетки и схемы заполнения контентом.
![](https://awdee.ru/wp-content/uploads/2023/02/4-2-1024x1024.png)
«Дизайнер и сетка», Робертс Люсьен
История, примеры и расчёты. По схемам можно посмотреть, как выстроены разные макеты.
![](https://awdee.ru/wp-content/uploads/2023/02/6-3-1024x1024.png)
«Модульные сетки. Проектирование многополосных изданий», Владимир Лаптев
Немного истории, много примеров и схем.
![](https://awdee.ru/wp-content/uploads/2023/02/9-3-1024x1024.png)
«Layout Essentials: 100 Design Principles for Using Grids», Beth Tondreau
100 примеров с кратким описанием: практика, практика и ещё раз практика, без воды и жестких руководств.
![](https://awdee.ru/wp-content/uploads/2023/02/8-3-1024x1024.png)
«Otl Aicher», Markus Rathgeb
Книга с десятками примеров и интересной сеткой внутри, по которой свёрстан весь контент.
![](https://awdee.ru/wp-content/uploads/2023/02/2-3-1024x1024.png)
Статьи о сетках в дизайне
Дизайн-альманах Readymag (раздел «Сетка»)
Образовательный проект одноимённой платформы для веб-дизайнеров. Авторы подготовили красивый мультимедийный лонгрид о сетках.
![](https://awdee.ru/wp-content/uploads/2023/02/e742179c276204a8a6a2a937509c10ee.png.webp-1024x546.webp)
Сетки в графическом дизайне
Базовая статья Елены Чернобыльской и Евы Янковской, написанная в рамках проекта «Парк Интуиции». В ней авторы рассказывают о том, что такое сетки, какие они бывают, какие основные понятия включают и с какой целью их используют в дизайне.
![](https://awdee.ru/wp-content/uploads/2023/02/Snimok-ekrana-2023-02-10-v-10.22.52-1024x559.png)
Подборка советов Бюро Горбунова на тему «Модульная сетка»
Юрий Мазурский собрал несколько советов, которые помогут понять, для чего нужна сетка, как её использовать и верстать так, чтобы пользователь правильно воспринимал контент.
![](https://awdee.ru/wp-content/uploads/2023/02/D09CD0BED0B4D183D0BBD18CD0BDD0B0D18F_D181D0B5D182D0BAD0B0-1024x402.png)
Grids
Интерактивный лонгрид Obys Agency об основах графического дизайна, на этот раз — о сетках, их видах, применимости и о том, когда ими можно пренебрегать. В конце есть список рекомендованной литературы.
![](https://awdee.ru/wp-content/uploads/2023/02/9285c90f75a9c2d2116c9623b56e9eca.png.webp.webp)
Сначала конструкция, потом сетка
Игорь Штанг рассказывает и на примерах показывает, почему вредно сначала строить сетку, а потом заполнять её элементами макета.
![](https://awdee.ru/wp-content/uploads/2023/02/29e8106afbd5b11890d421ae9ec5dd6e.png.webp-1024x724.webp)
Организация пространства в дизайне. Отступы, сетки и лейауты
Перевод статьи от команды Figma, посвящённой сеткам. Эллиот Даль рассматривает популярные примеры сеток, их влияние на эстетику и тонкости использования.
![](https://awdee.ru/wp-content/uploads/2023/02/c2747e669cff801f1bfb78a7a648a53b.jpg.webp-1024x561.webp)
Intro to the 8-Point Grid System
Статья о 8-пиксельной сетке и том, почему она удобна для дизайнера. Автор довольно убедительно пишет, что такая сетка помогает легко создавать ритмичный и последовательный дизайн.
![](https://awdee.ru/wp-content/uploads/2023/02/17uEQZ2OvfY4L3_du8Ms4zA-1024x293.png)
Прощай, сетка 8-px, привет, сетка 4-px?
Вся статья в одном предложении: если вы используете восьмипиксельную сетку, разрешите себе иногда применять значения кратные четырём, а не восьми — для помощи в тех ситуациях, когда шаг в восемь слишком велик.
![](https://awdee.ru/wp-content/uploads/2023/02/1-1-2-1024x575.png)
Адаптивные сетки и как их использовать
Подробная статья с обзором адаптивных модульных сеток и советами по их применению.
![](https://awdee.ru/wp-content/uploads/2023/02/b6c5a040d556179743faf575b1adeb2d.jpg.webp-1024x654.webp)
Responsive Grid Design: Ultimate Guide
Большая и подробная статья о том, как устроены классические и адаптивные модульные сетки, какими они бывают, и как их использовать при разработке дизайна адаптивных сайтов. Внутри также последовательно разобран процесс проектирования адаптивного прототипа и рассмотрены популярные типы компоновки страниц.
![](https://awdee.ru/wp-content/uploads/2023/02/83c76f7199a70e273769992bd63f9345.jpg.webp.webp)
Модульные сетки в работе UX-дизайнера. Инструкция по применению
Натали Хродская разбирает применение модульных сеток в экранном дизайне:
- Зачем нужны: определить стиль, ускорить работу, уменьшить число ошибок, повысить эстетичность
- Какими бывают: блочные, колоночные, модульные, иерархические
- Принципы построения: «чтобы построить модульную сетку, необходимо последовательно построить сначала базовую, потом применить к ней колоночную и, задав размер модуля, мы получим дизайнерскую, т.е. разработанную под конкретный проект сетку»
- Hard и Soft сетки
- Вертикальный ритм: базовый блок должен быть кратен интерлиньяжу
Дальше Натали приводит примеры популярных сеток, алгоритм их построения и список дополнительного чтения.
![](https://awdee.ru/wp-content/uploads/2023/02/2166285aeb956085d05f6e16b1d5aa94.jpg.webp-1024x821.webp)
Топ-11 принципов использования модульных сеток в графическом и веб-дизайне
Практические советы и фишки, которые будут полезны при построении сеток в графическом дизайне и веб-дизайне.
![](https://awdee.ru/wp-content/uploads/2023/02/stripe-focus-1024x580.png)
Everything you need to know about spacing & layout grids
Подробно о практическом применении сеток в дизайне сайтов и интерфейсов на примере Figma. В конце есть бесплатные шаблоны с сетками.
![](https://awdee.ru/wp-content/uploads/2023/02/5cfaebdc8f24fa5a02dcad8a3a7a1722.png.webp-1024x623.webp)
History of grids
Статья Джеффа Карделло об истории модульных сеток от иконописи и первых печатных станков до современного веб-дизайна.
![](https://awdee.ru/wp-content/uploads/2023/02/6e573b7c3ba1ba02c7b6117c6e1b45f0.jpg.webp-1024x559.webp)
Get rid of grid
«Богохульная» статья про отказ от сетки в веб-дизайне. Про происхождение и историю сетки: как она пришла в веб-дизайн, какие ограничения и недостатки имеет в контексте адаптивного дизайна, как отойти от её использования и какие преимущества даёт такой отказ.
Три важные мысли из статьи:
- Макет не должен меняться из-за размера устройства. Он должен меняться из-за того, что контент не соответствует текущему макету
- Дизайнерам стоит думать о контейнерах в терминах % от родительского контейнера, который он занимает, а не в терминах числа колонок сетки
- Один из лучших способов сделать красивый макет — это иметь набор переиспользуемых переменных для отступов между элементами
![](https://awdee.ru/wp-content/uploads/2023/02/2f35f0770f99c2093461082247824b2e.png-1.webp-1-1024x743.webp)
Образование на тему «Сетки в дизайне»
Полное руководство по сеткам в дизайне
Из руководства вы узнаете основные понятия, теорию и примеры сайтов, которые показывают, как работает сетка в веб-дизайне.
![](https://awdee.ru/wp-content/uploads/2023/02/DJCwhQYSmqo.jpg)
Модульные сетки: Теория и практика
Часовой мастер-класс школы Contented для начинающих. Темы:
- Классический макет
- Макет со сломанной сеткой
- Дизайн мобильного приложения
- Использование сетки в современных интерфейсах
![](https://awdee.ru/wp-content/uploads/2023/02/maxresdefault-2-1024x576.jpg)
Инструменты для работы с сетками
Калькуляторы систем типографики
В подборку вошли восемь сайтов, которые помогут создать продуманную и гармоничную систему типографики проекта: сайта, приложения, статьи или плаката.
![](https://awdee.ru/wp-content/uploads/2023/02/Untitled-2-1024x581.png)
Grid Calculator
Калькулятор для расчёта сетки.
![](https://awdee.ru/wp-content/uploads/2023/02/Grid_Calculator_by_Nicolaj_Kirkgaard_Nielsen-1024x583.png)
Калькулятор сетки Kolumna
Онлайн-сервис, который помогает быстро рассчитать вертикальную сетку для экранов разных размеров.
![](https://awdee.ru/wp-content/uploads/2023/02/fa81a41c3e4d7a525cff72cc4a261321.jpg-1.webp-1-1024x677.webp)
Compound grid generator
Небольшой инструмент для создания составных CSS-сеток. Результат можно копировать в виде свойства для CSS grid.
![](https://awdee.ru/wp-content/uploads/2023/02/photo_2022-10-31-13.29.08-1024x629.jpeg)
Grid System Library
26 шаблонов сеток для iOS, Android и Bootstrap. Форматы .sketch, .psd, .fig, .ai, .xd. Бесплатно.
![](https://awdee.ru/wp-content/uploads/2023/02/5d10f958cdbd715f9e69c5df1ecffd79.jpg.webp-1024x886.webp)
Grid.Guide
Помогает создать настраиваемые пиксельные сетки в дизайне.
![](https://awdee.ru/wp-content/uploads/2023/02/Grid.Guide-Pixel-Perfect-Grids-1024x583.png)
The Golden Grid
Сетка на пропорциях золотого сечения. Подойдет для небольших макетов: короткой странички, плаката, обложки сообщества в социальной сети или чего-то подобного.
![](https://awdee.ru/wp-content/uploads/2023/02/image_processing20210906-4297-3s09oi.jpg)
Figma-плагины для работы с сетками
Tilda Zero Block Grids
Шаблон для Figma c сетками, которые используются в Tilda Zero Block.
![](https://awdee.ru/wp-content/uploads/2023/02/8db976dd-6db3-429e-99ee-73046213ea2e-cover-1024x529.png)
Auto Layout Grids
Плагин добавляет в выбранные фреймы настраиваемые адаптивные сетки на автолейауте.
![](https://awdee.ru/wp-content/uploads/2023/02/2c59c2ac-5fe3-447f-be23-57b9c994fa43-cover-1024x512.png)
Grid System
Плагин для адаптивных сеток на автолейауте для фреймов.
![](https://awdee.ru/wp-content/uploads/2023/02/ae21c808-752c-4a37-9a32-4e7318f3fedd-cover-1024x512.png)
ColCalc
Создает настраиваемые модульные сетки.
![](https://awdee.ru/wp-content/uploads/2023/02/ed1aa3ac-e7db-4080-8534-66e903c438b6-cover-1024x512.png)
Guides inspector
Плагин для расширенного управления направляющими. Позволяет точно настраивать положение направляющих, создавать сетки и шаблоны.
![](https://awdee.ru/wp-content/uploads/2023/02/0928a965-79bd-475d-8e96-5403b0dc34c5-cover-1024x512.png)
Align Column and Square Grid layouts
Плагин, который помогает быстро создать нужную сетку под заданный макет и позволяет редактировать количество колонок, размер и расстояние между ними.
![](https://awdee.ru/wp-content/uploads/2023/02/126dbc41-582a-4620-81bf-a0ede041f0d3-cover-1024x512.jpeg)
Обсуждение
Похожее
Дизайнер продукта: как быть, а не казаться
Интернет-магазин Good Mens Goods.
Забавный онлайн-конструктор нового айфона NEAL.FUN