Главная
О нас
Наши собаки
- Репортаж
- Фотоальбом
- Видео
Информация
- Новости
- Статьи
- Ветеринария
- Разное
Юмор
Форум
Контакты

Это интересно

ОКД
ЗКС
ИПО
КНПВ
Мондиоринг
Большой ринг
Французский ринг
Аджилити
Фризби

Опрос

Какой уровень дрессировки необходим Вашей собаке?

	Элементарное послушание в быту
	Чёткое выполнение команд
	Спорт и соревнования

Полезные ссылки

РКФ

Все о дрессировке собак

Стрижка собак в Коломне

Поиск по сайту

Модульная сетка как основа хорошего дизайна. Часть 2. Модульная сетка для журнала

Модульные сетки в веб-дизайне | Базовая часть – Skill Up Design

Привет! В сегодняшней статье разберёмся с сетками в веб-дизайне.

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

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

Для начала давайте разберёмся, что такое модуль?

Модуль — любая единица измерения. Модуль устанавливается для того, чтобы измерить что либо по отношению к чему-либо. Т.е. грубо говоря 1 сантиметр — это модуль, по отношению к метру. Вот примерно так же сайт строится из модулей. Модуль — это мельчайшая единица и составляющая дизайна сайта.Сперва просто запомним, что сетки больше всего используются для печатной продукции (т.е. журналы, газеты). С середины ХХ века именно по модульной стеке стало строится большинство печатной продукции, потому что это очень удобно и очень круто.

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

Простым языком о модульных сетках

По сути вот эти Guides в Photoshop (View —> New Guide) и есть направляющая сетка, именно для веб-дизайна. Чтобы убрать направляющую включаем Rules (линейку), берём Move Tools (V) и перетаскиваем Guide (направляющую линию) на линейку сбоку или сверху в зависимости от того горизонтальный или вертикальный Guide (направляющая линия). Так же можно и получить новую направляющую, нажать на линейке и вытащить её в рабочую область.

Почему просто вот такая сетка не подходит? Иногда бывает набираете «скачать сетку для фотошопа», «grid psd». Скачиваете открываете, а там сама сетка, в таком виде как на скриншоте и если вы нажимаете Ctrl+H, чтобы сетка из Guide lines отображалась, а её нет, значит это просто векторные колонки. Векторные колонки, Карл! Обычная картинка.

Простым языком о модульных сетках 2

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

Простым языком о модульных сетках 3

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

Простым языком о модульных сетках 4

Вот как это выглядит без сетки.

Простым языком о модульных сетках 5

Каковы плюсы сетки:

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

Виды сеток

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

Что такое 960 Grid?

Называется так, потому что ширина сетки 960px и вся соль её использования в том, что она гарантирует, что ваш дизайн правильно отобразиться и на обычном мониторе и на планшете.

Если вы откроете свой сайт на мониторе 2560px или не дай бог 4K, то он будет ютиться на экране в виде маленькой колоночки.

О модульных сетках простыми словами 10

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

1170px — под обычный формат, под широкие мониторы;
970px — под ноутбуки и старые мониторы;
750px — под планшеты;
480px и 320px — под мобильные телефоны и смартфоны.

Если дизайнер не криворукий, то делая дизайн для 1170px, ему не составит труда отрисовать его и под остальные разрешения 970px, 750px, 480px и 320px.

Практические примеры:

1. Сайт в 3 колонки О модульных сетках простыми словами 11

2. Сайт в 4 колонки 4 колонки. Сайт в чистом виде сетка.Большая картинка это блок в 2 колонки. И объединяются либо левые 2 колонки, либо правые. О модульных сетках простыми словами 13

А чуть ниже видно, что дизайнер разбивает ритм и берёт 2 центральные колонки. О модульных сетках простыми словами 14

Проверяем адаптивность. Для широкого формата это 6 колонок, примерно на широкоформатном мониторе: О модульных сетках простыми словами 15

4 колонки. Такое отображение будет для планшета: О модульных сетках простыми словами 16

3. 18-ти колоночная сеткаЕсли не накидывать сетку, то кажется, что используется 3 колонки. О модульных сетках простыми словами 17

