В веб-дизайне грид-системы представляют собой невидимые структуры, которые собирают все элементы веб-страницы вместе. В этой статье я представлю введение в грид-системы, объясню, что они из себя представляют, их назначение и некоторые теории, стоящие за ними.
Википедия объясняет систему сетки как —
структура (обычно двумерная), состоящая из серии пересекающихся прямых (вертикальных, горизонтальных и угловых) или изогнутых направляющих линий, используемых для структурирования содержимого. Сетка служит арматурой или каркасом, на котором дизайнер может упорядоченно и легко воспринимать графические элементы (изображения, глифы, абзацы и т. Д.).
Природа грид-систем
Грид-системы никогда не видны должным образом, но следы «дисциплины» грид можно увидеть по размещению элементов на веб-странице. Грид-системы также определяют размер таких элементов дизайна, как ширина текстов столбцов, повторное размещение элементов, отступы вокруг изображений, расстояние между словами, высота строки и т. Д. Основная цель сетки — создать единство в дизайне, что в В свою очередь, улучшается поток контента веб-страницы, что делает дизайн веб-страницы более читабельным и приятным.
Единство в грид-системах
Элементы графического дизайна Алекса Уайта объясняют использование единства через сеточную систему:
Единство в дизайне существует, когда все элементы находятся в согласии. Элементы выглядят так, как будто они принадлежат друг другу, а не так, как если бы они были расположены случайно … Итак, без единства дизайн становится хаотичным и нечитаемым. Но без разнообразия дизайн становится инертным, безжизненным и неинтересным. Баланс должен быть найден между двумя.
Тем не менее, преимущества системы сетки для конкретного проекта вступят в силу только в том случае, если сетка используется на начальных этапах процесса проектирования. Попытка внедрить сетку в существующий дизайн не создаст такой же гибкий макет или единство содержимого. Эта проблема обсуждается в Грид-системе Йозефа Мюллера-Брокмана « Графический дизайн» . Он пишет:
Подходящая сетка в визуальном дизайне позволяет легко: а) объективно построить аргумент с помощью средств визуальной коммуникации; б) систематизировать и логично строить текстовые и иллюстративные материалы; в) упорядочить текст и иллюстрации в компактной композиции с собственным ритмом; d) собрать визуальный материал так, чтобы он был легко понятен и структурирован с высокой степенью натяжения.
Grid Systems Beyond Web Design
Сетки не ограничиваются веб-дизайном и графическим дизайном. Практически в каждой профессии, где реализована любая форма дизайна, есть сеточная система, которую профессионалы используют в качестве гарантии для позитивного позиционирования элементов. Практически профессионально стало необходимым использовать сетки во всех современных методах проектирования.
Какие грид-системы доступны?
Грид-системы для веб-дизайнеров повсюду в Интернете. Король сеток был назван «Решетка 960». Сетка 960 имеет следующую структуру:
- Общая ширина 960 пикселей.
- Максимум 12 столбцов, 60 пикселей в ширину.
- Каждый столбец имеет 10 пикселей слева и справа. В свою очередь, это дает 20px пространства желоба по краям.
- Общая площадь контента составляет 940 пикселей.
Одна из основных причин популярности сетки 960 у дизайнеров — ее гибкость. Дизайнеры могут использовать широкий диапазон столбцов с максимальным числом 12. Наиболее популярные примеры: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4 и 10 x 2. Сетка также использовалась на самых разных веб-сайтах, таких как Assistly , Drupal , 51bits и Sony Music . Чтобы увидеть сеточные системы этих сайтов в действии, зайдите на официальную домашнюю страницу 960 Grid .
Сетка 960 всегда была очень тесно связана с «Сеткой чертежей», но у них есть много различий. Начнем с того, что у Blueprint есть глубокая настройка для типографики, в то время как настройка системы сетки 960 имеет только минимальную типографику для ориентира, а не поставляемую настройку. Я предпочитаю такой подход, потому что обе грид-системы были выпущены несколько лет назад и фронт веб-типографики быстро изменился. Поэтому система сетки 960 обеспечивает большую гибкость при использовании современной типографики в дизайне.
Еще одна заметная особенность в сетке 960 — это отсутствие в настройках кавычек. Натан Смит (создатель сетки 960) утверждает:
Это вещи, которыми я редко пользуюсь, и я считаю, что это немного больше ориентировано на дизайн и контекстный контент, чем на макет страницы и прототипирование.
Я не совсем уверен в дизайне цитат «тяни / толкай», и, честно говоря, я немного удивлен их появлением на веб-сайтах, потому что это заставляет меня чувствовать, что кто-то слишком компенсирует. Кроме того, если дизайн цитат «тянуть / толкать» производится без особого обдумывания или руководства, он действительно может разрушить общий дизайн веб-сайта. Тем не менее, я понимаю, что это популярный элемент дизайна на современных веб-сайтах, поэтому высоко оцените включение Blueprint шаблона для этой функции.
Это означает, что если бы я создавал систему подсчета очков для 960 против Blueprint, это в настоящее время 1-1 и до моего последнего ключевого различия — вертикального ритма. Вертикальный ритм — это постоянный интервал между предложениями и абзацами в содержимом веб-сайта или, другими словами, высотой строки. Натан Смит снова заявляет, что, хотя он считает, что вертикальный ритм является важным фактором в веб-дизайне, он считает, что «он хрупок» и может быть легко поврежден размещением изображения в тексте редактором контента.
Мой вердикт: я иду с Натаном Смитом исключительно потому, что, как разработчик, я знаю, сколько CMS позволит пользователям размещать изображения любого размера в любой позиции в тексте. Они не имеют отношения к сложному вертикальному ритму. Есть много обходных путей, чтобы справиться с этим, но я чувствую, что это действительно косвенно. Если у вас есть проект, где его будут уважать, это здорово, но в большинстве случаев я думаю, что 960 имеет более реалистичный подход.
Я считаю, что сетка 960 является лучшим вариантом, но, честно говоря, попробуйте оба варианта и посмотрите, какой из них вам больше подходит.
Другие грид-системы и дальнейшее чтение
Есть множество систем сетки, доступных для использования. Все дело в личном мнении, поэтому, если вы ищете грид-системы, есть только одно место: грид-система .
Для дальнейшего чтения, вот небольшой список статей, которые охватывают системы сетки, о которых я говорил более подробно:
- 960 Grid System
- Сетка 960 стареет
- Тип настройки в Интернете
- Сетка 960
- Самая смешная сетка, которую вы когда-либо видели
- Использование гридов в веб-дизайне
Другим способом работы с сетками является использование CSS-фреймворка, такого как Bootstrap. Если вы слышали о Bootstrap, но откладывали его изучение, потому что оно кажется слишком сложным, то изучите наш курс Введение в Bootstrap 4, чтобы быстро и весело познакомиться с мощью Bootstrap.