Модульная сетка в графическом дизайне. Модульная сетка журнала

Модульная сетка как основа хорошего дизайна. Часть 1

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

Использование модульной сетки связано с одним из самых основных принципов дизайна — выравнивания. Периодическое печатное издание, созданное на базе модульной сетки, легче воспринимается человеком, так как его дизайн основывается на законах пропорции. Применение такой разметки позволяет упорядочить различные элементы страницы, придавая ее оформлению целостность и ясность. В то же время, модульная сетка позволяет быстро и правильно организовать работу над разворотами журнала, придать соразмерность графическим и текстовым блокам, контролировать поля.

Сетка представляет собой систему непечатаемых вертикальных и горизонтальных линий, разделяющих страницу. К этим линиям «привязываются» основные элементы страницы (текстовое наполнение, иллюстрации, декоративные объекты и т.д.). Сетка строится на мастер-странице (шаблон, который применяется ко всем создаваемым страницам, автоматически дублирующий все необходимые компоненты). Сначала задают поля, затем определяется размер и количество автоматических колонок. Следующий шаг: при помощи вертикальных и горизонтальных направляющих линий добавляются дополнительные линии привязки.

История, с чего все началось

Итак, рассмотрим сетку журнала Свет Евангелия, который издавался ежеквартально в течение 20 лет (с 1990 по 2010 годы) в Ровно (Украина).

Как и многие печатные издания, журнал СЕ создавался на базе модульной сетки. Но с 1990 по 1993 годы в журнале не было компьютерного макета. Сейчас даже трудно представить себе, что тогда журнал делался, в общем-то, почти вручную. Хотя в редакции уже были первые компьютеры, и даже лазерный принтер имелся. Но набирали и распечатывали только текстовые полосы. Макет журнала выклеивался вручную — с помощью бумаги, клея и ножниц — заголовки, рисунки, текстовые полосы. И все-все страницы технический редактор (т.е. я) вымеряла линейкой по миллиметрам…

В 1994 году редакция приобрела программу Adobe PageMaker 5.0. Технический редактор Вера Фесянова и дизайнер Олег Моргун разработали компьютерный макет журнала СЕ с трех-колоночной модульной сеткой.

В основу сетки журнала был положен прямоугольник текстового поля, отделенный от краев страницы полями и разделенный направляющими на 3 колонки с промежутком 5 мм между колонок.

Модульная сетка журнала Свет Евангелия, 1994.

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

Развороты СЕ # 1’95. Для блока текста с 2 колонками (разворот справа) пришлось вручную делать дополнительную разметку станицы — с помощью дополнительных вертикальных направляющих (голубого цвета) обозначен центральный промежуток между двумя колонками.Развороты СЕ #2’96 и #1'97.  Даже такая простая сетка позволяла формировать разные по ширине блоки — в три, две или одну колонки. Вертикальные направляющие по центру промежутка между колонками добавлены вручную, чтобы было легче выровнять информационные блоки с фотографиями.

Журнал развивался, и нам хотелось, чтобы дизайн становился лучше, более динамичным. На некоторых разворотах мы размещали разноплановые материалы, объединенные одной темой. Например, новости из разных мест. И нужно было их размещать так, чтобы текст из разных материалов визуально разделялся. Мы пробовали 6-колоночную сетку, но она не отвечала поставленной задаче.

Эврика

И тогда (в 1998 году) нашему техническому редактору Вере Фесяновой пришла мысль сделать 12 колонок на странице. И это оказалось очень удачной идеей. Мы получили гибкий макет с функциональной моделью модульной сетки для большого количества разной информации и элементов.

Сетка журнала СЕ # 1’98.

В этой модульной сетке легко позиционировать и выравнивать элементы дизайна:

a. колонки помогают точно расположить блоки текста, заголовки статей, иллюстрации, фотографии и другие графические и информационные объекты.

b. соблюдаются равномерные интервалы между элементами.

c. рационально используется свободное пространство, которое облегчает чтение текста и восприятие всей композиции.

Разворот СЕ #2’98. Графические элементы легко выравнивается в 12-колоночной сетке.  Фотография на правой странице выходит за пределы центральной колонки и легко выравнивается горизонтально в сетке соседних колонок.12-колоночная сетка журнала Свет Евангелия.  Затемненные участки на странице слева показывают, как с помощью этой сетки можно получить 5 типов деления на колонки. Широкие боковые поля также добавляют возможности при выборе колонок и размеров фотографий (страница справа).

