Артём
1 сентября 2014

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



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

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

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


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


А прямоугольник c длинной стороной, равной диагонали квадрата с его короткой стороной, воспроизводится в меньшем размере при делении пополам. Это свойство в основе линейки форматов бумаги ДИН:


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

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

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


Конфигурация татами в типовых комнатах. Показан тон текстуры циновок при падении света слева
Хайно Энгель. Параметры и конструкция японского дома

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

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

Галилео Галилей. Звездный вестник. Венеция, 1610

Нематериальная информация получила физическую прямоугольную форму — «флетланд» в терминологии Эдварда Тафти.

В XX веке типографы придумали делить страницу на невидимые прямоугольники — изобрели модульную сетку:


Вариации макетов по модульной сетке из 32 ячеек
Йозеф Мюллер-Брокман. Модульные системы в графическом дизайне

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


Унифицировали размеры не только иллюстраций, но даже их частей:


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


Разворот газеты «Гардиан»

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


Версия дизайна сайта «Модульная система». Элементы не попадают в ячейки сетки

Аккуратно организовать информацию помогает гибкая модульная вёрстка. Принцип: макет должен быть «нарезан» на аккуратные непересекающиеся прямоугольные модули:


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

Модульная вёрстка — это деление прямоугольников.

P. S.

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

P. P. S.

Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Стасис Чепулис
1 сентября 2014

Губка Боб Квадратный Корень Из Двух

(или способ применения графических законов, с которым стоит быть осторожным)

Иван Таранов
1 сентября 2014

Объединены ли прямоугольные блоки каким-то общим вертикальным ритмом интерлиньяжа?

Немного не по теме, но тоже хотелось бы уточнить, у вас в основном блоке в верхнем левом углу образуется квадрат, что идет вразрез с одним из прошлых советов об отступах и интерлиньяже (http://artgorbunov.ru/bb/soviet/20140310/). Есть какие-то исключения? В примерах совета о якорных объектах (http://artgorbunov.ru/bb/soviet/20140324/), вы также придерживаетесь прямоугольного соотношения вертикального и горизонтального отступов. В первую очередь интересуюсь потому, что зачастую квадрат в углу дает визуально лучший результат, как мне кажется.

Вадим Паясу
4 сентября 2014

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

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

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

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

Альберт Ершов
1 сентября 2014

«Принцип: макет должен быть нарезан“ на аккуратные непересекающиеся прямоугольные модули».

Вопрос №1: Есть ли в данном случае разница между «непересекающимися» и «стоящими рядом»?

Вопрос №2: В приложенном изображении обязательно ли блок слева вытягивать до самого низа, чтобы макет был правильно «нарезан»? Или если оставить так как сейчас — это будет «рядом стоящие прямоугольники» и в принципе правильно?


1 сентября 2014

Альберт!

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

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

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

Посмотрите варианты вёрстки текстовых блоков и лент:
http://artgorbunov.ru/bb/soviet/20140804/
http://artgorbunov.ru/bb/soviet/20140811/

Антон Греб
27 сентября 2014

«А прямоугольник в природе встретить негде».

Хочу поспорить! Представляю вашему вниманию кристалл висмута.

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

2 Что-то можно улучшить? Или всё хорошо? Вторая часть 4 Как собрать страницу из модулей: с иллюстрациями 4




Недавно всплыло

Что там дальше с решением задач? 6 Как корректно сказать знакомому, что тебе этот человек и общение с ним не интересны? 3 Cтоило ли поднимать проблему скидки тогда, когда клиент её избегал? 1 Расскажите, пожалуйста, о технике «три плюс». Как вы её используете? 2



© 2007—2016

Запрещённые слова
Пишите: artgorbunov@artgorbunov.ru