Структура разметки колонками

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

Разделение на 12 колонок удобно, так как позволяет группировать колонки по три, четыре и шесть блоков. 12 колонок - оптимальное число, ни слишком большое (каждая колонка становится слишком узкой и непрактичной в использовании), ни слишком маленькое (слишком малое количество колонок означает меньше различных вариантов дизайна).

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

Группировка колонок

Как уже было сказано, данные 12 колонок виртуальны - они существуют в сознании дизайнера иа разметке рабочей поверхности. В реальности разработчик дизайна работает с группами колонок. Конечно же, каждую из разметочных колонок можно воплотить как реальную, но такое дизайнерское решение встречается редко - каждая колонка получится слишком узкой, и такой дизайн будет смущать пользователя объёмом видимой одновременно информации.

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

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

Прерывание колонок

Прерывание колонок - это метод разработки дизайна, который позволяет этот дизайн сделать более оригинальным и/или выделить определённую часть содержания. Прерывание колонок подразумевает, что группы колонок и/или рядов прерываются с помощью объекта, который не вписывается в правила группировки колонок для конкретной страницы. Так, например, есть три ряда - в верхнем три группы колонок, в нижнем три, а посередине расположена яркая цветная линия, которая как бы прерывает нормальное расположение колонок. В данном случае выделенным будет именно то, содержание, которое находится в яркой линии.

Использование колонок для разметки

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