Модульная сетка в веб-дизайне | Данил Фимушкин

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

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

Модульные сетки — система верстки, которая строит определенную композицию вашего сайта. Не совсем понятно, понимаю 🙂 Разбираю на примере. Заходи на сайт 960 и нажми на любом представленном сайте «show grid».

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

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

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

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

Есть определенные направляющие, которые уже интуитивно подсказывают где лучше расположить элементы. Можно добавлять элементы не перегружая дизайн всего макета.
2. Чёткая и быстрая вёрстка. Когда верстальщик будет делать из твоего макета работающий сайт, то используя готовые css-генераторы, он может быстро сделать готовый макет для верстки. Когда я начинал делать макеты сайтов, для меня модульная сетка была непонятной штукой. Сейчас я понимаю, что она упрощает жизнь и дизайнеру, и верстальщику. Кстати, модульные сетки используются не только при верстке сайтов, но и в полиграфии для верстки журналов, книг и прочих печатных изданий.

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

Начну с упрощенного примера для верстки книги. У вас есть квадрат, который разделен на 9 клеток. Как использовать это в работе? Для статьи мне надо распределить картинки и текст по квадратами. Получается некая композиция. В вебе та же история. Некоторые помимо вертикальной модульной сетки дополнительно используют горизонтальные вспомогательные.  Использовать горизонтальную модульную сетку или нет, решать тебе. За её отсутствие никто тебя ругать не будет.

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

Классический пример использования модульной сетки — интерфейс операционной системы windows.

На телефоне видно использование модульной сетки в 4 колонки

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

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

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

Я использую 960 grid system, кто-то говорит, что таким разрешением мониторов уже никто не пользуется. Не соглашусь. Некоторые сидят с рабочих ноутов с разрешением 1024 px, поэтому есть смысл разрабатывать дизайн сайтов начиная с 960 px, дальше вы можете сделать сайт большего размера, увеличив модульную сетку. Нельзя игнорировать людей с 960 px, потому что конверсия в покупки с маленьких мониторов бывает больше, чем с больших. На больших (домашних) компах люди смотрят фильмы или еще как-то себя развлекают. На работе же у большинства маленькие мониторы и в обед частенько они шастают по сайтам и совершают покупки. Сначала проанализируйте какие разрешения популярны у вашей целевой аудитории.

Скачайте с сайта архив, нажав на большую кнопку «download». В архиве есть папка «templates» нам туда.

Открываем папку templates

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

Открываем папку для Фотошоп

Здесь есть макеты с разным количеством колонок, 12, 14 и 24 соответственно. Я обычно использую 12 колонок. Открываем этот файл, в нем есть 2 слоя: 12 колонок (слой «grid») и слой фон.

Открываем файл модульной сетки в Фотошоп

Слои модульной сетки заблокированы, чтобы их случайно не подвинуть. Если нажать ctrl + ; , то появится направляющая (на маке cmnd + ;). Нажимаем новый слой и начинаем проектировать сайт. Например так.
Наверху шапка, слева меню, какой-то рекламный баннер под шапкой, а дальше карточки товаров. Они уже выстроены по сетке, остается только детализировать, добавить фотографии и информацию. Придавать значимость вашему проекту.

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

Модульные сетки можно скачать готовые, поищите в интернете готовые psd файлы (или нужный вам формат для других графических редакторов). Есть и другой способ построения модульных сеток. Нужно скачать  action (плагин) для фотошопа, который будет строить модульную сетку, согласно вашему проекту. После установки плагина (это нужно сделать 1 раз) просто нужно будет нажать alt+9, выбрать нужную сетку из панели, нажать play и сетка построится. Затем вам нужно будет просто выровнять ваш сайт по этой сетке.

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

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

Сетка в помощь при создании адаптивного сайта — CMS Magazine

У многих дизайнеров возникают трудности при создании адаптивных и мобильных версий сайта. Зачастую непонятно, где какие элементы располагать и какого размера они должны быть. В данной статье я хочу показать, что это не так уж и сложно, особенно если использовать в работе модульную сетку. Вообще модульные сетки — это прекрасный инструмент, который помогает дизайнеру сильно упростить работу, а результат сделать более профессиональным, эстетичным и приятным для восприятия. Поскольку на данный момент мониторы работают в разрешениях, начиная с 1024?768 рх и выше, я считаю самой удобной 12-ти колоночную сетку, так как она идеально для них подходит. Размер каждой колонки составляет 60 рх, а отступы между ними — 20 рх.

