Модульные сетки в реальном мире - IQLab Frontend Fusion 2012

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. Модули

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

24. Алгоритм построения
Оптические компенсации
Сетка есть рабочий инструмент, один из рабочих инструментов. Это
очень важно помнить. Картинка на выходе — цель. И главное то, как на
картинку будет реагировать глаз.

25. Модульные сетки в responsive design
Responsive Web Design
или отзывчивый, адаптивный дизайн
Суть этого подхода заключается в
том что, мы делим весь спектр
устройств на группы, и для каждой
из групп устройств разрабатываем
интерфейс, исходя из
особенностей устройства

26. Модульные сетки в responsive design
Экраны устройств

27. Модульные сетки в responsive design
Примеры

28. Модульные сетки в responsive design
Примеры

29. Модульные сетки в responsive design
При разработке сеток для различных
устройств следует помнить про их
особенности - разрешение экрана,
размер, тачскрин.

30. Модульные сетки в responsive design

31. Модульные сетки в responsive design

32. CSS фреймворки
CSS фреймворк — это набор стилей и техник,
которые позволяют ускорить и упростить верстку
сайтов.

33. CSS фреймворки
960 Grid System
Фреймворк в основе которого лежит рабочая область в 960
пикселей, и позволяющий работать с 12ти или 16ти
колоночной сеткой.

34. CSS фреймворки
Blue Print
css-фреймворк основанный на 24 колоночной сетке с
удобной в использовании grid-системой, разумной
типографикой и таблицей стилей для печати

35. Автоматизируй это!
Modular Grid Pattern
http://modulargrid.org/#panel

36. Автоматизируй это!
Modular Grids Generator
http://www.agasyanc.ru/modgrid

37. Автоматизируй это!
GuideGuide
http://www.guideguide.me

38. Выводы
Не вписывайте дизайн
в сетку, наоборот,
создавайте сетку под
дизайн.

39. Полезные ресурсы
• 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

40. Алексей Старожилов
a.starozhylov@sysiq.com
a.starozhylov