Модульные сетки. «38 попугаев», алгоритм и оптика. Модуль в дизайне это


8.4. Модульный метод проектирования

Применение модульного проектирования в производстве изделий дизайна -есть высшая форма деятельности в области стандартизации. При этом стандартизация выявляет и закрепляет наиболее перспективные методы и средства проектирования. Этот метод способствует унификации структурных элементов изделий. В технике наличие унифицированных узлов и деталей и установка их в различных сочетаниях позволяют преобразовывать конструкции одних изделий в другие. Основной принцип унификации — разнообразие продуктов дизайна при минимальном использовании унифицированных элементов (модулей). Модульное проектирование предполагает конструктивную, технологическую и функциональную завершенность. Сам модуль может быть законченным ; изделием или являться составной частью изделия, в том числе другого функционального назначения.

Модуль — единица меры. Раньше части тела человека служили единицами измерения: дюйм — длина сустава большого пальца; пядь — расстояние между концами раздвинутых большого и указательного пальцев; фут — средняя длина стопы человека и т.д. Так, в основе средневековой архитектуры Англии лежал фут, который, по существу, и являлся модулем. В архитектуре древних греков модулем был радиус колонны. В Италии некоторые сооружения были построены на использовании модуля в виде квадрата или прямоугольника. Храм Василия Блаженного в Москве при всем своем многообразии сложен из видов фигурных кирпичей. Таким образом, применение модуля в архитектуре прошлого несло в себе художественное начало, служило средством гармонизации целого и его частей.

Таким образом, можно сказать, что модуль — это исходная единица измерения, которая повторяется и укладывается без остатка в целостной форме (объекте). Кратность — укладываемость модуля без остатка — позволяет собирать различные формы и обеспечивает их взаимозаменяемость. Современный ; архитектурный модуль равен 10 см, укрупненный строительный модуль — 30 или 40 см, модуль для приборостроения и станкостроения составляет 5 см. Оборудование интерьера строится на модуле 5 и 15 см.

Вариантность художественных форм, т. е. возможность из ограниченного числа создавать разнообразные произведения, — одна из особенностей народно-^ творчества. Если взять народный орнамент, то, как правило, он состоит из небольшого числа повторяющихся элементов. Ювелиры Дагестана покрывают ору-ие иутварь орнаментом, состоящим из небольшого числа стандартных элементе, которых насчитывается не больше 27. В азербайджанских вышивках используется от трех до пяти одинаковых мотивов. Молдавские ковры с геометрическим рисунком отличаются особым лаконизмом и крупным узором, который создается из одного мотива. Таким образом, использование модуля — это не новый прием, им пользовались всегда и в архитектуре, и в прикладном искусстве.

«Сейчас все выглядит настолько «кутюр», настолько дорого, что пора начать думать по-новому, найти что-то новое», — так утверждает знаменитый японский дизайнер одежды И. Мияке. Это новое может состоять в моделировании одежды из модулей.

Модули могут быть одинакового размера, который выбирается в зависимости от антропологии тела человека и оптимальных размеров готовой одежды. Модули, как правило, имеют простые геометрические формы, чтобы при соединении получались капюшон, короткий жилет, жилет средней длины, длинный жилет, короткие рукава, длинные рукава. Технологически каждый модуль обрабатывается отдельно подкладкой, утеплителем, мехом изнутри или снаружи. Главная особенность модуля в дизайне одежды — он обрабатывается «чисто» с лица и с изнанки. Если модули сшиты из двух материалов или из одной ткани двух цветов, то их можно переворачивать и использовать для составления двухцветных или двухфактурных полос, клеток, простых орнаментов. Важным является выбор способа соединения простых модулей в виде квадратов, прямоугольников, треугольников, кругов и ромбов. Если для соединения модулей выбираются завязки, ленточки, банты, узлы, то их торчащие концы могут создать дополнительный декоративный эффект. Для того чтобы модули соединить друг с другом незаметно, применяются крючки, «липучки», супат-ные застежки. На рис. 8.7 показан пример использования модулей, соединенных между собой кнопками или пуговицами в модели накидки. Если модули разъединить, то можно из них же собрать юбку, длинный Жилет и т.д.

Все эти виды соединения необходимы в том случае, если применяется метод трансформации — избиения формы изделия, назначения изделия, ассортимента. Причинами изменения формы изделия могут быть: 1) из маленькой сделать большую и наоборот (например, из короткого жилета сделать длинный). Это прием модульного свертывания и модульного развертывания; 2) из простой формы составить сложную и наоборот (например, к жилету пристегнуть, привязать модули и получить длинное пальто с капюшоном, кокетками, карманами, сумками и головными уборами или из простых модулей в виде квадратов, треугольников и ромбов составить сложный декоративный узор, орнамент, монокомпозицию, которая органично впишется в изделие; 3) изменяя форму, изменить назначение изделия (например, был жилет — стало пальто, т.е. верхняя одежда, и т.д.) Можно из одинаковых модулей составлять разные изделия: жилеты разной длины и формы, сарафаны, юбки разной длины, блузоны, полупальто, пальто длинные с капюшонами, накладными воротниками, головные уборы, сумки и др. Таким образом, изменение ассортимента происходит путем модульного проектирования.

Рис. 8.7. Использование формы простых модулей в модели накидки

Форма модулей может быть и более сложная: в виде цветов, листьев, бабочек, зверей, птиц. Такие модули достаточно сложно пристегивать и отстегивать, но их можно соединять «наглухо», встык друг к другу, с помощью «брид» (элемент вышивки «ришелье»). Создаются красивейшие ажурные композиции, которые накладываются на лекала изделия (допустим, платья) и все фрагменты сшиваются с изнанки. Из получившегося ажурного полотна можно моделировать вставки или целиком изделия. Модули разной конфигурации могут создавать сложные варианты комплектования одежды, наслаиваясь друг на друга (рис. 8.8).

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

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

