Что такое модульные сетки и зачем они вам нужны — Блог Setka

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

Современные технологии дают дизайнерам много возможностей: в начале 1990-х, на заре Интернета, сайты верстались c помощью HTML-таблицы, и при этом дизайнеры могли использовать сетки, а могли игнорировать их. Кроме того, с помощью кода HTML можно было сделать так, чтобы текст на странице обтекал картинку (за это отвечает свойство стиля float). Однако это не всегда хорошо выглядело: свойством легко пользоваться, но без сеток результат выглядел непрофессионально, потому что у дизайнера не было внутренней структуры, которая позволяет ему упорядочить информацию.

С распространением мобильных устройств многие приемы пришлось пересмотреть. Дизайнеры поняли, что сложная верстка плохо смотрится на экране смартфона, а броские баннеры с анимацией могут раздражать пользователя, который не может рассмотреть их в маленьком масштабе. Кроме того, от некоторых элементов пришлось отказаться из-за медленной скорости загрузки. Для создания адаптивных веб-сайтов, которые легко отображаются не только на компьютерах, но и на планшетах и смартфонах, многие стали использовать колоночные сетки (они используются и в Setka Editor). По-прежнему есть дизайнеры, которые не используют этот метод. Они считают, что сетки сильно ограничивают возможности, но мы советуем все равно разобраться в сетках — лучше понимать правила, прежде чем нарушать их.

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

Модульная сетка как основа хорошего дизайна. Часть 1 | by Vera Fesianava

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

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

Сетка представляет собой систему непечатаемых вертикальных и горизонтальных линий, разделяющих страницу. К этим линиям «привязываются» основные элементы страницы (текстовое наполнение, иллюстрации, декоративные объекты и т.д.). Сетка строится на мастер-странице (шаблон, который применяется ко всем создаваемым страницам, автоматически дублирующий все необходимые компоненты). Сначала задают поля, затем определяется размер и количество автоматических колонок. Следующий шаг: при помощи вертикальных и горизонтальных направляющих линий добавляются дополнительные линии привязки.

Итак, рассмотрим сетку журнала Свет Евангелия, который издавался ежеквартально в течение 20 лет (с 1990 по 2010 годы) в Ровно (Украина).

Как и многие печатные издания, журнал СЕ создавался на базе модульной сетки. Но с 1990 по 1993 годы в журнале не было компьютерного макета. Сейчас даже трудно представить себе, что тогда журнал делался, в общем-то, почти вручную. Хотя в редакции уже были первые компьютеры, и даже лазерный принтер имелся. Но набирали и распечатывали только текстовые полосы. Макет журнала выклеивался вручную — с помощью бумаги, клея и ножниц — заголовки, рисунки, текстовые полосы. И все-все страницы технический редактор (т.е. я) вымеряла линейкой по миллиметрам…

В 1994 году редакция приобрела программу Adobe PageMaker 5.0. Технический редактор Вера Фесянова и дизайнер Олег Моргун разработали компьютерный макет журнала СЕ с трех-колоночной модульной сеткой.

В основу сетки журнала был положен прямоугольник текстового поля, отделенный от краев страницы полями и разделенный направляющими на 3 колонки с промежутком 5 мм между колонок.

Модульная сетка журнала Свет Евангелия, 1994.

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

Развороты СЕ # 1’95. Для блока текста с 2 колонками (разворот справа) пришлось вручную делать дополнительную разметку станицы — с помощью дополнительных вертикальных направляющих (голубого цвета) обозначен центральный промежуток между двумя колонками.Развороты СЕ #2’96 и #1’97.
Даже такая простая сетка позволяла формировать разные по ширине блоки — в три, две или одну колонки. Вертикальные направляющие по центру промежутка между колонками добавлены вручную, чтобы было легче выровнять информационные блоки с фотографиями.

Журнал развивался, и нам хотелось, чтобы дизайн становился лучше, более динамичным. На некоторых разворотах мы размещали разноплановые материалы, объединенные одной темой. Например, новости из разных мест. И нужно было их размещать так, чтобы текст из разных материалов визуально разделялся. Мы пробовали 6-колоночную сетку, но она не отвечала поставленной задаче.

И тогда (в 1998 году) нашему техническому редактору Вере Фесяновой пришла мысль сделать 12 колонок на странице. И это оказалось очень удачной идеей. Мы получили гибкий макет с функциональной моделью модульной сетки для большого количества разной информации и элементов.

Сетка журнала СЕ # 1’98.

В этой модульной сетке легко позиционировать и выравнивать элементы дизайна:

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

b. соблюдаются равномерные интервалы между элементами.

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

Разворот СЕ #2’98. Графические элементы легко выравнивается в 12-колоночной сетке.
Фотография на правой странице выходит за пределы центральной колонки и легко выравнивается горизонтально в сетке соседних колонок.12-колоночная сетка журнала Свет Евангелия.
Затемненные участки на странице слева показывают, как с помощью этой сетки можно получить 5 типов деления на колонки. Широкие боковые поля также добавляют возможности при выборе колонок и размеров фотографий (страница справа).

Особенность 12-колоночной модели в том, страницу можно легко разделить на модули по 2, 3, 4 и 6 колонок, связанных с сеткой всего документа. Так мы можем играть с шириной и формой колонок, рассматривая текстовые блоки как отдельные модули, и смешивать количество столбцов в каждой истории. Например, если текст и изображения будут располагаться в двух узких колонках, а пояснительная информация — в широкой колонке, или наоборот.

Развороты СЕ #2’98 и #2’2000.

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

Разворот журнала СЕ #3’2004.
Здесь материалы внизу визуально отделены от основного материала не только цветовыми фоновыми плашками, но разной шириной колонок текста.
Основной материал заверстан в 3 колонки на обеих страницах разворота.
Текстовый материал слева внизу растянут на 2 колонки,
внизу справа — текст заверстан в 2 колонки по ширине трех.Разворот СЕ #2’2009.

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

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

Эта модель 12-колоночной модульной сетки применялась также в других журналах. В каждом журнале модель сетки адаптировалась для конкретных целей и макетов, но принцип вёрстки оставался прежним — построение красивой и грамотной композиции по модульной сетке.

Интересно, применима ли модульная сетка в детском журнале? Об этом можно прочитать в части 2.

Заметили что-то несуразное, оставьте заметку на полях. Вопросы? Комментарии? Напишите внизу.

You can read English version here >

Спасибо. Если интересно, то здесь следующий рассказ о технике Diotone: Great Design Solutions.

Модульные сетки в цифровых интерфейсах. История, теория, правила использования

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

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

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

7 дней дизайн-перезагрузки

Мощнейние спикеры, самое дружелюбное дизайн-комьнити и желание делать клевый дизайн.
Скидка 10% по промокоду UXPUB

Присоединиться

Хотя сетки и макеты являются частью наследия дизайна, они по-прежнему актуальны в нашем мультиэкранном мире. Технологические устройства коренным образом изменили способ поиска информации и того, как мы работаем в нашей повседневной жизни. Сегодня 90% всех медиа-взаимодействий основаны на экране, мы просматриваем контент на мобильных телефонах, планшетах, ноутбуках, телевизорах и смарт-часах. Мультиэкранное поведение быстро становится нормой, и проектирование для нескольких экранов стало неотъемлемой частью бизнеса. Мы, дизайнеры, хотим обеспечить восхитительный и приятный опыт людям, которые используют наши продукты – и сетки могут помочь нам в этом.

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

В этой статье я собрал много информации о сетках, в частности:

• что такое сетки,
• краткая история сетки,
• теория сеток,
• четыре вида макетов сеток,
• макет сетки в интерактивном дизайне.

Что такое сетка?

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

Сетки позволяют дизайнерам создавать прочную структуру и форму дизайна

Система сетки берет свое начало с полиграфии, но применяется ко многим дисциплинам. На самом деле, если мы посмотрим вокруг, мы увидим, что многие вещи, которые мы используем ежедневно, были спроектированы с использованием сетки:

Книжная полка – это своего рода сеткаРайон Барселоны Эшампле демонстрирует, как архитекторы использовали сетку при его строительстве.

Сетки обычно применяются к дизайну экрана. Эта страница содержит элементы сетки

Краткая история сетки

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

Сетка и дизайн первых книг

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

Псалтирь Сент-Олбанс, Англия, XII век.

Эпоха ренессанса и гармоничный дизайн

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

Мазаччо, «Чудо со статиром», Капелла Бранкаччи, 1425 год.

В XIII веке французский архитектор Виллар де Оннекур, в попытке добиться «гармоничного дизайна», создал схему. Эта схема объединила систему сетки с золотым сечением для создания макетов страниц с полями на основе фиксированных коэффициентов. Сегодня эта техника по-прежнему используется для создания сбалансированных дизайнов, причем большинство дизайнеров печатных книг и журналов используют схему Виллара де Оннекура.

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

Сетка и полиграфия

С начала книгопечатанья (середина XV века) до промышленной революции (конец XVIII века), книга была основным печатным продуктом. За редкими исключениями шрифт обычно устанавливался в одной выровненной колонке на страницу и размещался симметрично.

Книга эпохи Ренессанса

Промышленная революция и борьба за внимание

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

Страница газеты с рекламой, Париж, Франция, 1919.

Швейцарская школа

Сетка, как мы ее знаем сегодня, связана со швейцарской типографикой. Во время Первой мировой войны Швейцария, сохранявшая нейтралитет, стала местом встречи творческих людей со всей Европы. Поскольку печатные публикации должны были издаваться на трех официальных языках (немецком, французском и итальянском), дизайнеры нуждались в новой системе сетки, которая позволяла бы это делать. Типографы, такие как Ян Чихольд и Герберт Байер, обратились к модульному подходу. Впервые в качестве динамического компонента в дизайне макетов использовалось пустое пространство, что привело к разработке сложных систем сеток.

«Система сеток в графическом дизайне» Йозефа Мюллер-Брокманна, 1961.

Основы теории сетки

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

Анатомия сетки

Независимо от того простые это или сложные сетки, все они имеют некоторые общие части:

• Формат
  Формат – это область, в которой размещается дизайн. В бумажной книге формат – это страница. В Интернете формат – это размер окна браузера.
• Поля
  Поля – это отрицательное пространство между краем формата и внешним краем содержимого.

Поля для блока контента

• Столбцы и промежутки между ними (аллеи)
  В своей основной форме сетка состоит из двух основных компонентов: столбцов и промежутков между ними. Столбцы – строительные блоки сетки. Пространство между столбцами называется аллеями (alleys). Вместе столбцы и аллеи занимают горизонтальную ширину экрана.

• Модули
  Модули представляют собой отдельные единицы пространства, созданные из пересечения столбцов и строк (т. е. горизонтальные эквиваленты столбцов).

Модули – это единицы, созданные из пересечения строк и столбцов.

Четыре вида макетов сетки

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

• манускриптная сетка,
• колончатая сетка,
• модульная сетка,
• базовая сетка.

Давайте рассмотрим, когда какую исследовать.

Манускриптная сетка (Manuscript Grid)

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

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

Манускриптная сетка в iA Writer

Многоколоночная сетка (Multicolumn Grid)

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

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

