Сетка (графический дизайн) - Grid (graphic design)

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

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

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

Менее распространенный в печати термин «эталонная сетка» - это несвязанная система, уходящая корнями в первые дни печати.

История

Антецеденты

До изобретения подвижный тип для размещения рукописного текста на страницах использовалась система, основанная на оптимальных пропорциях. Одна из таких систем, известная как Диаграмма Вильярда, использовался по крайней мере со времен средневековья.^[1]

Эволюция современной сетки

После Второй мировой войны ряд графические дизайнеры, в том числе Макс Билл, Эмиль Рудер, и Йозеф Мюллер-Брокманн под влиянием модернистских идей Яна Чихольда Die Neue Typographie (Новая типографика), начали сомневаться в актуальности традиционных макет страницы времени. Они начали разрабатывать гибкую систему, способную помочь дизайнерам добиться согласованности в организации страницы. Результатом стала современная типографская сетка, которая стала ассоциироваться с Международный типографский стиль. Основополагающая работа по теме, Сеточные системы в графическом дизайне Мюллер-Брокманн помог распространить использование сетки сначала в Европе, а затем в Северной Америке.

Реакция и переоценка

К середине 1970-х преподавание типографской сетки как части учебных программ по графическому дизайну стало стандартом в Европе, Северной Америке и большей части Латинской Америки. Графический стиль сетки был принят как образ корпоративной коммуникации. В начале 1980-х годов реакция против укоренения сетки, особенно ее догматического использования и ассоциации с корпоративной культурой, привела к тому, что некоторые дизайнеры отказались от ее использования в пользу более органичной структуры. Появление компьютера Apple Macintosh и связанный с этим переход от набора шрифтов типографами к тому, что дизайнеры сами задают шрифт, вылились в волну экспериментов, во многом противоречащих предписаниям Чихольда и Мюллер-Брокманна. Типографская сетка по-прежнему преподается сегодня, но больше как полезный инструмент для некоторых проектов, а не как требование или отправная точка для всего дизайна страницы.

Использование сетки в веб-дизайне

Хотя сеточные системы широко используются в печатных СМИ, интерес со стороны веб-разработчиков возродился только недавно. Создание фреймворков для веб-дизайна HTML и CSS существовал некоторое время, прежде чем новые фреймворки популяризировали использование макетов на основе сетки. Некоторые сеточные системы определяют элементы фиксированной ширины с пикселями, а некоторые являются «плавными», что означает, что они требуют, чтобы размер элемента страницы определялся в относительных единицах, таких как проценты, а не в абсолютных единицах, таких как пиксели или точки.^[2]

В W3C опубликовал Макет сетки CSS Модуль уровня 1 для определения системы макета на основе двумерной сетки.^[3]

Существуют также фреймворки CSS, которые включают собственную систему сеток:

Программного обеспечения

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

внешняя ссылка

Система сеток Рассмотрение технических аспектов сеток на практике с большим количеством ресурсов.

[1] «Архивная копия». Архивировано из оригинал на 2013-05-30. Получено 2013-06-17.CS1 maint: заархивированная копия как заголовок (ссылка на сайт)

[2] Маркотт, Итан (3 марта 2009 г.). «Жидкие сетки». Список отдельно.

[3] Таб Аткинс-младший; Элика Дж. Этемад; Россен Атанасов (14 декабря 2017 г.). "Модуль макета сетки CSS, уровень 1". Консорциум World Wide Web. Получено 10 июля 2019.

[1]

[2]

[3]