При этом в 12 колонок какие-то элементы вписывают, а какие-то нет, поэтому 12 колонки не подходят. : О модульных сетках простыми словами 18

Более детальный разбор показал, что здесь используется 18-ти колоночная сетка, распознать это помог наименьший элемент страницы оранжевые кнопки, это по сути одна колонка, размножив их, мы получили 18 колонок: О модульных сетках простыми словами 19

4. 12-ти колоночный макет.4 большие, каждая из 4-х делится на 3 внутри. Всё абсолютно линейно. Даже кнопочки меню и то попадают в эту сетку. И хотя меню не в ритме (ритм в данном случае по 3 колонки), но всё таки они в ширину сетки попадают. О модульных сетках простыми словами 20

При подготовке статьи использовались материалы из видео «Основы веб дизайна #1 — модульные сетки (Grid Systems)» Youtube канал PsForceRu.

skillupdesign.ru

Модульная сетка как основа хорошего дизайна. Часть 2

12-ти колоночная сетка в детском журнале.

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

Теперь давайте посмотрим, как 12-колоночная модульная сетка была адаптирована для детского журнала Ноев ковчег (Noah’s Ark), который издается в Ровно (Украина).

Ноев Ковчег — детский журнал, полный историй — сказки, стихи, рассказы и многое другое. Все красиво написано и проиллюстрировано. Есть и головоломки, поделки, эксперименты, игры и приключения!Начиная журнал для детей, мы спросили себя: нужно ли использовать модульную сетку в журнале или полностью отказаться от нее? Это ведь детский журнал! Но ответ был: да, сетка очень важна. Макет страницы, как правило, включает в себя много элементов для размещения, упорядочевания и форматирования. И риск того, что использование методики свободного дизайна, без четкой сетки, может привести к отсутствию визуального баланса на страницах издания, очень велик.

Итак, все по-порядку

В 1990 году журнал НК выходил 6 раз в год на русском языке, в черно-белом варианте формата А5. С 1990 по 1993 у Ноева ковчега также не было компьютерного макета, и журнал делался почти вручную. Набирали и распечатывали только текстовые полосы, которые, как и рисунки, наклеивали на бумажный макет журнала… В 1994 году дизайн издания был пересмотрен, и журнал был стал выходить ежеквартально в полноцвете, объемом 48 страниц, формат 20 х 28 см.

В 1994 году технический редактор Вера Фесянова создала в программе QuarkXPress первый компьютерный макет Ноева ковчега, в котором в зависимости от материала использовалась 2-х или 3-х колоночная сетка.

Первая сетка журнала НК #1’1994.Развороты журнала НК #1’1994. Для текста в 2 колонки добавлены 2 направляющие. Текст врезки выровнен по колонкам (слева на зеленом фоне, справа — на сером).Развороты журнала: НК #1’95 с 2-колоночной сеткой, НК #1’96 с 3-колоночной сеткой. Заголовки могут помещаться как в одной колонке, так и простираться на несколько колонок.

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

Следующий шаг

Начиная с 1999 года, технический редактор Вера Фесянова также стала применять 12-колоночную модульную сетку в журнале Ноев ковчег. Верстка выполнялась в программе QuarkXPress, а с 2011 года — в программе Adobe InDesign CS5.

12-ти колоночная сетка журнала Ноев ковчег #1’1999.Развороты журнала НК #1’99 и НК #2’99 с 12-колоночной сеткой. Эти примеры показывают четкую и узнаваемую систему сетки, в которой каждый элемент был выровнен, в итоге страницы имеют “строгий”, аккуратный и привлекательный дизайн.Развороты журнала НК #3’2004 и НК #4’2005 с 12-колоночной сеткой. Каждый разворот может иметь четкие индивидуальные визуальные презентации, в тоже время, работать в составе целого.

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

Развороты НК # 7'2015 и НК # 5'2016 с 12-колоночной сеткой . Сетка подсказывает размер элементов и позволяет быстро выровнять графические и текстовые блоки.Развороты NK #7’2015. Использование поворота и бесформенных иллюстраций в дизайне помогают обойти жесткие рамки сетки и сбалансировать дизайн, придавая композициям игривый вид.

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

