Мифы о модульных сетках
Сетки, модульные сетки... много разных терминов, но что это?
Все наверняка слышали и даже что-то знают, но на практике все заканчивается ссылкой на какой-нибудь 960px и словах, что «это что-то типа шаблона такого». И ведь все так и есть, но... «В действительности все не так как на самом деле», — сказал когда-то Станислав Ежи Лец. На деле имеем немного сумбурную статью, в которой автор решил впихнуть невпихуемое в столь малый обьем. А ссылки, по которым все описано четко и ясно, все также на языке вероятного союзника, как говорили у нас на военной кафедре...
В этом цикле статей (это всего лишь вводная) я хочу вместе с вами сам разобраться в модульных сетках и в том, как дизайнеры адаптировали ее из мира печатной типографики в сеть.
Внимание, снобы: здесь не будет ничего нового! Всего лишь мои авторские переводы того, что никто так и не перевел. Я, конечно, понимаю, что все очень умные и английский со словарем позволяет ощутить, что тема пройдена и понята. Вот только в рунете до сих пор продолжают плодиться убогие и неструктурированные страницы. Такие, что хочется пожелать быстрой смерти автору... в очень нецензурной форме. =/
Надеюсь, мои труды принесут хоть какие-то изменения в сложившуюся ситуацию.
Давайте сразу оговорим термины. А точнее, термин. Постоянно писать модульная сетка, модульная сетка (а тем более читать) — утомительно. Дальше, в последующих статьях-переводах, я буду просто писать «сетка». Со ссылкой на вики при первом упоминании.
Итак, начали. В качестве введения в тему я решил сделать работу в спокойных (постэльных) тонах. Сразу лезть к читателю с сухими фактами — ... мне так не нравится. =) Ниже перевод статьи 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: Сетки пригодны только для фиксированной разметки
Наиболее актуальный в сети миф. Многие люди считают, что сетка должна быть фиксированной в размере, следовательно, фиксированной будет и сама разметка.
Нет!
Наряду с фиксированной разметкой модульными сетками, существует и «резиновые» варианты с плавающей разметкой. В сети множество статей на эту тему, а также несколько платформ для разработки:
Заключение
Надеюсь, эта статья немного прояснила ваше представление о верстке с использованием модульных сеток. На самом деле все эти мифы — не больше, чем мифы. Если вам понравилось и вы заинтересовались этой темой, приглашаю вас на мой сайт (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 статей, но они все в основном переводы без подведения теоретической базы. Постараюсь это исправить. В комментариях (еще раз скажу) приветствуются ссылки на русскоязычные источники с адекватными сведениями на эту тему.
Понравилась статья?
Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.
Комментарии — 25
RSSНесмотря на то, что очень неплохо знаю английский, с радостью почитаю Ваши переводы.
P.S.: "снгнета" - и глаза, и язык сломаешь, пока не разберёшь, что за слово.
)) Автору юмора не занимать. Зачетно написано.
По поводу сеток, кто как привык. Делать особенно хорошо резиновые с плавающей разметкой, но муторно..
Не применяю сетки и, пожалуй, даже горжусь этим. Не многим полиграфическим дизайнерам удаётся избавиться от своего творческого балласта в башке от прошлой деятельности.
если призов станет больше двух, они по очереди будут садиться на диету, кто-нибудь из них обязательно закинет любимые джинсы в стирку за час до выхода, ну и вообще... =) Спасибо за спасибо! Снгнет сузил до рунета.
Igor,
тем не менее, спасибо за мнение. Я тут и не ставил целю вводить что-то конкретное. Да и написал об этом раза два точно.
Degopol, рад стараться! Не выношу заунывных статей.
Jami, по большому счету именно из-за них и решил переводить статью. Уловил суть. =)
Тормоз,
странный повод для гордости. В муз. грамоте сотни лет существует одна и та же система, и сломать если получается, то херово. То есть звучит это так. А ломаная система сеток так же выглядит. Честно говоря...
И для всех: сегодня в обед осенило (как-то с крутым опозданием), что весь декстопный интерфейс построен на сетках. В java, например, такой тип размещения называется GridBagLayout. И, кстати, когда мы писали проект на GWT, пришлось создавать свой виджет, чтобы уже на нем размещать компоненты.
Это к слову о том, что сетки реально нужны, но все еще недооценены в Интернет. Даже новаторским гуглом, хотя, не знаю как сейчас, это было 2 года назад.
Маленькая поправочка:
"решил сделать работу в спокойных (постэльных) тонах"
пАстЕльных тонах. (Пасте
Маленькая поправочка:
"решил сделать работу в спокойных (постэльных) тонах"
пАстЕльных тонах. Пасте
Пастель [-тэ-] (от лат. pasta — тесто) — группа художественных материалов, применяемых в графике и живописи.
Например, в русском переводе книги Яна Чихольда «Облик Книги» (издательства Студии Артемия Лебедева, в котором, надо полагать, знают толк в типографике) используется, как минимум, три варианта перевода:
— Канон ван де Граафа;
— Принцип ван де Граафа: «Деление на девять частей по принципу ван де Граафа...»;
— Способ ван де Граафа: «Простейший способ, найденный Иоганом ван де Граафом, показан...»;
Я думаю, используемый вами вариант «Канон ван де Граафа» вполне подходит.
Есть только одно замечание! В русском языке дворянские приставки к фамилиям пишутся с маленькой буквы: «Винсент ван Гог», «Жанна д’Арк», «Отто фон Бисмарк» и т.д.
Поэтому, соответствующий канон следует писать НЕ «Канон Ван Дер Граафа», а «Канон ван дер Граафа». Исправьте это, пожалуйста.
Дополнить хочется, да вот нечем :) Сам веб-разработчик не дизайнер, но сетки в верстке всегда притягивали... Теперь сделан вывод - не зря притягивали :)
«В действительности все не так как на самом деле» - говаривал Станислав Ежи Лец
За статью большое спасибо! Буду ждать следующих.
И, да. Не нужно желать смерти. Никому.
Ого! Вот это я промахнулся. =) Спасибо за поправку!
А что насчет желать... желать или не желать, сбудется, так или иначе.
>В газете без сетки действительно не обойтись, и это великое благо.
>Но сайты очень отличаются от газет и журналов.
Интернет вырос практически из пустоты. Пустоту заполнили самоучки без представления о полиграфической культуре и традициях. Поэтому много, долго и нудно приходится объяснять совершенно очевидные вещи.
например:
http://www.htmlbook.ru/content/?id=79
http://www.vlasta-tula.ru/articles/show-1.htm
как оказалось, сетка это не воображаемая решетка на странице :) а сочетание блоков по определенным законам ... ммм... гармонии что ли и
спасибо за работу. Первую я видел, вторую нет. Единственный и очень существенный недостаток обоих: не сказано как формируется макет и почему он формируется именно так.
Эта конкретная статья не несет в себе цель рассказать что такое сетка. По крайней мере, ни автор ее, ни я, как переводчик, не ставили такой цели. =)
Как раз задумка была в том, чтобы заинтересовать народ. Дальше как раз будет подробное описание что и как и в каких пропорциях.