x
 
Сергей Педан
4 ноября 2013

Очень у немногих ребят встречается комбинирование сразу нескольких колоночных сеток в одном блоке. Как здесь, например.

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

Смотрится очень круто, просто алхимия. Чем-то похоже на полиритмию в музыке. Подозреваю, что комбинирование ритмов даёт волшебство везде, а не только в сетках и в музыке.



Сергей!

Мне кажется, вы совер­шенно напрасно гип­но­ти­зи­ру­е­тесь коло­ноч­ками. По лич­ному опыту могу ска­зать, что это не при­бли­зит вас к пони­ма­нию вёрстки.

Дизай­нер, загип­но­ти­зи­ро­ван­ный модуль­ной сет­кой, неиз­бежно состав­ляет такую конструкцию:

А чита­тель вос­при­ни­мает ритм оди­на­ко­вых коло­нок как сиг­нал — здесь эле­менты из одного «теста». И пыта­ется сопоставить:

  • офис­ная мебель — по раз­меру офиса;
  • каби­неты руко­во­ди­теля — по производителям;
  • офис­ные кресла — по стоимости;
  • а также у нас есть — мы нашли.

Ниже бес­ко­нечно кра­си­вая работа гения модуль­ной сетки, автора дизайна нави­га­ции по Нью‑Йорк­скому метро, моего кумира Мас­симо Виньелли:

К сожа­ле­нию, совер­шенно про­валь­ная по вос­при­я­тию и чита­бель­но­сти газета.

Какими тол­стыми линей­ками ни раз­де­ляй, глаз всё равно объ­еди­нит эле­менты по раз­меру и ритму:

Чита­тель раз­ли­чает ста­тьи в газете и абзацы на веб‑стра­нице по форме тек­ста, бли­зо­сти и общим раз­ме­рам эле­мен­тов. Сна­чала видит блоки смысла, а затем решает, что и в каком порядке читать. Срав­ните с кон­струк­цией газеты «Ди Цайт» Марио Гарсии:

Стра­ница орга­ни­зо­вана проще некуда: пере­до­вица сверху, две заметки снизу, в боко­вой колонке — новости.

Про­стое пра­вило хоро­шей вёрстки — не повто­рять ритм на сосед­них этажах:


Поделиться
Отправить

Комментарии

Роман Хегай
4 ноября 2013

Артём, а как быть, если текста ну очень много?

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

Никита Прокудин
4 ноября 2013

Роман, ответ на ваш вопрос очень простой — не делать колонки одинаковой высоты и ширины. Зачем вы сами себя загоняете в рамки? Не люблю это говорить, но поиграйте с контентом, с вёрсткой. Я в своём дизайне решил эту проблему вот так: http://www.bitrete.ru/about

Сергей Педан
18 ноября 2013

Артём, спасибо за совет. Да уж, странно, что Виньелли не заметил, что его геометричность убила читаемость.

Я понимаю, что похожие по ритму блоки будут смешиваться. И надо их делать не очень похожими.

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

Очевидно, что просто смешать два ритма — уже отличный приём. Я же хотел узнать, может, есть какие-то ещё какие-то руководства для этого.

Ильяс Бикбулатов
3 июня 2014

Здравствуйте! Попал в такую ситуацию, где заказчик знаком с некоторыми принципами дизайна и вёрстки, но у него сугубо своё представление о том, как пользоваться модульной сеткой, что правильно, а что нет.

Он требует от меня, чтобы в макете сайта всё было выровнено по сетке. Вплоть до полного абсурда (например элементы с левой выключкой типа заголовков и номеров должны быть выровнены не только по левой, но и по правой стороне, то есть заполнять определённое пространство по колонкам). Также он манкирует принципами отношений и свободного пространства между блоками.

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

Возможно ли как-то ему в двух словах всё же разьяснить, как работают сетки? И что допустимо. Пример сайта Эпл очень вдохновил, попробую, может, ему показать.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

Как собрать страницу из модулей: без иллюстраций 2 Как собрать страницу из модулей: зачем нужна сетка? 1 8




Недавно всплыло

Что делает сео-специалист? 1 7 7 Что делать, если меня, технического директора, потихоньку отстраняют от дел? 1