x
 
Евгений
7 марта 2012

В прошлом совете вы не ответили на вопрос про модульные сетки, а рассказали совсем о другом, да ещё и поверхностно. Исправитесь?



Давайте поговорим о том, как создавать модульную сетку веб-сайта, приложения, да и вообще любого сложного информационного элемента. Для кого-то это покажется очевидным, но прошу отнестись с терпением. Если бы я увидел этот материал во времена, когда рисовал без сетки, был бы очень рад :-)

Сначала надо понять, какие константы есть в предстоящем дизайне. Обычно это максимальная ширина содержания (например 996 пикселей). Иногда появляется боковой банер, например 240 пикселей,— это вторая константа. С постоянными определились, можно начинать.

Модульная сетка в вебе — это по сути колонки равной ширины. А как же межколоночные расстояния (по английски — gutters), спросите вы? В какой-то момент я понял, что в веб-дизайне они излишни, так как создают доволнительные сложности и не отражают структуры ЦСС. Если представить колонку и межколоночное расстояние как «див» с внутренним отступом, то это гораздо удобнее, чем «большая колонка» и «маленькая колонка».

Перейдём к проектированию. Структура информации может быть простой и сложной. Мы рассмотрим сложную структуру, чтобы понять, как работает сетка.

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

В этих случаях придётся делить страницу на 2, 4, 6, 12 и, возможно, даже большее количество колонок. Давайте попробуем найти число, которое позволит это сделать. Мой полуматематичский мозг предполагает, что это 24: оно кратно 2, 3, 4, 6, 8, 12. Супер.

Поняв, что 24 колонки — это удобно и помогает разнообразно располагать содержание, мы попробуем вместить наши константы в это число колонок. Как поделить 990 пикселей (наша максимальная ширина) на 24, если не получается ровного количества пикселей? Надо подобрать такой целый множитель для 24, чтобы произведение было не больше 990 пикселей и как можно ближе к желаемой ширине. Хорошо, но не обязательно, если наша вторая константа будет тоже кратная этому числу.

Итак, деление 990 на 24 даёт 41 с чем-то пиксель: не подходит, полупикселей не бывает. Попробуем ближайшие целые значения: 40 × 24 = 960, 41 × 24 = 984, 42 × 24 = 1008. Последнее (1008) отметаем — слишком широко. Остаётся выбрать между 41 и 40. Оба варианта годятся, но с цифрой 40 работать легче, да и ширина нашего банера (240) отлично делится на это число — ровно шесть колонок, четверть всей сетки.

Параметры нашей итоговой сетки: ширина 960 пикселей, 24 колонки, нулевое межколоночное расстояние, ширина колонки 40 пикселей. Для удобства последующей работы эти величины вносятся в графический редактор. Я использую Фотошоп. Там нет встроенной штуковины для сеток, поэтому один изобретательный человек сделал плагин, чтобы генерировать сетку из направляющих.

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

P. S.
Это был совет о компоновке и стиле информационных сайтов. Евгений Лучинин — независимый дизайнер, работал над сайтами Локалс, Звуук, Лук-эт-ми и Афиши. Присылайте вопросы.

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

Комментарии

Олег Громов
7 марта 2012

Буквально вчера коллега прислал ссылку на классную статью (правда, на английском) по разработке сеток: http://www.markboulton.co.uk/...steps-to-designing-grid-systems-preface

Антон Жуков
7 марта 2012

По-моему, все эти игры с пиксельной шириной колонки лишены смысла. Сайт же резиновый.

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

Егор Стремоусов
7 марта 2012

Рекомендую сайт thegrids.ru [более недоступен]

А также всем любителям сеток можно посоветовать http://modulargrid.org/ — сгенерировать патерн сетки для Фотошопа или скачать плагин, похожий на тот, что упоминает Евгений.

Роман Верник
19 апреля 2012

«Модульная сетка в вебе — это по сути колонки равной ширины.»
Хочу заметить, что суть не в колонках равной ширины, а просто в наборе параллельных линий. Колонки не обязаны быть равной ширины: их размеры могут соотносится друг с другом в какой-либо красивой (или некрасивой) пропорции.

Более того, сетка не обязана сплошняком покрывать всё тело страницы: в ней могут быть разрывы, как например на прилагаемом изображении (белая полоса справа от кнопки поиска).


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

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

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

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

Что думаете о переносах в вебе?




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

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