Обратите внимание, что в этой многоколоночной сетке один столбец зарезервирован для изображений и подписей.

Модульная сетка (Modular Grid)

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

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

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

Базовая сетка (Baseline Grid)

Базовая сетка является базовой структурой, которая направляет вертикальные интервалы в дизайне. Она используется в основном для горизонтального выравнивания и для иерархии. Подобно тому, как вы используете столбцы и модули в качестве направляющих в своем дизайне, вы можете использовать базовую сетку для создания согласованности в вашем макете. Использование этого типа сетки сродни письму на миллиметровой ​​бумаге – сетка гарантирует, что нижняя часть каждой строки текста (ее базовая линия) выравнивается с вертикальным интервалом. Это делает базовую сетку не только отличным типографическим инструментом, но и чрезвычайно полезной, когда вы располагаете элементы на странице, потому что вы можете быстро проверить пробелы.

Базовая сетка формирует вертикальный интервал дизайна. Здесь модульная сетка создается путем позиционирования горизонтальных направляющих относительно базовой сетки.

Макеты сеток в дизайне взаимодействия

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

Макеты сетки in Adobe XD показаны на разных размерах экрана

Системы сеток в цифровом дизайне продуктов организуют элементы на странице и соединяют пространства. Система сетки улучшает качество дизайна (функционально и эстетично) и эффективность процесса проектирования несколькими способами:

• Создает четкость и согласованность
  Сетка является основой порядка в дизайне. Пропорция, ритм, пустое пространство и иерархия – все характеристики дизайна, которые непосредственно влияют на скорость когнитивной обработки информации. Сетки создают и обеспечивают согласованность этих элементов во всем интерфейсе. Эффективная сетка направляет взгляд, делая сканирование объектов на экране проще и приятнее. Это особенно важно в цифровых продуктах, поскольку они являются функциональными, а это означает, что люди используют продукты для выполнения конкретных задач, таких как отправка сообщения или бронирование гостиничного номера. Согласованность помогает пользователю понять, где найти следующую информацию или какой шаг предпринять дальше.
• Улучшает понимание дизайна
  Человеческий мозг делает выводы за доли секунды. Дизайн, который плохо составлен, сделает продукт менее удобным и заслуживающим доверия. Сетки соединяют и укрепляют визуальную иерархию дизайна, предоставляя набор правил, например, место элементов в макете.
• Делает дизайн адаптивным
  Адаптивный дизайн уже не роскошь, а необходимость, потому что люди используют приложения и веб-сайты на устройствах с широким спектром экранов. Это означает, что дизайнеры больше не могут проектировать для экрана одного устройства. Обилие устройств заставляет дизайнеров мыслить понятиями динамических систем сеток вместо фиксированной ширины. Использование сетки создает последовательный опыт на нескольких устройствах с разными размерами экрана.
• Ускоряет процесс проектирования
  Сетки позволяют дизайнерам управлять пропорциями элементов интерфейса, такими как интервалы и поля. Это помогает с самого начала создавать идеальные до пикселя проекты и избегать переработки, вызванной неправильными настройками.
• Упрощает модифицирование и повторное использование дизайна
  В отличие от печатной продукции цифровые продукты никогда не заканчиваются – они постоянно меняются и развиваются. Сетки обеспечивают прочную основу, потому что, когда все соответствует сетке, предыдущие решения могут быть легко использованы для создания новой версии дизайна. Сетка – это скелет, который можно использовать для создания внешне совершенно разных проектов.
• Облегчает совместную работу
  Сетки упрощают дизайнерам совместную работу над проектами, предоставляя план размещения элементов. Системы сеток помогают разделять работу над дизайном интерфейса, поскольку несколько дизайнеров могут работать над разными частями макета, зная, что их работа будет плавно интегрирована и последовательна.

Сетки – это фундамнтальная часть руководств по стилю

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

Сетки – это каркас, который ускоряет процесс передачи проекта от дизайнера к разработчику, позволяя разработчикам предварительно задавать классы в своем коде, соответствующие размерам столбцов. Это предотвращает несогласованную реализацию и сокращает количество часов, необходимых для создания веб-сайта. Для получения дополнительных советов о том, как дизайнеры и разработчики могут лучше работать вместе, ознакомьтесь со статьей «Характеристики дизайна: повышение продуктивности и ускорение передачи проекта от дизайнера разработчику».

Лучшие практики использования макетов сетки

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

Выбор нужной сетки

«Сколько столбцов?» – это первый вопрос, который задают дизайнеры, начиная работать с сеткой.

Adobe XD позволяет указать количество столбцов, ширину промежутка между колонками и ширину столбца

Многие популярные фреймворки используют систему сеток на 12 столбцов с равной шириной. Из достаточно малых чисел число 12 легче всего делить. Можно иметь 12, 6, 4, 3, 2 или 1 равномерно распределенные столбцы. Это дает разработчикам огромную гибкость макета.

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

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

Макет сетки на 8 столбцов в Adobe XD.

Как узнать, сколько столбцов использовать? Прежде чем принимать решение о количестве столбцов, набросайте возможные макеты (сойдет эскиз на бумаге). Это означает, что вам нужно знать, какой контент будет на экране. Контент будет определять сетку, а не наоборот. С эскизами вы будете лучше информированы о количестве столбцов, которое вам нужно.

Бумажный эскиз для макета веб-страницы. Количество столбцов должно быть определено содержимым.

Учитывайте ограничения

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

Возьмите важные объекты в рамку

Направляйте внимание пользователя на важные элементы, добавляя к ним визуальный вес. Совет: Элементы, которые растягиваются на несколько столбцов, визуально важнее элементов, которые заполняют только один столбец.

Обрамление важных объектов

Не бойтесь выходить за пределы сетки

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

При разрыве сетки выделяются определенные элементы. Позиционирование элемента вне сетки привлекает к нему больше внимания.

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

Обращайте внимание на горизонтальные и вертикальные интервалы

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

Обратите внимание на горизонтальные и вертикальные отступы. Слева – различные вертикальные интервалы. Справа последовательный вертикальный интервал

Используйте базовую линию сетки для выравнивания элементов

Как уже упоминалось, базовую сетку можно использовать для горизонтального выравнивания и иерархии. Выравнивание элементов дизайна интерфейса (контейнеры для текста, изображений и контента) по базовой линии означает, что вам нужно сделать их высоту кратной значению базовой линии. Например, если вы выберете 8 пикселей в качестве базового значения и хотите выровнять текст, вам нужно будет сделать высоту строки шрифта кратной базовому значению, что означает, что высота линии может быть 8, 16, 24, 32 и т. д. Обратите внимание, что размер шрифта не должен быть кратным базовой линии, а только высота строки.

Оптимизируйте сетки для мобильных устройств

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

Плиточная сетка на мобильном экране

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

Приложение Yoox для Android

Тестируйте

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

Вывод

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

Как сказал Йозеф Мюллер-Брокманн: «Система сеток – это помощь, а не гарантия. Она позволяет использовать несколько возможных применений, и каждый дизайнер может найти решение, соответствующее его личному стилю. Но нужно научиться использовать сетку – это искусство, которое требует практики».

Эта статья – часть серии публикаций по UX дизайну, спонсируемая Adobe. Инструмент Adobe XD создан для быстрого и гибкого процесса проектирования UX, поскольку он позволяет быстрее перейти от идеи к прототипу. Вы можете проектировать, прототипировать и делиться проектами – все в одном приложении. Вы можете ознакомиться с вдохновляющими проектами, созданными с помощью Adobe XD на Behance, а также подписаться на новостную рассылку Adobe, чтобы оставаться в курсе последних трендов UX/UI дизайна.

Модульная сетка в графическом дизайне

Что такое модульная сетка.

Модульная сетка это система построения визуальной информации на основе блоков – модулей.

Модуль.

Основой модульной сетки является модуль. Модуль  происходит от латинского слова modulus – “маленькая мера”. Модулем может выступать любая мера длины, площади или объёма взятая за единицу модульной сетки.

Из истории.

Римский зодчий, Витрувий, в Iвеке до н.э. писал о важности пропорций при построении целого.

Рис.1

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

Для чего нужна модульная сетка.

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

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

Построение модульной сетки.

Модуль может быть размером в 2 квадратных метра, 3 на 3 миллиметра или 12 на 12 пикселей. Всё зависит от той системы измерений в которой мы его используем.

В веб-дизайне в основном используются модули размером 12, 16 или 24 px. Некоторые рекомендуют брать за основу межстрочное расстояние, что в принципе тоже логично.

Модульные сетки могут быть абсолютно разными. Наиболее примитивной будет сетка состоящая из одинаковых квадратов выстроенных вплотную.

Более сложные модульные сетки используют большее количество элементов. К примеру мы берём за основу модуль Х и получаем сетку с шагом 3Х по горизонтали и 4Х по вертикали. При этом как вертикальные так и горизонтальные блоки разделяются между собой модулем Х.

Это более сложная сетка, но от этого она не менее интересна и вполне функциональна.

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

Примеры использования модульной сетки.

Прошу обратить внимание на эти два коллажа.

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

Модульная сетка в айдентике.

Использование модульной сетки в айдентике давно уже стало стандартом. Модульное построение используют начиная с разработки визиток и заканчивают разрабатывая билборды. Использование одной и той же модульной сетки в различных рекламных продуктах создаёт ощущение целостности и единства для всего бренда.

Типографская сетка в журналах и газетах

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

Журналы просто не могут обойтись без сетки. Чёткая и лаконичная структура притягивает взгляд и облегчает чтение больших объёмов информации.

Модульная сетка не является чем-то обязательным и её использование также дело личных предпочтений и вкусов. Использовать её можно по-разному.

На рисунке 5 вы видите отличный пример использования модульной сетки и сознательное нарушение её границ, что в свою очередь смотрится довольно интересно и заметно оживляет весь разворот.

Рис. 5

Редакторы газет одни из первых оценили все прелести модульной вёрстки и на протяжении длительного времени облик газеты незначительно изменился. Мы можем взять в руки газету вековой давности и сравнить её с современной, я думаю что общие черты не претерпели сильных изменений.

Модульная сетка в веб-дизайне.

Если взять практически любой известный и популярный сайт, то можно легко обнаружить “следы” модульной сетки.

Модульная сетка для построения логотипа.

Товарные знаки спроектированные при помощи модулей имеют широкое распространение.

Построение модульной сетки в CorelDraw.

Есть несколько вариантов использования сетки в кореле.

Первый это при помощи стандартной сетки. Она отмечена иконкой под номером 1. Нажимая на эту иконку мы активируем сетку. Вы также можете поставить привязку к этой сетке или настроить её по своему желанию.

Второй способ это построение сетки при помощи направляющих. Мы можем сделать направляющие видимыми или невидимыми с помощью иконки под номером 2.

 

Пример модульной сетки на основе направляющих в кореле на рисунке 4.

Рис 4.

Здесь модуль размером 5 миллиметров. С помощью него мы построили более сложную сетку.

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

Использование модульной сетки в AdobePhotoshop.