studfiles.net

Модульные сетки. «38 попугаев», алгоритм и оптика (Блоги Techdesigner.ru — блог о дизайне: Artweb)

Ссылка на оригинал - http://design-for-business.ru/analytics/articles/id/504

Модульные сетки. «38 попугаев», алгоритм и оптика. Часть первая.

Понятие модульности. Модуль

Наше советское и постсоветское детство подарило нам замечательный мультфильм «38 попугаев». Как вы помните, у зверей стояла задача: измерить длину удава. Чем измерять — было не понятно. Инструментом измерения выбрали маленького по отношению к удаву попугая. Оказалось, что в удава «влезло» аж 38 попугаев. В этом примере попугай — это модуль.

Таким образом, удава можно дискретизировать с частотой, равной единице, деленной на попугая )

Разумеется, есть более серьезные примеры модульности в жизни. Со времен древней Греции к нам пришло выражение «Человек есть мера всего». Умные греки, когда строили свои чудеса света меряли двери плечами, а высоту помещения ростом человека.

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

Сам человек есть модульная система. Если за модуль взять голову, то рост человека обыкновенного можно выстроить 7 головами. Причем на расстояниях, кратных такому модулю, мы можем определять ключевые точки построения человека.

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

Таким образом, модуль — это единица измерения, установленная для придания соразмерности, а сетка — система пропорций.

Задачи сетки

Ускорение работы

Мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов.

Сбалансированность и пропорциональность

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

Ускорение и шаблонирование, единообразность элементов

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

Рис 1.1. Примеры композиций и их сетки

Рис 1.2. Еще один пример применения сетки

Рис 1.3. Пример сайта с сеткой и без нее

Виды сеток

Самый простой вид сетки — блочная сетка. В западной литературе ее также называют «manuscript grid». Представляет собой грубо размеченную область — блок.

Рис 1.4. Блочная сетка

То, что называют модульной сеткой, например, 960.gs или www.blueprintcss.org и т. д. — совсем не модульная сетка. Вернее, она-то — сетка. Но она — колоночная. Потому что состоит только из вертикального членения на колонки.

Рис 1.5. Колоночная сетка

Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль.

Рис 1.6. Модульная сетка

Есть еще один вид сетки. Называется иерархической сеткой. В иерархической сетки размещение блоков интуитивное и не поддается закономерностям.

Рис 1.7. Иерархическая сетка

Математика

Сетки могут быть как простыми — с одинаковыми по размерам модулями, так и сложными, с нелинейными пропорциями у размеров модулей.

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

Внимания заслуживают другие пропорции, не такие популярные.

Ряд Фибоначчи

Итальянский математик Фибоначчи открыл ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т. д. Он обладает тем свойством что, отношения между соседними членами по мере возрастания чисел ряда, все более приближаются к 0,618, то есть, к отношению «золотого сечения».

Среди систем пропорционирования, используемых в архитектуре, дизайне, в прикладной графике следует упомянуть системы «предпочтительных чисел» и различные модульные системы.

«Предпочтительные числа»

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

Рис 1.8. Примеры сеток с нелинейными пропорциями между размерами модулей

Разумеется, это не все популярные пропорции.

Модульные сетки. Часть вторая. Алгоритм

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

Начинаем с определения рабочей области

В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может стереть эти рамки. А вот высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить. Мне кажется, что это совсем не страшно. Сферическая сетка в вакууме никому не нужна, а при больших сплошных объемах контента никто вертикального членения и не увидит, даже если оно соблюдено.

Я ориентирую в своих макетах минимальную ширину на ~980 пикселей, оставляя место для скроллбара.

Рис 2.1. Определяем рабочую область

Делаем шрифтовую сетку

Я уже раньше писал публикацию о вертикальном ритме. Она дополнит все то, о чем будет сказано в этом пункте. Напомню, что мы выбираем высоту строки единую для всего макета. Все элементы рубрикации с кеглем, отличным от кегля основного текста, должны иметь интерлиньяж кратный выбранной высоте строки; в сумме со всеми вертикальными полями высота каждого такого элемента должна содержать целое количество строк шрифтовой сетки.

Здесь мы уже касаемся понятия модуля. Точнее микромодуля. Этим микромодулем мы будем обосновывать большинство небольших расстояний (и больших тоже).

Таким образом, мы получаем прообраз будущей сетки — «зебру». На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и проч.

В своей практике я чаще всего использую такие параметры для шрифтовой сетки: кегль — 12 пикселей, высота строки — 18 пикселей.

Рис 2.2. Шрифтовая сетка-«зебра»

Дальше нам необходимо определиться с шириной модуля — той самой единицы измерения

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

Примером второго способа выбора ширины модуля — задача например, в размещении в ряд 9 элементов. Тогда, зная ширину всего холста и количество модулей (в этом примере 9) мы с легкостью определим размер модуля.

Будем придерживаться этого в нашем примере. Скажем, заказчик попросил внизу сайта разместить 6 его любимых бутербродов.

С сеткой работать удобнее, если сразу определить расстояния между модулями — средники или канавки. На помощь с определением ширины средника приходит понятие микромодуля из предыдущего пункта. Ширина средника равна как минимум базовой высоте строки.

Таким образом, расстояния между модулями делаем равным 18 писелям.

Рассчитать ширину модуля теперь не составит труда. Есть все данные для этого.

Сетка на 6 колонок очень неудобная и некомпактная. Увеличим количество модулей вдвое. Теперь зная то, что у меня 12 колонок, я рассчитал, что ширина колонки будет равна 65 пикселям.

Строим вертикальное членение по полученному значению

Делаем горизонтальное членение

Высоту одного такого пояса берем кратной базовой высоте строки.

Я объединю по 3 строки в один пояс. Просвет между поясами делаем в одну строку, тем самым сохраняем вертикальный ритм.

Модульная сетка

