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

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-фреймворк

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

ЗАКЛЮЧЕНИЕ

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

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

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

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

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

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

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