МОДУЛЬНАЯ СЕТКА И ЕЁ РОЛЬ В СОЗДАНИИ МНОГОПОЛОСНОЙ ПРОДУКЦИИ.

Содержание:

ВВЕДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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 колонки, то расстояние смысл большим, дать максимум .

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

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

1.3 Модуль

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

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

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

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

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

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

Сетка в сетке.

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

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

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

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

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

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

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

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

1.4 Модульная система вёрстки

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

Рисунок 1 Эмиль Рудер. Типографика. М.: Книга, 1982, c. 226

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

Рисунок 2 Модульная сетка

Сетку то нарисовали, но вот что с ней делать? Почему в ней десять колонок, а не семь или тринадцать? В статье ответа нет, читатели спрашивают:

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

Один из комментариев к статье С.И. Серова «Сетка»

Да, правил нет, но есть здравый смысл. Говоря иначе, сначала нужно подумать, для чего нужна сетка, и только потом уже ее строить. Например, нарисованный выше каркас может послужить отличным полем для игры в крестики-нолики.

Рисунок 3 «Крестики-нолики»

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

Рисунок 3 Модульная сетка

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

Рисунок 4 Модульная сетка на примере мобильной платформа

Итак, на что же можно и нужно опираться при создании модульной сетки?

Достаточно часто в статьях про модульные сетки можно встретить предложение, которое звучит следующим образом:

Не вписывайте дизайн в сетку, наоборот, создавайте сетку под дизайн.

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

Однако, как показывает практика, возможны и имеют место быть оба варианта:

• Дизайн вписывается в сетку;
• Сетка создается под дизайн.

каждый по отдельности.

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

Рисунок 5 Обложка книги

обсуждать ценность обложки. лучше  — оно явно :

• Ощущение, что «набросаны» страницы , их позиции не обоснованы;
• в макете и непропорциональны, , чем обусловлен тот или размер;
• нет, поля , объекты друг , взгляд по обложке;
• работа , как в плане (автор минимум 5), так типографики( ключевых «дыры» отдельными );
• «Грязные» .

Очевидно, что хороший сайта , такая сведет его ». Её нужно до ума нам поможет . Возьмем высоту полосы (7 ) и нарисуем с аналогичным по вертикали . Кстати, и нижняя удивительным в нее «».

Рисунок 6 Обложка книги

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

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

Обложка с  или без :

Рисунок 7 Обложка книги

Рисунок 8 Обложка книги

• Элементы по сетке друг , появились широкие ;
• Основной выведен журнала;
• шрифты и , что вкупе дает нам решение.

мы получаем вот замечательную для главной сайта:

Рисунок 9 Обложка книги

Двигаемся . В одной статей подробно  этапы создания сайта-визитки. Прочитайте ее, еще не читали, внимание, как построение : объекты размещаются  — от общего , от главных к второстепенным.

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

Во всех этой расстояние направляющими — это частный , колонки быть ширины.

вопросом, тому, что уже выше. в сетке четыре ? Откуда эта цифра именно ?

Дизайн получился ширины, его случае верстать, можно на готовое в виде CSS-. Большинство строятся  12, 16 или 24-колонной сетке. Для задачи подходит 24-колонная сетка, наш дизайн проще .

CSS-фреймворк

Еще раз обратите на то, что мы продумали , расположили главные элементы потом сетки нашему окончательный вид.

ЗАКЛЮЧЕНИЕ

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

В рабοте были разοбраны измерения шрифта, такие как:

Рассмοтрена классификация пο рοли шрифта. Разделение и предназначение текстοвых и акцидентных шрифтοв. Прοанализирοванο применение леттеринга.

Далее я пοсчитал нужном привести в заключение два основных вида модульных сеток.

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

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

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

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Научная и учебная литература:

1. Ян Чихольд. Облик книги. Избранные статьи о книжном оформлении и типографике. 5-е издание перерабοтаннοе и дοпοлненнοе. Издательство Студии Артемия Лебедева 2018 г.
2. Джеймс Феличи. Типографика: шрифт, вёрстка, дизайн. 2-е издание Издательство «БХВ-Петербург» 2018 г.
3. Аркадий Мильчин, Людмила Чельцова. Справочник издателя и автора. Издательство Студии Артемия Лебедева 2018 г.

Электронные ресурсы:

1. http://gutdesign.ru/blog/16-modulnaya-setka/
2. http://alexsv.ru/modulnaya-setka-v-graficheskom-dizajne/
3. https://habr.com/ru/post/344910/
4. https://ru.wikipedia.org/wiki/Модульная_система_вёрстки

Справка об отсутствии плагиата.