То, что мы получили на пересечении горизонтального и вертикального членений называют модулями. Все-таки полдела — грамотно выбрать размер модуля. В случае, когда модуль большой, нам негде развернуться, пропадет та гибкость, о которой мы так мечтали. Если сетка очень мелкая — то она попросту теряется, как миллиметр в метре.

Регионы

Объединяем модули в регионы, создаем композицию, рисуем

Модульные сетки. Часть третья. Оптика

Микромодуль

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

Существует много ситуаций, когда микромодуль может подсказать, как решить «микропроблему».

1. Принимаем равным микромодулю расстояние между поясами и колонками. Тем самым закладываем фундамент ровного вертикального ритма.

2. Используем микромодуль для отделения абзацов друг от друга — отбивка пустой строкой, или «швейцарский абзац» Йозефа Мюллера-Брокмана.

3. Если мы не собираемся отбивать абзацы строкой, красную строку мы можем выделять отступами либо втяжкой, которые тоже равны микромодулю — высоте строки. (Брингхерст, «Основы стиля в типографике», русское издание, Аронов, 2006, стр. 45).

4. Как и абзацы, списки могут быть набраны с отступом или наоборот — заступом, когда маркеры списка «свисают» за левую вертикальную границу колонки сетки.

Использование второго способа выделения списков оправдано лишь тогда, когда это позволяет сделать пространство слева.

5. Значения внутренних полей плашек делайте соразмерным с микромодулем.

Об этом еще поговорим.

Соблюдение значения микромодуля для малых величин позволяет нам держаться «зебры», а значит, не сбиваться с ритма, заданного нами во втором пункте алгоритма.

Оптические компенсации

Какими бы ни были продуманными правила построения сеток, она не может гарантировать отличный результат работы. Ведь цель дизайна совсем не сферическая сетка в Wacom’e )). Геометрия в голом виде никому не нужна. Это не цель. Сетка есть рабочий инструмент, один из рабочих инструментов. Это очень важно помнить. Картинка на выходе — цель. И главное то, как на картинку будет реагировать глаз.

Например, обратите внимание на то, что округлые буквы по своей высоте больше букв, ровно лежащих на базовой линии.

Так, круг и квадрат [...] одинаковы по ширине, но квадрат кажется немного шире из-за того, что он прилегает обеими вертикальными сторонами к прямым, ограничивающим его в горизонтальном направлении, тогда как круг касается каждой из этих прямых только в одной точке. Можно сказать, что квадрат или прямоугольник обладают максимальной компактностью в горизонтальном и вертикальном направлениях (самых важных в любой композиции), превосходя в этом отношении изотропный, «абстрактно компактный» круг. Из-за этого, например, во всех шрифтах буквы округлой формы (как «о» или «с») выступают вниз за базовую линию шрифта — только эта небольшая (2–3%) искусственная неправильность, называемая наплывом, позволяет создать впечатление равной высоты букв в строке.

Дмитрий Кирсанов «Веб-дизайн» (СПб: Символ-Плюс, 2004)

Слепое следование сетке не позволяет нам решить задачу. Поставленная задача первичнее инструмента, с помощью которого она решается.

В Советском Союзе был такой «баян». Ветераны издательского дела упрекали молодежь, которая так охотно ею пользовалась модульными сетками в работе: «Сетка есть — ума не надо!».

Ломайте сетку к чертовой матери, если так будет выглядеть лучше, если это решает вашу задачу!

Выводы:

1. Геометрия не так важна. Оптика решает.

2. Сетка — это всего лишь инструмент. Причем ненавязчивый.

Плашки

Плашки — самый популярный и простой прием у дизайнеров, когда речь идет об акцентах. Плашки представляют собой боксовую модель. Те, кто верстает HTML знает, о существовании блочных элементов. Боксовая модель характерна наличием у элементов полей — внешних (margins) и внутренних (paddings). Если размеры этих полей понятны (микромодуль), то остается обратить на то, что эти поля сдвигают содержимое блоков. А значат ломают вертикали и сетку. Выход — сдвигать блоки на величину поля.

Или не сдвигать?

Все зависит от интенсивности цвета плашки (фона блока). Рассмотрим два примера.

Рис 2.9. Примеры с плашками

Рис 2.10. Примеры с плашками вместе с сеткой

На что нужно обратить внимание.

- Яркие по отношению к фону плашки никуда не выносятся.

- Яркие плашки должны «вписаться» в сетку — их высота должна быть равна кратному количеству строк. Это достигается манипулированием вертикальными внутренними полями (padding-top и padding-bottom). Текст внутри такого блока не попадает в шрифтовую сетку — заботимся об оптике.

- Выносятся плашки, которые обладают маленьким оптическим весом. Они не контрастны, поэтому не оказывают влияния на ритм.

- В случае «легковесных плашек» текста не выбивается из потока. Плашка ненавязчиво обтекает содержимое блока.

Висячая пунктуация

Суть висячей пунктуации изложена в «Ководстве» Артемия Лебедева. Однако я не могу не упомянуть ее в разговоре об оптической компенсации. Дело в том, что такие графемы, как кавычки, скобки и прочие знаки препинания имеют меньший визуальный вес, нежели основной текст. Поэтому их принято «свешивать» за линию выключки. Техническая сторона висячей пунктуации будет рассмотрена в шестой части.

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

Шрифты с засечками и крупные кегли

Заголовки набранные антиквой крупным кеглем свешиваются за линию выключки по тому же принципу, что и висячая пунктуация. Засечки в крупном кегле выглядят тоже не маленькими и по этому такие заголовки «рвут» вертикаль.

Рис 2.11. Пример заголовка, набраного антиквой

Во избежание этого заголовок нужно выносить на ширину засечки влево.

Иллюстрации

Главная особенность при работе с графическим контентом — понимание того, что иллюстрация есть не тупо прямоугольник, а набор пятен с разной интенсивностью. Пример:

Рис 2.12. Горизонтальное выравнивание графики

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

Рис 2.13. Вертикальное выравнивание графики

Обратите внимание на то, где должны находится вертикальные границы графических вставок (обозначены красными линиями). Верхняя граница лежит на одной линии вместе с высотой строчного знака (x-height). Но, если вы набираете сопроводительный текст слева или справа капителью или прописными — верхняя граница картинки сместится соответственно.

Автор: Черенкевич Алексей

techdesigner.ru

Модульные сетки в веб-дизайне - Никита Рубан

В данной статье мы поговорим о том, зачем нужны модульные сетки, как их создавать и как ими пользоваться, а также полезные советы по практической части из разряда “что делать если…” Будет очень полезна, как дизайнерам, которые начинают осваивать эту тему, так и тем, кто давно пользуется модульными сетками.

1.1. Понятие модульности. Модуль

Наше советское и постсоветское детство подарило нам замечательный мультфильм «38 попугаев». Как вы помните, у зверей стояла задача: измерить длину удава. Чем измерять — было не понятно. Инструментом измерения выбрали маленького по отношению к удаву попугая. Оказалось, что в удава «влезло» аж 38 попугаев. В этом примере попугай — это модуль.

Таким образом, удава можно дискретизировать с частотой, равной единице, деленной на попугая )

Разумеется, есть более серьезные примеры модульности в жизни. Со времен древней Греции к нам пришло выражение «Человек есть мера всего». Умные греки, когда строили свои чудеса света меряли двери плечами, а высоту помещения ростом человека.

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

Сам человек есть модульная система. Если за модуль взять голову, то рост человека обыкновенного можно выстроить 7 головами. Причем на расстояниях, кратных такому модулю, мы можем определять ключевые точки построения человека.

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

Таким образом, модуль — это единица измерения, установленная для придания соразмерности, а сетка — система пропорций.

 

1.2. Задачи сетки

Ускорение работы: мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов.

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

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

Рис 1.1. Примеры композиций и их сетки

 

Рис 1.2. Пример сайта с сеткой и без нее

 

 

1.3. Виды сеток

Самый простой вид сетки — блочная сетка. В западной литературе ее также называют «manuscript grid». Представляет собой грубо размеченную область — блок.

Рис 1.4. Блочная сетка

 

То, что называют модульной сеткой, например, 960.gs или blueprintcss.org и т. д. — совсем не модульная сетка. Вернее, она-то — сетка. Но она — колоночная. Потому что состоит только из вертикального членения на колонки.

Рис 1.5. Колоночная сетка

 

Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль.

Рис 1.6. Модульная сетка

 

Есть еще один вид сетки. Называется иерархической сеткой. В иерархической сетки размещение блоков интуитивное и не поддается закономерностям.

Рис 1.7. Иерархическая сетка

 

1.4. Математика

Сетки могут быть как простыми — с одинаковыми по размерам модулями, так и сложными, с нелинейными пропорциями у размеров модулей.

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

Внимания заслуживают другие пропорции, не такие популярные.

 

1.5. Ряд Фибоначчи

Итальянский математик Фибоначчи открыл ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т. д. Он обладает тем свойством что, отношения между соседними членами по мере возрастания чисел ряда, все более приближаются к 0,618, то есть, к отношению «золотого сечения».

Среди систем пропорционирования, используемых в архитектуре, дизайне, в прикладной графике следует упомянуть системы «предпочтительных чисел» и различные модульные системы.

 

1.6. «Предпочтительные числа»

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

Рис 1.8. Примеры сеток с нелинейными пропорциями между размерами модулей

 

Разумеется, это не все популярные пропорции.

 

Модульные сетки. Часть вторая. Алгоритм

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

 

2.1. Начинаем с определения рабочей области

В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может стереть эти рамки. А вот высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить. Мне кажется, что это совсем не страшно. Сферическая сетка в вакууме никому не нужна, а при больших сплошных объемах контента никто вертикального членения и не увидит, даже если оно соблюдено.

Я ориентирую в своих макетах минимальную ширину на ~980 пикселей, оставляя место для скроллбара.

Рис 2.1. Определяем рабочую область

 

2.2. Делаем шрифтовую сетку

Я уже раньше писал публикацию о вертикальном ритме. Она дополнит все то, о чем будет сказано в этом пункте. Напомню, что мы выбираем высоту строки единую для всего макета. Все элементы рубрикации с кеглем, отличным от кегля основного текста, должны иметь интерлиньяж кратный выбранной высоте строки; в сумме со всеми вертикальными полями высота каждого такого элемента должна содержать целое количество строк шрифтовой сетки.Здесь мы уже касаемся понятия модуля. Точнее микромодуля. Этим микромодулем мы будем обосновывать большинство небольших расстояний (и больших тоже).

Таким образом, мы получаем прообраз будущей сетки — «зебру». На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и проч.

В своей практике я чаще всего использую такие параметры для шрифтовой сетки: кегль — 12 пикселей, высота строки — 18 пикселей.

Рис 2.2. Шрифтовая сетка-«зебра»

 

2.3. Дальше нам необходимо определиться с шириной модуля — той самой единицы измерения

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

Примером второго способа выбора ширины модуля — задача например, в размещении в ряд 9 элементов. Тогда, зная ширину всего холста и количество модулей (в этом примере 9) мы с легкостью определим размер модуля.

Будем придерживаться этого в нашем примере. Скажем, заказчик попросил внизу сайта разместить 6 его любимых бутербродов.

С сеткой работать удобнее, если сразу определить расстояния между модулями — средники или канавки. На помощь с определением ширины средника приходит понятие микромодуля из предыдущего пункта. Ширина средника равна как минимум базовой высоте строки.

Таким образом, расстояния между модулями делаем равным 18 писелям.

Рассчитать ширину модуля теперь не составит труда. Есть все данные для этого.