Особенность 12-колоночной модели в том, страницу можно легко разделить на модули по 2, 3, 4 и 6 колонок, связанных с сеткой всего документа. Так мы можем играть с шириной и формой колонок, рассматривая текстовые блоки как отдельные модули, и смешивать количество столбцов в каждой истории. Например, если текст и изображения будут располагаться в двух узких колонках, а пояснительная информация — в широкой колонке, или наоборот.

Развороты СЕ #2’98 и #2’2000.

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

Разворот журнала СЕ #3’2004.  Здесь материалы внизу визуально отделены от основного материала не только цветовыми фоновыми плашками, но разной шириной колонок текста.  Основной материал заверстан в 3 колонки на обеих страницах разворота.  Текстовый материал слева внизу растянут на 2 колонки,  внизу справа — текст заверстан в 2 колонки по ширине трех.Разворот СЕ #2’2009.

Модульная система вёрстки — метод, при помощи которого можно структурно упорядочить компоновку всего материала на журнальных страницах, придать соразмерность всем его элементам.

Главная задача, которой отвечает данная 12-колоночная модульная сетка, является нахождение естественного месторасположения для всех требуемых компонентов дизайна для того, чтобы общая композиция была гармонична и приятна по восприятию. И нет никакого противоречия со свободой в творчестве: правильная модульная сетка — это основа хорошего дизайна.

Эта модель 12-колоночной модульной сетки применялась также в других журналах. В каждом журнале модель сетки адаптировалась для конкретных целей и макетов, но принцип вёрстки оставался прежним — построение красивой и грамотной композиции по модульной сетке.

Интересно, применима ли модульная сетка в детском журнале? Об этом можно прочитать в части 2.

Заметили что-то несуразное, оставьте заметку на полях. Вопросы? Комментарии? Напишите внизу.

You can read English version here >

Спасибо. Если интересно, то здесь следующий рассказ о технике Diotone: Great Design Solutions.

medium.com

Модульная сетка. От слов к делу — Cammelia Design — Стать графическим дизайнером

Не так давно, работая над очередным уроком для курса «Графический дизайн. Основы» (выпуск запланирован на начало января), я поняла, что тема использования и построения модульных сеток мало где раскрывается.

Есть достаточно много информации о том, что такое модульная сетка и для чего она нужна, но совсем мало о том, каким образом ее строить и какими правилами руководствоваться при этом. Поэтому я решила, что сегодняшняя запись будет иметь практическую направленность и пытаться как можно понятнее осветить данную тему.

Итак, модульная сетка – это разметка вашей работы, способ систематизации и выравнивания элементов. Она является остовом композиционного решения и служит средством организации не только составных частей работы, но и свободного пространства.

Сетка может как помогать нам решать поставленные задачи, так и являться частью решения. Наиболее ярким примером может послужить интерфейс windows phone:

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

Сначала мы должны определиться, — для чего нам нужна модульная сетка. Делаем мы сайт или верстаем журнал, или обложку для книги, или что-то другое? В зависимости от вида деятельности следует выделить основные структурные элементы. Часто размер модуля определяется одним из этих элементов, например логотипом, позицией меню на сайте и т.д. В верстке минимальный размер определяется удобочитаемым в конкретной ситуации кеглем.

Для наглядности приведу пример модульной сетки печатного периодического издания. Если мы верстаем журнал, то структурными элементами могут быть заголовок, подзаголовок, текст, иллюстрации. Обычно в журналах присутствуют разные типы статей, где роль текстовой части может меняться. В таких случаях, чтобы сделать сетку более гибкой, я использую 5-7 модулей (по горизонтали):

Объединение модулей может осуществляться практически в любом удобном для вас формате:

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

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

В случае с сайтами оптимальным количеством колонок считается 12, 16 и 24, что связано с особенностями верстки сайтов и использования возможностей фреймворка. Минимальной высотой модуля для web я считаю 20px, что связано с оптимальным размером шрифта (12-14pt) и его читаемостью.

Теперь пришло время поговорить о технической стороне вопроса.

Создание модульной сетки в Photoshop

• Первый и самый простой способ — это включить сетку самого графического редактора (Ctrl+’) и, ориентируясь по ней, выставить направляющие. Получится долго и с большой вероятностью ошибок.
• Установить специальные плагины для Photoshop (GuideGuide, Modular Grid Pattern, GridMaker 2).
• Скачать готовый шаблон с одного из бесплатных генераторов сеток, таких как 960.gs, Golden Grid, 1Kb Grid, Simple Grid. Установите нужные параметры и нажмите «GENERATE».

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

Создание модульной сетки в InDesign