You can read English version here > Part 2, and Part 1

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

medium.com

Конспект занятия "Построение журнальной сетки"

Дидактическое вступление

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

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

Построение геометрической основы сетки

Первое, что необходимо знать при конструировании сетки — под какой размер шрифта мы ее строим. Для пущей простоты нашу сетку мы будем делать под шрифт 10 кегля при интерлиньяже 12, а за размер журнальной страницы возьмем стандартный формат А4.

Итак, размеры А4 формата — 210 на 297 мм. Сколько же модулей может поместиться на этом пространстве? Начнем с ширины: основу модульной сетки при многоколонной верстке задают колонки, а 10-м кеглем больше трех колонок не сделаешь — для книжного издания их вообще было бы 2, но для журналов 2-й категории (популярные, для досуга) согласно СанПиН 1.1.998-00, имеем право сделать 3 колонки.

Соответственно по вертикали имеет смысл сделать 4 модуля, это существенно упростит работу рекламного отдела, образовав нам супермодуль в полстраницы по горизонтали. Да и вообще 3 на 4 — интереснее, чем 3 на 3.

Итак, у нас 3 на 4 модуля, начинаем с ширины. В ширину у нас 3 колонки (равные между собой), 2 средника — для простоты дела предлагаю назначить их по 1 цицеро; почему так проще — станет ясно чуть позже. Остаются еще поля. Поскольку макет условный, будем придерживаться книжных стандартов, т.е. корешковое поле самое узкое, за ним идут головочное, наружное, и нижнее — самое большое.

Получаем:

210 – 9 – 3К = П1 + П2,

где 210 — ширина листа А4 в мм, 9 мм — это 2 средника по 1 цицеро и 3К — три колонки одинаковой ширины.

Сейчас начинаем подбирать значение К, учитывая, что ширина колонки равна целому числу квадратов (либо простой составной дроби квадратов). При ширине колонки… ну, скажем, в 4 квадрата получаем 201 – 3х18х4 = 210 – 216, т.е. отрицательное значение суммы полей. Ясно, что 4 квадрата — это много, возьмем меньше. При ширине колонки в 3 квадрата 201 – 3х18х3 = 201 – 162 = 39 мм, что уже вполне допустимо. Делим эти 39 мм в соотношении 1:2, получаем 13 и 26 мм. Однако давайте вспомним, что на самом деле внешнее поле равняется визуальной сумме двух внутренних, а не геометрической. Думаю, что если мы возьмем 16 и 23, то поступим правильней.

Теперь у нас есть не только горизонтальные размеры наших модулей, но и оценочные значения головочного и нижнего полей. Поскольку головочное поле должно находиться в пределах от 16 до 23 мм, не будет большой натяжкой посчитать его просто в 20 мм. А нижнее должно получиться больше 23, чего мы, я думаю, вполне сможем добиться.

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

Откуда это было известно? Да из выбранного шрифта, с которого мы начали рассуждения. Интерлиньяж в 12 пунктов — это как раз и есть шаг в 1 цицеро по вертикали. И вот здесь мы натыкаемся на главное правило построения сетки: расстояния между модулями по вертикали вынуждено должны быть кратны целому числу строк текста. Именно строки текста создают реальный шаг, которым мы можем пользоваться при построении сетки, и ничто другое. Если представить, что мы выбрали вертикальную отбивку, не кратную высоте строки (интерлиньяжу), то неизбежно появляется проблема приводности блоков текста в пределах полосы, и верстка усложняется, вместо того, чтобы стать «автоматически легкой».

Вот как это выглядит:

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

