04.08.2023

08 мин

6 типов модульных сеток в ux/ui дизайне и для чего они нужны

Автор

Евгения Стапарь

Содержание

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

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

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

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

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

Единство стиля. Выравнивание элементов и добавление новых данных

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

Эстетичность дизайна. Гармоничные элементы на одностраничном сайте обеспечивают удобное восприятие информации пользователем

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

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

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

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

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

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

Для чего сетка дизайнерам?

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

Получите подборку файлов от Московского Института Технологий и Управления

Что нужно знать графическому дизайнеру-новичку, чтобы брать первые заказы.pdf

Как прокачать свои скиллы. 5 советов графическому дизайнеру.pdf

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAMAAAAC2hU0AAAAJ1BMVEVMaXHHzv/K0f/M0//Hzf/a2v7H0f/AyP/Byf7ByP/Byf/M0//V3f9xXKgzAAAAC3RSTlMA/kSCUwdqoO4hx7bPwFgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAqSURBVHicY2DAAKzMzGwsDAwMTDw8PNwgmpGREUYzgsW5uUE0JzsXByMADosApcEMAPQAAAAASUVORK5CYII=

Как это выглядит

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

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

6 типов сеток

В дизайне выделяют несколько видов сеток. Для классификации используют основу ее построения. В зависимости от нее выделяют

колоночную

блочную

модульную

иерархическую

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

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

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

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

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

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

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

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

По теме

Дизайн-концепция и визуальные метафоры: где находить идеи и как работать над проектом Композиция в дизайне — как создать идеальный сайт

Как рассчитать сетку?

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

Ее разработка осуществляется поэтапно:

Определение областей расположения контента в дизайне одностраничнике

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

Определение базовой единицы

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

Ручная отрисовка макета

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

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

В соответствии со стандартом чаще используют 12 колонок. Такое число обеспечивается за счет блоков из 2,3,4 и 6 единиц. Блок из одной колонки можно просто использовать за счет достаточной ширины. Чаще используют для размещения иконок социальных сетей. Если по замыслу на одностраничном сайте будет располагаться простой и незамысловатый контент, сетка из 12 колонок сделает работу сложнее. Для размещения 2-3 заголовков, нескольких текстовых блоков и картинок будет удобнее работать с 6-8 колонками. Тогда задача с дизайном будет упрощена

Определение параметров сетки

Рассчитав число колонок в модульной сетке, задумываются о параметрах. Чаще специалисты используют следующее сочетание: ширина колонки — 64 пикселя, межколонник — 24, остальное идет на поля. Если специалист впервые сталкивается с этим инструментом в дизайне, то начинает со стандартных параметров. Если количество элементов не удается расположить в колонке стандартной ширины, то принимается другое решение. Это уменьшение межколонника или смена порядка расположения элементов на экране

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

Курс по теме

Графический дизайн

Вывод

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

проработать структуру лендинга и сделать черновой макет

добиться однообразия блоков

выстроить черновой макет в соответствии с дизайном

привести в соответствие блоки, расположение которых маловажно

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

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

Важно! Мы настоятельно рекомендуем ознакомиться с нашими курсами, где тема данной статьи раскрывается более подробно:

Графический дизайнОсвойте профессию графического дизайнера и начните быстрый старт в новой карьере

*В этом месяце мы подготовили для вас скидку 30% на все курсы! Спешите записаться на обучение, ведь количество мест ограничено