Аналогично сетка строиться и в фотошопе. Но здесь дизайнеры пошли дальше и сейчас можно скачать различные плагины для построения модульной сетки с заданными параметрами. Это значительно облегчает и упрощает создание лаконичных дизайн-макетов.

Выводы.

Модульная сетка используется повсеместно. Её значение велико, а возможности нельзя недооценивать.

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

анализ, расчет и построение / Хабр

Intro

Краткая предыстория

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

Казалось бы, набросать сетку — дело пяти минут. Всё разжёвано до нас, и бутстрапы есть на любой вкус, и «Аннушка уже пролила своё масло…». Но на практике у дизайнеров частенько возникают вопросы. Многих вводят в ступор даже небольшие отступления от привычных 12-колоночных сеток, потому что им не до конца понятны принципы построения.

Когда-то эту тему хорошо раскрывал цикл статей Алексея Черенкевича, но тексты пропали из открытого доступа. И хотя их ещё можно найти в архивах, сами тексты за прошедшие годы несколько устарели.

Словом, в очередной раз отвечая на вопрос по модульной сетке и не найдя ни одной подходящей ссылки, решил как-то обобщить в заметке всё, что размазывалось по десяткам комментариев на разных сайтах.

Как работает сетка

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

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

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

Чем определяется структура сетки

Модульная сетка строится в двух направлениях: горизонтальном и вертикальном. Грубо говоря, это комбинация колонок и рядов с разлиновкой макета на строки.

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

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

Если контент простой и неизменный, и известен вам заранее, то проще всего будет отталкиваться именно от него. Если же контент сложный и непредсказуемый (например, user-generated — пользовательский), то сетка в большей степени будет определяться форматом носителя и общими принципами типографики и композиции.

Начало построения. Вертикальный ритм

Когда речь идёт о сайтах или печатной продукции, дизайн во многом зависит от типографики и свойств текста. Поэтому построение сетки удобно начинать с вертикального ритма.

В первую очередь вам нужно нащупать два взаимосвязанных ключевых параметра: базовую высоту строки и базовый размер шрифта. Проще говоря (хи-хи), базовые интерлиньяж и кегль. И вот эта простенькая задача постоянно вводит людей в ступор. «Как мне узнать нужную высоту строки?», «А какой шрифт брать?», «А сколько строк нужно делать для буклета? А для визитки?» и т.п.

Вариант «А». Подход «от строки»

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

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

Простой, но подробный пример с картинкой

Допустим, вам нужно сверстать на листе А4 список лучших работников месяца. Их у вас трое. Для каждого сотрудника вы делаете блок-карточку: слева фото, справа текст. Фотография крупнее, поэтому высота карточки равна ее высоте. Кроме того, на листе нужно разместить шапку с заголовком, а внизу — блок контактной информации [профсоюза гениев].

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

Если теперь принять высоту шапки за одну «строку», получится, что весь ваш контент занимает 9 абстрактных «строк». Если вам трудно абстрагироваться от интерлиньяжа, назовите эти «строки» рядами или горизонтальными блоками. Предположим, вы еще захотите добавить по 1/2 строки воздуха перед верхним и нижним краями листа. Итого, ваш макет нужно делить на 10 строк:

В результате вы делите ваш носитель (лист A4) по высоте на 10 «строк». Получаются блоки высотой около 3 сантиметров. Очевидно, что это слишком крупная разлиновка, чтобы верстать по ней тексты, контактную информацию и прочие мелочи.

Вы смотрите на свои текстовки и понимаете, что возле каждой фотографии у вас получается описание где-то на 10—12 строчек текста. То есть, каждый блок нужно разделить еще на 5—6 частей. Предположим, вы перестраховываетесь и берете большее значение, чтобы по одной строчке ушло на отступы. Бинго. Теперь ваш макет представляет собой 10 блоков по 6 строк в каждой. То есть 60 строк. С учетом высоты листа (~300 мм), каждая строка получилась высотой ~5мм. Всё, можно прототипировать прототип, а затем дизайнить дизайн.

А как же быть с размером шрифта? О, теперь всё очень просто! По всё той же логике «правила внешнего и внутреннего», интерлиньяж должен составлять примерно 150—200% от высоты кегля. То есть размер вашего шрифта будет в 1,5—2 раза меньше высоты строки. А это от 2,5 до 3,3мм. Этот размер несложно подобрать в пунктах или даже просто на глаз.

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

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

Вариант «Б». Подход «от кегля»

Далеко не всегда у вас будет предсказуемый контент и фиксированный холст. В веб-дизайне вы куда чаще работаете с тотальной неопределенностью.

Иногда это похоже на художественную лепку из соплей. Высота вашего макета условно бесконечная, ширина — плавающая, основной контент пользовательский, встраиваемые виджеты предоставлены артелью «Пупкин и сыновья», а реальные тексты страниц заказчик собирается показать вам где-то примерно за день до запуска сайта. Но это не точно.

В таких условиях, очевидно, нет смысла пытаться определять количество строк. Зато можно танцевать от обратного: от размера шрифта (кегля). И это даже проще.

Всё, что вам нужно, это выбрать для проекта базовый кегль, который будет достаточно крупным, чтобы хорошо читаться, и при этом достаточно компактным, чтобы в строку основных текстовых блоков помещались 7—8 слов. Строго говоря, для русского языка достаточно и 5—6 слов, потому что в среднем у нас, конечно, длиннее и тверже. Но это ориентир, а не догма. Опираться нужно на конкретный макет, конкретный шрифт плюс собственное зрение и опыт.

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

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

Сразу ответ на частый вопрос: «базовый» не означает «самый мелкий». В любом макете почти всегда будут и менее заметные надписи: сноски, примечания, подстрочники и т.п. Здесь же речь идет о том шрифте, которым вы будете набирать основную массу текста. Вспомните любой текстовый редактор. Вы открываете новый файл и начинаете печатать каким-то «просто шрифтом», лишенным какого-либо специального форматирования — это и есть базовый шрифт, basefont. Если вам нужно сделать надпись помельче, никто не запрещает использовать мелкий кегль, это нормально.

Итак, определились с базовым шрифтом. Что дальше? А дальше — интерлиньяж. По уже упомянутым традициям современной типографики он составит 150—200% от кегля. А иногда и более.

(Подчеркну: речь о современных реалиях. Просьба не попрекать Брингхерстом и другими классиками книжной типографики — они, безусловно, взорвали свой танцпол, но с тех пор мир немного изменился. Те 120—180% всё-таки рассчитывались для книг, да ещё и в латинице).

Таким образом, ваш базовый интерлиньяж почти всегда окажется где-то в диапазоне от 22 до 40 пикселей.

По личному опыту, для простых коммерческих сайтов довольно удобен базовый интерлиньяж 15px. (Подразумевается 30px, но на уровне верстки удобнее сразу работать с половинчатым, т.к. он дает хорошие отступы в 15px и 45px. Важно понять, что в контексте модульной сетки 15 и 30 суть одно и то же — вы просто работаете либо с половинным значением «тридцатки», либо с целым значением «пятнашки»). Хотя при всей любви к классическим модульным сеткам, не отрицаю плюсы той же трендовой 4-пиксельной сетки для UI-дизайна. Сетки разные нужны, сетки разные важны. Это инструмент, а не религия.

Результат по вертикали

Теперь, когда у нас есть базовый интерлиньяж, мы можем разлинеить макет и следовать, наконец-то, вертикальному ритму. Это значит, что каждый элемент дизайна будет занимать по высоте некоторое число строк. С ритмом становится удобно и легко работать. Не нужно вычислять точные значения в пикселях. Вы меряете всё строками. Заголовок первого уровня — 4 строки, иллюстрация — 8 строк, аватар — 3 строки, кнопка — 3 строки, меню — 5 строк, отступ — 1 строка и т.п. (Надеюсь, вы понимаете, что это фигуральный пример, а не рецепт успеха).

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

Колонки и межколоночный интервал

От чего зависит число колонок

В первую очередь, от контента. Здесь всё проще, чем с высотой. Если речь идёт о печатной продукции, вы в подавляющем большинстве случаев можете предположить число колонок еще на стадии первых черновиков.

Например, если вы верстаете блок про времена года, вашим магическим числом наверняка будет 4. Вы можете сгруппировать их в один ряд или в два. При этом число колонок получится кратным либо двум, либо четырем. То есть есть смысл опираться на числа 2, 4, 6, 8, 12 или 16.

Усложним. Предположим, под блоком с временами года у вас идёт блок с тремя рекламными объявлениями. Очевидно, для этой части макета удобнее было бы число колонок, кратное трем: 3, 6, 12… Но сетка в 3 колонки явно неудачна для времен года. Поэтому нужно искать для них какой-то общий знаменатель. Предыдущий абзац подсказывает, что вам нужна сетка на 6 или 12 колонок.

*Еще пример. Вам нужно сверстать типовой блок-визитку, состоящий из логотипа/аватара (слева) и контактной информации (справа). Сколько нужно колонок? Давайте прикинем.

Если мы хотим сделать равновесную композицию, то можно обойтись даже двумя колонками. В этом случае выравнивание лого будет центральным, а текст придется размещать на глаз. А можно предположить, что текст по ширине занимает места примерно вдвое больше, чем логотип, и соответственно сделать блок в три колонки. А можно пойти еще дальше и заложить в сетку еще и отступы. Допустим, слева и справа будет поля по 1 колонке, логотип займет 2 колонки, текст 4, плюс 1 колонка отступа между лого и текстом — итого 8 колонок.*

Вот таким нехитрым образом вы рассуждаете, продумывая сетку. Если контента много, а глаз не намётан, можно с первого раза пролететь и по мере проработки деталей макета понять, что сетка не годится. Это нормально. Ничего страшного.

Когда речь идёт об отдельно взятом макете, подогнать дизайн под новую сетку нетрудно. Если же проект большой и предполагает изобилие страниц или макетов с единой канвой (сайт, брошюра, книга и т.д.), лучше заложить в сетку некоторый запас прочности и хорошенько протестировать ее со случайным контентом из разных страниц. Запас прочности, как правило, достигается кратным увеличением числа колонок: например, вам сейчас нужно только 3, а вы закладываете 6 или 9.

Отмечу один нюанс. Если вы делаете нечто с выраженной центральной композицией и активно используете горизонтальное выравнивание по центру, выгоднее сделать число колонок нечетным. Это позволит равномернее распределять отступы и контент. Совет касается и внутреннего дробления колонок. В примере выше, если у вас было 3 колонки и вам понадобилось их детализировать, при центральной композиции вы разобьете каждую колонку еще на 3, а вот при симметричной — на 2 или 4. В итоге, в первом случае колонок станет 9, а во втором — 6 или 12.

Почему все любят 12-колоночные сетки

Тут всё просто. Число 12 делится на: 12, 6, 4, 3, 2, 1. Поэтому сетка получается гибкой и позволяет органично верстать блоки почти любого количества или ширины. Более того, отбрасывая по краям макета 1 или 2 колонки в качестве полей, вы получаете в центре блок, который делится ещё и на 10, 5 или 8.

