Сетки на веб-сайтах

Введение

В предыдущих материалах цикла «Анатомия веб-сайта» мы рассказывали, какие элементы могут размещаться в пространстве веб-страницы. В завершающей статье цикла мы с вами исследуем еще одну составляющую анатомии сайта, которая отвечает за то, как размещаются эти элементы на сайте. Речь, конечно, о сетках.

Что такое сетки и зачем они нужны

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

Вероятно, одними из первых сеток, с которыми вам приходилось иметь дело, были листы ваших тетрадей — в линейку и в клетку. А в младших классах используются еще тетради с полями и диагональными линиями.

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

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

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

Но для веб-сайтов и для графического дизайна все же используются, как правило, прямоугольные линейные сетки. Этому способствует то, что пропорцию в сетках легче строить в соответствии с форматом, в рамках которого вы ее создаете. А в графическом дизайне и на сайтах вы имеете дело, как правило, с прямоугольными форматами — А4, А3, B5, 16:9 и тому подобными.

Поэтому именно на линейных прямоугольных сетках мы и сосредоточимся в этом материале.

Строение сетки

Сами сетки могут состоять из таких типовых элементов:

  • Поля
  • Колонки
  • Промежутки между колонками (их еще называют просветами и, несколько реже, коридорами)
  • Строки
  • Линии потока
  • Собственно, модули
  • Межмодульные интервалы

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

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

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

Линии потока — это горизонтальные линии, которые разделяют различные участки сетки на параллельные полосы. Они помогают читателю следить за содержанием макета. Линии потока также создают точки остановки или ребра для элементов, которые нужно разместить. Некоторые линии потока называются висячими линиями, а другие — базовыми линиями.

Базовые линии помогают обеспечить вертикальную пропорцию.

Строки — это горизонтальные прямоугольные зоны, от края до края сетки.

Модули создают базовую единицу пропорции в пределах модульной сетки. Они образуются на пересечении строк и колонок.

А модульные интервалы — это прямоугольные области, расположенные в пространстве между горизонтальными и вертикальными отступами между модулями.

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

Типовые сетки

Манускриптная сетка

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

Такие сетки часто используют в книгах и некоторых журналах. А в пространстве веб-сайтов такой тип сеток часто используют для создания макетов лонгридов и мобильных версий сайтов.

Колоночная сетка

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

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

Модульная сетка

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

Заметьте, что идея модульной сетки заключается в том, что размер строк и модулей четко определен, а значит, и верстка к ней привязывается. Иначе говоря, модульные сетки вам нужны тогда, когда вы создаете макет, в котором важен как горизонтальный, так и вертикальный ритм. В журналах это, например, полезно для каталогов. А в сайтах — для интернет-магазинов и фотогалерей.

Сетка на основе базовой линии

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

Кстати, простейший пример сетки на основе базовой линии — это та самая тетрадь в линейку!

Иерархическая сетка

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

Чтобы обеспечить пропорциональность иерархической сетке, она может быть построена на основе колоночной сетки.

Особенности сеток на веб-сайтах

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

Как одна сетка может обеспечить комфортное отображение сайта в таких разных условиях? Собственно, никак. Сетка, которая хорошо смотрится на мониторе с разрешением 1280х720, не будет выглядеть органично в смартфоне.

И поэтому на одном и том же веб-сайте на самом деле используется специальная сетка — адаптивная (или гибкая). Как правило, в ее основе лежит колоночная сетка, и именно количество колонок меняется в зависимости от того, каким разрешением обладает дисплей, на котором вы просматриваете веб-сайт.

В следующем цикле материалов мы рассмотрим как раз тему адаптивности сайтов подробнее.

·
574
·
goodsuper 6
Наступна стаття
Динамические и интерактивные элементы и объекты на веб-сайтах
0
Головна