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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поделиться
Отправить

Комментарии

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

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

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

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

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

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

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

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

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

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


1 сентября 2014

Альберт!

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

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

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

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

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

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

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

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

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

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

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

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

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

Никита Матвеенко
26 сентября 2016

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

Думаю, имелась ввиду Флатландия – отсылка на роман Эдвина Эбботта о жизни фигур в двумерном пространстве.

Роман Буянов
2 октября 2016

И ещё болеит: https://en.wikipedia.org/wiki/File:Boleite.jpg
Не зря болеит и висмут упомянуты в статье «Sinister geometry» в одной вики.


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

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

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

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

5 Пытаюсь сделать шаблон вёрстки текста для статей про балет 3




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

Как в бюро верстают электронные письма и рассылки. Третья часть: рассылки Школы и Издательства бюро 1 Хочу научиться сторителлингу 12 Как совместить информационный стиль и текст для поисковиков? 7 Хочу научиться сторителлингу 2