В отличие от Photoshop, InDesign обладает собственными средствами создания модульной сетки. В меню Layout необходимо выбрать пункт Create Guides и в диалогом окне ввести нужные вам параметры:

Данный инструмент имеет достаточно гибкие настройки, поэтому сделать нужную структуру не составит большого труда. Создание сетки лучше всего осуществлять на Master Page, чтобы не повторять процедуру для каждой страницы.

Создание модульной сетки в Illustrator

• Первый способ (аналогично Photoshop) — это включить сетку самого графического редактора и, ориентируясь по ней, выставить направляющие. Также есть возможность любую фигуру сделать направляющей, что поможет в организации наклонной сетки.
• Скачать готовые шаблоны сеток. Где — подскажет поиск. В интернете их можно найти массу.

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

cammeliadesign.com

Типографические модульные сетки - Записки недизайнера

Европейский прямоугольникЭтот прямоугольник обеспечивает основу европейского бумажного стандарта серии А, соответствующего стандартам ISO. Имеет следующее отношение сторон: один к квадратному корню из двух (1:1,414). Каждая половина листа всегда будет сохранять свои пропорции постоянными, независимо от того, сколько раз размер листа делится пополам.Европейские форматы бумажных листовА2 420 мм х 584 ммА3 297 мм х 420 ммА4 210 мм х 297 ммВ4 250 мм х 353 ммВ5 176 мм х 250 мм

Американские форматы бумажных листов (в дюймах)Poster/Ream 17" x 22"Tabloid 11" x 17"Legal 8,5" x 14"Letter 8,5" x 11"Booklet 5,5" x 8,5"

Золотой прямоугольникИспользуется при разработке модульных сеток.Дано: прямоугольный треугольник АВС.АВ = 2ВС.Провести дугу с центром в точке С и радиусом, равным ВС (точка D).Провести дугу с центром в точке А и радиусом АD. Точку пересечения со стороной АВ обозначить Z. ПРодолжить дугу от точки Z до пересечения с перпендикулярной линией, проведённой вверх от точки А на треугольнике (точка Е).АЕ - короткая сторона золотого прямоугольника, АВ - длинная его сторона.Японский квадратЯпонский квадрат формирует ассимметричную конструкцию, соединяя вместе два квадрата. Квадрат также может являться весомым фактором при разработке модульной сетки, но такая форма подходит далеко не всегда.Принципы построения модульной сеткиРазделение пространства с помощью модульной сетки должно начинаться с полей. Затем формат должен быть разделён на определённое число колонок (от 2 до 8). Потом, по мере необходимости - на число строк.Выбор диапазона столбцов и их дальнейшее разделение зависит от того, насколько сложной должна быть сетка.Модульная сетка будет изменяться в соответствии с входящими в неё базовыми элементами, в зависимости от того, что проектируется - книга, журнал, брошюра или сайт. При этом должно учитываться размещение традиционных элементов вёрстки - чисел нумерации, заголовков, полей; а в случае проектирования интерфейса сайтов - и элементов навигации).

Ширина колонокОбщее правило - для шрифтов более крупных кеглей (18-24 пункта) нужно обеспечить более широкую колонку. А для шрифтов более мелких кеглей (8-11) - более узкую.В среднем в строке должно размещаться от 8 до 12 слов.Размер междустрочных пробелов (интерлиньяж) также очень важен для удобочитаемости набранного текста.

Пропорции полейПоля не должны быть слишком узкими. Пустое пространство должно зрительно уравновешивать количество текста на странице.Эта область может изменяться в зависимости от размера формата, площади набора текста, количества текста и т.п.Общие правила:

• должны наблюдаться определённые логика и единообразие в размещении начала текста на каждой странице;
• вокруг текста должно быть достаточное пустое пространство, пропорциональное размеру страницы;
• если на странице располагается относительно небольшой текст, а шрифт - крупного кегля, поля должны быть более широкими.

Поля одиночной страницыВ формате отдельной страницы левое и правое поля одинаковы, верхнее поле должно быть немного больше, чем боковые, а нижнее - больше верхнего. Различие в размерах полей необходимо, т.к. оптический центр страницы располагается немного выше, чем геометрический.

Внешние боковые поля (двухстраничный разворот)На развороте внешние поля (на левой стороне левой страницы и на правой стороне правой страницы) имеют одинаковую ширину. Внутренние (корешковые) поля разворота также должны быть одинаковой ширины. Корешковые поля часто нужно увеличивать из-за того, что в районе корешка страницы могут не лежать в одной плоскости. Это зрительно уменьшает размер полей.