Поэтому у нас в квадрате 4 строки, а межмодульная отбивка — еще строка. Это позволяет нам точно подогнать постскриптовские значения шрифта под необходимые пункты Дидо — подгонять все равно придется, если мы пользуемся программой верстки, которая не дружит с континентальной типографикой. По СанПиНовской таблице мы должны прибавить полпункта к кеглю (вместо 10 использовать 10,5 постскриптовских пунктов), но интерлиньяж просто увеличить на 0,5 не получится. Поэтому просто построим максимально длинную колонку на полосе (ну, например в 15 квадратов — 270 мм, при 12 пунктах Дидо интерлиньяжа это должно нам дать 60 строк), заполним ее текстом и подгоним интерлиньяж так, чтобы они реально по месту совпали. Правильный интерлиньяж будет где-то чуть меньше 12,8 — поэтому, если программа не дает использовать при назначении этого параметра сотые, вполне можно будет чуть-чуть подвинуть макет, который мы сейчас с вами так тщательно считаем. Потому что единственная реальность — это все-таки строчки текста. И от них зависит, какое округление при переводе постскиптовских пунктов в пункты Дидо мы примем за рабочее.

Мы можем считать аналогично горизонтали:

297 – 3х4,5 – 4М – 20 = П4, где П4 > 23,

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

297 – 20 – 4М > 23

Итак, 277 / 4М > 23, где М меняется как целое число квадратов или простая дробь квадратов. Пользуясь калькулятором, который есть у каждого студента в сотовом телефоне, после недолгих подборов устанавливаем, что М = 3 1/2 квадрата, следовательно, без отбивки 3 1/4 квадрата, или, как нетрудно подсчитать, 13 строк.

Просто четыре раза откладываем по вертикали 63 мм, а потом от каждого модуля отрезаем снизу 4,5 мм. Таким образом, нижнее поле получается 25 + 4,5 = 29,5 мм. А чтобы лишняя линия, отстоящая от нижнего модуля на цицеро, не пропадала зря, ее вполне можно использовать для привязки колонцифры.

Таким образом, геометрическая основа нашей модульной сетки готова. Взглянем на нее в целом:

У нас 12 модулей по 3 квадрата (54 мм) в ширину и 3 1/4 квадрата (58,5 мм) в высоту, разделенные отбивками в 1 цицеро, что дает нам по дополнительной строке при верстке текстового блока на несколько модулей в высоту.

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

На что я хотел бы обратить внимание — на функциональность сетки.

Во-первых, теперь ясно, какого размера нужны иллюстрации (и рекламные модули!) на полосе. Очевидно, что минимальным размером будет 1 модуль — 54х58,5 мм, затем 2 модуля — горизонтальный 112,5х58,5 мм и вертикальный 54х121,5 мм, и так далее. Это означает, что работу по верстке и обработке иллюстраций можно «распараллелить», разделив между двумя работниками. Это очень облегчает издание журнала.

Во-вторых, у нас теперь точно известно, сколько знаков входит на полосу. У нас 3 колонки по 3 квадрата в ширину, а в высоту — 55 строк (4 модуля по 13 и 3 в интервалах между модулями). Зная емкость квадрата в выбранной гарнитуре при выбранном трекинге, нетрудно посчитать емкость полосы. Конечно, емкость квадрата придется определять экспериментально: это раньше, когда во всех типографиях СССР было по два десятка одинаковых шрифтов, можно было просто в справочнике привести таблицу емкости — загляните в Гиленсона, там так и сделано. Сейчас все зависит от того, какой программой вы пользуетесь, какая версия шрифта у вас установлена, даже под какой фотонаборный автомат вы скомпоновали публикацию — но решить эту проблему просто. Набираем колонку в два десятка строк, считаем число знаков с пробелами (просто кинуть через буфер обмена в «Ворд» и заглянуть в статистику), делим на число строк, умноженное на ширину колонки в квадратах — вуаля! Вот у меня для того шрифта, что использован в примере — это MagistralC, реальные значения 10,5/12,7 — емкость квадрата получилась 9,55, или 28,65 знаков в строке. Ну, даже если чуть занизить расчетную емкость, это означает что в странице, целиком заполненной текстом, будет 55х3х28,6 = приблизительно 4 700 знаков. Сейчас смотрим на объем статьи, которую нам предлагается заверстать на разворот. Предположим, там 8 600 знаков, и еще хочется поставить 2 иллюстрации: одну побольше и квадратненькую (2х2 модуля), и одну узенькую, но длинненькую (1х3) модуля. Нетрудно подсчитать, что первая картинка съест у нас 27 (2х13 +1) строк в 2 колонках, итого 1544 знака, а вторая — 13х3 строк, или 1115 знаков.