Сетка на 6 колонок очень неудобная и некомпактная. Увеличим количество модулей вдвое. Теперь зная то, что у меня 12 колонок, я рассчитал, что ширина колонки будет равна 65 пикселям.

 

2.4. Строим вертикальное членение по полученному значению

  

 

2.5. Делаем горизонтальное членение

Высоту одного такого пояса берем кратной базовой высоте строки.

Я объединю по 3 строки в один пояс. Просвет между поясами делаем в одну строку, тем самым сохраняем вертикальный ритм.

 

2.6. Модульная сетка

То, что мы получили на пересечении горизонтального и вертикального членений называют модулями. Все-таки полдела — грамотно выбрать размер модуля. В случае, когда модуль большой, нам негде развернуться, пропадет та гибкость, о которой мы так мечтали. Если сетка очень мелкая — то она попросту теряется, как миллиметр в метре.

 

2.7. Регионы

Объединяем модули в регионы, создаем композицию, рисуем

 

Модульные сетки. Часть третья. Оптика

3.1. Микромодуль

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

Существует много ситуаций, когда микромодуль может подсказать, как решить «микропроблему».

1. Принимаем равным микромодулю расстояние между поясами и колонками. Тем самым закладываем фундамент ровного вертикального ритма.2. Используем микромодуль для отделения абзацов друг от друга — отбивка пустой строкой, или «швейцарский абзац» Йозефа Мюллера-Брокмана.3. Если мы не собираемся отбивать абзацы строкой, красную строку мы можем выделять отступами либо втяжкой, которые тоже равны микромодулю — высоте строки. (Брингхерст, «Основы стиля в типографике», русское издание, Аронов, 2006, стр. 45).4. Как и абзацы, списки могут быть набраны с отступом или наоборот — заступом, когда маркеры списка «свисают» за левую вертикальную границу колонки сетки.Использование второго способа выделения списков оправдано лишь тогда, когда это позволяет сделать пространство слева.5. Значения внутренних полей плашек делайте соразмерным с микромодулем.Об этом еще поговорим.Соблюдение значения микромодуля для малых величин позволяет нам держаться «зебры», а значит, не сбиваться с ритма, заданного нами во втором пункте алгоритма.

 

3.2. Оптические компенсации

Какими бы ни были продуманными правила построения сеток, она не может гарантировать отличный результат работы. Ведь цель дизайна совсем не сферическая сетка в Wacom’e )). Геометрия в голом виде никому не нужна. Это не цель. Сетка есть рабочий инструмент, один из рабочих инструментов. Это очень важно помнить. Картинка на выходе — цель. И главное то, как на картинку будет реагировать глаз.

Например, обратите внимание на то, что округлые буквы по своей высоте больше букв, ровно лежащих на базовой линии.

Так, круг и квадрат […] одинаковы по ширине, но квадрат кажется немного шире из-за того, что он прилегает обеими вертикальными сторонами к прямым, ограничивающим его в горизонтальном направлении, тогда как круг касается каждой из этих прямых только в одной точке. Можно сказать, что квадрат или прямоугольник обладают максимальной компактностью в горизонтальном и вертикальном направлениях (самых важных в любой композиции), превосходя в этом отношении изотропный, «абстрактно компактный» круг. Из-за этого, например, во всех шрифтах буквы округлой формы (как «о» или «с») выступают вниз за базовую линию шрифта — только эта небольшая (2–3%) искусственная неправильность, называемая наплывом, позволяет создать впечатление равной высоты букв в строке.

Дмитрий Кирсанов «Веб-дизайн» (СПб: Символ-Плюс, 2004)

Слепое следование сетке не позволяет нам решить задачу. Поставленная задача первичнее инструмента, с помощью которого она решается.

В Советском Союзе был такой «баян». Ветераны издательского дела упрекали молодежь, которая так охотно ею пользовалась модульными сетками в работе: «Сетка есть — ума не надо!».Ломайте сетку к чертовой матери, если так будет выглядеть лучше, если это решает вашу задачу!Выводы:

1. Геометрия не так важна. Оптика решает.2. Сетка — это всего лишь инструмент. Причем ненавязчивый.

 

3.3. Плашки

Плашки — самый популярный и простой прием у дизайнеров, когда речь идет об акцентах. Плашки представляют собой боксовую модель. Те, кто верстает HTML знает, о существовании блочных элементов. Боксовая модель характерна наличием у элементов полей — внешних (margins) и внутренних (paddings). Если размеры этих полей понятны (микромодуль), то остается обратить на то, что эти поля сдвигают содержимое блоков. А значат ломают вертикали и сетку. Выход — сдвигать блоки на величину поля.

Или не сдвигать?

Все зависит от интенсивности цвета плашки (фона блока). Рассмотрим два примера.

 

Рис 2.9. Примеры с плашками

 

Рис 2.10. Примеры с плашками вместе с сеткойНа что нужно обратить внимание.

– Яркие по отношению к фону плашки никуда не выносятся.– Яркие плашки должны «вписаться» в сетку — их высота должна быть равна кратному количеству строк. Это достигается манипулированием вертикальными внутренними полями (padding-top и padding-bottom). Текст внутри такого блока не попадает в шрифтовую сетку — заботимся об оптике.– Выносятся плашки, которые обладают маленьким оптическим весом. Они не контрастны, поэтому не оказывают влияния на ритм.– В случае «легковесных плашек» текста не выбивается из потока. Плашка ненавязчиво обтекает содержимое блока.

 

3.4. Висячая пунктуация

Суть висячей пунктуации изложена в «Ководстве» Артемия Лебедева. Однако я не могу не упомянуть ее в разговоре об оптической компенсации. Дело в том, что такие графемы, как кавычки, скобки и прочие знаки препинания имеют меньший визуальный вес, нежели основной текст. Поэтому их принято «свешивать» за линию выключки. Техническая сторона висячей пунктуации будет рассмотрена в шестой части.

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

3.5. Шрифты с засечками и крупные кегли

