SlideShare a Scribd company logo
1 of 12
Сетки
Задачи сетки
• Ускорение работы
• Сбалансированность и пропорциональность
• Ускорение и шаблонирование, единообразность элементов
Одно из первых решений в процессе создания дизайна — это модульная сетка. Единый
каркас и схема расположения всех основных блоков и элементов, проходящий через
все страницы сайта.
Сетки бывают простые и сложные, гибкие в использовании и не очень. Это не столь
важно. Важно то, что если вы при проектировании дизайна задали определенную сетку
модулей — будьте добры ей следовать. От первой до последней страницы своего
проекта. А если в процессе прорисовки внутренних страниц у вас появились элементы,
не ложащиеся в принятую сетку — значит вы недостаточно времени уделили
её проектированию.
Следование единой модульной сетке в рамках проекта не только увеличит цельность
и логичность восприятия сайта, но и многократно упростит труд разработчикам.

?
Виды сеток
• Блочная (размеченный
блок)
• Колоночная сетка

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

• Иерархическая сетка
Сетка позволяет унифицировать размеры изобразительных и текстовых блоков,
выбрать оптимальный масштаб модульных ячеек.
Слишком крупный модуль жестко зажмёт материал.
Слишком мелкий сделает вёрстку случайной. Здесь
как раз и нужен умный дизайнерский глаз.
Челночная дипломатия между материалом и
эскизом находит золотую середину.
Cтавя картинку и текст в одном месте
определенным образом, необходимо думать
о последствиях — что с ними произойдет на
следующих разворотах. Необходимо все
время как бы забегать вперед, проигрывать в
воображении всю пьесу в целом.
Необходимо думать о всей системе, о
подчинении набора внутренней логике и
сквозной концепции,
Элементарные порции набора нужно все
время соотносить друг с другом, а это
означает, что нужно все время изыскивать
возможности для контрастов. Но
напряженная борьба противоположностей
может протекать только в рамках
композиционного единства, целостности,
которая не должна быть утраченной при
создании контрастных отношений.
«Как и любой другой
метод конструирования,
сетка — не абсолют.
Пользоваться ею надо не
навязчиво, где надо,
видоизменять ее, и быть
готовым отказаться от
нее вовсе ради
наилучшего результата.
Вообще художнику, еще
не работавшему с
сетками, целесообразно
начинать с простейшего
их вида.

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

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

— Аллен Хёрлберт
«Сетка — средство, а не залог
успеха. Ею можно пользоваться
поразному, и каждый художник
волен выбрать решение,
соответствующее его
индивидуальному стилю. Однако
нужно учиться пользоваться
сеткой, это искусство,
требующее практики».

Йозеф Мюллер Брокман
Grids

More Related Content

Viewers also liked

