Модульные сетки и колонки

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

Обычно я продвигаюсь туда и сюда между создаваемыми органическими макетами с интуитивными пропорциями и создаю сетку, на которой смогу расположить различные элементы. В последнее время я был более заинтересован в последнем. Часто я ловил себя на мысли, что высчитываю сколько будет 750 разделить на 3 минус 2 равных поля по 10px.

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

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

1 колонка

1 Column

Для простоты начнём с одноколоночного макета, который берёт начало у истоков веба. 1994-й дал нам серый фон и чёрный шрифт Times в одиночных колонках до самого низу окна браузера, одна-колонка наиболее примитивная форма из возможных (хотя назвать её так можно с натяжкой. Смотрите: ранняя версия Yahoo). Они отлично развились с тех пор и некоторые недавние переделывания сделали их ещё лучше.

2 колонки

2 Columns-1
Из области блоггеров. 2 колонки практичны и совершенно безупречно представляют контент и кроме того навигацию/архивы/всё остальное стоящее рядом друг с другом. Популярные вариации содержат фиксированные сайдбар (боковую область)/область контента переменной и фиксированную ширину, узкий сайдбар/широкая область контента.
2 Columns-2

Макет с двумя колонками или более ставит перед выбором размера: колонки одинакового размера или разной ширины? Соотношение имеет важное значение и некоторые ширины более эстетичны чем другие. Довольно трудно ошибиться с шириной 1:1 (или 1:1:1 или более). Немного труднее выбирать неодинаковые размеры, потому что нет жёстких правил. Вы можете выбрать 5:8 Золотое сечение (в 750px общей ширины макета, выделить примерно 290px и 460px), пропорции 3:4 (320px и 430px), пропорции 1:2 двойной квадрат (250px и 500px) и так далее. (Возможно вы заметили, что такие же приятные ритмические пропорции частое явление в музыке).

3 колонки

После того как вы добавляете третью колонку, варианты прибавляются. Что включает в себя третья колонка так это возможности виртуальной колонки, она вроде бы как не совсем присутствует в макете, но существует по доверенности. // Сейчас видимо сайт изменён, поэтому того, что описано далее нет // Рассмотрим этот сайт например. На всех его страницах есть сайдбар и кажется, что это макет на 2 колонки. На главной странице, крупные красные панели подразумевают существование трёх одинаковых столбцов.
3 Columns-1
Так например, 3-х колоночный макет позволяет перекрыть элементы. Схема 2-х колоночного макета традиционно означает, что содержание каждого столбца живёт в этом столбце без перекрытия.
3 Columns-2

4 колонки

4 Columns-1
При 4-х колоночном макете ограничения размера экрана начинают становиться всё боле очевидными. Только с большим количеством пикселей в колонке, редко но имеет смысл полагаться на 4 колонки равного-размера стоящие бок о бок.
4 Columns-2
Не сказать, что колонкам нужен одинаковый размер. Можно например сделать 4-х колоночный макет, сделав 3 узких колонки по обе стороны от большой площади основного контента. (Хотя есть много перекрывающихся областей, поэтому в некоторых местах это 2 колонки, в других местах 3. Вот так!)

Многоколонник

4 колонки это не предел, хотя даже в разумных дизайнах задавать какие-либо требования к ширине колонок слишком трудно. В некоторых случаях размер экрана определяет, сколько колонок вы увидите, может быть даже больше шести. И всё это ресайзится и зависит от разрешения, чтобы заполнить полностью экран.
More Columns

Из комментариев:

Мне нравится одноколоночные макеты (я и сам их использую), но я думаю, что лучше когда дизайнеры зависят от типа информации, которую они пытаются отобразить на экране.
Часто бывает, что вебсайтам добавляют больше колонок чем нужно, вставляя контент в их дополнительные столбцы просто, чтобы занять место (это особенно распространенно среди блогов).
На самом деле вам не нужно иметь свой Blogroll* на каждой странице. Мы его располагаем для того, чтобы заполнить пустоту.

*Blogroll — список ссылок в вашем блоге, ведущий на другие блоги. Основная задача блогролла — познакомить посетителей с ресурсами, которые автор блога считает интересными.

Source link — Columns & Grids

FacebookTwitterGoogle+VKПоделиться