Модульная сетка в графическом дизайне
Если вы только начинаете вникать в тему веб дизайна, то обязательно посмотрите мой бесплатный мастер-класс о профессии веб дизайнера. Принцип тот же на самом деле, просто здесь колонок больше. Вот здесь блоки начинаются, вот этот блок начинается. Здесь колонка маленькая (160 пикселей), эта тоже 240 (рис.8). Можем эту колонку вообще там вправо сместить и так далее (если нам этого достаточно). Давайте сегодня разберемся с модульными сетками в веб-дизайне.
Естественно, сетку для неё построить не получится. То есть, разумеется, то правило, те отступы, которые вы придумали в самом начале, когда у вас еще было 5-10% макета – у вас они могут измениться. У вас может что-то в дальнейшем не совпасть, что-то должно быть чуть меньше, чуть больше. Ту ось, которую вы провели, нужно пододвинуть, на следующей странице тоже что-то изменить и так далее. Образовательный проект одноимённой платформы для веб-дизайнеров. Авторы подготовили красивый мультимедийный лонгрид о сетках.
Графический дизайн. Принцип сетки, Кимберли Элам
Раньше художник-оформитель с нуля создавал каждую страницу, а сетка помогала унифицировать эту работу и сделать готовые шаблоны. Можем для контента использовать эти три колонки, а дальше сделать следующую колонку поменьше – для какой-то статьи, может быть (рис.7). Отступы между колонками и отступы между блоками. Вот отступы между блоками… Лучше использовать для их определения модули. Сегодня я вам предлагаю определение «модульная сетка» немножко отложить в сторону и поговорить об этом с точки зрения вертикальных и горизонтальных правил. Помогает создать настраиваемые пиксельные сетки в дизайне.
В таком случае специалист либо увеличивает её, либо уменьшает межколонник. Кроме того, он может выполнить обе эти операции или даже изменить порядок элементов. Московская студия Charmer, специализирующаяся на дизайне медиа-пространств (за их авторством – сайты Афиши, Медузы и Ведомостей), также следуют этому принципу. Это помогает разрабатывать дизайн для постоянно обновляемых площадок с множеством материалов. Пользуетесь ли вы уже встроенными сетками или рассчитываете отдельно – не так важно, в конце концов, это просто инструмент для вашей работы.
Как рассчитать сетку
Можно прикинуть удобство, юзабилити, и если необходимо быстро подправить. Далее после того как прототип нас устраивает полностью, можно переходить к отрисовке самого дизайна, прорисовке деталей. Таким образом, у нас получается ширина модуля равная 63,5 округлим до 63 пикселей. Теперь самое интересное, нам необходимо создать колоночную сетку. Ширина колонки определяет ширину нашего модуля.
Однако нельзя не брать в расчёт тот факт, что сетки помогают дизайнерам создавать математически точные, функциональные и эстетичные проекты. Они позволяют системно и логично представить контент, подчинить текст и иллюстрации ритмичной и единой композиции и создать удобный для пользователей интерфейс. Модульная сетка — это система модульной верстки, которая представляет собой сетку с вертикальным и горизонтальным ритмом, пересечения ритмов образуют модули. Таким образом, вся сетка состоит из таких модулей отсюда и появилось ее название. На основе упорядоченных модулей с помощью направляющих строится сама сетка.
Как выглядит модульная сетка
Шаблон для Figma c сетками, которые используются в Tilda Zero Block. Книга с десятками примеров и интересной сеткой внутри, по которой свёрстан весь контент. По схемам https://deveducation.com/ можно посмотреть, как выстроены разные макеты. Много примеров, десяток упражнений, листы кальки с нарисованной сеткой, чтобы накладывать их поверх изображений.
Главное, чтобы в этом была какая-то логика и закономерность, сохраняющая вертикальный ритм. Как уже говорилось выше, из личного опыта, очень многие вещи можно сверстать с нулевым межколоночным расстоянием при большом числе колонок. В этом случае за отступ принимается ширина целой модульная сетка для фотошопа колонки и все маргиналии получаются крупными, характерными для «благородной» типографики. Кроме того, для снятия нагрузки с глаза зрителя бывает нужен воздух, белое пространство. Например, если вы верстаете блок про времена года, вашим магическим числом наверняка будет 4.
Модульная сетка макета с нуля: анализ, расчет и построение
Определяемся, под какое минимальное разрешение мы создаем макет. У модульной сетки нет строгих ограничений по ширине, она может быть динамичной. Но чаще всего можно встретить вариант с заданными размерами.
То есть, вы дальше уже работаете над какими-то новыми правилами, над адаптацией. Но, опять же, помните, чтоб у вас макет оставался цельным, правила должны быть – все-таки, их должно быть какое-то ограниченное количество и они должны иметь какую-то закономерность. И это все выглядит довольно симпатично и хорошо. Что так думать очень сложно, и даже, наверное, невозможно. Как бы очень сложно думать какими-то модулями, а потом чтобы из этого какой-то макет получился.
