Файл: МОДУЛЬНАЯ СЕТКА И ЕЁ РОЛЬ В СОЗДАНИИ МНОГОПОЛОСНОЙ ПРОДУКЦИИ..pdf

ВВЕДЕНИЕ

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

Сетки можно встретить не только в информационном дизайне, но и в архитектуре, в интерьерах и в градостроительстве.

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

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

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

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

Цель исследования. Основная цель данной курсовой работы – рассмотрение особенностей строения модульной сетки, анализ и систематизация информации, полученной в процессе изучения. Ознакомление с рабочими процессами как в теории, так и на практике.

Задачи исследования:

• Выяснить в процессе изучения структуру сетки;
• Определить как измерения модуля влияют на его восприятие сетки;
• Исследовать виды модульных сеток;
• Обозреть технику построения модульной сетки.

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

1. ИССЛЕДОВАТЕЛЬСКО-АНАЛИТИЧЕСКАЯ ГЛАВА

1.1. Как работает модульная сетка

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

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

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

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

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

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

, от контента, нужно в макете: , иллюстраций, , перечней, .

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

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

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

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

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

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

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

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

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

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

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

«Б». Подход «от »

Далеко не у вас будет контент и холст. В вы куда работаете с неопределенностью.

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

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

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

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

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

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

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

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

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

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

Результат по .

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

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

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

От чего число

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

, если вы блок про года, магическим наверняка 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.

1.2 12-колоночные сетки.

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

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

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

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

и когда делать между ?

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

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

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

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

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