Верхние и нижние поляПоле верхнего колонтитула располагается наверху страницы. А поле нижнего колонтитула, соответственно, внизу страницы.Эти области часто содержат повторяющуюся информацию, чаще всего - заголовок книги, главы, раздела, и/или номер страницы (колонцифра).В некоторых изданиях могут сочетаться оба вида полей, но это не обязательно.

Нумерация страницНумерацию можно помещать в нижние или верхние колонтитулы. Наиболее функциональным является левый и правый верхний или нижний углы страницы.Размещение нумерации по центру часто смотрится статично и монотонно.Независимо от того, где размещается колонцифра, пространство, которое отделяет её от текста, должно быть таким же, как и между колонками.

Область основного текстаСоотношение между областью основного текста и общим размером страницы в значительной степени определяется величиной полей. Если в макете используется текст небольшого объёма, но при этом за счёт крупного шрифта он занимает большую площадь, дизайнер может весьма либерально относиться к величине полей. В противном случае нужно более тщательное его планирование во избежание ощущения тесноты на странице.

Источник: Э. Файола "Шрифты для печати и Web-дизайна"

nata-nedizainer.livejournal.com

Модульная сетка: инструмент грамотного дизайна

Что такое модульная сетка?

Это невидимый скелет вашего дизайна – система горизонтальных и вертикальных (а порой еще диагональных и дуговых) направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции.

Какая от нее польза?

Во-первых, модульная сетка привносит в дизайн порядок, цельность и связь всех его частей. Она позволяет рационально организовать любое графическое пространство, будь то бланк, визитка, постер, книга, сайт, интерьер, сохраняя во всех его элементах единство стиля.

А во-вторых, заметно ускоряет выполнение заказа, ведь, согласитесь, работать по шаблону гораздо легче, чем всякий раз заново изобретать велосипед.

Человек издавна пытался понять природу красоты, "разложить" ее на отдельные составные части, "поверить гармонию алгеброй". Древнейший пример использования модульной сетки – средневековый канон, которым пользовались переписчики книг при разметке книжных страниц.

Разворот латинского манускрипта. 1555

Основы же современного модульного проектирования были заложены конструктивистами 1920-х годов.

Обложка журнала. Дизайн Эль Лисицкого. 1922

Постер. Дизайн Герберта Байера. 1926

Однако не сразу их абстрактные построения были осознаны как метод со своей системой правил и закономерностей. Лишь в 1940 году швейцарский дизайнер Макс Билл впервые применил в книжном оформлении модульную сетку.

Книжный переплет. Дизайн Макса Билла. 1944

Постер. Дизайн Макса Билла. 1945

В 1961 году его соотечественник Йозеф Мюллер-Брокман ввел в употребление первые термины модульного подхода к дизайну и опубликовал 28 примеров разработанных им самим сеток. Именно швейцарская школа дизайна, предельно функциональная и лапидарная, усовершенствовала и подарила миру этот инструмент – модульную сетку.

Сетка и книжные страницы. Дизайн Йозефа Мюллера-Брокмана

Постер. Дизайн Йозефа Мюллера-Брокмана. 1959

Постер. Дизайн Йозефа Мюллера-Брокмана. 1972

Надо сказать, что российские дизайнеры не намного отстали в модульном проектировании от своих западных коллег. Уже в 1960-е годы в Советском Союзе появилась группа единомышленников, использовавших принципы строгого конструирования печатных изданий (впоследствии Сергей Серов в шутку назвал эту школу "советской Швейцарией"). У истоков отечественного модульного подхода к дизайну стояли такие признанные сегодня авторитеты, как Максим Жуков, Михаил Аникст и Аркадий Троянкер.

Книжный переплет. Дизайн Максима Жукова и Аркадия Троянкера. 1970

Книжный разворот. Дизайн Михаила Аникста. 1979

Суперобложка. Дизайн Максима Жукова. 1977

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

Обложка буклета. Дизайн Евгения Григорьева. Санкт-Петербург, 2009

Приведем несколько примеров модульного подхода к дизайну из портфолио нашего издательства.

Для каталога художника Евгения Журова был выбран классический книжный формат in quarto с соотношением сторон 3 к 4. Эти пропорции и легли в основу модульной сетки.

Для того чтобы сориентировать на развороте изображения картин, была выделена горизонтальная линия, делящая страницу по вертикали в соотношении 1 к 3. При макетировании каждое изображение располагалось так, чтобы и оно делилось этой линией по вертикали в том же соотношении.

