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

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

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

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

История

Предшественники

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

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

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

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

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

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

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

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

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

Использование сетки в полиграфическом дизайне

В полиграфическом дизайне всегда использовались системы сеток для организации и структурирования контента. Сеточные системы зародились как вспомогательные линии для написанных книг. Художники использовали сетку для размещения контента – текста и изображений – таким образом, чтобы облегчить чтение и усвоение. В газетах, книгах, журналах, рекламных объявлениях и т. д. используются разные системы сеток, которые оптимально используют пространство для лучшего чтения и представления. ^[4]

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

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

См. также

Ссылки

^ «Архивная копия» . Архивировано из оригинала 30 мая 2013 г. Проверено 17 июня 2013 г. {{cite web}}: CS1 maint: архивная копия в заголовке ( ссылка )
↑ Маркотт, Итан (3 марта 2009 г.). «Жидкие сетки». Список врозь.
^ Тэб Аткинс-младший; Элика Дж. Этемад; Россен Атанасов (14 декабря 2017 г.). «Модуль макета сетки CSS, уровень 1» . Консорциум Всемирной паутины . Проверено 10 июля 2019 г.
^ «Что такое сетка?» .

Дальнейшее чтение

Бейнс, Фил и Хаслам, Эндрю. Шрифт и типографика, второе издание. Нью-Йорк: Публикации Waston-Guptill, 2005. ISBN 0-8230-5528-0 .
Бернхилл, Питер. Типовые пространства: в нормах дома в типографии Альда Мануция. Лондон: Hyphen Press, 2003. с. 101.
Элам, Кимберли. Грид-системы: принципы организации типа. Нью-Йорк: Princeton Architectural Press, 2004. ISBN 1-56898-465-0 .
Хочули, Йост. Дизайн книг: практика и теория.
Херлберт, Аллен. Grid: модульная система для дизайна и производства газет, журналов и книг. Уайли: 1982. ISBN 0-471-28923-X .
Ле Корбюзье «Модуль I» .
Мюллер-Брокманн, Йозеф. Сеточные системы в графическом дизайне. Ниггли: 1996. ISBN 3-7212-0145-0
Рудер, Эмиль. Типография. Гастингс Хаус: 1981. ISBN 0-8038-7223-2 .
Рудольф Босхард, Ганс. Типографская сетка . Ниггли: 2002. ISBN 3-7212-0340-2 .
Хой Винь, о дааа! Сетки хороши , презентация конференции South by Southwest, 2007 г. [1]
Антонио Карузоне, Проектирование сеточных систем для Flash . [2]
Маркотт, Итан (3 марта 2009 г.). «Жидкие сетки».
Капо, Даниэле (5 апреля 2009 г.). «Деление сегмента на n частей в средневековой, но позднесовременной моде». [3]

Внешние ссылки

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

[1] «Архивная копия» . Архивировано из оригинала 30 мая 2013 г. Проверено 17 июня 2013 г. {{cite web}}: CS1 maint: архивная копия в заголовке ( ссылка )

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

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

[4] «Что такое сетка?» .

[1]

[2]

[3]

[4]