![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=88.9){kind=small}
- 38 попугаев (Введение)
- Алгоритм построения модульной сетки. Оптика и геометрия
- PaperGrid — сетка на бумаге
- BrowserGrid — сетка в Фотошопе
- ModularGrid — сетка-камертон в браузере
- Верстка по сетке: проблемы и решения
- Список использованной литературы
Понятие модульности. Модуль
Наше советское и постсоветское детство подарило нам замечательный мультфильм «38 попугаев». Как вы помните, у зверей стояла задача: измерить длину удава. Чем измерять — было не понятно. Инструментом измерения выбрали маленького по отношению к удаву попугая. Оказалось, что в удава «влезло» аж 38 попугаев. В этом примере попугай — это модуль. Таким образом, удава можно дискретизировать с частотой, равной единице, деленной на попугая )Разумеется, есть более серьезные примеры модульности в жизни. Со времен древней Греции к нам пришло выражение «Человек есть мера всего». Умные греки, когда строили свои чудеса света меряли двери плечами, а высоту помещения ростом человека.
Такие единицы измерения, как косая сажень, пядь, фут и т. п. также произошли исходя из физических характеристик человека.
Сам человек есть модульная система. Если за модуль взять голову, то рост человека обыкновенного можно выстроить 7 головами. Причем на расстояниях, кратных такому модулю, мы можем определять ключевые точки построении человека.
Метрическая система, которую мы используем, тоже является модульной. Один метр состоит из ста модулей «сантиметр», который тоже в свою очередь можно расчленить на более мелкие модули.
Таким образом, модуль — это единица измерения, установленная для придания соразмерности, а сетка — система пропорций.
Задачи сетки
Ускорение работы
Мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов.Сбалансированность и пропорциональность
Элементы в макете соизмеримы и пропорциональны между собой. Мы можем обосновать размеры блоков, кегль и проч.Ускорение и шаблонирование, единообразность элементов
Разработав сетку, мы делаем основу для решений на будущее. Грамотные гайды содержат детальное описание модульных сеток. Касательно веб-дизайна, мы можем с легкостью предусмотреть тривиальные макеты для всего сайта и сделать заготовку для единичных случаев.
Рис 1.1. Примеры композиций и их сетки
Рис 1.2. Пример сайта с сеткой и без нее
Виды сеток
Самый простой вид сетки — блочная сетка. В западной литературе ее также называют «manuscript grid». Представляет собой грубо размеченную область — блок.
Рис 1.4. Блочная сетка
То, что называют модульной сеткой, например, 960.gs или Blueprint CSS и т. д. — совсем не модульная сетка. Вернее, она-то сетка. Но она колоночная. Потому что состоит только из вертикального членения на колонки.
Рис 1.5. Колоночная сетка
Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях есть модуль.
Рис 1.6. Модульная сетка
Есть еще один вид сетки. Называется иерархической сеткой. В иерархической сетки размещение блоков интуитивное и не поддается закономерностям.
Рис 1.7. Иерархическая сетка
Математика
Сетки могут быть как простыми — с одинаковыми по размерам модулями, так и сложными, с нелинейными пропорциями у размеров модулей.Имеет смысл поговорить о пропорциях. Например, о «золотом сечении». Тема «золотого сечения» не нуждается в еще одном пересказе. В Википедии можно найти больше подробной информации об этом соотношении, чем я здесь смогу пересказать.
Внимания заслуживают другие пропорции, не такие популярные.
Ряд Фибоначчи
Итальянский математик Фибоначчи открыл ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т. д. Он обладает тем свойством что, отношения между соседними членами по мере возрастания чисел ряда, все более приближаются к 1,618, то есть, к отношению «золотого сечения».Среди систем пропорционирования, используемых в архитектуре, дизайне, в прикладной графике следует упомянуть системы «предпочтительных чисел» и различные модульные системы.
«Предпочтительные числа»
«Предпочтительные числа» — ряд чисел геометрической прогрессии, где каждое последующее число образуется умножением предыдущего числа на какую-нибудь постоянную величину.
Рис 1.8. Примеры сеток с нелинейными пропорциями между размерами модулей
Разумеется, это не все популярные пропорции. Подробнее и с большим количеством математики.
← Ctrl← Alt
Ctrl →Alt →
2010-02-15 07:34 am UTC
2010-02-15 08:49 am UTC
2010-02-16 10:08 pm UTC
2010-02-16 10:18 pm UTC
2010-02-15 07:52 am UTC
2010-02-15 08:49 am UTC
2010-02-15 07:57 am UTC
2010-02-15 08:48 am UTC
2010-02-15 09:07 am UTC
2010-02-15 09:09 am UTC
2010-02-16 05:39 pm UTC
2010-02-17 03:12 pm UTC
2010-02-17 07:44 pm UTC
2010-02-15 08:39 am UTC
2010-02-15 08:47 am UTC
2010-02-15 08:43 am UTC
Уииии
Наконец-то. Дождались.Супер. После того как сказал о том, что есть колоночная сетка в моей голове всё стало на место, почему я не мог гормально строить сайты по ней.
Сейчас сделал сеточку и пробую макетик сделать (тренируюсь).
Заметил, что легко и просто получается работать.
И да, я знал, что математику надо учить всем, а не только математикам. Как оказывается дизайнерам в особенности её надо знать.
Спасибо.
2010-02-15 08:47 am UTC
Re: Уииии
Спасибо за поддержку!2010-02-15 06:29 pm UTC
2010-02-15 09:22 am UTC
2010-02-15 09:23 am UTC
2010-02-15 10:54 am UTC
2010-02-15 11:03 am UTC
2010-02-15 12:11 pm UTC
Зачитываюсь и вдумываюсь, жду еще!
2010-02-15 02:16 pm UTC
2010-02-15 03:01 pm UTC
2010-02-15 08:04 pm UTC
Начало, до которого можно докопаться по полной программе (даже попугаев в удаве было не 38, 38 плюс одно попугайское крылышко), хрен знает откуда. Так и хочется голосом Шуры Каретного сказать: «Древняя Греция, блять...».
Дальше сразу — бац, задачи сетки. Что, куда, зачем, откуда это все. Дальше тоже самое. Нет логики и связности.
Примеры плохо связаны с текстом, определения спорны. Кто сказал, что колоночная сетка — не модульная?
Номера рисунков зачем-то даны, где на них ссылки по тексту тогда.
Выглядит так, будто это первый вариант, который потом будет
дополняться и расширяться, но не как «первая серия».
Лаптев много лучше доносит. Нужно бы переделать.
2010-02-15 08:13 pm UTC
Лаптева, при всем своем желании, я не смог найти. Это плохо, да.
Номера рисунков даны для того, чтобы удобнее было обсуждение в комментариях — мало ли пригодится.
Это вводная статья. Я мог бы сразу начать с построений или еще с чего-нибудь. Но логичнее растолковать сначала понятия, а затем пускаться в плавание.
По окончании цикла статьи действительно будут «дополняться и расширяться» исходя из обсуждений в комментариях.
Надеюсь, следующие публикации тебе понравятся больше.
))
2010-02-15 08:19 pm UTC
2010-02-15 08:20 pm UTC
2010-02-15 08:31 pm UTC
2010-02-17 10:13 am UTC
Спасибо!
2010-02-17 10:42 pm UTC
«Следующая часть →», «← Предыдущая часть»
2010-02-17 10:45 pm UTC
2010-02-18 07:52 am UTC
2010-02-19 10:53 am UTC
2010-02-22 05:20 pm UTC
2010-02-22 06:09 pm UTC
2010-02-22 08:00 pm UTC
очепятка в тексте.
золотое сечение - 1,6182010-02-23 08:10 pm UTC
Re: очепятка в тексте.
Спасибо. Исправил.2010-02-23 03:07 pm UTC
2010-03-11 09:56 am UTC
2010-03-11 11:53 am UTC
2010-04-03 01:46 am UTC
2010-04-04 03:47 pm UTC
2010-05-05 11:35 am UTC
2010-05-05 01:08 pm UTC
2010-05-23 01:47 pm UTC
Навскидку
произошли исходя -> произошли, исходя (да и "масло масляное")точки построении -> точки построения
она-то сетка -> она-то - сетка
Но она колоночная -> Но она - колоночная
пересечениях есть ->
В иерархической сетки -> В иерархической сетке
прикладной графике следует -> прикладной графике, следует
В течении двух недель -> В течение двух недель
2010-05-23 01:49 pm UTC
Re: Навскидку
Очень признателен. Спасибо. Поправлю.2010-07-23 07:43 am UTC
2010-09-23 07:44 pm UTC
2010-09-23 07:48 pm UTC
2011-05-05 12:59 pm UTC
2011-05-05 01:02 pm UTC
Блочный стиль верстки для того и начали использовать, чтобы отвязать элементы дизайна от каких либо сеток, так проще, удобнее и гибче.
Использовать стиль табличной верстки сейчас, это моветон и вообще глупо.
Вообще, не знаю, какие могут быть проблемы с позиционированием элементов сейчас, когда предусмотрено столько возможностей.
← Ctrl← Alt
Ctrl →Alt →