С Рождеством, господа хорошие! Авторский коллектив МФ выходит из праздничного запоя с новым материалом, и сегодня мы поговорим о прекрасном.
Если просыпаешься первого (а не второго) января, на подушке, (а не в салатнице), с улыбкой (а не с головной болью) — это уже прекрасно. Так считает один мой знакомый, и не нужно думать, будто тут работает пьянь непробудная. В общем, как видите, к прекрасному человека тянет всегда, даже при выборе послепраздничного ночлега…
Мой идейный вдохновитель, сам того не желая, подтвердил простую, но важную истину: прекрасное тесно связано с комфортом. Большинство людей любят спать в теплой постели, читать темный текст на светлых страницах и писать слева направо (ну, восточные народы не в счет). И если что-то из этого пойдет не так, возникнет дискомфорт. Нечто подобное вы испытали на себе, читая первый подзаголовок.
Во избежание дискомфорта и для улучшения восприятия увиденного, дизайнеры придумали массу полезных приемов, среди которых модульная система вёрстки. Своими корнями она уходит в Античность (золотое сечение), развивается в эпоху Возрождения как «божественная пропорция», и закрепляется в нынешнем виде у дизайнеров модернизма.
Пропорция означает равенство двух или нескольких отношений. Существует несколько видов пропорциональности: математическая, гармоническая, геометрическая и др. В математической равенство двух отношений выражается формулой a:b=c:d, и каждый член ее может быть определен через остальные три. В гармонической пропорции 3 элемента. Они являются или попарными разностями некоторой тройки элементов, или самими этими элементами, например а:с=(а — в):(в — с).
В геометрической пропорции тоже всего 3 элемента, но один из них общий, а:в=в:с. Разновидностьо геометрической пропорции является пропорция так называемого "золотого сечения", имеющая всего два члена — "а" и "в" — излюбленная пропорция художников, которую в эпоху Возрождения называли "божественной пропорцией".
Золотое сечение (з. с.). Особенностью пропорции золотого сечения является то, что в ней последний член представляет собой разность между двумя предыдущими членами, т. е., а:в=в:(а -в). Отношение з. с. выражается числом 0,618. Пропорция з. с. 1:0,618= 0,618:0,382.
Если, отрезок прямой выразить через единицу, а затем разделить его на два отрезка по з. с., то больший отрезок будет равен 0,618, а меньший 0,382. Если округлить з.с., получим соотношение 2:1 — так его легче запомнить. На рисунке ниже показано деление отрезка на части по золотому сечению.
На основании пропорции з. с. Итальянский математик Фибоначчи построил ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 1, 2, 3, 5, 8, 1З, 21 и т. д.
Среди систем пропорционирования, используемых в архитектуре, дизайне, в прикладной графике следует упомянуть системы «предпочтительных чисел» — ряд чисел геометрической прогрессии, где каждое последующее число образуется умножением предыдущего числа на какую-нибудь постоянную величину.
Есть и другой метод получения гармоничных пропорций. Из квадрата можно построить прямоугольник, отношение сторон которого можно выразить как 1:v2 (прямоугольник v2). Он строится проведением дугообразным радиусом, который равен диагонали квадрата. Этот прямоугольник, к примеру, составляет основу для форматов бумаги стандарта DIN (A, B, C, D), и неслучайно опытные дизайнеры рекомендуют всегда использовать именно такие форматы. При создании проекта, в котором имеются листы различных размеров (например, фирменного стиля для какой-либо организации) применение форматов DIN позволяет придать проекту целостность.
Любопытным ? погуглите слова: золотое сечение, божественная пропорция, модулор, Ле Корбюзье, Фидий, Джей Хэмбидж. А еще загляните в блог Алексея Черенкевича.
Модернистский дизайн стремился всё упорядочить, разложить по полочкам. В графическом дизайне это привело к появлению реальных полочек в виде конструкции для размещения всех компонентов вёрстки (иллюстраций, текстов…). Такие ячейки и являются модулем, а их система, основанная на гармоничных пропорциях, — модульной сеткой.
Конструкции на основе сетки не только более привлекательны, но и более удобны. Четкие, логические пропорции создают гармонию и упрощают пользователям восприятие элементов на странице. Кроме того, они образуют закономерность, по которой дизайнер строит тот или иной макет. Верстальщику в свою очередь проще работать с «сетчатым» макетом, где все элементы подогнаны под одну гребенку.
Cчитается, что сетка, в основе которой лежит квадрат, является идеальной для модульной структуры, а также весьма удобной в плане группировки квадратов в горизонтальные и вертикальные прямоугольники с отношением сторон 1:2, 2:3, 3:4 и т.д. Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, и есть модуль (на рисунке — насыщенные квадраты).
При создании сетки важно учитывать не только размер ячеек, но и расстояния между ними — «канавки» или «средники» (на рисунке выше — это светлые линии между квадратами). Чрезмерно большой модуль убивает гибкость дизайна, слишком маленький делает верстку хаотичной, поэтом важно видеть золотую середину.
В некоторых случаях применяют только вертикальное членение. Такая верстка называется колоночной.
Горизонтальное членение присутствует в макете почти всегда, ведь чаще всего его задают шрифтовая или микро-сетка, в которых постоянной величиной обычно выступает высота текстовой строки (как правило, высота равна 10-14 px).
Иногда приходится намеренно игнорировать сетку. В таких случаях автор сего писания злорадно ухмыляется, потому что на дух не переносит точные науки, за исключением физики, обуславливающей следующую ситуацию. Представьте: вы верстаете материал с кучей текста и несколькими иллюстрациями; фон белый, текст черный, картинки тоже темные. Кроме одной. На ней есть светлый участок у самого края, который сливается с белыми канавками. В итоге, если разложить картинки по своим ячейкам, один модуль у вас будет выбиваться из общей композиции более широким разделением. Чисто оптический момент, который нарушает целостность и режет глаз. Лечится такой баг решительно: сдвигаем иллюстрацию «со своей орбиты» — с модуля — до тех пор, пока ширина просвета вокруг нее не приблизится к ширине канавки.
Трудно определить регламент построения модульной сетки — он может быть разным. В искусстве нет четких правил, но прелесть дизайна в том, что он позволяет их вывести, исходя из задачи: сделать красиво, сделать строго, сделать многозначно и т.д. Дизайнеры всего мира предлагают свои рецепты. Мы составили выдержки из их уроков, и советуем работать с сеткой в таком порядке:
1. Определите ширину рабочей области. Для макета сайта оптимальным размером будет 960 пиклелей. Ширина рабочей области макета в 960 пикселей делится на 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 и 480. Это делает работу с такой сеткой очень гибкой, ведь все современные мониторы работают в разрешениях начиная, как минимум, с 1024?768.
2. Создайте шрифтовую или микро-сетку. В Вебе нежелательно делать ее меньше 10 пикселей.
3. Определите размер канавок и собственно модуля. Если средник обычно равен высоте строки, то с размером модуля нужно определить, исходя того, что будет на странице. Если на ней будут размещаться несколько элементов с постоянным размером, модуль лучше рассчитать, исходя из их габаритов. Можно поступить иначе: разместить в ряд фиксированное число элементов, и, зная их количество и общую ширину рабочего пространства, вычислить ширину модуля.
4. Начертите колоночную сетку (вертикальное членение сетки). Ширина колонки, естественно, равна ширине модуля. Между колонками — канавки.
5. Поделите сетку горизонтально (создание поясов). Объедините несколько строк в один «пояс». Между поясами — правильно, канавки.
6. Начинайте раскладывать элементы по полочкам. Как уже говорилось, если вкус обязывает, можно делать это не «тютелька в тютельку».
В Photoshop создавать сетку удобнее всего из векторных прямоугольников: они легко масштабируются, настраиваются и хорошо взаимодействуют с направляющими.
Теперь мы подошли к бонусной части — к объявлению сайтов-героев месяца. Они не случайно затесались в одну публикацию с рассказом о сетке, ведь с их помощью работа с ней может значительно упроститься.
Сервис «960 Grid System» содержит готовые сетки в виде шаблонов для графических редакторов, а еще и скрипты для создания заданного макета сетки, на тот случай, если рабочая область шире стандартных 960 пикселей.
Сервисы 960 Gridder и Variable Grid System фактически являются конструкторами колоночной сетки. Достаточно вписать число колонок, ширину средников или расстояния между колонками, скрипт тут же визуализирует вашу сетку. Получившийся результат можно скачать и использовать при верстке макета.
К слову добавлю, что народные умельцы уже давно пишут скрипты и рисуют шаблоны модульных сеток. Их применение в типографике вряд ли закончится в скором будущем, но и применять модули сплошь и рядом совсем не обязательно 
В случае копирования статьи указывайте автора и ставьте активную гиперссылку на наш сайт. Подробную информацию об условиях перепечатки вы можете получить в разделе «Правовая информация».
Реально клёвый материал! Я думаю, это лучшая статья про сетки из всех, что мне когда-либо попадали на сетчатку глаза.
В дополнение к «Как это делается» могу сказать, что стоит также еще определитьcя с какими единицами вы работаете и придерживаться их. Например, этот сайт за исключением одной ма-а-аленькой недоработки задуман так, что по ширине разбит на колонки в поинтах, pt, то есть проценты здесь не используются.
А про 960 — это правда, почти стандарт, сам раньше по этой ширине сайты делал.
Думаю, задержку мне простили)
Но материал не лучший, он просто подытоживает уже написанное за последние 2,5 тыс. лет :)
Неплохо подытожил!
Хорошо =)
Можно еще про ритм написать, и использование геометрических фигур для придумывания композиции.