Количество колонок можно легко увеличивать и уменьшать, в зависимости от нужного разрешения. Например, если ваша контентная область будет все 1920 рх, то запросто можно прибавить по 6 колонок с обеих сторон. А если 320 рх, то оставить всего 4 колонки.

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

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

Предлагаю вам рассмотреть пример сайта с разрешением 1920?1080 и контентной частью в 960рх, так как на сегодняшний день они наиболее распространенные.

А вот как он выглядит с наложением сетки и линеек:

Мы видим, что абсолютно все элементы вписываются в сетку. Все четко и правильно, аккуратные ровные столбцы. Единственное, с чем могли возникнуть проблемы — это элементы, которые в примере обозначены звездами. Это могут быть как иконки с текстом, так и фотографии в портфолио, или просто столбцы с текстом. Чтобы правильно рассчитать расстояние, мне не пришлось делать сложных вычислений, вымерять каждый пиксель, плодить не нужные в будущем линейки и так далее. А все потому, что есть сетка. Итак, у меня 4 «звезды» и 12 колонок, следовательно, делим 12 на 4 и получаем по 3 колонки на каждый пункт. То есть центр каждой «звезды» должен располагаться посередине центральной из выделенных на нее колонок.

Но, к примеру, у вас не 4, а 11 таких пунктов. Скорей всего, они не поместятся в контентную часть в один ряд, значит, сделаем 2 ряда — 6 сверху и 5 снизу или наоборот. Берем наши 12 колонок и делим на 6. Получаем подве колонки на пункт, то есть центр каждого пункта будет располагаться посередине промежутка между двумя ее столбцами, прямо на линейке, и так далее. Разрешения меньше 1920 рх (вплоть до 960 рх) разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно, макет просто обрезается с обеих сторон.

Разрешения меньшие 1920 рх вплоть до 960 рх разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно — макет просто обрезается с обеих сторон.

Рассмотрим разрешение 768?1024. Здесь колонок уже 8. Начнем с шапки. Логотип, номер телефона и другие элементы просто сдвигаем к центру, а вот пункты меню у нас уже не постятся, так что само меню лучше сделать всплывающим:

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

Наши «звезды» здесь пришлось переместить. И теперь каждой досталось по 4 колонки, появилась возможность немного раздвинуть текст.

Следующий блок тоже перестроился:

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

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

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

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

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

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

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

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

Модульная сетка в веб-дизайне: скачивайте и используйте правильно

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

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

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

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

Какой формат получения информации выбрать – решать вам.

Что такое модульная сетка и зачем она нужна

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

«Сперва думаем – потом делаем». Этим и отличается работа профессионала от новичка. Специалисты не размышляют категориям: «нравится-не нравится». У них все четко.

Вспомните тетрадь в клетку. Линии помогают писать ровнее, а модульная сетка организовать рисунок в фотошопе.

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

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

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

Модульная сетка для веб-дизайнеров | Блог про веб-дизайн ONJEE

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

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

Для этого и существует модульная сетка. Она помогает предотвратить хаос элементов. Поэтому, когда она отсутствует, или представляет из себя вот это…

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

Что из себя представляет модульная сетка

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

В подавляющем большинстве случаев она бывает 12, 16 и 24 колоночной. Если вы делаете свободный сайт с большим количеством «воздуха» между элементами, стоит использовать 12 колоночную сетку. Если же вы делаете сайт, где должно быть over дох*уя информации на квадратный пиксель (привет forex), стоит использовать 24 колоночную сетку.

Где раздобыть модульную сетку

Существует 2 легальных способа ее получения в домашних условиях:

1. Нарисовать.

Долго, дорого (если учитывать человеко/часы, за которые вам платят деньги) и не всегда аху*енно (зависит от опытности дизайнера в этом вопросе). Я никогда этого не делал. На мой взгляд — лишний геморой и тупая работа.

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

2. Скачать

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

Давайте обратим внимание на некоторые из них:

960 grid

Конечно же. Каждый дизайнер наверняка знает этот сайт. Здесь можно бесплатно скачать сетку под разрешение 960 px практически для всех возможных редакторов (Photoshop, Illustrator, Corel…)

Modular Grid Pattern

Довольно интересный сервис, который позволяет создавать сетки под любые разрешение экрана, хоть 2500px. Идеально подойдет для адаптивного дизайна.

