Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Модульные сетки в реальном мире
Semelhante a Модульные сетки в реальном мире (20)
Mais de Ecommerce Solution Provider SysIQ
Mais de Ecommerce Solution Provider SysIQ (20)
Модульные сетки в реальном мире
- 1. Модульные сетки в реальном мире Алексей Старожилов
- 2. Содержание • Введение • Что такое сетка и зачем она нужна? • Алгоритм построения модульной сетки. • Модульные сетки в responsive design • CSS фреймворки • Автоматизируй это!
- 3. Введение Немного истории Разворот латинского манускрипта. 1555
- 4. Введение Конструктивизм 1920-х годов Обложка журнала. Постер. Дизайн Эль Лисицкого. 1922 Дизайн Герберта Байера. 1926
- 5. Введение 1940. Макс Билл Книжный переплет. Дизайн Макса Постер. Дизайн Макса Билла. 1945 Билла. 1944
- 6. Введение 1961. Йозеф Мюллер-Брокман Сетка и книжные страницы. Дизайн Йозефа Мюллера-Брокмана
- 7. Введение 1961. Йозеф Мюллер-Брокман Постер. Дизайн Йозефа Мюллера-Брокмана. 1959
- 8. Что такое сетка? "базовая сетка позволяет объединить все элементы дизайна - символы, фотографии, рисунки и цвета - в формальных отношениях друг к другу" Йозеф Мюллер Брокман «The Graphic Artist and His Design Problems»
- 9. Что такое сетка? Что собой представляет модульная сетка?
- 10. Что такое сетка? Задачи сетки • Ускорение работы • Сбалансированность и пропорциональность • Ускорение и шаблонирование, единообразность элементов
- 11. Что такое сетка? Пример композиции и его сетка
- 12. Алгоритм построения Виды сеток Блочная сетка Колоночная сетка Модульная сетка
- 13. Алгоритм построения Математика Золотое сечение деление непрерывной величины на две части в таком отношении, при котором меньшая часть так относится к большей, как большая ко всей величине.
- 14. Алгоритм построения Ряд Фибоначчи ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т.
- 15. Алгоритм построения «Предпочтительные числа» «Предпочтительные числа» — ряд чисел геометрической прогрессии, где каждое последующее число образуется умножением предыдущего числа на какую-нибудь постоянную величину. Примеры сеток с нелинейными пропорциями между размерами модулей
- 16. Алгоритм построения Алгоритм построения 1. Рабочая область
- 17. Алгоритм построения Алгоритм построения 2. Шрифтовая сетка
- 18. Алгоритм построения Вертикальный ритм Цель — исследовать и использовать на практике методы улучшения читабельности текста.
- 19. Алгоритм построения Алгоритм построения 3. Ширина модуля 4. Вертикальное членение
- 20. Алгоритм построения Алгоритм построения 5. Горизонтальное членение
- 21. Алгоритм построения Алгоритм построения 6. Модульная сетка
- 22. Алгоритм построения Алгоритм построения 7. Модули
- 24. Алгоритм построения Микромодуль Микромодулем называют величину, равную высоте строки. Представьте, что сетка атомарна, а высота строки — неделимая частица. Существует много ситуаций, когда микромодуль может подсказать, как решить «микропроблему».
- 25. Алгоритм построения Оптические компенсации Сетка есть рабочий инструмент. Это очень важно помнить. Картинка на выходе — цель. И главное то, как на картинку будет реагировать глаз.
- 26. Модульные сетки в responsive design Responsive Web Design или отзывчивый, адаптивный дизайн
- 27. Модульные сетки в responsive design Экраны устройств
- 28. Модульные сетки в responsive design Примеры
- 29. Модульные сетки в responsive design Примеры
- 30. Модульные сетки в responsive design При разработке сеток для различных устройств следует помнить про их особенности - разрешение экрана, размер, тачскрин.
- 31. Модульные сетки в responsive design
- 32. Модульные сетки в responsive design
- 33. CSS фреймворки CSS фреймворк — это набор стилей и техник, которые позволяют ускорить и упростить верстку сайтов.
- 34. CSS фреймворки 960 Grid System Фреймворк в основе которого лежит рабочая область в 960 пикселей, и позволяющий работать с 12ти или 16ти колоночной сеткой.
- 35. CSS фреймворки Blue Print css-фреймворк основанный на 24 колоночной сетке с удобной в использовании grid-системой, разумной типографикой и таблицей стилей для печати
- 36. Автоматизируй это! Modular Grid Pattern http://modulargrid.org/#panel
- 37. Автоматизируй это! Modular Grids Generator http://www.agasyanc.ru/modgrid
- 38. Автоматизируй это! GuideGuide http://www.guideguide.me
- 39. Выводы Не вписывайте дизайн в сетку, наоборот, создавайте сетку под дизайн.
- 40. Полезные ресурсы • Josef Muller-Brockmann «Grid systems in graphic design». Книга на двух языках стразу — на английском и немецком (похоже на то). • Херлберт «Сетка» • Massimo Vignelli «Canon» • Григорян «Основы композиции в прикладной графике» • Лаптев «Модульные сетки. Проектирование многополосных изданий» • http://kak.ru/columns/serov/a2473/ — Серов С. И. «Швейцарский абзац» • http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/ — Kayla Knight « Adaptive CSS-Layouts: New Era In Fluid Layouts?» http://thegrids.ru http://www.thegridsystem.org
- 41. Алексей Старожилов a.starozhylov@sysiq.com a.starozhylov
Notas do Editor
- Несмотря на очень странное название темы моего доклада, я сегодня постараюсь рассказать, что же такое модульные сетки, как их строить, надо ли их строить и чем они могут облегчить нам жизнь. Сразу следует сказать, что модульные сетки достаточно универсальный инструмент и поэтому применяется в полиграфии, книгоиздательстве, и достаточно недавно пришел в web-дизайн.
- 1. Введение 2. Что такое сетка и зачем она нужна? 3. Алгоритм построения модульной сетки. Оптика и геометрия 4. Модульные стеки в responsive design (адаптивный дизайн) 5. CSS Фреймворки (облегчение работы для наших ближайших братьев по оружию) 6. Автоматизируй это!
- Немного истории Человек издавна пытался понять природу красоты, "разложить" ее на отдельные составные части, "поверить гармонию алгеброй". Древнейший пример использования модульной сетки – средневековый канон, которым пользовались переписчики книг при разметке книжных страниц.
- Основы же современного модульного проектирования были заложены конструктивистами 1920-х годов
- Однако не сразу их абстрактные построения были осознаны как метод со своей системой правил и закономерностей. Лишь в 1940 году швейцарский дизайнер Макс Билл впервые применил в книжном оформлении модульную сетку.
- В 1961 году его соотечественник Йозеф Мюллер-Брокман ввел в употребление первые термины модульного подхода к дизайну и опубликовал 28 примеров разработанных им самим сеток. Именно швейцарская школа дизайна, предельно функциональная, усовершенствовала и подарила миру этот инструмент – модульную сетку.
- Почему системы сеток стали так популярны среди цифровых дизайнеров? Ответом может быть то, что теперь, старые добрые принципы печати стали применяться к экрану. Постоянное улучшение, связанное с профессиональной зрелостью цифровых дизайнеров и возрастающим интересом к более рациональному дизайну, несомненно, привело к возвращению сетки. То, что веками было канонами печатного дизайна, стало предпосылкой для дизайна пользовательского интерфейса.
- Сетка это инструмент, методология, подход или метод в создании дизайн проектов. Как Йозеф Мюллер Брокман (Josef Müller Brockmann) пишет в его книге «The Graphic Artist and His Design Problems»: "базовая сетка позволяет объединить все элементы дизайна - символы, фотографии, рисунки и цвета - в формальных отношениях друг к другу, иначе говоря, базовая сетка – это средство для наведения порядка в дизайне. Сознательно построенный дизайн более четкий, аккуратный и более успешный, чем разработанный наугад" .
- Что собой представляет модульная сетка? Она представляет собой систему пересекающихся вертикальных и горизонтальных прямых с определенным шагом, на пересечении которых образуются блоки - модули. Понятие модульности Со времен древней Греции к нам пришло выражение «Человек есть мера всего». Умные греки, когда строили свои чудеса света меряли двери плечами, а высоту помещения ростом человека. Такие единицы измерения, как косая сажень, пядь, фут и т. п. также произошли исходя из физических характеристик человека. Сам человек есть модульная система. Если за модуль взять голову, то рост человека обыкновенного можно выстроить 7 головами. Причем на расстояниях, кратных такому модулю, мы можем определять ключевые точки построении человека. Метрическая система, которую мы используем, тоже является модульной. Один метр состоит из ста модулей «сантиметр», который тоже в свою очередь можно расчленить на более мелкие модули. Таким образом, модуль — это единица измерения, установленная для придания соразмерности, а сетка — система пропорций.
- Ускорение работы Мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов Сбалансированность и пропорциональность Элементы в макете соизмеримы и пропорциональны между собой. Мы можем обосновать размеры блоков, кегль и проч. Ускорение и шаблонирование, единообразность элементов Разработав сетку, мы делаем основу для решений на будущее. Грамотные гайды содержат детальное описание модульных сеток. Касательно веб-дизайна, мы можем с легкостью предусмотреть тривиальные макеты для всего сайта и сделать заготовку для единичных случаев.
- Самый простой вид сетки — блочная сетка. В западной литературе ее также называют «manuscript grid». Представляет собой грубо размеченную область — блок.
- Сетки могут быть как простыми — с одинаковыми по размерам модулями, так и сложными, с нелинейными пропорциями у размеров модулей. Имеет смысл поговорить о пропорциях. Золотое сечение Золотое сечение ( золотая пропорция , деление в крайнем и среднем отношении ) — деление непрерывной величины на две части в таком отношении, при котором меньшая часть так относится к большей, как большая ко всей величине.
- Ряд Фибоначчи Итальянский математик Фибоначчи открыл ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т. д. Он обладает тем свойством что, отношения между соседними членами по мере возрастания чисел ряда, все более приближаются к 1,618, то есть, к отношению «золотого сечения».
- «Предпочтительные числа» «Предпочтительные числа» — ряд чисел геометрической прогрессии, где каждое последующее число образуется умножением предыдущего числа на какую-нибудь постоянную величину.
- 1. Начинаем с определения рабочей области В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может стереть эти рамки. А вот высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить.
- 2. Делаем шрифтовую сетку Прежде чем ее делать следует сказать пару слов про вертикальный ритм.
- Вертикальный ритм Цель — исследовать и использовать на практике методы улучшения читабельности текста. Работая со шрифтом, достаточно помнить только об одном: то что я делаю на холсте с буквами не должно вызывать затруднений при чтении у конечного пользователя. Вся остальная суета вокруг типографики —всего-лишь грамматика и пунктуация. В школе я застал те времена, когда компьютеры еще были вещью больше элитарной, нежели массовой. И рефераты тогда писались в библиотеке на листах а4 формата. Под листы скрепкой прикреплялась зебра — разлинеенный вертикально лист бумаги с ровным шагом. Рукописный текст выглядел гораздо лучше, если он писался под зебру, нежели без нее. Тогда я не догадывался, какой из этого толк и как мне это поможет в будущем. Та самая зебра и есть блюститель вертикального ритма. Текст читается лучше, когда глаз «ходит» через равный интервал. Особенно несоблюдение вертикального ритма видно на соседних колонках. В примере показаны две рядомстоящие колонки текста: первая набрана Эриалом 12px, вторая — Эриал 11px. Задаем «зебру» в 18 пикселей (то есть полуторный интерлиньяж для основного начертания). Исходя из этого мы выбираем высоту строки единую для всего макета. Все элементы рубрикации с кеглем, отличным от кегля основного текста, должны иметь интерлиньяж кратный выбранной высоте строки; в сумме со всеми вертикальными полями высота каждого такого элемента должна содержать целое количество строк шрифтовой сетки. Здесь мы уже касаемся понятия модуля. Точнее микромодуля. Этим микромодулем мы будем обосновывать большинство небольших расстояний (и больших тоже). Таким образом, мы получаем прообраз будущей сетки — «зебру». На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и проч.
- 3. Дальше нам необходимо определиться с шириной модуля — той самой единицы измерения Исходя из чего мы можем вычислить размер модуля. Первое — это присутствие какого-то блока постоянной величины, от которого нам приходится отталкиваться. В вебе постоянными величинами чаще всего бывают баннеры, иллюстрации, видео-контент и проч. Такие константы могут содержать в своей ширине уже несколько модулей. Примером второго способа выбора ширины модуля — задача например, в размещении в ряд 9 элементов. Тогда, зная ширину всего холста и количество модулей (в этом примере 9) мы с легкостью определим размер модуля. С сеткой работать удобнее, если сразу определить расстояния между модулями — средники или канавки. На помощь с определением ширины средника приходит понятие микромодуля из предыдущего пункта. Ширина средника равна как минимум базовой высоте строки. Рассчитать ширину модуля теперь не составит труда. Есть все данные для этого. 4. Строим вертикальное членение по полученному значению
- 5. Делаем горизонтальное членение Высоту одного такого пояса берем кратной базовой высоте строки.
- То, что мы получили на пересечении горизонтального и вертикального членений называют модулями. Все-таки полдела — грамотно выбрать размер модуля. В случае, когда модуль большой, нам негде развернуться, пропадет та гибкость, о которой мы так мечтали. Если сетка очень мелкая — то она попросту теряется, как миллиметр в метре.
- Микромодуль В третьем пункте алгоритма я уже упоминал микромодуль. Микромодулем называют величину, равную высоте строки. Представьте, что сетка атомарна, а высота строки — неделимая частица. Существует много ситуаций, когда микромодуль может подсказать, как решить «микропроблему». Принимаем равным микромодулю расстояние между поясами и колонками. Тем самым закладываем фундамент ровного вертикального ритма. Используем микромодуль для отделения абзацов друг от друга — отбивка пустой строкой, или «швейцарский абзац» Йозефа Мюллера-Брокмана. Если мы не собираемся отбивать абзацы строкой, красную строку мы можем выделять отступами либо втяжкой, которые тоже равны микромодулю — высоте строки. (Брингхерст, «Основы стиля в типографике», русское издание, Аронов, 2006, стр. 45). Как и абзацы, списки могут быть набраны с отступом или наоборот — заступом, когда маркеры списка «свисают» за левую вертикальную границу колонки сетки. Значения внутренних полей плашек делайте соразмерным с микромодулем.
- Оптические компенсации Какими бы ни были продуманными правила построения сеток, она не может гарантировать отличный результат работы. Ведь цель дизайна совсем не сферическая сетка в Wacom’e )). Геометрия в голом виде никому не нужна. Это не цель. Сетка есть рабочий инструмент , один из рабочих инструментов. Это очень важно помнить. Картинка на выходе — цель. И главное то, как на картинку будет реагировать глаз. Например, обратите внимание на то, что округлые буквы по своей высоте больше букв, ровно лежащих на базовой линии. Так, круг и квадрат […] одинаковы по ширине, но квадрат кажется немного шире из-за того, что он прилегает обеими вертикальными сторонами к прямым, ограничивающим его в горизонтальном направлении, тогда как круг касается каждой из этих прямых только в одной точке. Можно сказать, что квадрат или прямоугольник обладают максимальной компактностью в горизонтальном и вертикальном направлениях (самых важных в любой композиции), превосходя в этом отношении изотропный, «абстрактно компактный» круг. Из-за этого, например, во всех шрифтах буквы округлой формы («о», «с») выступают вниз за базовую линию шрифта — только эта небольшая (2—3%) искусственная неправильность, называемая наплывом, позволяет создать впечатление равной высоты букв в строке. Слепое следование сетке не позволяет нам решить задачу. Поставленная задача первичнее инструмента, с помощью которого она решается.
- В последнее время количество видов устройств, с помощью которых можно выйти в интернет, по моему мнению стало несколько зашкаливать. И при это размеры этих устройств могут быть самыми разнообразными, и в дополнение к этой неразберихе, можно отметить что разрешения экранов, тоже самые разные. И как нам разрабатывать дизайн интерфейсов для этого хаоса устройств? Ответ - Responsive Web Design или отзывчивый, адаптивный дизайн Суть этого подхода заключается в том что, мы делим весь спектр устройств на группы, и для каждой из групп устройств разрабатываем интерфейс, исходя из размеров экрана. То есть другими словами, не изменяя количество контента веб-сайта, мы меняем его интерфейс таким образом, чтобы в зависимости от размера экрана, этот самый контент был подан максимально удобно для пользователя.
- При этом мы должны помнить о том какое ориентирование экрана у устройства по умолчанию.
- При разработке сеток для различных устройств следует помнить про их особенности - разрешение экрана, размер, тачскрин.
- CSS фреймворк — это набор стилей и техник, которые позволяют ускорить и упростить верстку сайтов. Вам не нужно каждый раз переписывать страницы таблиц стилей — достаточно один раз описать часто используемые стили, а затем лишь менять их значение под соответствующий макет.
- 960 Grid System Фреймворк в основе которого лежит рабочая область в 960 пикселей, и позволяющий работать с 12ти или 16ти колоночной сеткой.
- css-фреймворк основанный на 24 колоночной сетке с удобной в использовании grid-системой, разумной типографикой и таблицей стилей для печати
- Итак, подведем небольшой итог. Модульная сетка — штука, безусловно, нужная и важная. Ее использование необходимо для того, чтобы ваши блоки не плясали по странице и воспринимались как единое целое. Но, в тоже время, она накладывает некоторые ограничения, которые можно и нужно переступать, если того требует идея дизайна. Не вписывайте дизайн в сетку, наоборот, создавайте сетку под дизайн.