Заголовки набранные антиквой крупным кеглем свешиваются за линию выключки по тому же принципу, что и висячая пунктуация. Засечки в крупном кегле выглядят тоже не маленькими и по этому такие заголовки «рвут» вертикаль.

Рис 2.11. Пример заголовка, набраного антиквой

Во избежание этого заголовок нужно выносить на ширину засечки влево.

 

3.6. Иллюстрации

Главная особенность при работе с графическим контентом — понимание того, что иллюстрация есть не тупо прямоугольник, а набор пятен с разной интенсивностью. Пример:

Рис 2.12. Горизонтальное выравнивание графики

 

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

Рис 2.13. Вертикальное выравнивание графикиОбратите внимание на то, где должны находится вертикальные границы графических вставок (обозначены красными линиями). Верхняя граница лежит на одной линии вместе с высотой строчного знака (x-height). Но, если вы набираете сопроводительный текст слева или справа капителью или прописными — верхняя граница картинки сместится соответственно.

Автор: Черенкевич Алексей

Поделиться "Модульные сетки в веб-дизайне"

Рекомендую также посмотреть

www.nikita-ruban.ru

Модульный дизайн. Сокращение исходников для передачи с 30 макетов до одного

С чего все начиналось: отдельный артборд для каждого типа веток Yammer. Их было много.

Недавно я начал работать над обновлением дизайна Android-приложения Yammer. Начал с подгонки всех разговоров под 4-пиксельную сетку для улучшения читабельности. Так как даже один неровный пиксель мог нарушить всю сеточную структуру, мы начали с кропотливого переноса всех скриншотов в самый верх исходного макета для сравнения. После большого количества сессий дизайна и кодинга вместе с Виктором Альказаром и Оззи Тебе, двух невероятно терпеливых Android-инженеров Yammer, каждая часть веток Yammer стала выглядеть идеально.

Тем не менее, при сборке кусков в ветки, сетка все-таки слетела. На стыке каждый идеальный кусок стал далек от идеала.

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

Я обратился с этой проблемой к нашему ведущему дизайнеру Мануэлю Муноз-Солере. У него огромный опыт в дизайне модульных UI — это популярный и хорошо документированный подход для CSS-фреймворков, но из-за нескольких лет беглых переделок продукта, неидеально структурированного кода и дизайна, мы так и не внедрили полноценно модульный подход в Yammer.

После объединения всех наших фрагментов в один гигантский файл и ряда переделок, мы выработали более простой, более модульный подход в дизайне веток, и именно он решил нашу проблему с интервалами.

Вот что у нас получилось.

  1. Мы сгруппировали каждый кусок ветки Yammer так же, как наши разработчики группируют их в коде. Каждому такому фрагменту мы назначили определенный цвет для лучшего визуального восприятия. На этом этапе мы также стали ссылаться на фрагменты как на отдельные модули.Мы перестали задавать границы между модулями.
  2. Вместо этого все интервалы в приложении задавались выравниванием модулей — в частности, выравнивание по верху. Нижнее выравнивание также отлично работало бы; главное, что не оба вместе. Нужно выбрать что-то одно, и это использовать. Теперь все стало намного проще, так как не нужно задавать верхнюю и нижнюю границы для каждого случая отдельно.
  3. Мы сложили все отдельные модули в один супер-длинный артборд. Смотрелось очень странно, так как это ветка, которой на самом деле не существует в Yammer. Но это ничего. Она нужна лишь для того, чтобы проверить выравнивание по сетке, и для проверки соответствия каждого элемента структуре.
  4. Когда все было подогнано по вертикали, все еще оставались три отдельные комбинации, выходящие за выбранный стандарт. Три — это уже гораздо проще, чем сотни. Наши инженеры просто прописали отдельные операторы «if…» для каждого частного случая.

В конце, вместо 30 разных артбордов под разные типы разговоров Yammer, у нас получился один большой артборд. Мы можем менять модули местами, пересоединять их для проверок, и все остается ровно по сетке. Это идеально — всего один артборд, и он идеально соответствует коду. Не стоит и говорить, как довольны были наши Android-инженеры.

Очень легко перетаскивать модули в настоящий макет и знать, что все будет идеально подогнано под сетку:

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

Сейчас мы работаем над «символизацией» этих модулей с помощью новых символьных возможностей Sketch, чтобы создать расширенную библиотеку «pixel-perfecr», масштабируемых элементов UI. Мы поделимся результатами в одном из следующих постов.

ux.pub

Модульность конструкций в дизайне

В условиях диктата технологии массового индустри­ального производства для получения разнообразия фор­мы изделия и ее конструктивных решений дизайнеры в процессе проектирования широко используют принцип вариабельности, основанный на модульности элементов формы, позволяющий как в детском конструкторе, соби­рать различные композиции, отвечающие тем или иным функциональным требованиям и условиям ситуации.

Сегодня вариабельность четко прослеживается прак­тически во всех областях дизайна, связанных с больши­ми тиражами, и, в особенности дорогостоящими издели-

Блочная радиоаппаратура из взаимозаменяемых компонен­тов японской фирмы "Пионер",

ПО "Архимет".

Мебель для пешеходной улицы в Лениногорске на основе единого конструктора литых деталей, 1998

 

Принципп

модульности,

единого

конструктора

типоэлемекгое

является

ведущим в

кщуцим

ГЦМзШЛЭ+ЬК

изделий.

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

Все большее распространение вариабельность полу­чает в бытовых орудиях труда. Это всевозможные уни­версальные компактно складывающиеся многофункцио­нальные приспособления и механизмы, состоящие из различных блоков, начиная от наборов отверток и клю­чей со сменными наконечниками, кончая насадками к универсальному электроприводу, позволяя превращать его попеременно в электрорубанок, электропилу, электро­лобзик, точильный круг, перфоратор, фрезерный или токарный министанок.

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