Из личного опыта добавлю, что очень удобно рисовать адаптивные макеты, отталкиваясь от ширины в 1200 пикселей, особенно без межколоночных интервалов. Вы получаете 12 колонок с приятной шириной ровно в 100 пикселей и постоянно оргазмируете от круглых чисел в процессе работы. И когда вам нужно поместить на макет плашку кнопки, вы не тянете границы прямоугольника туда-сюда, а мгновенно и не задумываясь вбиваете размер: 300 на 60 и кликаете на макет. К слову, полезно приучить себя позиционировать элементы не мышкой и стрелками, а вбиванием цифры отступов по иксу и игреку — макеты станут опрятнее.

Если контент не подразумевает верстку встык, бывает удобно сделать 24 колонки и работать с ними так же, как с межколоночным интервалом, просто отступая при необходимости полную колонку в 50px. Это создает вокруг контента достаточно воздуха, и макет смотрится дорого. Если же требуется интервал помельче, берется ровно половина колонки, то есть 25px. Все расчеты на лету, числа удобные.

Межколоночное расстояние (gutter)

Зачем и когда нужно делать отступы между колонками?

Мы не всегда делаем мозаику. Чаще всего контент не верстается встык — между двумя блоками должно быть какое-то расстояние, чтобы они не слиплись и не перекрыли друг друга.

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

В большинстве случаев, межколоночный интервал значительно меньше ширины колонки. Его размер тоже определяется особенностями контента. Если вы верстаете интерфейс, где много классических элементов управления, узкое межколоночное расстояние служит удобным разделителем. Например, между поисковой строкой и кнопкой, или между чекбоксом и его лейблом. (Хотя в целом здесь есть смысл подумать о «квадратной» сетке: 4px или иной, вообще без всяких колонок, и для этого тоже есть причины). Если же вы верстаете страницу с крупными текстовыми блоками, организованными всего в 2—3 колонки, то межколоночное расстояние имеет смысл сделать большим, чтобы дать контенту максимум воздуха.

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

Только пусть вас не подкупает приятное слово «благородный» — в коммерческом сегменте такой дизайн не всегда хорош. В целом, чем активнее и агрессивнее схема продаж, чем голоднее и злее маркетологи заказчика, тем плотнее будет верстка и тем меньше там останется воздуха. Предельный (или, скорее, запредельный) случай — газеты бесплатных объявлений а ля «Из рук в руки», где занятая площадь напрямую определяет заработок. Разумеется, там не нужны эстетические изыски с гигантскими полями. С тем же успехом можно просто залезть в карман учредителю и позаимствовать оттуда пару сотен долларов до следующей зимы. Разницы никакой, а согласовывать меньше.

Модуль

Собственно, вот таким непростым путём мы с вами добрались до определяющего понятия «модуль», в честь которого и названа модульная сетка. Обычно с него начинают, но судя по вопросам дизайнеров, такой подход не работает. Так что же это вообще такое и зачем оно нужно?

По сути, это просто пропорция. Ширина модуля равна ширине колонки, а высота — нескольким строкам. Скольким именно? Зависит от вашего дизайна и от эффекта, которого вы хотите добиться.

*Несколько лет назад мне довелось делать сайт, посвященный пилонам — шестам для танцев. Естественно, модуль там был сильно вытянут по вертикали. Я использовал соотношение ширины и высоты почти 1:3. Во-первых, потому что подавляющее большинство иллюстраций было портретной ориентации и тоже вытянуто. Во-вторых, потому что сам продукт и весь стиль предполагал некоторую долю фаллической символики. Модуль определяется и контентом, и композицией, и стилем.

Если вы делаете нечто «стабильное», то наоборот: есть смысл подумать о модуле, чуть вытянутом по горизонтали. Если же вы верстаете огромную длинную таблицу, которая служит основным контентом в макете, то очевидно, что за модуль нужно принимать одну или две базовых строки этой самой таблицы. Словом, думайте.*

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

Допустим, вы делаете портал. У вас есть меню высотой в 3 строки, затем следует баннер главной новости высотой в 9 строк, затем ряд каких-то цифр (курсов валют, погоды и др) в 3 строки, затем ряд из нескольких новостей второго плана на 9 строк. То есть весь контент чередуется: 3-9-3-9-3-9-3… На практике этот прием редко оправдан, он не очень-то гибок. Но стоит держать в голове, что ритм может быть сложным.

Сетка в сетке

Да, бывает и такое. Когда проект сложный и многокомпонентный, вы можете использовать несколько вложенных сеток. Простейший пример: общая раскладка макета (layout) использует гигантские колонки с крупным текстом, а внутри одной из них лежит форма калькулятора с кучей элементов управления, сверстанных по квадратной сетке в 4px. В этом нет ничего особенно криминального.

Более того, когда речь идёт о сайтах, часть вашего контента может быть вообще посторонней и встраиваемой: плееры, онлайн-карты, виджеты, платежные фреймы и т.д. Миллион вариантов. У этих элементов будут свои внутренние сетки, которые вы не контролируете. И это тоже нормально.

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

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

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

Поэтому, если ваш глаз сообщает вам, что какой-то элемент нужно сдвинуть на пару пикселей правее направляющей сетки, вы можете сделать это. (Не факт, что верстальщик заметит и сохранит ваш оптический костыль, но всё же).

Отдельный важный момент: элементы в сетке выравниваются по визуальной массе, а не по габаритным границам. Это значит, что (в идеале) круг, выровненный по левому полю, почти всегда окажется на несколько пикселей левее квадрата, который выровнен по тому же полю. А мелкий подстрочник под крупным заголовком почти всегда нужно смещать вправо, потому что оптически левый край первой буквы заголовка окажется правее, чем «по расчетам». Это частности оптической компенсации.

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

Резюме

Пожалуй, изя всё. Текст и без того объемный, особые выводы не нужны: тут либо вникать, либо нет. В любом случае, спасибо за ваше внимание и интерес к основам дизайна и типографики. Успехов.

Модульные системы в графическом дизайне

Автор Йозеф Мюллер-Брокманн (1914–1996) — графический дизайнер и преподаватель. Его работы являются образцом простоты в дизайне и тонкого использования типографики, формы, цвета. Они оказали влияние на многих современных дизайнеров.

На сайте Студии Лебедева написано, что книги нет в продаже. Советую заглянуть в один из официальных магазинов.Давно хотел прочитать «Модульные системы в графическом дизайне». Считал, что её уже не продают. После защиты семестровых работ в БВШД наткнулся на магазин студии Лебедева. Оказывается, они её печатают и продают.

Купил, прочитал книгу. Поделюсь впечатлениями и интересными идеями.

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

Примеры страниц с использованием модульной сетки

Дизайнеру на заметку

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

Про сетки

Модульная система помогает дизайнеру рационально скомпоновать элементы на странице, но важно помнить: сначала содержание, а потом сетка.

Когда выполнял тестовое задание для Туту.ру, то попался в эту ловушку. Перед тем как определиться с элементами на странице, решил, что буду использовать сетку на 4 колонки. Только после этого начал добавлять и выстраивать элементы относительно колонок.

В результате получилась скучная страница с большими отступами между элементами:

Сетка для макета главной страницы Туту.ру

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

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

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

Эскизы макетов с использованием модульной сетки в 32 клетки

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

Интересно, что модульную систему можно использовать при проектировании дизайна трёхмерных пространств: обозначить расположение мебели, светильников и вывесок в пространстве комнате.

Например, модульную систему используют при проектировании выставочных стендов.

Модульная структура трёхмерного пространства

Про типографику

Размер шрифта правильно называть кегль шрифта. Он соответствует числу пунктов, или как я понимаю, числу пикселей.

Правильно подобранный кегль шрифта делает текст удобным для чтения. Слишком маленький, как и слишком большой шрифт, читать утомительно. Для комфортного чтения длинного текста, в строке должно быть примерно 7-10 слов.

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

Шрифт Таймс Нью Роман разработан в 1932 году для газеты «Таймс»

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

Интерлиньяж — это расстояние между строками. К длине строки и выбору расстояния между строками относиться надо внимательно. Они влияют на удобочитаемость текста. Слишком длинная строка или слишком узкое пространство между строками ухудшат восприятие текста.

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

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

Примеры текста, набранные с разным кеглем шрифта и инерлиньяжем

Σ

«Модульные системы в графическом дизайне» — это то, что нужно начинающему дизайнеру. Примеры, которые приведены в книге достаточно просты и понятны для восприятия.

Если коротко, то дизайнеру важно помнить:

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

°°°

Книгу хорошо дополняет интерактивный учебник от бюро Горбунова «Типографика и вёрстка».

Веду имейл-рассылку о презентациях.

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

Будет полезно всем, кто делает презентации для отправки по почте, демонстрации на встречах, проведения уроков, курсов или выступления на публичных мероприятиях.

Подписаться на рассылку 🚀

Модульные сетки в работе UX-дизайнера. Инструкция по применению | by Natalie Hrodskaya | DesignSpot

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

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

Как только вы начинаете пользоваться сеткой, сложно не заметить её преимущества:

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

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

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

В качестве примера, можно привести простые страницы блогов, статей, новостей, где страницы предназначены для сплошного чтения. Источник:https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/

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

Основные блоки выровнены по вертикальным колонкам, используется узкий межколонник. Обратите внимание, что для цен на билеты символ доллара вынесен за колонку, т.к. он имеет меньший визуальный вес, чем сама цена. Таким образом, дизайнер прибегнул к оптической компенсации, визуально выстраивая вертикальную линию колонки относительно более “тяжелых” цифр цен 39–67. Источник:https://silotheatre.co.nz/here-lies-loveШирокий межколонник может быть дизайнерским решением. Источник:https://www.nationalgeographic.com/

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

Пример модульной сетки из книжной печати, где сетка содержит 4 колонки и 4 ряда. Изображение или текстовый блок могут занимать один или более модулей. Источник:thinkingwithtype.comПример создания концепта страницы с размещением основных блоков по модульной сетке. В качестве модуля используется объединение двух колонок и двух горизонтальных строк.Пример модульной сетки, где в качестве модуля взят квадратный блок заданных размеров. Источник:http://bodhicycling.be/home

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

Источник:https://www.behance.net/gallery/28285019/OEHLIN-B

Наиболее сложной для построения является модульная сетка, она включает в себя в том числе и построение колоночной. Поэтому давайте рассмотрим принципы её создания.

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

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

Примером базовой сетки является 8-ми пиксельная сетка компонентов Material Design. Источник:https://material.io/design/layout/spacing-methods.html#Пример выравнивания элементов попапа по базовой 8-ми пиксельной сетке. Все элементы и расстояния между ними кратны 8. Источник: внутренний проект EPAM

Почему 8-пиксельная? В качестве шага для данной сетки был выбран блок 8х8 пикселей, т.к. у большинства распространенных девайсов размер экрана в пикселях кратен восьми, следовательно разрабатывать дизайн интерфейсов для них с этой системой будет проще. Кроме того, если все числовые значения четные, масштабировать размеры и расстояния для широкого круга девайсов, сохраняя дизайн в исходном виде, становится проще.

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

Сетка

— мышление с типом

