Сергей!

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

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

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

  • офисная мебель — по размеру офиса;

  • кабинеты руководителя — по производителям;

  • офисные кресла — по стоимости;

  • а также у нас есть — мы нашли.

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

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

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

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

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

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

Типографика в вебеМодульная сеткаРезиновый дизайнЧередование ритма
Отправить
Поделиться
Запинить

Комментарии

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

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

4 ноя 2013

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

4 ноя 2013

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

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

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

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

18 ноя 2013

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

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

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

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

3 июня 2014

Рекомендуем другие советы