В современном индустриальном дизайне одна и та же конструктивная деталь используется в различных изделиях: крепежные элементы, одни и те же штампы корпусов для различных моделей компьютерной техники и радиоэлектроники, взаимозаменяемость элементов в машиностроении и др. Такая универсальность конструк-

Сетсуо Китаока Прыгающее кресло, Япония, 1989

Рене Хербст Стул, 1930

Заполнение конструк­тивного остова стула

растяжками.

Ёахим Станичек. Полка для аппаратуры "BG 1". Берлин, 1988

 

Оригинальные конструктивные находки приводят к появлению и новых форм в дизайне.

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

Мондо Студио. Плетеная софа

Марио Ботта.

Кресло "Латонда", 1988-89

Гарри Бертойя. Кресло, модель 421 из хромированного прутка круглого сечения, 1952

Широ Куромата.

Кресло 'Как красива луна", 1986

Ажурность решетчатых конструкций активно используется в дизайне как художественное средство

Ян Айзенлойфель Чайник на подставке, 1902
Андрэ Дубройл. Стул, Япония, 1988-89
Чарлз Макинтош. Стул для чайной. Глазго, 1904
В.Шухов Водонапорная башня. Ярославль, 1911

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

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

Конструкции и бионика

Дизайнерское формообразование сегодня многие идеи черпает из окружающей нас природы, где все предельно рационально и лаконично. "В творениях природы,- как отмечает известный финский дизайнер Алвар Аалто, - формы возникают из их внутренней конструкции" [1, с.88]

Стебель бамбука при значительной высоте и пре­дельно малом диаметре имеет абсолютную устойчивость. Ряд соединенных полых элементов трубчатого сечения делают эту конструкцию к тому же чрезвычайно легкой, утолщения и мембраны в местах соединений обеспечива­ют ее прочность. Эта оригинальная, созданная природой, конструкция стала прообразом современных телескопи­ческих антенн, спинингов, современных настольных ламп, способных "дотянуться" до любого участка рабочего стола.

Прототипом многих современных штампованных кон­струкций, таких как кузова легковых автомобилей, моно­литные корпуса бытовой техники, может служить форма лепестка цветка, переменная толщина которого обеспечи­вает жесткость. Ярким образцом жесткой конструкции

Вернер Пантон. Дизайн жилой среды, 1968
Многие современные конструкции в дизайне сделаны по аналогии с формами окружающей нас природы, где все предельно рационально и лаконично.
Отто Фрей. Проект для Пинк Флойд, 1976 Отто Фрей. Танцплощадка, ФРГ, 1957 Паоло Франческо Пива. Настольная лампа "Лезилайт"

при минимальном расходе материала, является скорлупа обыкновенного птичьего яйца. Соотношение размера "пе­рекрываемого простанства" и толщины самой скорлупы составляет тысячу к одному. Это наблюдение положено в основу формообразования самых различных оболочек в архитектуре и дизайне: от большепролетных простран­ственных конструкций до упоминавшихся выше корпусов бытовой техники.

Природная каплевидная форма с минимальной пло­щадью поверхности и сопротивлением при перемещении положена в основу формообразования летательных аппа­ратов и скоростных транспортных средств - автомобилей, железнодорожных составов и др.

stydopedia.ru

Модульные сетки в веб-дизайне – POPEL Agency

Вам нарисовали дизайн сайта. Красивый, яркий, но какой-то нестройный и разваливающийся? Прислали макет на верстку, а в нем черт ногу сломит от разнообразия отступов и блоков?

Не волнуйтесь! Просто дизайнер рисовал этот макет от души, позабыв заложить в него логику компоновки. Как же быть? Элементарно! Просто слегка приведем макет в систему — применим к нему модульную сетку!

Что такое модульная сетка?

Макет сайта будет выглядеть красиво, если он построен на основе системы модульной верстки, в простонародье — модульной сетки.

Попытки «систематизировать красоту» предпринимались еще в Средние века переписчиками книг. Они использовали набор специальных правил для разметки страниц.

После Второй мировой войны несколько графических дизайнеров, включая Макса Билла и Джозефа Мюллера-Брокмана, вдохновленные работой «Новая типографика» Яна Чихольда, задались вопросом верстки страниц.

Они начали разрабатывать систему, которая бы позволила наилучшим образом располагать текст и иллюстрации на странице. Фундаментальная работа Мюллера-Брокмана — «Grid Systems in Graphic Design» — способствовала распространению модульных сеток в европейской, а позже и американской типографике.

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

Модуль — условный блок в конкретной сетке, шаг в ее ритме.

Зачем использовать модульную сетку?

«Чтобы ровненько выстраивать блоки!» — скажет сферический дизайнер в вакууме. И будет прав… ну, на треть половины, например.

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

Кроме того, она позволяет создать единый стандарт возможного расположения блоков для всех страниц сайта.

А ещё, использование модульной сетки дает преимущества при верстке проекта, облегчает добавление новых элементов и поддержку проекта в целом. Не возникает путаницы с размерами колонок и отступов, а при необходимости немного изменить страницу, например, добавить один-два рекламных блока — это будет легко сделать, не нарушив целостности сайта.

Как этим пользоваться

Как пример — сайт компании А2К. В нем мы для удобства использовали фиксированную 12-колоночную сетку. По этой сетке у нас выстраиваются все ключевые элементы — начиная от меню и переключателя языков, логотипа, телефонов и заканчивая копирайтами.

На этой странице видно, как добавляется новый элемент — боковое меню, которое тоже прекрасно вписывается в сетку. И если нам понадобится поменять контент и боковой блок местами…

…благодаря сетке, страница останется все такой же целостной и собранной.

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

Типичная реакция дизайнера, открывшего для себя модульную сетку

Полезные ресурсы

Сетки для Photoshop

Baseline Grid PSD — замечательный макет 960-пиксельной сетки от Teehanlax. Благодаря 6-пиксельному вертикальному модулю, обеспечивает гибкий контроль текстового ритма.

