Модульные сетки вреальном миреАлексей Старожилов
Содержание• Введение• Что такое сетка и зачем она нужна?• Алгоритм построения модульной сетки.• Модульные сетки в responsi...
ВведениеНемного историиРазворот латинского манускрипта. 1555
ВведениеКонструктивизм 1920-х годовОбложка журнала.             Постер.Дизайн Эль Лисицкого. 1922   Дизайн Герберта Байера...
Введение1940. Макс БиллКнижный переплет. Дизайн Макса   Постер. Дизайн Макса Билла. 1945Билла. 1944
Введение1961. Йозеф Мюллер-БрокманСетка и книжные страницы. Дизайн Йозефа Мюллера-Брокмана
Введение1961. Йозеф Мюллер-БрокманПостер. Дизайн Йозефа Мюллера-Брокмана. 1959
Что такое сетка?"базовая сетка позволяет объединить всеэлементы дизайна - символы, фотографии,рисунки и цвета - в формальн...
Что такое сетка?             Что собой представляет             модульная сетка?
Что такое сетка?Задачи сетки• Ускорение работы• Сбалансированность и пропорциональность• Ускорение и шаблонирование, едино...
Что такое сетка?Пример композиции и его сетка
Алгоритм построенияВиды сетокБлочная сетка   Колоночная сетка   Модульная сетка
Алгоритм построенияМатематика Золотое сечение                   деление непрерывной величины на две части в таком         ...
Алгоритм построенияРяд Фибоначчи                ряд чисел, замечательный тем, что каждое последующее                число ...
Алгоритм построения«Предпочтительные числа» «Предпочтительные числа» — ряд чисел геометрической прогрессии, где каждое пос...
Алгоритм построенияАлгоритм построения                      1. Рабочая область
Алгоритм построенияАлгоритм построения                      2. Шрифтовая сетка
Алгоритм построенияВертикальный ритмЦель — исследовать и использоватьна практике методы улучшениячитабельности текста.
Алгоритм построенияАлгоритм построения                      3. Ширина модуля                      4. Вертикальное         ...
Алгоритм построенияАлгоритм построения                      5. Горизонтальное членение
Алгоритм построенияАлгоритм построения                      6. Модульная сетка
Алгоритм построенияАлгоритм построения                      7. Модули
Алгоритм построенияМикромодульМикромодулем называют величину, равную высоте строки. Представьте,что сетка атомарна, а высо...
Алгоритм построенияОптические компенсацииСетка есть рабочий инструмент, один из рабочих инструментов. Этоочень важно помни...
Модульные сетки в responsive designResponsive Web Designили отзывчивый, адаптивный дизайн                                 ...
Модульные сетки в responsive designЭкраны устройств
Модульные сетки в responsive designПримеры
Модульные сетки в responsive designПримеры
Модульные сетки в responsive design                 При разработке сеток для различных                 устройств следует п...
Модульные сетки в responsive design
Модульные сетки в responsive design
CSS фреймворки CSS фреймворк — это набор стилей и техник, которые позволяют ускорить и упростить верстку сайтов.
CSS фреймворки960 Grid SystemФреймворк в основе которого лежит рабочая область в 960пикселей, и позволяющий работать с 12т...
CSS фреймворкиBlue Print css-фреймворк основанный на 24 колоночной сетке с удобной в использовании grid-системой, разумной...
Автоматизируй это!Modular Grid Pattern                       http://modulargrid.org/#panel
Автоматизируй это!Modular Grids Generator                     http://www.agasyanc.ru/modgrid
Автоматизируй это!GuideGuide                      http://www.guideguide.me
ВыводыНе вписывайте дизайнв сетку, наоборот,создавайте сетку поддизайн.
Полезные ресурсы•   Josef Muller-Brockmann «Grid systems in graphic design». Книга на двух языках стразу    — на английско...
Алексей Старожиловa.starozhylov@sysiq.com      a.starozhylov
Upcoming SlideShare
Loading in...5
×

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

1,580

Published on

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

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

No Downloads
Views
Total Views
1,580
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Модульные сетки в реальном мире - 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

×