Модульная сетка имеет последовательные горизонтальные деления сверху вниз в дополнение к вертикальным делениям слева направо. Эти модули управляют размещением и обрезкой изображений, а также текста. В 1950-х и 1960-х годах швейцарские графические дизайнеры, в том числе Герстнер, Рудер и Мюллер-Брокманн, разработали модульные сеточные системы, подобные показанной здесь.

Модульная сетка: Карл Герстнер

_{программы проектирования Сетка , 1963
(перерисована).Дизайнер: Карл Герстнер. Издатель: Артур Ниггли, Цюрих.
Эта квадратная сетка состоит из шести вертикальных столбцов и шести горизонтальных модулей
, наложенных друг на друга сетками из одной, двух, трех и четырех единиц.
По вертикали сетка регулируется мерой из 10 пунктов, которая
определяет интервал шрифта от базовой линии до базовой линии.}

Базовая сетка

Модульные сетки создаются путем размещения горизонтальных направляющих относительно базовой сетки , которая управляет всем документом.Базовые сетки служат для привязки всех (или почти всех) элементов макета к общему ритму. Создайте базовую сетку, выбрав размер шрифта и интерлиньяж текста, например, Scala Pro 10 пунктов с интерлиньяжем 12 пунктов (10/12). Избегайте автоматического интерлиньяжа, чтобы можно было работать с целыми числами, которые умножают и делят чисто. Используйте это приращение межстрочного интервала, чтобы установить базовую сетку в настройках документа.

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

Чтобы стилизовать заголовки, подписи и другие элементы, выберите междустрочный интервал, который работает с базовой сеткой, например 18/24 для заголовков, 14/18 для подзаголовков и 8/12 для заголовков.Веб-дизайнеры могут выбирать одинаковые приращения (высота строки в CSS) для создания таблиц стилей с четко согласованными базовыми линиями. По возможности расположите все элементы страницы относительно базовой сетки. Но не заставляйте его. Иногда макет работает лучше, если вы переопределяете сетку. Просмотрите базовую сетку, если вы хотите проверить положение элементов; выключайте его, когда он отвлекает.

Важность сеточных систем в графическом дизайне [Советы и история]

2.Ранняя история сетки

Вероятно, самая старая сетка была чем-то похожим на сетку базовой линии: руководящие принципы — или «вспомогательные линии» — нарисованные на древних рукописях, которые помогали писцу создавать текст, который был прямым и равномерно распределенным. Простые сетки столбцов можно найти в Свитках Мертвого моря, где они служили для организации текста в читаемые блоки в длинном свернутом документе.

Храмовый свиток — один из свитков Мертвого моря, датируемый 150–70 гг. До н. Э.

Примерно 1500 лет спустя тот же принцип был легко перенесен в ранние западные типографии. Эти машины требовали загрузки металлических блоков «подвижного типа», по одной букве за раз, в серию линий, которые вручную наносились чернилами, а затем прижимались к бумаге. Например, Библия Гутенберга — первая западная книга, напечатанная подвижным шрифтом — использует сетку из двух столбцов.

Библия Гутенберга, около 1454 года, использует сетку из двух столбцов.

Газеты конца 19-го и начала 20-го века расширили использование больших сеток столбцов, потому что они максимизировали объем информации, который они могли уместить на листе газетной бумаги.

На большом листе бумаги, таком как крупноформатная газетная бумага (размером примерно 30 на 23 дюйма), использование столбцов означает, что можно использовать меньший размер шрифта (часто 8 пунктов) и короткую длину строки в каждом столбце, сохраняя удобочитаемость. Без столбцов строки были бы слишком длинными, и по ним было бы трудно проследить.

Нью-Йорк Таймс, 29 июля 1914 года

3. Сетки в ХХ веке

Сеточная система — это помощь, а не гарантия. Это позволяет использовать множество вариантов, и каждый дизайнер может найти решение, соответствующее его личному стилю.Но нужно научиться пользоваться сеткой; это искусство, требующее практики.

—Йозеф Мюллер-Брокманн

Сетки стали более интересными в начале 20-го века, когда дизайнеры-авангардисты, работающие в таких направлениях, как Баухаус и Де Стидж, или находящиеся под их влиянием, начали больше экспериментировать с макетом. Например, дизайнеры середины века Ян Чихольд и Йозеф Мюллер-Брокманн разработали новые сеточные системы в виде разреженных типографских макетов и дизайнов плакатов.

В частности,

Müller-Brockmann — один из главных представителей «швейцарского стиля» — раздвинул границы решеток, создав модульные и вращающиеся системы решеток.Он опубликовал подробный справочник (обязательный к прочтению для любого графического дизайнера) под названием Сеточные системы в графическом дизайне , который представляет собой обобщение идей, полученных за его выдающуюся карьеру.

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

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

Название книги даже немного вводит в заблуждение современного читателя, потому что Мюллер Брокманн уделяет столько же, если не больше, выбору шрифта и управлению им, чем строго использованию сеток разметки. В исторической перспективе это отражает то, как абстрактные сеточные системы возникли в результате написания и печати текста; для Мюллер-Брокманна сетки и текст были неразделимы.По сути, сетки начинались как система для организации текста, и поэтому они остаются сегодня.

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

Плакаты 1950-х и 60-х годов Йозефа Мюллер-Брокманна, демонстрирующие модульные, вращающиеся и даже радиальные сетки.

Невероятное количество возможностей создается благодаря модульной системе, которую разработал Мюллер-Брокманн, и влияние его работ сегодня можно увидеть во многих графических материалах и веб-дизайне.Например, мы можем увидеть цифровую версию модульной системы Мюллера-Брокманна в действии на веб-сайте Guardian (хотя и без базового согласования):

Müller-Brockmann даже исследовал применение решетчатых систем в трехмерных пространствах, и решетчатые системы оказали значительное влияние на дизайн выставочных пространств и корпоративный дизайн интерьеров.

В качестве своего рода приписки к книге Мюллер-Брокманн рассматривает древние «системы порядка», взятые из природы и более ранних человеческих цивилизаций.В качестве примеров он приводит соты, сделанные пчелами, и примитивные карты пропорций человеческого тела. Он также смотрит на египетские пиктограммы, библию Гутенберга и нотную рукопись (которая, если задуматься, представляет собой своего рода детализированную сетку). Он также описывает геометрию традиционной японской архитектуры и даже опорную конструкцию крыши лондонского Хрустального дворца.

Связывая эту историю с практикой современного дизайнера, он завершил книгу следующим отрывком:

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

—Йозеф Мюллер-Брокманн

Во второй половине 20-го века многие дизайнеры стали знаменитыми представителями решетчатых систем. Взять, к примеру, Массимо Виньелли и Вима Крауэла. Виньелли отдавал предпочтение строгим модульным сеткам для своих бесчисленных книжных дизайнов, а также в своей работе над общедоступными информационными материалами для таких клиентов, как Служба национальных парков США и метро Нью-Йорка.Краувель особенно известен своей типографикой, основанной на сетке.

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

Вим Краувел использовал сеточные системы для разработки экспериментальных шрифтов.

4. Восстание против сети

Революция в программном обеспечении для вычислений и проектирования началась в 1970-х годах, произошла в 80-х и 90-х годах и продолжается по сей день.Наряду с быстрым изменением инструментов и методов, используемых наборщиками и печатниками, он создал новые возможности для экспериментов среди дизайнеров.

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

Типографские эксперименты

Вейнгарта помогли и разрушили сеточный дизайн.

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

Используя ранние программы для графического дизайна, такие как Pagemaker и Photoshop, в конце 80-х — начале 90-х годов сетки можно было изменять одним щелчком мыши. Размер блока текста можно было изменить и заставить его перетекать на экран.Изображения можно было поворачивать, искажать и наслоить. Целые публикации можно было быстро и дешево отобразить на экране, без необходимости связывать каждый эксперимент с дорогостоящим процессом печати.

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

Одной из самых известных фигур, появившихся в результате экспериментов 1980-х и 1990-х годов, был Дэвид Карсон, профессиональный серфер, который проявил интерес к графическому дизайну и первоначально изучил свое ремесло на двухнедельных курсах графики в Университете Аризоны. еще один короткий курс в Орегоне и трехнедельный семинар в Швейцарии.Карсон — один из лучших примеров того, как стать дизайнером, не посещая школу дизайна.

Карсон работал в ряде журналов по скейтбордингу и сноуборду в начале своей карьеры (как и Аарон Драплин), но он действительно стал известен, когда его наняли для разработки Ray Gun . Эти дизайны примечательны рядом разрывов с условностями графического дизайна, включая использование стандартных сеток. Важно отметить, что причина, по которой дизайны Карсона по-прежнему визуально эффективны, заключается в том, что они по-прежнему придерживаются важных принципов визуальной организации, таких как контраст, баланс и близость.

Кроме того, обычно остается достаточно элементов сетки, которые остаются нетронутыми, чтобы сохранить основную цель дизайна — передать смысл. Например, в статьях, изображенных ниже, хотя столбцы текста имеют разную ширину и не разделены промежутком, каждый блок текста по-прежнему соответствует базовой сетке и четким левым и правым границам, что означает, что в конечном итоге текст остается читаемым. (Хотя это не относится к статье о Брайане Ферри, которую Карсон не любил и, следовательно, полностью поместил в Zapf Dingbats.)

5. Сетки в веб-дизайне и дизайне пользовательского интерфейса сегодня

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

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

Обнаружение сеток колонн с Figma 101.

Например, в нашем бесплатном электронном курсе Figma 101 вы можете создать дизайн приложения, используя сетку из 3 столбцов для мобильных устройств, а затем преобразовать этот дизайн в более широкую сетку из 12 столбцов для настольных компьютеров. Такой способ работы сегодня является основополагающим для эффективного создания дизайна приложений.

Устойчивость дизайна на основе сетки в веб-дизайне и дизайне приложений также была проблемой для разработчиков, формирующих веб-стандарты. На заре Интернета разработчики часто использовали таблицы для организации макета. С тех пор стандарты претерпели изменения, и теперь у нас есть такие системы, как Flexbox и CSS Grid, которые предлагают базовую структуру для точного внедрения грид-систем на веб-сайтах и ​​в приложениях.

6. Урок решеток — ограничения инвестируйте в творчество

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

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

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

Системы

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

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

5 главных советов по использованию сетки

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

1. Спланируйте, как сетка соотносится с контейнером

Йозеф Мюллер-Брокманн в своей книге Grid Systems подчеркнул, что то, как сетка расположена на странице — как настраиваются поля — может иметь большое влияние на то, как сетка работает, как функционально, так и эстетически.

2. Не просто проектируйте с сеткой — создавайте сетку

При открытии нового документа для разработки публикации или веб-сайта возникает соблазн начать с «обычной» сетки — возможно, с количества столбцов, к которому вы привыкли, или с ширины поля, которую вы всегда используете. Но стоит остановиться на бумаге и потратить время на то, чтобы решить, какая сетка действительно нужна вашему проекту. Это может спасти вас от привязки к сетке, которая на самом деле не работает для того, над чем вы работаете.

3. Всегда начинайте и заканчивайте элементы в поле сетки, а не в желобе

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

4. Не забывайте о выравнивании по базовой линии

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