Подобный прием позволил легко и гармонично совмещать друг с другом любые по формату картины – как панорамные, вытянутые по горизонтали, так и высокие, вытянутые по вертикали. При перелистывании каталога живописный ряд приобретает живой, пульсирующий ритм.

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

Добавим лишь, что подписи к картинам, напротив, были намеренно сделаны статичными. Они разместились в строго определенных местах и живут как бы отдельно, ничем не отвлекая внимание зрителя от изображений.

Внешний вид нашего тематического календарного каталога был подсказан самим материалом. Этот каталог предназначается для той категории клиентов, которые хотят заказать корпоративный календарь. Каждая тема представлена 12-ю изображениями (по количеству месяцев в году) и помещается на отдельном развороте. Модульная сетка брошюры получилась настолько простая, ясная и открытая, что нет необходимости приводить ее здесь отдельно.

Дизайн открыток из набора "Династия Романовых" (Музеи Московского Кремля), несмотря на ярко выраженную асимметричную композицию, полностью был построен на последовательном делении плоскости по золотому сечению. Совмещение классических, проверенных временем принципов с современными тенденциями порой может привести к интересному результату.

Модульное конструирование просто незаменимо при оформлении серийных изданий. Единожды выстроенная, но хорошо продуманная сетка сильно облегчит работу над новыми выпусками книги, журнала, буклета, газеты. Свободно меняя текст, изображения, цвет, можно без труда получить легко узнаваемый и точно опознаваемый дизайн внутри одной серии.

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

Кроме того, приступая к модульному конструированию, дизайнеру нелишне иметь хотя бы общие представления о пропорциях, форме, цвете, контрасте, ритме…

Но об этом – в следующих наших статьях.

Литература для самообразования: 1. Лаптев В. Модульные сетки: Проектирование многополосных изданий. М.: РИП-холдинг, 2007. 2. Самара Т. Создавая и ломая сетку. М.: РИП-холдинг, 2005. 3. Херлберт А. Сетка: Модульная система конструирования и производства газет, журналов и книг. М.: Книга, 1984. 4. Bosshard H. R. Der typografische Raster. Z?rich: Niggli, 2000. 5. Elam K., Elsener R. Gestaltungsraster: Ordnungssysteme f?r Schrift. New York: Princeton Architectural Press, 2006. 6. Miller-Brockmann J. Grid systems in graphic designs. Z?rich: Niggli, 1981.

vlasta-print.ru

Модульная сетка в графическом дизайне

Что такое модульная сетка.

Модульная сетка это система построения визуальной информации на основе блоков – модулей.

Модуль.

Основой модульной сетки является модуль. Модуль  происходит от латинского слова modulus – “маленькая мера”. Модулем может выступать любая мера длины, площади или объёма взятая за единицу модульной сетки.

Из истории.

Римский зодчий, Витрувий, в Iвеке до н.э. писал о важности пропорций при построении целого.

Рис.1

Стоит ли говорить о возрасте модульной сетки? Она в буквальном смысле стара как мир. Мы можем видеть пропорциональное модульное деление в древнегреческой архитектуре, когда за основу брался радиус или диаметр колонны и на основе этого деления возводились храмы и сооружения, некоторые из которых сохранились и по сей день.

Для чего нужна модульная сетка.

Модульная сетка позволяет логически структурировать информацию, облегчая тем самым её восприятие. Правильно построенная сетка позволяет легко справиться с вёрсткой как многостраничных изданий так и небольших одностраничных рекламных макетов.

Как правило, ясный и собранный макет оставляет правильное, положительное впечатление. Чёткое и законченное композиционное изложение информации, эстетически более логичное, чем хаотичное. Использование модульной сетки позволяет целиком сосредоточится на информации.

Построение модульной сетки.

Модуль может быть размером в 2 квадратных метра, 3 на 3 миллиметра или 12 на 12 пикселей. Всё зависит от той системы измерений в которой мы его используем.

В веб-дизайне в основном используются модули размером 12, 16 или 24 px. Некоторые рекомендуют брать за основу межстрочное расстояние, что в принципе тоже логично.

Модульные сетки могут быть абсолютно разными. Наиболее примитивной будет сетка состоящая из одинаковых квадратов выстроенных вплотную.

Более сложные модульные сетки используют большее количество элементов. К примеру мы берём за основу модуль Х и получаем сетку с шагом 3Х по горизонтали и 4Х по вертикали. При этом как вертикальные так и горизонтальные блоки разделяются между собой модулем Х.