На развороте у нас 2х4 719 = 9 400 знаков, а нужно 8 600 + 1 544 + 1 115 = 11 259, что уже на 800 знаков больше. А ведь еще нужно место под заголовок (предположим, около половины модуля высотой, т.е. еще 500 знаков), и что-то хочется оформить врезкой на цветную плашку… Следовательно, можно, не приступая к верстке, просить редактора (автора, ответсека) либо сократить текст хотя бы на полторы тысячи знаков, либо подобрать еще иллюстрацию и отдать под материал три полосы.

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

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

Ну, а теперь остается самое главное — на основании построенной сетки сделать дизайн журнала. Вот два примера, построенных на основе той простейшей сетки, которая у нас получилась. Первый выстроен подчеркнуто «крупно» и «поперек» (на самом деле я воспроизвел вариант макета одного из верставшихся мной когда-то журналов), второй — «мелкенько» и «вертикально». Текстовые части у разворотов абсолютно одинаковы, до знака (в одном месте строка втянута). Эти примеры, по моему замыслу, должны показать, что на основе одной сетки можно создать существенно различающиеся между собой макеты.

"Горизонтальный" макет

(подробнее верхний подробнее нижний)

"Вертикальный" макет

Примечания

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

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

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

Средник — «Пробел, разделяющий колонки набора при многоколонной верстке» (определение 4.3.7-4 ОСТ 29.130-97).

Цицеро — в континентальной системе типографики существуют три основные единицы измерения: пункт (пункт Дидо) — 1/72 французского дюйма, или, в метрической системе, 1/2660 метра, часто округляемый до 0,375 мм; цицеро — 12 пунктов Дидо, округляемая до 4,5 мм, и квадрат — 48 пунктов Дидо, равный 18,04 мм. В англо-американской типографике аналогом цицеро выступает пайка, равная 12 пойнтам.

Поле — «Каждая страница имеет четыре поля: Верхнее (или Головочное), Нижнее, Наружное (или Переднее) и Внутреннее (или Корешковое)», — гласит примечание к определению 4.3.1-3 термина «поля страницы» ОСТ 29.130-97, причем именно так, с больших букв.

Квадрат — самая крупная единица измерения континентальной типографики, равная 48 пунктам Дидо. Применяется для измерения ширины и высоты полосы набора (колонки), причем по традиции выражается в целых числах и простых дробях (напр, 2 3/4 на 8 1/2 квадрата). В англо-американской типографике отсутствует (там следующей единицей измерения за пайкой идет сразу дюйм), поэтому программы компьютерной верстки квадрат сплошь и рядом игнорируют.

Приводность — одно из основных требований верстки: совпадение базовых линий строк основного текста как в пределах полосы (при многоколонной верстке), так и на смежных страницах.

Используются технологии uCoz

ayac.narod.ru

анализ, расчет и построение / Хабрахабр

Intro

Краткая предыстория

Привет, Хабр. Я читаю тебя без малого 10 лет, но ни разу не писал статей. Сначала сказать было нечего, потом — некогда. Но сегодня звёзды сошлись и подвернулась подходящая тема. Модульная сетка.

Казалось бы, набросать сетку — дело пяти минут. Всё разжёвано до нас, и бутстрапы есть на любой вкус, и «Аннушка уже пролила своё масло...». Но на практике у дизайнеров частенько возникают вопросы. Многих вводят в ступор даже небольшие отступления от привычных 12-колоночных сеток, потому что им не до конца понятны принципы построения.

Когда-то эту тему хорошо раскрывал цикл статей Алексея Черенкевича, но тексты пропали из открытого доступа. И хотя их ещё можно найти в архивах, сами тексты за прошедшие годы несколько устарели.

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

Как работает сетка

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

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

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

Чем определяется структура сетки

Модульная сетка строится в двух направлениях: горизонтальном и вертикальном. Грубо говоря, это комбинация колонок и рядов с разлиновкой макета на строки.

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

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