The Golden Grid Template — шаблон, построенный на базе css-фреймворка The Golden Grid.

CSS-фреймворки на основе сеток

1KB Grid — замечательная библиотека, которая ставит во главу угла скорость. Выберите количество колонок, их ширину и ширину отступа — нажмите «Скачать» и приступайте к верстке вашего сайта.

Baseline — еще одна библиотека для быстрого прототипирования, на этот раз с уклоном в типографику.

Twitter Bootstrap — огромная библиотека, фреймворк «для быстрой фронт-энд разработки», как называют его авторы. Построен на модульной сетке, причем с фиксированным и резиновым вариантами.

Вооружаться, однозначно!

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

popel-studio.com

Модульные сетки в веб-дизайне | Базовая часть – Skill Up Design

Привет! В сегодняшней статье разберёмся с сетками в веб-дизайне.

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

Именно набросок будет первой вещью, которую делает веб-дизайнер, потому что уже исходя из того, что мы там нарисовали, мы подбираем сетку. Набросок — это по сути прототип т.е. черновая идея сайта изображённая в виде блоков (модулей) на обычной бумажке.

Для начала давайте разберёмся, что такое модуль?

Модуль — любая единица измерения. Модуль устанавливается для того, чтобы измерить что либо по отношению к чему-либо. Т.е. грубо говоря 1 сантиметр — это модуль, по отношению к метру. Вот примерно так же сайт строится из модулей. Модуль — это мельчайшая единица и составляющая дизайна сайта.Сперва просто запомним, что сетки больше всего используются для печатной продукции (т.е. журналы, газеты). С середины ХХ века именно по модульной стеке стало строится большинство печатной продукции, потому что это очень удобно и очень круто.

Для чего вообще нужна модульная сетка?

По сути вот эти Guides в Photoshop (View —> New Guide) и есть направляющая сетка, именно для веб-дизайна. Чтобы убрать направляющую включаем Rules (линейку), берём Move Tools (V) и перетаскиваем Guide (направляющую линию) на линейку сбоку или сверху в зависимости от того горизонтальный или вертикальный Guide (направляющая линия). Так же можно и получить новую направляющую, нажать на линейке и вытащить её в рабочую область.

Почему просто вот такая сетка не подходит? Иногда бывает набираете «скачать сетку для фотошопа», «grid psd». Скачиваете открываете, а там сама сетка, в таком виде как на скриншоте и если вы нажимаете Ctrl+H, чтобы сетка из Guide lines отображалась, а её нет, значит это просто векторные колонки. Векторные колонки, Карл! Обычная картинка.

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

Например, я хочу сделать блок ровненько в 3 колонки и это главная прелесть сетки, я поставил 3 блока и они выглядят как часть единого целого, они выглядят как часть какого-то большого другого блока. При этом колонки легко соединяются. Если к примеру у нас 12 колонок, это не значит, что нужно ютиться в 1-й, можно спокойно делать блок на всю ширину макета.

Вот как это выглядит без сетки.

Каковы плюсы сетки:

  • Задаёт стандарты расположения объектов — выверенные отступы;
  • Шаблонизирует и снижает вероятность ошибок при отрисовке дополнительных страниц;
  • Делает визуально приятным дизайн, за счёт соблюдения пропорций и структуры;
  • Задаёт логику и облегчает работу целой команды над одним макетом;
  • На основе дизайна построенного на сетках, проще работать над адаптивностью дизайна.

Виды сеток

  1. Блочная — это модуль, его трудно назвать сеткой, просто 1 модуль
  2. Колоночная — её называют модульной, но это по сути колоночная сетка, состоящая из колонок
  3. Модульная сетка — в основном в печатной продукции, поскольку есть формат листа. В веб-дизайне не всегда понятно какая будет ширина экрана и высота у пользователя.
  4. Иерархическая — когда модули располагаются основываясь на своём дизайнерском чютье.

Что такое 960 Grid?

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

Если вы откроете свой сайт на мониторе 2560px или не дай бог 4K, то он будет ютиться на экране в виде маленькой колоночки.

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

  • 1170px — под обычный формат, под широкие мониторы;
  • 970px — под ноутбуки и старые мониторы;
  • 750px — под планшеты;
  • 480px и 320px — под мобильные телефоны и смартфоны.

Если дизайнер не криворукий, то делая дизайн для 1170px, ему не составит труда отрисовать его и под остальные разрешения 970px, 750px, 480px и 320px.

Практические примеры:

1. Сайт в 3 колонки

2. Сайт в 4 колонки 4 колонки. Сайт в чистом виде сетка.Большая картинка это блок в 2 колонки. И объединяются либо левые 2 колонки, либо правые.

А чуть ниже видно, что дизайнер разбивает ритм и берёт 2 центральные колонки.

Проверяем адаптивность. Для широкого формата это 6 колонок, примерно на широкоформатном мониторе:

4 колонки. Такое отображение будет для планшета:

3. 18-ти колоночная сеткаЕсли не накидывать сетку, то кажется, что используется 3 колонки.

При этом в 12 колонок какие-то элементы вписывают, а какие-то нет, поэтому 12 колонки не подходят. :

Более детальный разбор показал, что здесь используется 18-ти колоночная сетка, распознать это помог наименьший элемент страницы оранжевые кнопки, это по сути одна колонка, размножив их, мы получили 18 колонок:

4. 12-ти колоночный макет.4 большие, каждая из 4-х делится на 3 внутри. Всё абсолютно линейно. Даже кнопочки меню и то попадают в эту сетку. И хотя меню не в ритме (ритм в данном случае по 3 колонки), но всё таки они в ширину сетки попадают.

При подготовке статьи использовались материалы из видео «Основы веб дизайна #1 — модульные сетки (Grid Systems)» Youtube канал PsForceRu.

skillupdesign.ru