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

Как комбинировать ритмы колоночных сеток?

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

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

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



Сергей!

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

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

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

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


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

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


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


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

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


P. S.

Открыт набор в Школу стажёров до 28 ноября или пока есть свободные места. Занятия с 30 января.

 

Поделиться

Комментарии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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




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

Уместно ли травить леску перед выступлением? 1 Как организовать личный рост? 1 Как перестать бояться обсуждать задачу с клиентом? 2 Как сделать все дела за день? 2



© 2007—2016

Запрещённые слова
Пишите: artgorbunov@artgorbunov.ru