Это более сложная сетка, но от этого она не менее интересна и вполне функциональна.

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

Примеры использования модульной сетки.

Прошу обратить внимание на эти два коллажа.

Нетрудно угадать какой вариант вам понравился, мне лично нравиться первый, тот что слева. У него более явная и чёткая структура. Его найдут более интересным и правильным большая часть людей. Несмотря на то что информация содержится одна и та же, подана она по-разному, а поэтому впечатления после увиденного остаются совершенно разные.

Модульная сетка в айдентике.

Использование модульной сетки в айдентике давно уже стало стандартом. Модульное построение используют начиная с разработки визиток и заканчивают разрабатывая билборды. Использование одной и той же модульной сетки в различных рекламных продуктах создаёт ощущение целостности и единства для всего бренда.

Типографская сетка в журналах и газетах

Типографская сетка является скорее разновидностью модульной сетки из-за специфических особенностей типографского дела.

Журналы просто не могут обойтись без сетки. Чёткая и лаконичная структура притягивает взгляд и облегчает чтение больших объёмов информации.

Модульная сетка не является чем-то обязательным и её использование также дело личных предпочтений и вкусов. Использовать её можно по-разному.

На рисунке 5 вы видите отличный пример использования модульной сетки и сознательное нарушение её границ, что в свою очередь смотрится довольно интересно и заметно оживляет весь разворот.

Рис. 5

Редакторы газет одни из первых оценили все прелести модульной вёрстки и на протяжении длительного времени облик газеты незначительно изменился. Мы можем взять в руки газету вековой давности и сравнить её с современной, я думаю что общие черты не претерпели сильных изменений.

Модульная сетка в веб-дизайне.

Если взять практически любой известный и популярный сайт, то можно легко обнаружить “следы” модульной сетки.

Модульная сетка для построения логотипа.

Товарные знаки спроектированные при помощи модулей имеют широкое распространение.

Построение модульной сетки в CorelDraw.

Есть несколько вариантов использования сетки в кореле.

Первый это при помощи стандартной сетки. Она отмечена иконкой под номером 1. Нажимая на эту иконку мы активируем сетку. Вы также можете поставить привязку к этой сетке или настроить её по своему желанию.

Второй способ это построение сетки при помощи направляющих. Мы можем сделать направляющие видимыми или невидимыми с помощью иконки под номером 2.

 

Пример модульной сетки на основе направляющих в кореле на рисунке 4.

Рис 4.

Здесь модуль размером 5 миллиметров. С помощью него мы построили более сложную сетку.

Вы можете придумать свой способ, главное чтобы он помогал вам в упорядочивании информации.

Использование модульной сетки в AdobePhotoshop.

Аналогично сетка строиться и в фотошопе. Но здесь дизайнеры пошли дальше и сейчас можно скачать различные плагины для построения модульной сетки с заданными параметрами. Это значительно облегчает и упрощает создание лаконичных дизайн-макетов.

Выводы.

Модульная сетка используется повсеместно. Её значение велико, а возможности нельзя недооценивать.

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

(Visited 2 607 times, 1 visits today)

alexsv.ru

Пять простых шагов к разметке модульными сетками. Шаг 2 | Дизайн

Я несколько раз упоминал о Золотом или «Божественном» сечении. (Далее автор дает несколько ссылок на, к сожалению, уже не существующие статьи. Тем, кто не хочет/не может пройти по ссылкам, он тезисно указывает содержимое. Мы автоматически причисляемся к ним. — прим. Пер.)

Отношение золотого сечения также известно как число φ. Это отношение используют для того, чтобы придать создаваемым вещам естественный вид. Несмотря на то, что это сухая математика, композиция, выстроенная в этом отношении придает ощущение «правильности».

Это очень обсуждаемая тема: красота может быть измерена и, что более важно, сконструирована. Если вы хотите создать что-либо радующее глаз, вам надо выполнить несколько приемов, чтобы убедиться, что вы двигаетесь в верном направлении. Заметьте, что я не говорю: «Следуй этим правилам, и ты создашь шедевр». Я всего лишь говорю, что существует несколько методик, следуя которым вы можете создать красивую и практически идеальную по композиции вещь. Эти качества достанутся ей «по наследству».

Композиция может придать вещам полезность

Существует теория под названием «Эффект полезной красоты». Я писал об этом ранее и, должен вам сказать, нашел эту теорию довольно интересной. В ней заключено предположение о том, что вещи, созданные для того, чтобы радовать глаз, оказываются более полезными¹.