Если контент простой и неизменный, и известен вам заранее, то проще всего будет отталкиваться именно от него. Если же контент сложный и непредсказуемый (например, user-generated — пользовательский), то сетка в большей степени будет определяться форматом носителя и общими принципами типографики и композиции.

Начало построения. Вертикальный ритм

Когда речь идёт о сайтах или печатной продукции, дизайн во многом зависит от типографики и свойств текста. Поэтому построение сетки удобно начинать с вертикального ритма.

В первую очередь вам нужно нащупать два взаимосвязанных ключевых параметра: базовую высоту строки и базовый размер шрифта. Проще говоря (хи-хи), базовые интерлиньяж и кегль. И вот эта простенькая задача постоянно вводит людей в ступор. «Как мне узнать нужную высоту строки?», «А какой шрифт брать?», «А сколько строк нужно делать для буклета? А для визитки?» и т.п.

Вариант «А». Подход «от строки»

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

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

Простой, но подробный пример с картинкой

Допустим, вам нужно сверстать на листе А4 список лучших работников месяца. Их у вас трое. Для каждого сотрудника вы делаете блок-карточку: слева фото, справа текст. Фотография крупнее, поэтому высота карточки равна ее высоте. Кроме того, на листе нужно разместить шапку с заголовком, а внизу — блок контактной информации [профсоюза гениев].

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

Если теперь принять высоту шапки за одну «строку», получится, что весь ваш контент занимает 9 абстрактных «строк». Если вам трудно абстрагироваться от интерлиньяжа, назовите эти «строки» рядами или горизонтальными блоками. Предположим, вы еще захотите добавить по 1/2 строки воздуха перед верхним и нижним краями листа. Итого, ваш макет нужно делить на 10 строк:

В результате вы делите ваш носитель (лист A4) по высоте на 10 «строк». Получаются блоки высотой около 3 сантиметров. Очевидно, что это слишком крупная разлиновка, чтобы верстать по ней тексты, контактную информацию и прочие мелочи.

Вы смотрите на свои текстовки и понимаете, что возле каждой фотографии у вас получается описание где-то на 10—12 строчек текста. То есть, каждый блок нужно разделить еще на 5—6 частей. Предположим, вы перестраховываетесь и берете большее значение, чтобы по одной строчке ушло на отступы. Бинго. Теперь ваш макет представляет собой 10 блоков по 6 строк в каждой. То есть 60 строк. С учетом высоты листа (~300 мм), каждая строка получилась высотой ~5мм. Всё, можно прототипировать прототип, а затем дизайнить дизайн.

А как же быть с размером шрифта? О, теперь всё очень просто! По всё той же логике «правила внешнего и внутреннего», интерлиньяж должен составлять примерно 150—200% от высоты кегля. То есть размер вашего шрифта будет в 1,5—2 раза меньше высоты строки. А это от 2,5 до 3,3мм. Этот размер несложно подобрать в пунктах или даже просто на глаз.

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

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

Вариант «Б». Подход «от кегля»

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

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

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

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

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

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

Итак, определились с базовым шрифтом. Что дальше? А дальше — интерлиньяж. По уже упомянутым традициям современной типографики он составит 150—200% от кегля. А иногда и более.

(Подчеркну: речь о современных реалиях. Просьба не попрекать Брингхерстом и другими классиками книжной типографики — они, безусловно, взорвали свой танцпол, но с тех пор мир немного изменился. Те 120—180% всё-таки рассчитывались для книг, да ещё и в латинице).

Таким образом, ваш базовый интерлиньяж почти всегда окажется где-то в диапазоне от 22 до 40 пикселей.

По личному опыту, для простых коммерческих сайтов довольно удобен базовый интерлиньяж 15px. (Подразумевается 30px, но на уровне верстки удобнее сразу работать с половинчатым, т.к. он дает хорошие отступы в 15px и 45px. Важно понять, что в контексте модульной сетки 15 и 30 суть одно и то же — вы просто работаете либо с половинным значением «тридцатки», либо с целым значением «пятнашки»). Хотя при всей любви к классическим модульным сеткам, не отрицаю плюсы той же трендовой 4-пиксельной сетки для UI-дизайна. Сетки разные нужны, сетки разные важны. Это инструмент, а не религия.

