x
 
Волк
10 марта 2011

Раньше я, к сожалению, не знал, что такое сетка, что сайты легче и лучше рисовать по сетке. Сейчас пользуюсь 12-колонной сеткой, 960 пикселей.

Не могли бы вы поделиться сеткой, по которой вы рисуюте сайты? Вообще вы строго по сетке рисуете? Что можете по этому поводу посоветовать?



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


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

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

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

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

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

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

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

Комментарии

Дима Плотников
10 марта 2011

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

Саша Реушкин
10 марта 2011

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

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

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

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

Антон Шеин
10 марта 2011

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

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

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

Игорь Алексеенко
10 марта 2011

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

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

Александр Борисов
10 марта 2011

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

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


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

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

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

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

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




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

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