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

Modular Grid by Jan Vantomme. Источник:http://generative.systems/modular-grid/

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

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

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

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

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

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

В качестве примера, можно привести простые страницы блогов, статей, новостей, где страницы предназначены для сплошного чтения. Источник: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 пикселей, т. к. у большинства распространенных девайсов размер экрана в пикселях кратен восьми, следовательно разрабатывать дизайн интерфейсов для них с этой системой будет проще. Кроме того, если все числовые значения четные, масштабировать размеры и расстояния для широкого круга девайсов, сохраняя дизайн в исходном виде, становится проще.

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

Рекомендация по использованию 8-пиксельной сетки есть и в Human Interface Guidelines Apple.

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

8,16,24,32,40,48,56,64,72,80,88,96,104,112,120 15 рамеров

10,20,30,40,50,60,70,80,90,100,110,120 12 размеров

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

Пример использования 6-ти пиксельной сетки. Источник: внутренняя система EPAM Learn

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

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

Источник:https://spec.fm/specifics/8-pt-grid

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

4-x пиксельная сетка Material Design. Источник:https://material.io/design/layout/spacing-methods.html#baseline

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

При выборе базовой сетки, важно помнить, что шаг сетки должен ровно укладываться в высоту строки основного текста. Допустим, в качестве базового шрифта вы выбрали шрифт с кеглем 16 пикселей, тогда согласно рекомендациям современной типографики интерлиньяж составит 150–200% от кегля (иногда и более). Чтобы 8-ми пиксельный блок базовой сетки уложился ровное количество раз в высоту строки, можно выбрать в качестве интерлиньяжа значение равное 24 пикселям. Отталкиваясь от этой высоты строки основного текста, можно разлинеить макет и следовать вертикальному ритму.

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

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

Узнать больше: CSS Baseline: The Good, The Bad And The Ugly «Smashing Magazine».

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

Вертикальный ритм на примере использования строк, высота которых равна высоте блока базовой сетки. Источник: внутренняя система EPAM Learn

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

Источник: внутренняя система EPAM Learn

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

Что учитывают при построении колоночной сетки

Точки перехода (breakpoints)

В адаптивном дизайне нужно сохранять структуру макета и аккуратность подачи информации для всех разрешений, поэтому макеты следует делать для всех контрольных точек. Колонки сетки могут оставаться статичными и добавляться по мере увеличения ширины экрана, а элементы менять свое положение, подчиняясь колоночному ритму и точкам перехода (breakpoints). За таковые можно принять 480, 600, 840, 960, 1280 и 1440. И для каждого разрешения экрана соответственно будет разное количество колонок. В качестве подробного примера, рекомендуется ознакомиться с Material Design responsive layout grid. При жестком дедлайне, вы можете выбрать наиболее популярные 2–3 точки перехода, используя веб-аналитику вашего ресурса или ваших конкурентов.

Пример переиспользования точек перехода Material Design responsive laoyout grid для внутреннего проекта EPAM

Или можно сохранять количество колонок для всех точек перехода и изменять пропорционально размер колонок и межколонников между ними.

Использование 12-ти колоночной сетки на примере карточек для внутреннего проекта EPAM Events

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

Пример расчета сетки для точки перехода в 1280 пикселей.

Определим количество колонок. Например, будет галерея из шести фотографий с текстовыми описаниями, два крупных графика и три абзаца текста. Тогда число колонок должно быть кратно 2, 3 и 6. Подойдет число 12. Деление рабочей области в 1280 пиксeлей на 12 колонок (columns) с шириной межколонников (gutters) например в 20 пикселей даст ширину колонок в 85 пикселей при резервировании по 20 пикселей отступов с правого и левого края. Таким образом у нас получилось 12 колонок по 85 пикселей, 11 межколонников по 20 пикселей и по 20 пиксeлей осталось на правое и левое поле (margins).

1280px = (85px*12)+(20px*11)+(20px+20px)

Такое распределение дает комбинации элементов разных размеров.

В вебе также используется понятие Fluid Grid или «резиновая» сетка. Ее особенность в том, что расстояния для нее задаются не в пикселях, а в процентах. За 100% принимается область контента. Ниже упрощенный пример для ширины макета в 1000 пикселей с 6-ю колонками.

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

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

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