12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
дизайн веб форм2
дизайн веб форм2дизайн веб форм2
дизайн веб форм2Maria Levitskaya
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
Prolific Garden Tools - Shanghai Newtop Machinery® Co. Ltd. (residential & co...
Prolific Garden Tools - Shanghai Newtop Machinery® Co. Ltd. (residential & co...Prolific Garden Tools - Shanghai Newtop Machinery® Co. Ltd. (residential & co...
Prolific Garden Tools - Shanghai Newtop Machinery® Co. Ltd. (residential & co...Sheikh Masharib
 
Synthesis Presentation
Synthesis PresentationSynthesis Presentation
Synthesis PresentationKaitlyn Katoa
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...INCUBUS CONSULTING
 

Viewers also liked (20)

12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
Transmission media.nw
Transmission media.nwTransmission media.nw
Transmission media.nw
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
дизайн веб форм2
дизайн веб форм2дизайн веб форм2
дизайн веб форм2
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
Análise de dados
Análise de dadosAnálise de dados
Análise de dados
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
Prolific Garden Tools - Shanghai Newtop Machinery® Co. Ltd. (residential & co...
Prolific Garden Tools - Shanghai Newtop Machinery® Co. Ltd. (residential & co...Prolific Garden Tools - Shanghai Newtop Machinery® Co. Ltd. (residential & co...
Prolific Garden Tools - Shanghai Newtop Machinery® Co. Ltd. (residential & co...
 
Synthesis Presentation
Synthesis PresentationSynthesis Presentation
Synthesis Presentation
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
12% Assured Return on Property in Noida Expressway “Cosmic Corporate Park-2”@...
 

Similar to Grids

User Experience 2011: Принципы композиции и модульные сетки при проектировани...
User Experience 2011: Принципы композиции и модульные сетки при проектировани...User Experience 2011: Принципы композиции и модульные сетки при проектировани...
User Experience 2011: Принципы композиции и модульные сетки при проектировани...Maria Chaykina
 
The Unicorn Workflow
The Unicorn WorkflowThe Unicorn Workflow
The Unicorn WorkflowIntersog
 
Компонентный дизайн
Компонентный дизайнКомпонентный дизайн
Компонентный дизайнM18
 
Раскопки в интерфейсах
Раскопки в интерфейсахРаскопки в интерфейсах
Раскопки в интерфейсахAlisher Yakupov
 
Design for-not-designers
Design for-not-designersDesign for-not-designers
Design for-not-designerscollabock
 
Композиция в веб-дизайне
Композиция в веб-дизайнеКомпозиция в веб-дизайне
Композиция в веб-дизайнеEkaterina Andreeva
 
Тема 3. Модели и закономерности систем
Тема 3. Модели и закономерности системТема 3. Модели и закономерности систем
Тема 3. Модели и закономерности системСергей Солнечный
 
WUD 2010: Microsoft Visio как инструмент проектирования интерфейсов. Баланс с...
WUD 2010: Microsoft Visio как инструмент проектирования интерфейсов. Баланс с...WUD 2010: Microsoft Visio как инструмент проектирования интерфейсов. Баланс с...
WUD 2010: Microsoft Visio как инструмент проектирования интерфейсов. Баланс с...Gevorg Glechyan
 

Similar to Grids (8)

User Experience 2011: Принципы композиции и модульные сетки при проектировани...
User Experience 2011: Принципы композиции и модульные сетки при проектировани...User Experience 2011: Принципы композиции и модульные сетки при проектировани...
User Experience 2011: Принципы композиции и модульные сетки при проектировани...
 
The Unicorn Workflow
The Unicorn WorkflowThe Unicorn Workflow
The Unicorn Workflow
 
Компонентный дизайн
Компонентный дизайнКомпонентный дизайн
Компонентный дизайн
 
Раскопки в интерфейсах
Раскопки в интерфейсахРаскопки в интерфейсах
Раскопки в интерфейсах
 
Design for-not-designers
Design for-not-designersDesign for-not-designers
Design for-not-designers
 
Композиция в веб-дизайне
Композиция в веб-дизайнеКомпозиция в веб-дизайне
Композиция в веб-дизайне
 
Тема 3. Модели и закономерности систем
Тема 3. Модели и закономерности системТема 3. Модели и закономерности систем
Тема 3. Модели и закономерности систем
 
WUD 2010: Microsoft Visio как инструмент проектирования интерфейсов. Баланс с...
WUD 2010: Microsoft Visio как инструмент проектирования интерфейсов. Баланс с...WUD 2010: Microsoft Visio как инструмент проектирования интерфейсов. Баланс с...
WUD 2010: Microsoft Visio как инструмент проектирования интерфейсов. Баланс с...
 

Grids

  • 2. Задачи сетки • Ускорение работы • Сбалансированность и пропорциональность • Ускорение и шаблонирование, единообразность элементов Одно из первых решений в процессе создания дизайна — это модульная сетка. Единый каркас и схема расположения всех основных блоков и элементов, проходящий через все страницы сайта. Сетки бывают простые и сложные, гибкие в использовании и не очень. Это не столь важно. Важно то, что если вы при проектировании дизайна задали определенную сетку модулей — будьте добры ей следовать. От первой до последней страницы своего проекта. А если в процессе прорисовки внутренних страниц у вас появились элементы, не ложащиеся в принятую сетку — значит вы недостаточно времени уделили её проектированию. Следование единой модульной сетке в рамках проекта не только увеличит цельность и логичность восприятия сайта, но и многократно упростит труд разработчикам. ?
  • 3. Виды сеток • Блочная (размеченный блок) • Колоночная сетка • Модульная сетка • Иерархическая сетка
  • 4.
  • 5.
  • 6.
  • 7. Сетка позволяет унифицировать размеры изобразительных и текстовых блоков, выбрать оптимальный масштаб модульных ячеек.
  • 8. Слишком крупный модуль жестко зажмёт материал. Слишком мелкий сделает вёрстку случайной. Здесь как раз и нужен умный дизайнерский глаз. Челночная дипломатия между материалом и эскизом находит золотую середину.
  • 9. Cтавя картинку и текст в одном месте определенным образом, необходимо думать о последствиях — что с ними произойдет на следующих разворотах. Необходимо все время как бы забегать вперед, проигрывать в воображении всю пьесу в целом. Необходимо думать о всей системе, о подчинении набора внутренней логике и сквозной концепции, Элементарные порции набора нужно все время соотносить друг с другом, а это означает, что нужно все время изыскивать возможности для контрастов. Но напряженная борьба противоположностей может протекать только в рамках композиционного единства, целостности, которая не должна быть утраченной при создании контрастных отношений.
  • 10. «Как и любой другой метод конструирования, сетка — не абсолют. Пользоваться ею надо не навязчиво, где надо, видоизменять ее, и быть готовым отказаться от нее вовсе ради наилучшего результата. Вообще художнику, еще не работавшему с сетками, целесообразно начинать с простейшего их вида. Но никогда не стоит выбирать для работы каркас, который противоречит вашему представлению о будущем макете или вашему индивидуальному стилю. В то же время, стремясь к росту художественного мастерства, не надо бояться экспериментировать. По мере накопления опыта творчески активный художник, возможно, захочет усложнить геометрический рисунок своих сеток. Главным достоинством модульных сеток является то, что они дисциплинируют неопытного художника.», — Аллен Хёрлберт
  • 11. «Сетка — средство, а не залог успеха. Ею можно пользоваться поразному, и каждый художник волен выбрать решение, соответствующее его индивидуальному стилю. Однако нужно учиться пользоваться сеткой, это искусство, требующее практики». Йозеф Мюллер Брокман