Результат по вертикали

Теперь, когда у нас есть базовый интерлиньяж, мы можем разлинеить макет и следовать, наконец-то, вертикальному ритму. Это значит, что каждый элемент дизайна будет занимать по высоте некоторое число строк. С ритмом становится удобно и легко работать. Не нужно вычислять точные значения в пикселях. Вы меряете всё строками. Заголовок первого уровня — 4 строки, иллюстрация — 8 строк, аватар — 3 строки, кнопка — 3 строки, меню — 5 строк, отступ — 1 строка и т.п. (Надеюсь, вы понимаете, что это фигуральный пример, а не рецепт успеха).

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

Колонки и межколоночный интервал

От чего зависит число колонок

В первую очередь, от контента. Здесь всё проще, чем с высотой. Если речь идёт о печатной продукции, вы в подавляющем большинстве случаев можете предположить число колонок еще на стадии первых черновиков.

Например, если вы верстаете блок про времена года, вашим магическим числом наверняка будет 4. Вы можете сгруппировать их в один ряд или в два. При этом число колонок получится кратным либо двум, либо четырем. То есть есть смысл опираться на числа 2, 4, 6, 8, 12 или 16.

Усложним. Предположим, под блоком с временами года у вас идёт блок с тремя рекламными объявлениями. Очевидно, для этой части макета удобнее было бы число колонок, кратное трем: 3, 6, 12… Но сетка в 3 колонки явно неудачна для времен года. Поэтому нужно искать для них какой-то общий знаменатель. Предыдущий абзац подсказывает, что вам нужна сетка на 6 или 12 колонок.

*Еще пример. Вам нужно сверстать типовой блок-визитку, состоящий из логотипа/аватара (слева) и контактной информации (справа). Сколько нужно колонок? Давайте прикинем.

Если мы хотим сделать равновесную композицию, то можно обойтись даже двумя колонками. В этом случае выравнивание лого будет центральным, а текст придется размещать на глаз. А можно предположить, что текст по ширине занимает места примерно вдвое больше, чем логотип, и соответственно сделать блок в три колонки. А можно пойти еще дальше и заложить в сетку еще и отступы. Допустим, слева и справа будет поля по 1 колонке, логотип займет 2 колонки, текст 4, плюс 1 колонка отступа между лого и текстом — итого 8 колонок.*

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

Когда речь идёт об отдельно взятом макете, подогнать дизайн под новую сетку нетрудно. Если же проект большой и предполагает изобилие страниц или макетов с единой канвой (сайт, брошюра, книга и т.д.), лучше заложить в сетку некоторый запас прочности и хорошенько протестировать ее со случайным контентом из разных страниц. Запас прочности, как правило, достигается кратным увеличением числа колонок: например, вам сейчас нужно только 3, а вы закладываете 6 или 9.

Отмечу один нюанс. Если вы делаете нечто с выраженной центральной композицией и активно используете горизонтальное выравнивание по центру, выгоднее сделать число колонок нечетным. Это позволит равномернее распределять отступы и контент. Совет касается и внутреннего дробления колонок. В примере выше, если у вас было 3 колонки и вам понадобилось их детализировать, при центральной композиции вы разобьете каждую колонку еще на 3, а вот при симметричной — на 2 или 4. В итоге, в первом случае колонок станет 9, а во втором — 6 или 12.

Почему все любят 12-колоночные сетки

Тут всё просто. Число 12 делится на: 12, 6, 4, 3, 2, 1. Поэтому сетка получается гибкой и позволяет органично верстать блоки почти любого количества или ширины. Более того, отбрасывая по краям макета 1 или 2 колонки в качестве полей, вы получаете в центре блок, который делится ещё и на 10, 5 или 8.