Укрупнение колонок для первой и третьей глобальных секций ресурса. Источник:https://www.nationalgeographic.com/

Сетка в сетке

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

Не начинайте поиск дизайн решения с построения сетки. Сначала необходимо:

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

Только теперь можно начать прорабатывать сетку:

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

Важно! Сетка должна не диктовать, а помогать в дизайне. Поэтому, от сетки можно отступать! Не нужно беспрекословно все выравнивать по сетке. Если какой-то блок никак не помещается в вашу сетку, его можно не подстраивать.

Пробуйте и у вас все получится!

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

• Модульная сетка http://tilda.education/courses/web-design/grid/
• Вертикальный ритм https://habr.com/company/edison/blog/340670/
• 8pt Grid for Web (RU) https://designpub.ru/https-medium-com-simberev-8pt-grid-for-web-f05fccc956ab
• 8pt Grid for Web https://spec.fm/specifics/8-pt-grid
• Модульная сетка с нуля https://habr.com/post/344910/
• Руководство по сеткам http://deadsign.ru/design/grids_in_web_design/
• Сетки для адаптивного дизайна https://habr.com/company/rambler-co/blog/261679/
• Гештальт-принципы https://habr.com/ru/company/cloud4y/blog/347444/
• Building Better UI Designs With Layout Grids https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/

Для углубленного изучения есть хорошие материалы:

• Описание поведения Material Responsive сетки и точек перехода(breakpoints) для нее Material Responsive Grid
• Документация одной из самых популярных сеток Bootstrap Grid system
• Изучить истоки можно ознакомившись с книгой Йозефа Мюллер-Брокманна «Модульные системы в графическом дизайне»

Конец 🙂

Если вы узнали что-то новое, то не забудьте похлопать 🙂

Как создать идеальную журнальную сетку в Adobe InDesign

• 
  Дизайн
• 4 мин на чтение
• 
  13349

Убеждённая сторонница использования журнальной сетки Джо Гулливер делится своими секретами её построения, которая придает структуру страницам без ущерба творчеству.

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

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

1. Журнальная сетка

Сначала необходимо произвести некоторые математические расчёты, чтобы создать сетку документа, которая будет соответствовать ширине страницы. Для этого создайте новый документ со страницей стандартного послеобрезного журнального формата — 222 х 300 мм. Затем выберите в меню опцию «Facing Pages» и добавьте вылет по 3 мм с каждой стороны.

2. Правила интерлиньяжа

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

3. Математика сетки

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

4. Визуальный подход

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

5. Округление

Округлите полученную величину до ближайшего значения и разделите ширину страницы на полученное значение (222 мм / 55 = 4,036), чтобы задать новый интерлиньяж, который вы примените к своему документу и сетке из базовых линий. Помните о том, что программа InDesign воспринимает величины с не более чем тремя цифрами после десятичного разделителя.

6. Применение сетки

В меню «Preferences» выберите опцию «Grids». Введите новое значение интерлиньяжа в поле «Increment Every» в разделе «Baseline Grid». Программа InDesign автоматически конвертирует данное значение в точки. Введите это же значение в поля «Gridline Every» в группах «Horizontal» и «Vertical» в разделе «Document Grid».

7. Составная сетка

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

8. Еще немного математики

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

9. Метод проб и ошибок

Данная величина должна быть меньше количества квадратов по ширине документа. Первая пробная сумма может быть такой: 12 (количество квадратов сетки) х 4 (интерлиньяж) + 11 (промежутки между колонками) = 59. Полученная величина не подходит, поэтому надо уменьшить количество квадратов документа, из которых будет состоять каждая колонка.

10. Правильный результат

Попробуйте так: 12 x 3 + 11 = 47. При таком расчете у вас остается восемь квадратов для полей. Теперь вы можете применить данные величины для шаблонной страницы. Как правило, при создании сетки для колонок размер поля должен быть хотя бы в два раза больше промежутка между колонками, а промежуток между колонками должен быть либо равным, либо в два раза больше интерлиньяжа.

11. Верхнее и нижнее поля

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

12. Создание множественных шаблонных страниц