Grid Calculator

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

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

Guideguide

Одно из самых популярных расширений. Полностью бесплатно (но вы можете сделать пожертвование). Рекомендации по установке (English) можно прочитать здесь . Если в двух словах и на русском: установите Adobe Extensios Manager (бесплатно), установите расширение, перейдите в Window > Extensions > GuideGuide, наслаждайтесь.

В заключении

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

Адаптивная верстка сайтов | Макет на основе сетки

Продолжаем тему адаптивной верстки. Сегодня речь пойдет об одном из трех китов адаптивной верстки — макете на основе сетки (flexible gridbased layout). Два других – это медиа-запросы и гибкие изображения (flexible images).

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

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

Чтобы применить к веб-странице модульную сетку следует использовать простую формулу пропорциональности:

target / context = result

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

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

Можно, конечно, прикинуть на глаз: контент занимает примерно 70% от общей ширины страницы, а сайдбар — 30%. Но правильный верстальщик никогда и ничего не прикидывает на глаз. Нам нужен точный размер.

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

Считаем:

660 / 960 = 0,6875
300 / 960 = 0,3125

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

68,75%
31,25%

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

Из дизайн-макета мы знаем, что ширина этой узкой колонки 120 пикселей, а широкой 520. Как перевести эти числа в %? Опять же применить формулу пропорции. Но на этот раз мы в качестве context-а используем не всю ширину страницы, а ширину того блока, куда входят эти две колонки, то есть ширину контентной части, которая у нас составляет 660 пикселей. Делим:

120 / 660 = 0,1818
520 / 660 = 0,7878

В процентах получаем соответственно 18,18% и 78,78%

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

.content {
width: 68,75%; /* 660px / 960px */
}

Надеюсь, с этим не возникло сложностей. Поехали дальше!

Макет на основе сетки

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

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

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

Для чего вообще нужны эти модульные сетки?

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

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

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

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

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

Автор: Игорь Квентор
www.websovet.com

Модульная система вёрстки — это… Что такое Модульная система вёрстки?

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

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

Модуль в архитектуре

Термин «модуль» пришёл в оформление книги из архитектуры. Многие выдающиеся художники книги, например Э. Лисицкий, В. Фаворский, Я. Чихольд, неоднократно проводили аналогию между конструкцией книги и здания. В архитектуре «модулем» (от лат. modulus — маленькая мера) называют единицу измерения, которая служит для придания соразмерности всему сооружению или его частям. Так, в классической архитектуре в качестве модуля часто принимался радиус колонны у её основания. Размеры различных элементов здания — например высота колонны, ширина и высота окна или портала — устанавливались соразмерно этой единице.

Модуль в книге

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

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

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

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

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

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

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

Веб-дизайнеры относительно недавно начали применять модульные сетки в проектировании интерфейсов веб-сайтов. Этот метод значительно упрощает как проектирование интерфейса, так и последующую вёрстку макета.

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

Не самоцель, а метод

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

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

Применение

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

Ссылки

Литература

• Добкин С. Ф. Оформление книги. Редактору и автору. 2-е изд. М.: Книга, 1985.
• Лаптев В. В. Модульные сетки. Проектирование многополосных изданий. М.: РИП-холдинг, 2007.
• Хелберт А. Сетка: Модульная система конструирования и производства газет, журналов и книг. М., Книга, 1984.

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 Сетка

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

Гридпарк

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

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

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

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

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

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

Мой первый опыт работы дизайнером начался с макета журнала. Другими словами, все началось с сетки. Эти тонкие красные линии в 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-высоты внутри него:

История сетки дизайна

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

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

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

Старые дни: сетка до «графического дизайна»

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

Хотя живопись эпохи Возрождения может показаться далекой от чего-то вроде макета страницы, именно этот союз архитектуры и визуального представления впервые создал сетку (хотя в то время это не называлось так).Вы можете заметить, что эти каноны «идеальной геометрии» приводят к центрированному, симметричному макету страницы — не совсем то, к чему мы привыкли сегодня. Однако такие понятия, как «золотой прямоугольник» — прямоугольник с пропорциями 1: 1.618, который, если вычесть из него квадрат, дает другой прямоугольник с такими пропорциями, остается неизменной концепцией дизайна.

Описание золотого прямоугольника из Thinking With Type

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

.

No related posts.