Не могли бы вы поделиться сеткой, по которой вы рисуете сайты?

Да, поначалу идея накладывать на всё розовые полоски кажется дизайнеру важнейшим открытием:

Однако настоящий кайф вёрстки приходит не от выравнивания объектов по вертикали и горизонтали, а от правильного членения и соподчинения материала.

Из‑за регулярной сетки легко забыть, что на странице есть главные и второстепенные элементы — полоски и ячейки всё уравнивают.

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

Понадобился столбик меню — сдвинул всё вправо, добавил колонку. Бывает, в бюрошных проектах сетка устаканивается только ко второй половине проекта.

У нас нет стандартной сетки для всех проектов, и мы часто нарушаем сетку, если этого требует смысл.

Комментарии

Дима Плотников

Мне кажется, или сетка не дизайнеру нужна, а тем, кто будет сервис в течение ближайших десяти лет поддерживать в рабочем состоянии? Ребятам, которые будут верстать и программировать, не будет дела «до настоящего кайфа», стоит об этом не забывать :‑)

Саша Реушкин

Артём Шитов хорошо ответил на данный вопрос в своём видео http://video.yandex.ru/users/x-raizor/view/2/

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

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

А так получается, что само выравнивание по сетке есть самоцель дизайнера. Но цель другая.

Антон Шеин

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

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

У нас в команде, например, в качестве боевой вёрстки используется подход, предложенный Сергеем Чикуёнком: http://chikuyonok.ru/2010/01/liquid-site-markup/. Поэтому, если это не вредит смыслу, мы стараемся избегать ограничений, не позволяющих использовать этот подход. Главное делать это уже после готовности основного дизайна, чтобы избежать «технологических наводок» на него.

Игорь Алексеенко

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

Возможно, такая разметка облегчает жизнь дизайнеру, но технологу от неё ни холодно, ни жарко. Кстати, сетка на одной странице может быть не фиксированной: в одном блоке одно выравнивание, в другом — другое. От этого сайты смотрятся только интересней, но такая сетка в этом случае становится совершенно бесполезной.

Александр Борисов

Когда осваивал веб‑дизайн, очень увлёкся теорией модульных сеток, даже инструмент для этого сделал http://aishek.github.com/modulargrid/demo/ — верстать макеты по модульной сетке с такой штукой одно удовольствие :‑)

И да, макет строго по сетке обычно выглядит чересчур «академичным» — если вы научитесь уместно нарушать сетку, ваши макеты станут гораздо более привлекательными визуально.

Комментарии

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

Свежак

Текст

Дизайн

Вёрстка

Визуализация

Текст

Как сверстать хороший макет

Типографика и вёрстка