Создав документ, вы можете начать создавать множественные шаблонные страницы с разным количеством колонок. Отметьте курсором обе страницы, нажмите кнопку Ctrl или Right-click и нажмите «Создать дубликат разворота шаблона „A-Master“ (имя разворота)». Затем откройте диалоговое окно «Margin and Columns» и измените количество колонок.

Источник: Magazine Design

• #indesign
• #верстка
• #дизайн
• #журнал
• #журнальная верстка
• #сетка
• #советы
• #статья

• 
  
• 
  0
• 
  

Создание модульной сетки в Illustrator

• Программное обеспечение: Illustrator (открывается в новой вкладке) CS4 и более поздние версии
• Время проекта: 5 минут (только сетка)
• Навыки: Тип структуры и иллюстрации более эффективно, Создание модульной системы сетки в Ill Устратор

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

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

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

Шаг 01

В Illustrator создайте документ для листовки. В этом примере я создаю немного более короткий документ формата A5 размером 148×208 мм (обычно 210 мм). Теперь определитесь с полями — я выбираю 10 мм, так как это должно дать достаточно «безопасного пространства» между границами и иллюстрацией.

Шаг 02

Чтобы создать сетку, сначала нарисуйте прямоугольник размером 128×188 мм. Чтобы рассчитать, насколько большим должен быть этот прямоугольник, я вычел поля (по 10 мм с каждой стороны) из размера моей страницы. Итак, в этом случае: 148 минус 10 (левое поле), минус 10 (правое поле) равно 128 мм. Поместите этот прямоугольник в центр вашей страницы (Выровнять по монтажной области>Горизонтальное выравнивание по центру>Вертикальное выравнивание по центру).

Шаг 03

Выделив прямоугольник, перейдите в Object>Path>Split Into Grid. Мне нужны модули площадью 4 мм2, поэтому для расчета количества рядов возьмите высоту (188 мм) и разделите ее на четыре. Это дает 47, поэтому введите это в поле Ряды>Число и измените высоту на 4 мм, желоб на 0 и общее значение на 188. Для столбцов возьмите ширину (128 мм) и разделите ее на 4. Это дает 32, поэтому введите это в поле «Столбцы»> «Число». Измените ширину на 4 мм, отступ на 0 и общее значение на 128. Отметьте Предварительный просмотр, чтобы увидеть деления.

Шаг 04

После того, как вы нажмете OK, вы получите прямоугольник, разделенный на квадраты со стороной 4 мм. Чтобы превратить это в направляющие, выберите квадраты (Cmd/Ctrl+A). Затем нажмите Cmd/Ctrl+щелчок, выберите «Создать направляющие», и это превратит вашу сетку в направляющие. Теперь у вас есть гибкая модульная сетка, с которой можно согласовать дизайн.

Шаг 05

Теперь, когда ваша система сетки готова, начните макетировать грубый макет, используя прямоугольники 4 мм. Дизайн этого флаера вдохновлен теми же линиями и углами, что и логотип BVD (Bike v Design). Используя интеллектуальные направляющие (Cmd/Ctrl+U), перетащите каждый прямоугольник на место, убедившись, что все они находятся в пределах сетки 4 мм. Направляющие могут отвлекать, поэтому их можно включать и выключать на протяжении всего процесса (Cmd/Ctrl+;).

Шаг 06

Чтобы разбить дизайн и продолжить тему логотипа BVD, я хочу добавить круги к своему узору. Чтобы убедиться, что они находятся в моей сетке, я нарисовал свой первый круг размером 140 мм с толщиной штриха 4 мм. Мой второй круг нарисован на 124 мм, также с толщиной штриха 4 мм, что означает, что теперь между двумя кругами есть пропорциональное пустое пространство. Я продолжал делать это, пока не получил пять концентрических кругов, которые я затем центрировал относительно друг друга.

Шаг 07

Когда вы будете довольны своим дизайном, проверьте его по сетке, чтобы убедиться, что все выровнено правильно. Преобразуйте все линии обводки (например, круги) в контуры (Объект>Развернуть>Заливка и Обводка). Если у вас есть перекрывающиеся линии или круги, обрежьте их, чтобы они соответствовали моей сетке. Это можно сделать, поместив объект, например прямоугольник, поверх объекта, который вы хотите обрезать, выбрав оба объекта и выбрав «Вычитание переднего» в Навигаторе.