5. Для веб-дизайна и дизайна пользовательского интерфейса рассмотрите возможность использования такой системы, как сетка 8 пикселей

Сегодня наши дизайны должны работать и выглядеть четкими на разных устройствах и экранах. Использование размеров и интервалов, кратных основному числу, помогает сделать эти переходы чистыми и систематическими. Сейчас принято использовать сетку 4 или 8 пикселей, потому что это означает, что дизайн может идеально масштабироваться на экранах сетчатки: один пиксель на экране с низким разрешением становится сеткой 2 на 2 пикселя на экране с высоким разрешением.

Дополнительные ресурсы по сеткам

типов сеток для создания профессионального дизайна

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

Layout придает смысл вашему дизайну и делает его визуально привлекательным. Это помогает поддерживать баланс от страницы к странице или от слайда к слайду.

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

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

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

Макетирование: части сетки

Анатомия сетки состоит из нескольких частей. Не каждая часть присутствует в каждой сетке; это зависит от вида сетки. Здесь мы рассмотрим самые важные части сетки.

Вы можете узнать многие из этих терминов в программах для создания документов, таких как Microsoft Word, Google Docs или Pages. Внешний вид вашего документа определяется этими разделами сетки, включая поля, верхний колонтитул, нижний колонтитул и номера страниц.

Формат

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

Маржа

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

Создавайте профессионально выглядящий визуальный контент с помощью этого инструмента DIY.Попробуй бесплатно

Трубопроводы

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

Модули

Модули — это строительные блоки любой сети. Это промежутки, созданные между линиями отвода и вертикальными линиями.Вертикальные группы модулей вместе образуют колонны. Горизонтальные группы образуют ряды.

Пространственные зоны или регионы

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

Колонны

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

рядов

Строки — это горизонтальные пространственные зоны, которые полностью помещаются слева направо.

Желоба

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

Маркеры

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

Типы сеток

Сетки макетов

используются для дизайн-проектов, которые содержат от одной страницы до нескольких сотен. Это своего рода сетки, которые организуют элементы внутри пространства. Например, в документах Word есть сетка, просто они не всегда видны. Сетки макета помогают дизайнерам позиционировать текст и изображения так, чтобы они выглядели последовательными и понятными.

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

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

Давайте рассмотрим пять видов сеток макетов; рукопись, колонка, базовая линия, модульная и иерархическая.

• Сетки рукописей используются в документах, электронных книгах, PDF-файлах и презентациях с большим количеством текста.
• Сетки столбцов используются в журналах для организации содержимого в столбцы, чтобы его было легче читать.
• Базовые сетки немного более технические и определяются строкой, в которой находится текст.Эта сетка создает хороший ритм чтения для любого дизайна с большим количеством текста.
• Модульные сетки похожи на шахматную доску, на которой можно отображать множество объектов для облегчения доступа.
• Иерархические сетки в основном используются на веб-сайтах, упорядочивая контент в соответствии с их важностью.

Сетка рукописей

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

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

Воспользуйтесь функцией привязки к сетке в этом самодельном инструменте создания визуального контента. Попробуйте это бесплатно.

Сетка колонн

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

Сетка столбцов может иметь от двух до шести или более столбцов, но это не очень распространено.

Текст и изображения в сетке столбцов размещаются по вертикальным линиям и линиям разнесения, составляющим столбцы. Изображения могут быть размещены внутри одного столбца или в двух или более, чтобы создать различный визуальный макет. Расстояние между столбцами (желобами) должно быть пропорциональным и постоянным по всему документу.

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

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

Отличным примером асимметричной сетки столбцов является общий макет сообщения в блоге (под заголовком). Если вы посмотрите на этот пример сообщения в блоге ниже, вы легко увидите, что он состоит из двух столбцов разной ширины: содержимого сообщения в блоге и боковой панели.

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

Модульная сетка

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

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

Источник изображения

Базовая сетка

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

Есть базовая сетка для чего-то, что вы часто использовали в школе и, возможно, все еще используете сейчас. У линованных тетрадей есть базовая сетка. Неудивительно, что учителя всегда хотели, чтобы мы писали на тетрадной бумаге, а не на белой. Это сохраняло хороший ритм в наших письменных заданиях. Если, конечно, наш почерк не был действительно крошечным или действительно огромным, а затем ритм улетучился.

Если вы внимательно посмотрите на этот листок записной книжки, вы увидите, что на нем также есть сетка документа, которая создает поля.Сетки почти везде, где размещаются текст и изображения. Почему бы не бросить вызов самому себе, чтобы найти их?

Иерархические сетки

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

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

При переходе к цифровым платформам газеты перешли от обычных симметричных сеток столбцов к сеткам иерархии со столбцами внутри пространственных зон.

Немного истории дизайна Общая информация

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

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

Как дизайнеры используют иерархию в веб-дизайне?

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

Источник изображения

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

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

Источник изображения

Создавайте профессионально выглядящий визуальный контент с помощью этого инструмента DIY. Попробуйте это бесплатно

Сетки композиции

Правило третей

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

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

Источник изображения

Золотое сечение

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

Золотое сечение тесно связано с последовательностью Фибоначчи. Это математическое уравнение управляет измерением Золотого Прямоугольника, идеально сбалансированной формы. Использование золотого сечения или группы золотых прямоугольников в ваших проектах будет соответствовать древней композиции природы.

Сетки композитные

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

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

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

Источник изображения

Выбор правильной сетки для макета

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

Шаблоны

существуют, чтобы сэкономить вам (и вашему дизайнеру) драгоценное время на построение сетки. Вы можете быть уверены, что большинство шаблонов в редакторе Visme были созданы в виде сетки. Те, которых не было, были созданы дизайнерами, у которых сетки укоренились в их видении после многих лет практики.Вы можете переключить опцию «привязать к сетке» в опциях просмотра редактора Visme.

Modular Grid: Полное руководство для начинающих

Хотите создавать удобные, приятно эстетичные веб-сайты? Используйте модульные сетки. Модульная сетка — это инструмент для организации визуального пространства.

Давайте посмотрим, почему модульная сетка так популярна и как ее использовать.

Зачем нужна модульная сетка

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

Веб-сайт построен на примере модульной сетки из Pinterest

Причины, по которым мы так тщательно используем их в веб-дизайне в настоящее время:

• Модульная сетка снижает вероятность ошибок при перемещении элементов между страницами.
• Модульная сетка помогает выравнивать элементы.Это упрощает добавление новых и поддержку старых.
• Сайты, построенные с использованием модульной сетки, выглядят более эстетично.
• На веб-сайтах, построенных с использованием модульной сетки, легче ориентироваться.
• С сайтами, построенными с использованием модульной сетки, проще создавать адаптивный дизайн веб-сайтов.

Как использовать модульную сетку

Модульная сетка — это инструмент, а не метод проектирования. Таким образом, прежде чем использовать сетку, вам понадобится концепция будущего участка.

Когда концепция готова, опишите все блоки страниц сайта и элементы блоков.

Откройте или создайте модульную сетку в редакторе изображений.

Нарисуйте блоки на модульной сетке.

Подсказка: левая и правая границы блоков всегда начинаются и заканчиваются на столбцах, а не на желобе. Границы всегда совпадают с границами столбцов, как показано выше.

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

Верстка сайта готова!

Где взять модульную сетку

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

Как нарисовать модульную сетку

Определение ширины рабочей зоны

Подсказка: общая ширина рабочей области составляет 960 пикселей. Но в настоящее время много пользователей широкоформатных мониторов, пользователей планшетов и смартфонов. Таким образом, команда, создавшая интерфейсный фреймворк Bootstrap, рекомендует увеличить общую ширину рабочей области:

• 1200 пикселей и выше для широкоформатного монитора
• 970 пикселей и выше для монитора по умолчанию
• 768 пикселей и выше для экрана планшета в портретной ориентации
• 767px и ниже для экрана телефона и планшета
• 480 пикселей и ниже для экрана телефона

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

Выберите количество столбцов

В веб-дизайне принято использовать модульную сетку с 12 столбцами. Другие возможные модульные сетки используют 16 и 24 столбца.

Рассчитайте ширину колонн и желобов и начертите их

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

Пример: У вас есть рабочая область 1200 пикселей и вы решили использовать 12 столбцов.

1200 пикселей / 12 = 100 пикселей для каждого столбца

Совет: Для разной ширины рабочей зоны используйте разные столбцы и ширину желоба.

Добавьте желоба 30 пикселей. Теперь это 12 столбцов шириной 70 пикселей и 11 полей шириной 30 пикселей.

100 пикселей = 70 пикселей + 30 пикселей

Подсказка: Промежуток не может быть меньше размера основного шрифта.

Добавьте 15 пикселей к левому полю для самого левого столбца и повторите для правого поля для самого правого столбца.Вычислить:

1200 пикселей = (70 пикселей * 12) + (30 пикселей * 11) + (15 пикселей * 2)

Нарисуйте сетку шрифтов

Сетка шрифтов — это горизонтальные ряды, определяющие вертикальный ритм и расположение шрифта. Расстояние между строками сетки шрифтов равно высоте строки основного шрифта.

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

Подсказка: Чтобы вычислить высоту строки, используйте калькулятор типографики золотого сечения.

Объединить строки сетки шрифтов в группы

Объединяет строки сетки шрифтов в группы из 3 или более строк. Теперь у вас есть горизонтальные столбцы с расстоянием между ними, равным одной строке. Эти столбцы добавляют горизонтальный ритм модульной сетке.

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

Генераторы модульных сетей

Модульная сетка

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

Подсказка: Есть некоторая путаница в настройках сетки Modular Grid Pattern:

• Базовая линия — расстояние между рядами шрифтовой сетки
• Ширина модуля — ширина колонки
• Кол-во модулей — кол-во столбцов
• Высота модуля — количество строк шрифтовой сетки, объединенных в группу

Вы можете загрузить расширение Modular Grid Pattern для Photoshop с этого сайта. Расширение позволяет создавать сетки прямо в Photoshop.

В модульной сетке нельзя настроить поля. Всегда помните об этом и добавляйте поля к вашей сетке в Photoshop.

Калькулятор сетки

Онлайн-калькулятор модульной сетки: позволяет создавать модульную сетку без сетки шрифтов. Самое замечательное в Grid Calculator — это то, что он позволяет правильно рассчитать ширину столбца.

Подсказка: Установите максимальную ширину рабочей области и количество столбцов, полей и желобов. Калькулятор сетки вычисляет ширину столбца и показывает текущую ширину рабочей области.Если вы используете правильные свойства, ширина страницы будет такой же, как максимальная ширина рабочей области. Если нет, калькулятор сетки показывает это.

После создания вы можете загрузить свою сетку как картинку в формате PNG или как файл для Photoshop или Illustrator.

960 Сетка

Готовая модульная сетка для ширины рабочей области 960px. Загрузите его и используйте с Photoshop, Fireworks и другими редакторами изображений.

Гридпарк

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

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

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

Когда вы создаете несколько сеток для разных экранов, вы можете загружать их все в виде файлов PNG, CSS, LESS, SCSS и JavaScript.

