История гридов: от печатного станка до современного веб-дизайна

Веб-дизайн

ВДОХНОВЕНИЕ

Гриды показывают дизайнерам интуитивно понятный метод организации, начиная от композиции в фотографиях и заканчивая размещением товаров на веб-сайте Amazon. Сетки предоставляют визуальную логику, которая помогает нам быстро и легко понять то, что мы видим. Присоединяйтесь к нам, чтобы взглянуть на историю гридов, от их самых ранних воплощений до современного использования в Интернете.

Строительные блоки - Сетки

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

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

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

Древние “графические дизайнеры” руководствовались представлениями о божественном.

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

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

Ниже наведен пример из Кельтской книги, созданной около 800 г. до н. э. содержащей Четыре Евангелия Нового Завета, где мы видим и симметрию, и баланс. Интуитивно понятное размещение информации, эти ранние религиозные ученые обладали врожденными способностями упорядочивать священные тексты, следуя изяществу невидимых указаний.

Мы можем копнуть еще глубже. Древние египтяне следовали Канонам Пропорций. Фигуры, изображенные на их резьбе и рисунках, следовали по такому же правилу сетки. Египтяне основали свой канон пропорций как человеческий кулак, измеряя 18 кулаков от земли до лба стоящей фигуры. Их иероглифы также показывают четкое расположение по сетки. Представьте, что могли бы сделать эти ранние создатели, работающие на камнях с помощью CSS-сетки и флексбоксов!

От ручного к механическому

Ручной набор — способ набора текста, при котором строки подбираются вручную из металлических литер и пробельного материала. Такой ручной набор впервые был разработан в Китае около 1040 г. до н.э. китайцем Би Шэн. Однако распространение этих первых систем подвижных литер было ограниченным: они были дорогими и требовали больших трудовых затрат. Около 1450 года Иоганн Гутенберг изобрел печатный пресс и самостоятельно разработал европейскую систему подвижных литер, дополнив её такими новшествами, как изготовление шрифта при помощи пуансонов и матриц. Гутенберг был первым, кто начал делать литеры из сплава свинца, олова и сурьмы — те же компоненты использовались в течение последующих 400 лет. Металлические литеры были прочнее, а текст получался более единообразным, что привело к появлению типографики и шрифтового искусства. Выпуск Библии Гутенберга стал одной из первых крупных публикаций.

Так Гриды стали необходимостью.

Печатные машины позволяли массово изготавливать книги и в отличие от религиозных текстов ручной работы, появившихся задолго до этого, металлические пластины, которые они использовали, создавали единообразие. Библия Гутенберга представляет текст в простой двух-колоночной схеме.

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

Сетки становятся артистичными: влияние Пита Мондриана и движения Де Стиля

В Нидерландах 1917 - 1931 года, Де Стиль был современным художественным движением, основанным как на минимализме, так и на абстракции. Простота заменила тонкости реализма линейным подходом, который коснулся как искусства, так и архитектуры. Так Арт Деко стал избытком, а Де Стиль - практичным.

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

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

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

Сложенные блоки с цветов Мондриана легко определить издалека и его влияние видно в современном веб-дизайне. С таким инструментом как CSS Грид  создание собственных макетов для веб-сайтов в стиле Мондриана становится простым процессом.

Коммерциализм и сетка: маркетинг 1940-х

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

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

Сетки и модернизм

Швейцарского движения в 1940-е и 50-е годы сформировало большую часть графического и веб-дизайна, освободило нас от жестких ориентиров. Использовались сетки вместе с асимметричной планировкой, подчеркивая более эмоциональные составляющие дизайна. Особое внимание было уделено типографике, убрав засечки с шрифтов был сформирован другой смысл. Так возник шрифт Helvetica.

Из этого движения самый сильный сторонник сетки: Эмиль Рудер, чья книга «Типография: Руководство по дизайну», поддерживает сетку из трех столбцов, где в каждом столбце содержится разный перевод его письма.

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

Свобода для Гридов - на помощь приходит компьютер

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

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

С компьютерами для дизайна появилось новое движение графического дизайна в Калифорнии в 1975 году. Только с помощью компьютеров мы получили авангардистскую чувствительность. Компьютеры помогли дизайнерам сформировать свои творческие замыслы с менее трудоемким процессом. Сегодня трудно представить мир без их цифровой помощи.

Сетки в современном веб-дизайне

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

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

В веб-дизайне линии гридов обычно являются прозрачными направляющими для выравнивания элементов.

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

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

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

Сетка CSS дает веб-дизайнерам возможность фиксировать элементы как по вертикали, так и по горизонтали.

Нерегулярные сетки: этот стиль разрушает строгие линии регулярных сеток. Наложение элементов, перекос и неправильные позиции такие уникальные формы могут разрушить монотонность гридов, не превращая макет в хаос.

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

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

Сетки никогда не выйдут из моды

От предыстории и до 21-го века, сетки сильно повлияли на дизайн. Они обеспечивают линейный подход, при котором элементы могут быть легко размещены в визуально приятную композицию.

Какой подход вам больше всего нравиться традиционный или современный? Напишите свой ответ в комментариях.


ДЖЕФФ КАРДЕЛЛО

15 октября 2019 г.

Источник: https://webflow.com/blog/history-of-grids

Комментарии для сайта Cackle
Автор поста:
Юлия Манченко
Преподаватель