Шаг 08

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

Шаг 09

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

Шаг 10

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

Понравилось? Прочтите это!

• Учебники по Illustrator (открывается в новой вкладке): потрясающие идеи, которые стоит попробовать сегодня!
• Прекрасные примеры дудл-арта (открывается в новой вкладке)
• Выбор блестящего учебного пособия по WordPress (открывается в новой вкладке)
• Бесплатные тату-шрифты (открывается в новой вкладке) для дизайнеров
• Бесплатные экшены Photoshop (откроется в новой вкладке) для создания потрясающих эффектов
• Создайте идеальную доску настроения (откроется в новой вкладке) с помощью этих профессиональных советов

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь сейчас для неограниченного доступа

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

Зарегистрируйтесь ниже, чтобы получать последние новости от Creative Bloq, а также эксклюзивные специальные предложения прямо на ваш почтовый ящик!

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

Команда Creative Bloq состоит из группы поклонников дизайна и изменилась и развилась с момента основания Creative Bloq в 2012 году. Текущая команда веб-сайта состоит из семи штатных сотрудников: редактор Джорджия Когган, заместитель редактора Рози Хилдер. , редактор по сделкам Берен Нил, старший редактор новостей Дэниел Пайпер, редактор по цифровым искусствам и дизайну Ян Дин, редактор технических обзоров Эрлингур Эйнарссон и писатель по электронной торговле Аби Ле Гильшер, а также список фрилансеров со всего мира. Команды журналов 3D World и ImagineFX также вносят свой вклад, следя за тем, чтобы контент из 3D World и ImagineFX был представлен на Creative Bloq.

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

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

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

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

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

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

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

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

Разрушение сетки

Независимо от типа используемой сетки, она состоит из трех элементов: столбцов, промежутков и полей.

Столбцы: Столбцы занимают большую часть площади сетки. Элементы и содержимое размещаются в столбцах. Чтобы адаптироваться к любому размеру экрана, ширина столбцов обычно определяется в процентах, а не фиксированными значениями, и количество столбцов может варьироваться. Например, сетка на мобильном устройстве может иметь 4 столбца, а сетка на рабочем столе — 12 столбцов.

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

Поля: Относится к левой и правой крайним областям экрана. Контент не живет на полях сетки. Это пространство может быть фиксированным или выражаться в процентах от ширины экрана и может меняться в разных контрольных точках.

Любую сетку составляют три элемента: (1) столбцы, (2) промежутки и (3) поля.

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

Пример 1: Иерархическая сетка

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

The New York Times использует иерархическую сетку, чтобы добиться ощущения от чтения, похожего на газету. (Мы выделили столбцы желтым цветом, поля — синим, а поля — фиолетовым. )

Пример 2: Сетка столбцов

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

Четырехколоночная сетка Ritual упрощает сканирование продуктов. (Мы выделили столбцы желтым цветом, поля — синим, а поля — фиолетовым.)

Пример 3: модульная сетка

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

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

Пример 4: Разрыв сетки

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

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

Преимущества сети

Использование сетки приносит пользу как конечным пользователям, так и разработчикам:

• Дизайнеры могут быстро создавать согласованные интерфейсы.
• Пользователи могут легко сканировать предсказуемые интерфейсы на основе сетки.
• Хорошую сетку легко адаптировать к различным размерам и ориентации экрана. Фактически, макеты сетки являются важным компонентом адаптивного веб-дизайна. Адаптивный дизайн использует контрольные точки для определения порогового размера экрана, при котором макет должен измениться. Например, экран настольного компьютера может иметь 12 столбцов сетки, которые могут быть сложены на мобильном устройстве, так что в итоговом макете будет только 4 столбца.

В мобильной версии сетка Behance с одним столбцом (слева) была преобразована в сетку с четырьмя столбцами (справа).

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

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

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

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

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

Легко задайте количество столбцов, размер поля и размер полей в Figma.

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

Содержимое или элементы следует размещать внутри и между столбцами, а не между ними.

Рассмотрите возможность использования системы сетки 8 пикселей. Для большинства распространенных устройств размер экрана в пикселях кратен 8.