Создавая сетки с использованием этой теории и сбалансированных отношений (в частности, Золотого сечения), вы с большой гарантией добьетесь красивого сбалансированного макета, который (согласно теории) в последующем окажется «полезнее» для пользователя. Кажется, я немного зациклился на этом, так что подведу итог: грамотно разработанная сетка может придать макету не только красоту и гибкость, но и полезность².

Переходя к практике

Так же, как и в первой статье, я предлагаю вам создать макет для повседневной работы. Боюсь вызвать недовольство у тех, кто прежде всего является веб-дизайнером, так как этот пример будет из печатного мира. Но, тем не менее, это основы теории, и их надо знать и понимать, они применяются в любой сфере творчества.

Итак, мы создадим макет книги³. Вопреки предыдущему примеру, данный макет будет для разворота из двух страниц. К тому же, сетка будет асимметричной, опять же вопреки рассмотренной в предыдущей статье симметричной сетке.

Разбиваем страницу

Прежде всего мы определим область для сетки на страницах. Область, где будет располагаться текст или иное содержимое. Представленный способ является одним из простейших для разбиения страницы так, чтобы получить правильно расположенную и сбалансированную относительно всего разворота область для содержимого. (Это ни что иное, как канон Ван дер Граафа, о котором я уже упоминал. — прим. Пер.)

Области, ограниченные красным, и есть место под создаваемую сетку.

Применяем золотое сечение

Данное действие крайне просто. Мы применяем разбиение золотого сечения и делим созданные области в отношении 1:φ. После применения у нас в распоряжении две колонки: A и B.

Создаем сетку

Итак, у нас есть колонки, в которые мы хотим «вживить» сетку, чтобы потом располагать согласно ей нужное для нас содержимое. Сначала мы продлим линии, очерчивающие область под содержимое, чтобы придать диаграмме классический вид.

Теперь позволим себе небольшой трюк: через точки пересечения прямых, создающих область содержимого, проведем прямую. Затем поделим пополам получившуюся область между верхней границей области содержимого и проведенной линией. Нижнюю часть полученного разбиения я называю «висячей строкой». Конечно, это неправильно с точки зрения терминологии, но, тем не менее, содержимое эффектно отделяется, создавая целостность представления по всей книге. Этот прием позволяет глазам читателя отдыхать при переходе от страницы к странице.

Используя эти дополнительные строки, мы можем создавать произвольные области, наполняя книгу. Дополнительные «пустоты» позволяют эффективно отделять различные типы содержимого.

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

Говоря о модульных сетках

Создание сетки подобным образом — используя отношения для создания относительных линий, которые образуют композицию — гарантирует баланс в сетке.

Должен вам признаться, что это все эмпирика. Большое количество макетов, основанных на сетках, являются продуктом постоянных экспериментов с содержимым: балансом между пустым пространством и конкретными элементами (фотографиями, текстом). Также, в этой области существует множество устоев и соглашений. Не изобретайте колесо заново, изучайте приемы, используемые в журналах на любую тему — начиная от архитектуры и заканчивая воспитанием детей (серьезно, зачастую журнал, относящийся к совершенно удаленной теме, может быть великолепно сверстан).

Все, что я хочу сказать: эксперименитуйте. Потому что верстка сетками не должна быть тупым применением правил. Имейте представление о том, что вы ходите создать, не зацикливаясь на самом процессе создания вашей сетки.

Примечания к статье

¹ — далее в этом абзаце автор пишет, что данная теория может бросить вызов свере юзабилити, которая <уже изрядно запятнана>. Знатоки, подскажите мне, как лучше перевести эту фразу: «It is an interesting theory and can certainly challenge the usability field, which is often tarnished with the ‘ugly brush’». По-моему, эту фразу вообще стоит отпустить. Что я, в общем-то, и сделал. Но считаете ли так вы?

² — быть может кто-то прочитает оригинал и скажет, что я слишком сократил эту часть. К тому же, сам термин «полезность» немного коробит слух, даже при чтении про себя. Тем не менее, я решил сделать так. Если есть возражения/предложения, с радостью рассмотрю.

³ — надо упомянуть, что здесь автор ссылается на уже недоступную статью Design in Flight. В принципе, рассмотренный пример ни что иное, как мюсли из книги Яна Чихольда. (По-другому язык это назвать не поворачивается).

Заключение

Следующая статья цикла уже будет относиться непосредственно к интернету. Все мало-мальски важные события (в том числе и начало/конец перевода) я пишу в twitter.

 

vremenno.net

Свободное пространство и модульная сетка ‹ Виртуальная школа графического дизайна