типов сеток, полезных для графических дизайнеров

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

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

По сути сетки бывают четырех типов, а именно:

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

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

1. Сетка рукописи
2. Сетка столбцов
3. Модульная сетка
4. Иерархическая сетка

См. Приведенный ниже пример практического использования системы сеток при компоновке.

Теперь давайте обсудим эти сеточные системы более подробно.

1. Сетка рукописей

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

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

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

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

2. Сетка столбцов

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

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

Желоба для колонн

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

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

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

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

3. Модульная сеть

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

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

Модули

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

Сайт UX Magazine — наглядный пример модульной сетки в действии. Если вы посмотрите на середину страницы, отдельные модули ясно видны, поскольку они образуют матрицу 8 × 7 на странице.Каждый модуль имеет размер примерно 120 пикселей на 120 пикселей с промежутками 5 пикселей между ними. Обратите внимание, как формируются поля для поддержки содержимого большего размера, чем позволяет каждый из модулей по отдельности. Это делает сетку менее регулярной и создает более интересные формы и узоры в дизайне.

4. Иерархические сетки

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

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

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

Заключительные слова о сеточных системах для графических дизайнеров

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

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

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

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

---

Просмотреть полную презентацию на слайд-шоу: Сеточные системы в графическом дизайне

Сеточные системы в графическом дизайне, Институт мультимедиа ADMEC из Институт мультимедиа ADMEC

Создание модульных сеток за секунды — базовый дизайн

Мир невидимых структур

Мой первый опыт работы дизайнером начался с макета журнала.Другими словами, все началось с сетки. Эти тонкие красные линии в InDesign середины 2000-х. Я помню то любопытство, с которым я изучал, как они работают, какие они могут быть и как правильно их использовать в любой конкретной ситуации. В стране, в которой я жил, было почти невозможно просто пойти и купить прилично выглядящий журнал или какую-то конкретную книгу по какой-либо теме. Что касается сеток, то вокруг ходила пара книг — хорошие книги, такие как «Форма книги» Яна Чихольда, «Сеточные системы в графическом дизайне» Йозефа Мюллер-Брокманна и кое-что еще, что я не совсем могу вспомнить.И, конечно же, как и многие другие дизайнеры, я постоянно исследовал мир коммутируемого доступа в Интернет в поисках статей, правил, книг, примеров или даже сопутствующих материалов. Прошло около 10 лет с тех пор, как я сделал и забыл этот макет журнала, но это любопытное чувство не покидает меня до сих пор. Думаю, он даже стал больше.

Как все начиналось

Примерно год назад во время моего короткого визита в Москву меня попросили сделать серию прототипов для одного из главных российских оппозиционных СМИ — Новой газеты.Я был рад принять эту работу в основном по двум причинам: я всегда любил проекты, связанные со СМИ + проект, как правило, выполнялся одной из самых известных дизайн-студий России под названием Charmer, которая отвечает почти за все достойные редизайны российских СМИ прошлых лет.

Перед тем, как приступить к исполнению, мы провели пару переговоров с арт-директором и соучредителем Charmer Александром Гладких о различных подходах к редизайну медиа, использованию грид-систем, будущем технологий и роли медиа в нем.Я был вдохновлен его работами и системным подходом, которые явно выделяли его проекты среди остальных.

Он показал мне некоторые из своих сеток, которые были пропорциональны в зависимости от типа носителя, который он использовал в своем проекте (например, 16×9 для веб-сайтов с большим количеством видео, 3×2 для фотографий и т. Д.). Для меня это был новый подход, учитывая, что я обычно строил свои сеточные системы на основе значений базового типа — определяя вертикальный ритм и затем составляя макет с учетом этого.Итак, наши разговоры вызвали много размышлений и исследований, которые также привели меня к поиску алгоритма, который объединял бы медиа-ориентированный и типоцентричный подходы в одну систему с помощью нескольких вычислений. Идея заключалась в том, чтобы превратить эти расчеты в простой в использовании мастер, который позволил бы любому дизайнеру опробовать его и, к счастью, внести свой вклад в расчеты при проектировании макета.

Почему это вообще важно

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

Итак, начнем с текста. Очевидно, чтобы визуализировать это, нам нужны шрифты, разборчивость которых позволит нашим читателям беспорядочно воспринимать информацию, которой авторы или редакторы веб-сайтов собираются поделиться. Среди всех стилей текста, которые могут быть представлены на вашем веб-сайте (заголовки, заголовки, лиды и т. Д.) Основной текст (тот, который вы читаете прямо сейчас) — это тот, который вы читаете чаще всего. Итак, когда дело доходит до разборчивости текста, это правильное место для начала. Как мы знаем из более ранних исследований, разборчивый текст, будь то книга или веб-сайт, должен иметь хорошо выверенный вертикальный ритм внутри.А когда дело доходит до настройки свойств основного текста, чтобы сделать его разборчивым с точки зрения вертикального ритма и, в соответствии с вашими знаниями, большинство графических редакторов (например, Sketch, Photoshop или Illustrator) помимо процесса выбора шрифта, который мы собираемся рассмотреть позже, заставит вас иметь дело с двумя основными числами — размером шрифта и высотой строки, что в результате даст вам соотношение размера шрифта / высоты строки основного текста (давайте назовем его flr для дальнейшего использования) . На иллюстрации ниже вы можете увидеть основные копии некоторых популярных медиа-сайтов.

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

Когда вы начнете применять разные шрифты к своему основному тексту (используя те же самые flp), вы обнаружите, что (среди других визуальных изменений) вертикальный ритм вашего тела изменится, а иногда и очень сильно.Вы можете увидеть это в примере ниже, где я использовал Helvetica Neue и Baskerville с одинаковыми значениями размера шрифта / высоты строки.

Это означает, что вы не можете просто выбрать любой шрифт с сайта, который вам нравится, применить его к выбранному вами шрифту и ожидать, что он сработает. Этого не будет, и в основном потому, что разные шрифты, среди других различий, имеют разные значения x-height, как в примере с Helvetica Neue (x-height составляет около 50% от font-height) и Baskerville (x-height намного ниже 50 % от font-height).Но значение x-height (как и многие другие значения шрифта) нельзя увидеть в Sketch или Photoshop, поэтому вы можете использовать свои глаза, опыт и чувство прекрасного, чтобы выбрать шрифт, который будет формировать ритм, который вам подходит. ваша основная копия нужна. Итак, вот где начинается первая задача.

Я искал хорошее прочтение относительно отношений и настроек x-height / font-height и нашел один интересный момент в презентации Xavier Bertels, где он заявил, что существует сильная зависимость между разборчивостью основного текста и x-height / em- отношение высоты бокса (размер строчных букв по сравнению с прописными) и максимально близкое расстояние по оси x до 50% от высоты бокса, что лучше для разборчивости основного текста.Он даже составил формулу для этого, которая проиллюстрирована далее, с 16 в качестве размера шрифта и 8 в качестве значения высоты по оси x:

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

Итак, после того, как вы выбрали шрифт для основного текста, определили его подходящий размер и высоту строки, у вас есть число, которое теперь можно использовать для построения базовой сетки.В моем случае это число (базовый микромодуль) — это высота строки основного текста, деленная на 2 или 3 в некоторых случаях. Ксавье предлагает разделить его на 3 или 4 в своей презентации, но это действительно зависит от вас, если вы можете разделить его. Итак, если высота строки моего основного текста составляет 22 пт, мой базовый микромодуль будет 11 пт. Как это просто. Теперь я могу построить что-то вроде этого:

И затем я могу установить на нем свой тип:

Следующий шаг — это немного сложнее. Нам нужно нарисовать вертикальные линии, которые будут нашими столбцами, и скажем, нам нужно 12 из них для этого.Теперь нам нужно указать ширину нашего столбца и значения наших желобов (если, конечно, они нам нужны). Эти ширины могут определяться конкретными пропорциями медиа, которые должны соответствовать любому количеству наших столбцов, типичной шириной рекламного баннера или размерами любого графического объекта, который мы могли бы использовать в любом точном размере. Если мы говорим о наиболее распространенных пропорциях медиа, я бы назвал 3: 2 (обычно используется для фотографий) и 16: 9 (обычно используется для видео). Есть также много других пропорций, которые вы можете найти в Интернете или распечатать.Что интересно в пропорциях, так это то, что они универсальны и имеют смысл не только в графическом представлении, но и, например, в качестве звуков.

«3: 2, помимо общепринятой пропорции для фотосъемки, в музыке называется Perfect Fifth, и служит для настройки скрипки, начиная с 14 века»

Итак, теперь нам нужно выровнять наши пропорции (давайте выберем 16: 9) с нашим базовым ритмом, чтобы сформировать систему. Когда я впервые столкнулся с этой проблемой, я решил рассчитать ее таким образом — возьмите все блоки 16: 9, которые существуют в диапазоне от 160/90 пикселей до 1280/720 пикселей, и выясните, какой из них делится на 11, значение, соответствующее моему базовому ритму.Если вы хотите понять, как это выглядело, вот сокращенная версия процесса:

Я взял все свои блоки, и, поскольку они имеют одинаковую пропорцию (16: 9), я легко расположил их друг с другом. Затем нарисуйте столбцы по ширине меньшего блока. И, конечно же, все блоки соответствовали моему базовому ритму в 8 пикселей. Позже я обнаружил, что ту же логику можно наблюдать и в аранжировке обертонов в музыке.

Из этого небольшого эксперимента мы узнали, что в энтропии всех возможных значений сетки есть такие, которые не только соответствуют определенным отношениям и могут образовывать внутри себя иерархическую структуру размеров, но также полагаются на заранее определенный вертикальный ритм, то есть хранится в вашей основной копии.Кроме того, эти иерархические системы легко делятся на столбцы, при этом в качестве ширины столбца используется наименьшая ширина блока. Итак, вместо того, чтобы пытаться поместить слона в заранее заданный бокс (в нашем случае это типичная ширина сетки, например, 960 или 1024 пикселей, которые многие используют по умолчанию), мы можем создать коробку в соответствии с метриками слона и позволить ему войти. с вдохом. Что нам нужно, так это применить математику, чтобы извлечь значения из наших настроек типографики и использовать их в качестве фильтра, чтобы выбрать правильные размеры из последовательности выбранных соотношений.И построить из этого всю систему. В тот момент я подумал, что было бы хорошо проконсультироваться с кем-нибудь с большим опытом в математике и программировании. В следующей части статьи я перейду к моему соучастнику в преступлении — Назару Грабовскому, который присоединился ко мне в этом проекте, начиная, ну, сейчас.

Как принять участие

Назар Грабовский

Я никогда не занимался ни веб-дизайном, ни типографикой, но всегда интересовался анатомией шрифта, как достигается хорошая разборчивость и связанными темами.После того, как Росс предложил мне свою идею, я нашел ее весьма интересной и предложил помощь в решении численных задач, с которыми он столкнулся. Некоторое время занимаюсь разработкой различных алгоритмов, в том числе для обработки графики и изображений. И, на первый взгляд, казалось, что ритм в сетках должен иметь лаконичное и элегантное арифметическое решение. Но сначала мне пришлось погрузиться в мир типографики. Обсуждая с Россом и исследуя идею ритма, как его получить и применить, я довольно много узнал о современной типографике (как для новичка в этой области).Вы можете получить представление о том, какие эпистемологические усилия мне пришлось приложить, взглянув на мои записи.

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

