Внимание, снобы: здесь не будет ничего нового! Всего лишь мои авторские переводы того, что никто так и не перевел. Я, конечно, понимаю, что все очень умные и английский со словарем позволяет ощутить, что тема пройдена и понята. Вот только в рунете до сих пор продолжают плодиться убогие и неструктурированные страницы. Такие, что хочется пожелать быстрой смерти автору... в очень нецензурной форме. =/

Надеюсь, мои труды принесут хоть какие-то изменения в сложившуюся ситуацию.

Давайте сразу оговорим термины. А точнее, термин. Постоянно писать модульная сетка, модульная сетка (а тем более читать) — утомительно. Дальше, в последующих статьях-переводах, я буду просто писать «сетка». Со ссылкой на вики при первом упоминании.

Итак, начали. В качестве введения в тему я решил сделать работу в спокойных (постэльных) тонах. Сразу лезть к читателю с сухими фактами — ... мне так не нравится. =) Ниже перевод статьи Antonio Carusone — автора замечательного (на мой вкус) сайта. Правда, первоначальную версию он прямо во время перевода статьи поменял на нечто, что лично мне нравится уже меньше. Оригинальное название: «Myths & Misconceptions About Grid Systems».

Если что-то не так, буду благодарен за поправки в комментариях. Но, шшш, гаснет свет. Дальше все «я» — это Антонио, а не Дима. =)

Мифы и недопонимания насчет системы модульных сеток

В сообществе дизайнеров, особенно среди новичков, существует множество мифов о верстке сеткой. Некоторое время назад я прочитал статью (хорошо, что она больше недоступна в сети), утверждающую, что подход верстки с помощью сетки имеет серьезные недостатки. Как вы догадываетесь, я в корне не согласен с этой статьей и подозреваю, что она привнесла много плохого в и без того непростую ситуацию. Все перечисленные «недостатки» происходили из-за неверного толкования или непонимания того, как работает сетка.

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

Миф № 1: Сетка — модная тенденция дизайна

Модульные сетки использовались задолго до графического дизайна и оформились в дисциплину. На протяжении XII-XIV веков, писцы для разметки рукописных манускриптов использовали диаграммы Вилларда. В XV веке Гутенберг для тех же целей использовал канон ван де Граафа.

Модульные сетки используются очень давно являются важнейшей частью дизайна. Использование сеток не тенденция, владение ими — основной навык дизайнера.

Миф № 2: Сетки подавляют воображение

Самое глупое утверждение из всех. Этот миф повествует о том, что сетка снижает творческие способности дизайнера. Сетка ни в коем случае не должна определять дизайн, она должна работать с ним! Утверждать, что сетка может помешать творчеству все равно, что сказать, что ритм может мешать музыкантам. Сетка — всего лишь строительный элемент, который ни в коем случае не влияет на воображение.

Известный (правда?) дизайнер Josef Müller-Brockmann сказал по этому поводу: «Дети мои... Модульные сетки не являются гарантией. Они всего лишь предоставляют несколько вариантов использования, которыми дизайнер должен воспользоваться для создания его собственного стиля. Самое главное в модульной сетке, что надо запомнить: это искусство, требующее практики».

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

График Ellen Lupton сказал: «Утверждать, что сетка ограничивает это то же, что сказать, что язык ограничивает или типографика ограничивает».

Люди заблуждаются думая, что сетка подразумевает стиль, подобный таблице, предоставляющий четкие и ровные колонки. К счастью, это не так. Этот замечательный (и правда) постер Брокмана является наглядным примером. Текст укладывается в сетку, а концентрические фигуры придают более органичный вид постеру, оттеняя сетку.

Миф № 3: Сетка может использоваться только для некоторых видов дизайна

Сетка может использоваться для всех видов дизайна. Повторяю: для всех видов!

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

Тем более, нет никаких органичений на эстетику. Вы не ограничены обязательным использованием Гельветики и малым количеством изображений. Не важно, какой стиль оформления вы выбрали: минималистичный или сильно нагруженный цветами и деталями. Вам не надо быть Брокманом, чтобы использовать сетку.

Ниже два примера совершенно разных по оформлению сайта, которые используют модульные сетки:

• Пример № 1, на котором преобладает белый цвет, минимум оформления и шрифт без засечек. Полностью отвечает стереотипам построения сайта по модульной сетке;
• Пример № 2 использует большое количество цветов, текстур и шрифт с засечками.

Миф № 4: Сетки требуют много содержимого

Нет. Не важно, что вы хотите показать: 250-страничную повесть или всего несколько слов. Самое главное то, как вы преподнесете эту информацию. И здесь вам пригодятся модульные сетки, благодаря которым вы структурируете свое содержимое в привычном для читателя виде. (Все же журналы читают?)

Миф № 5: Сетки замедляют процесс разработки

Утверждение противоположно действительности. Хорошо спроектированная модульная сетка позволяет решить многие проблемы дизайнера за меньшее время. Грамотная модульная сетка помогает организовать стройную структуру на многостраничном документе, коими и являются веб-странички.

Миф № 6: Сетки пригодны только для фиксированной разметки

Наиболее актуальный в сети миф. Многие люди считают, что сетка должна быть фиксированной в размере, следовательно, фиксированной будет и сама разметка.

Нет!

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

• Fluid Grids;
• The Fluid Grid system;
• Fluid 960 Grid System.

Заключение

Надеюсь, эта статья немного прояснила ваше представление о верстке с использованием модульных сеток. На самом деле все эти мифы — не больше, чем мифы. Если вам понравилось и вы заинтересовались этой темой, приглашаю вас на мой сайт (The Grid System), где я собираю со всего Интернета информацию о верстке модульными сетками.

От переводчика

Весь этот цикл будет переводом статей с The Grid System. Великолепный ресурс, рекомендую. К сожалению, этой темой мало кто заинтересован. Наверное, проще сделать как-нибудь, зажмурившись закоммитить в svn или git несчастную страничку и помолиться кому-нибудь, чтобы потом не пришлось ее же и править. Переводов нет. А все статьи там толковые. Очень нужные! Я постараюсь справиться сам, но даже в этой небольшой статье все ссылки на иностранные источники. В общем, если у кого есть желание навести порядок, welcome! Это очень нужная тема.

Что нас всех ждет дальше? Дальше я собираюсь перевести цикл Марка Болтона Five Simple Steps to desining grid systems. После этого тоже будет над чем поработать и в целом, если все будет хорошо, на эту тему я сделаю примерно 5-6 переводов канонических статей.

Ну а прямо сейчас нас ждет традиционный приз! ;)

P.S. Если вы считаете, что я где-то не прав или лучше было написать/перевести по-другому, пишите! Я рад любой критике и замечаниям.

P.P.S. Вспоминая диплом, понял, что я не сделал Анализ задачи. Пускай он будет здесь. Вот тут все более-менее адекватные статьи о модульной сетке:

• для начала, откроем энциклопедию на букве «М»: статья в википедии;
• обзорно-красивая статья о становлении модульных сеток в типографии со множеством иллюстраций.

Вот... как-то и все. Да, есть еще примерно 8-10 статей, но они все в основном переводы без подведения теоретической базы. Постараюсь это исправить. В комментариях (еще раз скажу) приветствуются ссылки на русскоязычные источники с адекватными сведениями на эту тему.