Поговорим о том, как лучше располагать элементы дизайна на странице.

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

Они пытаются разместить слишком много информации в маленьком пространстве. Запомните, что свободное пространство — ваш добрый друг. Оно облегчает аудитории процесс чтения вашего материала. Правильно использованное пространство делает ваш проект более изящным и легким для восприятия.

Основная стратегия композиции вашего дизайна должна начаться с разметки. Если вы не хотите, чтобы ваша работа выглядела хаотично, то вам нужно систематизировать всю визуальную информацию. Здесь нам на помощь приходит модульная сетка или, говоря иначе, разметка для расположения элементов на странице. В вебдизайне роль модульной сетки выполняет таблица <table>.

Вот несколько примеров модульных сеток. Обратите внимание, насколько разнообразными и уникальными они могут быть.

Для того, чтобы продемонстрировать необходимость использования модульной сетки, здесь я привожу три варианта одной и той же работы.Два первых варианта — с четко разработанной модульной сеткой, а последний — без.

Пример 1

Пример 2

Пример 3

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

В композиции первых двух изображений используется традиционная модульная сетка. В первом изображении линии расположены горизонтально и вертикально с равными промежутками.

Отличие второго варианта лишь в том, что линии расположены наклонно. Все элементы композиции привязаны к этим наклонным линиям.

А вот в последнем примере вообще нет никакой модульной сетки. Интервалы между графическими элементами абсолютно случайны и поэтому в композиции отсутствует ощущение единства.

Мой аам совет : всегда используйте модульную сетку для построения красивой и грамотной композиции (ну, конечно, если вы не занимаетесь искусством в чистом виде, где, как известно, нет никаких правил)!

Предвкушаю ваш вопрос: Неужели ты, Боб, каждый раз выстраиваешь модульную сетку, прежде чем приступить к работе. И не лень тебе?

Честно говоря — не всегда, хотя и стараюсь. Но на начальных этапах своей дизайнерской деятельности я не пренебрегал этим важным правилом и добросовестно выстраивал модульную сетку. По мере накопления опыта, вы научитесь работать с воображаемой сеткой без необходимости чертить её на странице, и любое отклонение от задуманной разметки будет заметно аашему взгляду.

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

Итак, какие преимущества дает нам модульная сетка?

1. Модульная сетка помогает нам соблюдать один из основных принципов дизайна — принцип выравнивания. Отдельные элементы могут быть ни к чему и не привязаны, но желательно, чтобы элементы находящиеся в группе, были выровнены по отношению друг к другу, а группа элементов — по отношению к другим группам.

2. Модульная сетка помогает соблюдать равномерные интервалы между элементами.

3. Модульная сетка помогает рационально использовать свободное пространство, которое облегчает чтение текста и восприятие всей композиции.

Теперь пример из практики.

Представьте, что ваш заказчик просит вас сделать брошюру из 50 страниц. Вы выполняете работу по всем правилам хорошего дизайна. Страницы брошюры имеют красивую модульную сетку, много свободного места и читать их легко и приятно.

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

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

Если заказчик этого не понимает, то предложите ему показать оба варианта своим друзьям и спросить их мнения. Если же ни что не смогло его вразумить, то увы, вам не остается ничего другого, как удовлетворить его желание. Кстати, о подобной ситуации я уже рассуждал в своей статье «Что такое хороший дизайн?»

В завершение дам вам совет.

Не перегружайте свой дизайн! Свободное пространство и поля на странице важны и необходимы для зрительного восприятия. Помните, что задача хорошего дизайна — быстрая передача необходимой информации, поэтому дизайн должен не препятствовать, а помогать усвоению этой информации.

Если страница перегружена информацией и нет четкого разделения элементов на группы, зрителю будет трудно сконцентрироваться на главном и, скорее всего, у него не возникнет желания разбираться во всей этой путанице.

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

Моё любимое правило дизайна — «лучше меньше, но лучше».Это касается и формы, и содержания. Эту мысль я продолжу в своих следующих статьях, в которых расскажу о преимуществах сокращения количества цветов и шрифтов в работе.

Поделиться в соц. сетях:

creativshik.com

---

Смотрите также

• 
  Журнал что почем
• 
  Журнал формативного оценивания
• 
  Журнал психология отношений
• 
  Журнал поиска очистить
• 
  Новая земля журнал
• 
  Советское кино журнал
• 
  Мгоу электронный журнал
• 
  Журналы для кхо
• 
  Журнал экономические отношения
• 
  Журнал учета учебников
• 
  Детская психология журнал