Аналитическое решение

Основным числом, определяющим весь ритм, является базовое число, которое в основном представляет собой долю высоты строки, обычно деленную на 2 или 3 (не путать с базовой метрикой — горизонтальной линией, на которой расположены буквы. . Базовое число — это просто число, полученное из значений метрик шрифта).На основе базового числа нам нужно получить размер микроблока — максимально возможный блок, соответствующий ритму в пределах одного столбца. Такой микроблок позволяет наращивать блоки большего размера и остальную часть сетки. Нетривиальная роль вступает в игру, когда мы рассматриваем желоба, и по определению они должны быть кратны базовому числу. Следовательно, желоба также становятся частью больших блоков, и такой случай вводит головоломку в вычисление оптимального ритма. Без желобов решение довольно простое — просто целочисленное деление без остатка.При использовании желобов необходимо учитывать ширину макета (как верхний предел) одновременно с номером базовой линии (как кратное число желобов). Следовательно, базовое количество по сравнению с размером желоба является основной взаимосвязью между вертикальными и горизонтальными размерами микроблока.

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

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

Генератор ритмической сетки

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

Один интересный факт обнаружился при доработке десятков сгенерированных макетов.Некоторые соотношения блоков более гибкие, чем другие. Поскольку в медиа используется довольно ограниченное количество пропорций, мы рассматриваем только пропорции 1: 1, 3: 2 и 16: 9. Для 1: 1 вы можете получить ритмические блоки практически любого размера желоба. Но для 16: 9 все наоборот — вы можете использовать только нулевой промежуток, чтобы получить желаемые пропорции блока. Наконец, 3: 2 посередине, в нем изрядно ритмов, но не так много, как 1: 1. В основном это из-за числа 9, поскольку нечетные числа не так удобны для делимости, как числа 1 и 2.И вы мало что можете с этим поделать, если хотите, чтобы соотношение было строго точным.

Следующим шагом было создание веб-приложения. И здесь начинается еще одно развлечение — точная типографика в браузере. Две основные проблемы, с которыми мы столкнулись, заключались в позиционировании базовой линии текста с точностью до пикселя и как извлечение вертикальных метрик шрифта . Проблема с метриками шрифтов в сети практически решена. Например, OpenType.js позволяет извлекать все показатели, содержащиеся в файле шрифта.Но настоящая проблема возникает, когда мы хотим использовать пользовательские шрифты, уже присутствующие в его системе. Поскольку браузеру (веб-приложению) запрещен автоматический доступ к файлам без явного взаимодействия с пользователем, всплывающих окон и т. Д., Невозможно использовать такие инструменты, как OpenType, поскольку для этого необходимо знать, где находятся файлы шрифтов. Более того, мы даже не можем надежно проверить, какие шрифты на самом деле присутствуют в системе пользователя.

Нам нужно было придумать способ обнаружения системных шрифтов и извлечения их метрик.К счастью, мы были не первыми, кто столкнулся с этой загадкой, и нам было достаточно просто объединить существующие решения. Уловка обнаружения шрифтов основана на изящной идее о том, что несколько повторяющихся букв занимают некоторую уникальную ширину для каждого шрифта при отображении в браузере. Следовательно, если выбранный шрифт отсутствует в системе пользователя, тогда образец текста отображается с использованием резервного шрифта, который имеет другой горизонтальный диапазон, и мы можем проверить его заранее. Что ж, на самом деле это своего рода решение методом перебора, поскольку существует низкая вероятность обнаружения коллизий (когда два одинаковых образца текста с разными гарнитурами занимают одно и то же горизонтальное пространство), но на самом деле оно довольно хорошо работает для большинства стандартных семейств шрифтов.

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

На этом этапе обнаруживаются популярные системные шрифты (только их названия), но все же нам нужно как-то извлечь из них метрики шрифтов и визуализировать их. Ни один из браузеров не предоставляет готового решения для получения информации о глифах шрифтов и их метриках, поэтому работа с вертикальными метриками анализируется и извлекается с помощью графических инструментов, доступных в браузере.В частности, выбранный шрифт визуализируется на 2D-холсте браузера, а затем анализируется с помощью небольшого кода и метода сканирования — традиционного в семействе алгоритмов компьютерной графики. Обнаруживая линии нижней и верхней границы для глифов H , d , x , p по отдельности, мы фактически получаем основные вертикальные метрики для выбранного шрифта — высоту шапки, подъем, x-высоту и спуск соответственно. Теперь, когда у нас есть системные шрифты и их метрики, извлеченные , мы можем вычесть значение UPM x-height, чтобы оценить разборчивость шрифта и визуализировать, насколько оно отклоняется от рекомендованного 500UPM .

Кредит для извлечения показателей динамического шрифта принадлежит Майку Камермансу из команды Mozilla Foundation.

Вся эта проблема с обнаружением шрифтов и извлечением метрик была сделана, потому что мы хотели, чтобы веб-приложение генерировало ритмические сетки. Кажется, теперь у нас есть вся информация, необходимая для построения сетки в веб-макете. Но подождите, не так быстро. Выскакивает еще одно препятствие. Похоже, что CSS не обеспечивает контроль над позиционированием текстовой базовой линии (на этот раз мы говорим о фактической базовой линии, а не о номере базовой линии).И очень важно отображать ритмическую сетку с точностью до пикселя, поскольку мы хотим разместить текст точно на базовых линиях, которые равномерно распределены в сетке. Я имею в виду, что в CSS вы можете позиционировать текст по вертикали, как хотите (относительно, абсолютно, смещенный на разные единицы) и указывать высоту строки для многострочного текста, но вы не можете контролировать, где именно базовая линия текста помещается для произвольного шрифта. Простое упражнение по разметке веб-страниц для изучения этой проблемы: поместите текст, нарисуйте горизонтальную линию и расположите эту линию, как если бы она была базовой.Затем произвольно измените гарнитуру или размер шрифта. Попробуй сам. К сожалению, текст больше не соответствует базовой линии после изменения шрифта? К сожалению, консорциум W3C заявляет об этом прямо: «CSS не определяет положение базовой линии строчного блока» (стандарт W3C CSS). Это означает, что вы не можете указать положение базовой линии при размещении фрагмента текста. Поэтому каждый поставщик браузеров реализует автоматическое базовое позиционирование в соответствии со своими убеждениями, и, конечно, они различаются между браузерами (хотя и не во всех).

К счастью, ребята из сообщества Adobe столкнулись с подобной проблемой, поэтому я позаимствовал их решение стойки для выравнивания буквицы (кредит Алана Стернса) и адаптировал его только для выравнивания базовой линии, но для многострочного текста. Попытайся. У трюка Strut все еще есть ограничение на минимальную возможную высоту строки, обычно около 120% в зависимости от шрифта. Но это единственное жизнеспособное кросс-шрифтовое и кросс-браузерное решение, которое я смог найти на данный момент. Я хотел бы услышать ваши идеи о том, как найти идеальное решение без ограничений.Если вы хотите лучше понять, что здесь происходит, есть отличная статья Кристофера Ауэ, объясняющая внутреннее устройство выравнивания в CSS и связанные с этим проблемы — «Вертикальное выравнивание: все, что вам нужно знать».

Заключение

Пифагор и его последователи считали, что «все есть числа». Они также считали, что если вы хотите сделать шаг в понимании и разрушении любых типов гармонии, цифры — это то, что нужно для начала. В нашем небольшом эксперименте мы выяснили, что по крайней мере некоторые аспекты композиции можно и нужно рассматривать через призму чисел.Конечно, в области дизайна и компоновки еще много неоткрытых жемчужин, но мы считаем, что точные пропорции могут дать дизайнерам лестницу к более глубокому пониманию принципов, лежащих в этой странной вещи, которую мы называем «красотой». Это был первый шаг, и это еще не все. Теперь мы приглашаем вас посетить concordiagrid.com и самостоятельно исследовать мир вычислительных гридов и… оставаться на связи.

Модульный дизайн: полный учебник для начинающих

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

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

Что такое модульный дизайн?

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

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

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

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

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

Корни в других областях

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

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

Модульный в полиграфическом дизайне

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

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

Этот тип сетки может быть настроен практически в любом типе программного обеспечения для графического дизайна, которое вы хотите использовать, и состоит из горизонтальных и вертикальных линий сетки и желобов (направляющих расстояния).После того, как сетка нанесена на холст, она должна выглядеть как серия «блоков» — хотя они не обязательно должны быть квадратными — и тонких блоков (которые являются направляющими желоба или открытого пространства).

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

Вот некоторые комбинации фото-изображения, чтобы дать вам представление о том, как блоки сетки работают вместе:

Модульный дизайн в веб-дизайне

Первое, с чем вы столкнетесь, говоря о модульном дизайне веб-сайтов, — это то, что это скучно.Вы можете преодолеть это прямо сейчас. Любой дизайн может быть скучным или интересным, но сама по себе сетка этого не определяет.

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

Но это также отличный инструмент для создания множества других типов веб-сайтов.Как и в случае с модульным дизайном печати, концепция основана на вертикальной и горизонтальной сетке на холсте. Отличия — это прокрутка и точки останова для разных разрешений экрана. (Здесь вы можете творить чудеса CSS, и мы сосредоточимся исключительно на визуальном аспекте.)

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

Это простой путь к модульности.

Есть еще вариант «сделай сам». Модульные сетки веб-сайтов, как правило, имеют блоки большего размера, чем сетки для печати, и разбивают экран на удобоваримые части. Самый простой способ представить это в формате двух столбцов, которые разделяют экран пополам по вертикали (с желобом). Горизонтальное деление часто соответствует глубине прокрутки, что особенно популярно при работе с анимацией прокрутки с параллаксом.

Одно из лучших простых (и наглядных) определений того, как работает модульный дизайн для веб-сайтов, дано Кристофером Батлером из Newfangled:

10 Ресурсы для модульного проектирования

Теперь, когда вы готовы начать свой первый проект модульного дизайна, вот еще несколько ресурсов, которые помогут вам на этом пути.

1. Modular Grid Pattern: Модульные сетки, которые можно настроить и загрузить.
2. «Модульный и немодульный дизайн: разговор продолжается» Марио Гарсиа
3. Architizer’s All Mod Everything: Примеры для вдохновения
4. «Создание модульных компоновочных систем» Джейсона Санта-Мария
5. Книга по сеткам и макетам: «Основы макета: 100 принципов проектирования для использования сеток»
6. Сетки и экспериментальная типографика (загружаемый PDF)
7. Сложная модульная сетка Карла Герстнера: Если вы действительно хотите поразить воображение о способах разработки модульной сетки
8. Griddle: CSS для гибкой и модульной системы сеток для современных браузеров
9. Как создать модульную сетку в Adobe Illustrator
10. Модульные темы от ThemeForest

Заключение

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

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

Источники изображений: Луиза Коэн и Нильс Менгедохт .

.