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

1,921 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,921
On SlideShare
0
From Embeds
0
Number of Embeds
365
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Модульные сетки вреальном миреАлексей Старожилов
  2. 2. Содержание• Введение• Что такое сетка и зачем она нужна?• Алгоритм построения модульной сетки.• Модульные сетки в responsive design• CSS Фреймворки• Автоматизируй это!
  3. 3. ВведениеНемного историиРазворот латинского манускрипта. 1555
  4. 4. ВведениеКонструктивизм 1920-х годовОбложка журнала. Постер.Дизайн Эль Лисицкого. 1922 Дизайн Герберта Байера. 1926
  5. 5. Введение1940. Макс БиллКнижный переплет. Дизайн Макса Постер. Дизайн Макса Билла. 1945Билла. 1944
  6. 6. Введение1961. Йозеф Мюллер-БрокманСетка и книжные страницы. Дизайн Йозефа Мюллера-Брокмана
  7. 7. Введение1961. Йозеф Мюллер-БрокманПостер. Дизайн Йозефа Мюллера-Брокмана. 1959
  8. 8. Что такое сетка?"базовая сетка позволяет объединить всеэлементы дизайна - символы, фотографии,рисунки и цвета - в формальных отношениях другк другу" Йозеф Мюллер Брокман «The Graphic Artist and His Design Problems»
  9. 9. Что такое сетка? Что собой представляет модульная сетка?
  10. 10. Что такое сетка?Задачи сетки• Ускорение работы• Сбалансированность и пропорциональность• Ускорение и шаблонирование, единообразность элементов
  11. 11. Что такое сетка?Пример композиции и его сетка
  12. 12. Алгоритм построенияВиды сетокБлочная сетка Колоночная сетка Модульная сетка
  13. 13. Алгоритм построенияМатематика Золотое сечение деление непрерывной величины на две части в таком отношении, при котором меньшая часть так относится к большей, как большая ко всей величине.
  14. 14. Алгоритм построенияРяд Фибоначчи ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т.
  15. 15. Алгоритм построения«Предпочтительные числа» «Предпочтительные числа» — ряд чисел геометрической прогрессии, где каждое последующее число образуется умножением предыдущего числа на какую-нибудь постоянную величину. Примеры сеток с нелинейными пропорциями между размерами модулей
  16. 16. Алгоритм построенияАлгоритм построения 1. Рабочая область
  17. 17. Алгоритм построенияАлгоритм построения 2. Шрифтовая сетка
  18. 18. Алгоритм построенияВертикальный ритмЦель — исследовать и использоватьна практике методы улучшениячитабельности текста.
  19. 19. Алгоритм построенияАлгоритм построения 3. Ширина модуля 4. Вертикальное членение
  20. 20. Алгоритм построенияАлгоритм построения 5. Горизонтальное членение
  21. 21. Алгоритм построенияАлгоритм построения 6. Модульная сетка
  22. 22. Алгоритм построенияАлгоритм построения 7. Модули
  23. 23. Алгоритм построенияМикромодульМикромодулем называют величину, равную высоте строки. Представьте,что сетка атомарна, а высота строки — неделимая частица.Существует много ситуаций, когда микромодуль может подсказать, какрешить «микропроблему».
  24. 24. Алгоритм построенияОптические компенсацииСетка есть рабочий инструмент, один из рабочих инструментов. Этоочень важно помнить. Картинка на выходе — цель. И главное то, как накартинку будет реагировать глаз.
  25. 25. Модульные сетки в responsive designResponsive Web Designили отзывчивый, адаптивный дизайн Суть этого подхода заключается в том что, мы делим весь спектр устройств на группы, и для каждой из групп устройств разрабатываем интерфейс, исходя из особенностей устройства
  26. 26. Модульные сетки в responsive designЭкраны устройств
  27. 27. Модульные сетки в responsive designПримеры
  28. 28. Модульные сетки в responsive designПримеры
  29. 29. Модульные сетки в responsive design При разработке сеток для различных устройств следует помнить про их особенности - разрешение экрана, размер, тачскрин.
  30. 30. Модульные сетки в responsive design
  31. 31. Модульные сетки в responsive design
  32. 32. CSS фреймворки CSS фреймворк — это набор стилей и техник, которые позволяют ускорить и упростить верстку сайтов.
  33. 33. CSS фреймворки960 Grid SystemФреймворк в основе которого лежит рабочая область в 960пикселей, и позволяющий работать с 12ти или 16тиколоночной сеткой.
  34. 34. CSS фреймворкиBlue Print css-фреймворк основанный на 24 колоночной сетке с удобной в использовании grid-системой, разумной типографикой и таблицей стилей для печати
  35. 35. Автоматизируй это!Modular Grid Pattern http://modulargrid.org/#panel
  36. 36. Автоматизируй это!Modular Grids Generator http://www.agasyanc.ru/modgrid
  37. 37. Автоматизируй это!GuideGuide http://www.guideguide.me
  38. 38. ВыводыНе вписывайте дизайнв сетку, наоборот,создавайте сетку поддизайн.
  39. 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.ruhttp://www.thegridsystem.org
  40. 40. Алексей Старожиловa.starozhylov@sysiq.com a.starozhylov

×