Из личного опыта добавлю, что очень удобно рисовать адаптивные макеты, отталкиваясь от ширины в 1200 пикселей, особенно без межколоночных интервалов. Вы получаете 12 колонок с приятной шириной ровно в 100 пикселей и постоянно оргазмируете от круглых чисел в процессе работы. И когда вам нужно поместить на макет плашку кнопки, вы не тянете границы прямоугольника туда-сюда, а мгновенно и не задумываясь вбиваете размер: 300 на 60 и кликаете на макет. К слову, полезно приучить себя позиционировать элементы не мышкой и стрелками, а вбиванием цифры отступов по иксу и игреку — макеты станут опрятнее.

Если контент не подразумевает верстку встык, бывает удобно сделать 24 колонки и работать с ними так же, как с межколоночным интервалом, просто отступая при необходимости полную колонку в 50px. Это создает вокруг контента достаточно воздуха, и макет смотрится дорого. Если же требуется интервал помельче, берется ровно половина колонки, то есть 25px. Все расчеты на лету, числа удобные.

Межколоночное расстояние (gutter)

Зачем и когда нужно делать отступы между колонками?

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

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

В большинстве случаев, межколоночный интервал значительно меньше ширины колонки. Его размер тоже определяется особенностями контента. Если вы верстаете интерфейс, где много классических элементов управления, узкое межколоночное расстояние служит удобным разделителем. Например, между поисковой строкой и кнопкой, или между чекбоксом и его лейблом. (Хотя в целом здесь есть смысл подумать о «квадратной» сетке: 4px или иной, вообще без всяких колонок, и для этого тоже есть причины). Если же вы верстаете страницу с крупными текстовыми блоками, организованными всего в 2—3 колонки, то межколоночное расстояние имеет смысл сделать большим, чтобы дать контенту максимум воздуха.

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

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

Модуль

Собственно, вот таким непростым путём мы с вами добрались до определяющего понятия «модуль», в честь которого и названа модульная сетка. Обычно с него начинают, но судя по вопросам дизайнеров, такой подход не работает. Так что же это вообще такое и зачем оно нужно?

По сути, это просто пропорция. Ширина модуля равна ширине колонки, а высота — нескольким строкам. Скольким именно? Зависит от вашего дизайна и от эффекта, которого вы хотите добиться.

*Несколько лет назад мне довелось делать сайт, посвященный пилонам — шестам для танцев. Естественно, модуль там был сильно вытянут по вертикали. Я использовал соотношение ширины и высоты почти 1:3. Во-первых, потому что подавляющее большинство иллюстраций было портретной ориентации и тоже вытянуто. Во-вторых, потому что сам продукт и весь стиль предполагал некоторую долю фаллической символики. Модуль определяется и контентом, и композицией, и стилем.

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

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

Допустим, вы делаете портал. У вас есть меню высотой в 3 строки, затем следует баннер главной новости высотой в 9 строк, затем ряд каких-то цифр (курсов валют, погоды и др) в 3 строки, затем ряд из нескольких новостей второго плана на 9 строк. То есть весь контент чередуется: 3-9-3-9-3-9-3… На практике этот прием редко оправдан, он не очень-то гибок. Но стоит держать в голове, что ритм может быть сложным.

Сетка в сетке

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

Более того, когда речь идёт о сайтах, часть вашего контента может быть вообще посторонней и встраиваемой: плееры, онлайн-карты, виджеты, платежные фреймы и т.д. Миллион вариантов. У этих элементов будут свои внутренние сетки, которые вы не контролируете. И это тоже нормально.

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

Оптическая компенсация

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

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

Отдельный важный момент: элементы в сетке выравниваются по визуальной массе, а не по габаритным границам. Это значит, что (в идеале) круг, выровненный по левому полю, почти всегда окажется на несколько пикселей левее квадрата, который выровнен по тому же полю. А мелкий подстрочник под крупным заголовком почти всегда нужно смещать вправо, потому что оптически левый край первой буквы заголовка окажется правее, чем «по расчетам». Это частности оптической компенсации.

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

Резюме

Пожалуй, изя всё. Текст и без того объемный, особые выводы не нужны: тут либо вникать, либо нет. В любом случае, спасибо за ваше внимание и интерес к основам дизайна и типографики. Успехов.

habrahabr.ru