Крайне полезная статья о правилах создания журнальной верстки! Очень рекомендую к прочтению.
Прежде чем рассказать о модульной сетке, давайте поймем, что такое модуль.
Подавляющее большинство типографских сеток строится на базе формата листа бумаги, взятого за основу издания. Как вы понимаете, колонки и базовая сетка страниц создается с помощью автоматических команд программы. Сетка может быть самой разнообразной, всё в зависимости от назначения издания и идеи дизайнера.
Сетка создается для всего разворота, а не для каждой страницы отдельно. Это делается для того, чтобы весь журнальный разворот воспринимался бы как единое целое, а не распадался на правую и левую части, а всё издание не выглядело бы как подшивка из разнородных страниц. Сетка разворота может состоять из 2, 3, 4-х и т.д. равных и неравных по ширине колонок.
Одинаковые по ширине колонки создаются в окне создания документа, либо в панели “Поля и Колонки” (Margins and Colomns). Если нам необходимо задать 3 колонки, то мы вбиваем число 3 в соответствующее поле и т.д.
А как быть, если по нашему замыслу не все колонки должны иметь одинаковую ширину? Например, если текст и изображения будут располагаться в 2-х широких колонках, а пояснительная информация – в боковой узкой колонке?
Модульная сетка не обязательно строится из перпендикулярных линий. Иногда дизайнер решает наклонить сетку или вообще придать ей оригинальную форму, Если Вам хочется выйти за рамки привычного – выходите!
Только постарайтесь, чтобы в погоне за оригинальностью Ваша работа не превратилась в сизифов труд. Представьте себе, каково будет сверстать 40-50 страниц с наклонной или фигурной сеткой…
Поэтому, прежде чем оригинальничать, спросите себя, действительно ли это так необходимо и для чего? Если весь журнал будет построен по наклонной, перевернутой или фигурной сетке, то, скорее всего, такая оригинальность удивит читателя не далее, чем на протяжении первых 5 страниц, а далее уже станет раздражать.
А вот если только в одной определенной рубрике журнала появится оригинальная разметка, то это будет не только интересно, но и уместно, поскольку придаст рубрике стильный и узнаваемый вид.
Поговорим о том, как лучше располагать элементы дизайна на странице.
Одна из распространенных ошибок начинающих дизайнеров состоит в том, что они перенасыщают композицию всевозможными элементами и располагают их слишком близко друг к другу.
Они пытаются разместить слишком много информации в маленьком пространстве. Запомните, что свободное пространство — ваш добрый друг
. Оно облегчает аудитории процесс чтения вашего материала. Правильно использованное пространство делает ваш проект более изящным и легким для восприятия.
.
Вот несколько примеров модульных сеток.
Обратите внимание, насколько разнообразными и уникальными они могут быть.
Для того, чтобы продемонстрировать необходимость использования модульной сетки, здесь я привожу три варианта одной и той же работы.
Два первых варианта — с четко разработанной модульной сеткой, а последний — без.
Пример 1
Пример 2
Пример 3
Посмотрите внимательно на эти примеры и, что называется, почувствуйте разницу. Там, где элементы дизайна расположены в соответствии с модульной сеткой, чувствуется порядок и осмысленность композиции. А вот в последнем варианте без модульной сетки, элементы расположены хаотично и, соответственно, нарушают принципы выравнивания, единства и соответствия.
В композиции первых двух изображений используется традиционная модульная сетка. В первом изображении линии расположены горизонтально и вертикально
с равными промежутками.
Отличие второго варианта лишь в том, что линии расположены наклонно
. Все элементы композиции привязаны к этим наклонным линиям.
А вот в последнем примере вообще нет никакой модульной сетки
. Интервалы между графическими элементами абсолютно случайны и поэтому в композиции отсутствует ощущение единства.
Мой аам совет: всегда используйте модульную сетку
для построения красивой и грамотной композиции (ну, конечно, если вы не занимаетесь искусством в чистом виде, где, как известно, нет никаких правил)!
Предвкушаю ваш вопрос: Неужели ты, Боб, каждый раз выстраиваешь модульную сетку, прежде чем приступить к работе. И не лень тебе?
Честно говоря — не всегда, хотя и стараюсь. Но на начальных этапах своей дизайнерской деятельности я не пренебрегал этим важным правилом и добросовестно выстраивал модульную сетку. По мере накопления опыта, вы научитесь работать с воображаемой сеткой без необходимости чертить её на странице, и любое отклонение от задуманной разметки будет заметно аашему взгляду.
Тем не менее, в процессе работы, при необходимости, можно и нарушить структуру модульной сетки. В конце концов, мы ведь , а не математики. Такое нарушение иногда придает работе легкости и свободы выражения. Надо лишь помнить, что эта свобода не должна разрушить общей структуры композиции.
Итак, какие преимущества дает нам модульная сетка?
1. Модульная сетка помогает нам соблюдать один из основных принципов дизайна — принцип выравнивания. Отдельные элементы могут быть ни к чему и не привязаны, но желательно, чтобы элементы находящиеся в группе, были выровнены по отношению друг к другу, а группа элементов — по отношению к другим группам.
2. Модульная сетка помогает соблюдать равномерные интервалы между элементами.
3. Модульная сетка помогает рационально использовать свободное пространство, которое облегчает чтение текста и восприятие всей композиции.
Теперь пример из практики.
Представьте, что ваш заказчик просит вас сделать брошюру из 50 страниц. Вы выполняете работу по всем правилам хорошего дизайна. Страницы брошюры имеют красивую модульную сетку, много свободного места и читать их легко и приятно.
Но заказчик, не понимая подобной эстетики, видит лишь незаполненное свободное пространство и, не желая платить за чистую бумагу, просит впихнуть туда ещё 10 страниц. Как же тогда быть?
Попробуйте объяснить заказчику, что страницы, плотно заполненные содержанием, малопривлекательны и трудны для восприятия, и вряд ли аудитория захочет тратить время на их чтение.
Если заказчик этого не понимает, то предложите ему показать оба варианта своим друзьям и спросить их мнения. Если же ни что не смогло его вразумить, то увы, вам не остается ничего другого, как удовлетворить его желание. Кстати, о подобной ситуации я уже рассуждал в своей статье « »
В завершение дам вам совет.
Не перегружайте свой дизайн!
Свободное пространство и поля на странице важны и необходимы для зрительного восприятия. Помните, что задача хорошего дизайна — быстрая передача необходимой информации, поэтому дизайн должен не препятствовать, а помогать усвоению этой информации.
Если страница перегружена информацией и нет четкого разделения элементов на группы, зрителю будет трудно сконцентрироваться на главном и, скорее всего, у него не возникнет желания разбираться во всей этой путанице.
Напротив, когда в основе дизайна лежит малое количество элементов, имеющих четкую структуру композиции, зрителю будет легко и комфортно, и он быстро усвоит необходимую информацию.
"Сетка — это система помощи, но она не является гарантией, а всего лишь имеет ряд возможных применений, и каждый дизайнер сам может искать решение, соответствующуе его индивидуальному стилю. Но надо научиться использовать сетку. Это искусство, которое требует практики ".
— Йозеф Мюллер-Брокман
По сути, само использование сетки связано с одним из старейших и самых основных принципов дизайна — выравнивания. Наш мозг хочет всё упрощать и делать более понятным. Вот почему мы стараемся навести порядок в вещах, которые кажутся хаотичными.
Естественно, чем быстрее мы всё правильно организуем, тем быстрее наш мозг сможет определить модель и двигаться дальше. Сетки настолько упорядоченны, что почти не требуют интерпретации с нашей стороны.
Рассмотрим два макеты страниц представлена на рисунке ниже:
Хотя оба эти изображения — всего лишь несколько прямоугольников, набор в верхней части кажется принципиально лучше чем в нижней. Мы можем мгновенно распознать модель, принять её и двигаться дальше. Изображение внизу же вызывает визуальный дискомфорт, так как не имеет четкой картины, порядка, или цели и выглядит как случайный набор форм.
Следует отметить, что неорганизованность также может быть и красивой.
В природе, например, нет чётких линий. Сетки выглядят холодными и жесткими, но помните, что они являются очень эффективным и действенным методом не позволить вашему воображению увязнуть в структурах.
Взгляните на некоторые из самых популярных сайтов с первоклассным дизайном. Скорее всего, они использовали сетку. Сетки позволяют стабилизировать структуру веб-страницы и предоставляют дизайнеру логический шаблон для создания сайта.
Использование сетки не означает, что ваш дизайн будет иметь скучный дизайн. Хороший дизайнер должен знать и уметь применять основные правила использования сетки, но это не означает, что он не может нарушать правила.
Проще говоря, сетка — это разделение макета вертикальными и / или горизонтальных направляющими включая поля, пространство и некоторое количество столбцов для того, чтобы заложить основу для организации контента.
Сетки традиционно используется в полиграфии, но также часто применяется и в веб-дизайне. Сетка — это просто инструмент, который помогает в конструкции.
Начиная изучать новые навыки в той или иной сфере, вы должны сначала следовать рекомендациям. Обучение основам гарантирует то, что вы сможете применять принципы эффективно. То есть, сначала — теория, а затем — практика.
Стоит отметить, что существует два способа создания сетки шаблона:
Способ №1: Создайте свою собственную сетку
Есть много различных способов создать свою собственную сетку, но в конце концов, вы в праве выбрать тот вариант, который больше подходит.
Вы можете разделить пустой документ математически, создавая четное или нечетное число столбцов для работы. Ваша сеть может быть сложной или простой, вы можете использовать правила третей или золотого сечения, как вам больше нравится.
Возможно, в этом вам помогут следующие статьи:
Вот несколько примеров сетей, созданных в Photoshop с помощью направляющих (View> New Guide
):
Плагины для создания сеток в Фотошопе
5. Grid System Generator -генератор таких популярных сеток, как 960.gs, Golden Grid, 1Kb Grid, Simple Grid/ установите нужные параметры и нажмите «GENERATE».
Сетки для резиновых/ адаптивных сайтов
Адаптивный веб-дизайн пользуется огромной популярностью на сегодняшний день. Основным из его принципов считается использование резиновой сетки. Более подробно о них вы можете прочитать , а мне бы хотелось немного дополнить эту подборку и добавить ещё несколько ресурсов.
1. — генератор адаптивной сетки
2. Fluid grid calculator — сервис, который позволяет создать резиновую сетки. Введите параметры и получите готовый код.
С чего начинается создание логотипа? С продумывания идеи графического знака? Или подбора шрифта? А, может, с модульной сетки? Сложно сказать, так как в разных случаях нужны разные подходы. Однако многие дизайнеры, которые уже примерно представляют, как должен выглядеть логотип, начинают работу с создания модульной сетки. Использование сетки позволяет создать гармоничный, геометрически выверенный и правильно организованный логотип, который впоследствии можно будет воспроизводить в любых размерах.
Модульная сетка – это очень полезный инструмент в арсенале дизайнера. Особенно для новичков – даже освоив азы работы с направляющими, можно избежать многих ошибок в дизайне. Чаще всего используется обычная квадратная сетка с ячейками данного размера, но это вовсе не означает, что обязательно нужно использовать такой вариант. Структура сетки для создания логотипа может быть любой, например, это может быть сочетание горизонтальных, вертикальных и наклонных направляющих, которые взаимодействуют с окружностями разного диаметра. Какой будет модульная сетка, решает сам дизайнер. Если требуется создать строгий, простой логотип на основе принципов геометрической гармонии – без модульной сетки не обойтись. Только так можно сделать уникальное лого, в котором ширина букв, радиусы закругления элементов и расстояния между символами будут подчиняться определенным стандартам.
Да, такой подход к дизайну логотипа можно назвать слишком механистичным, но зато лого, построенные на основе модульной сетки, выглядят более «правильными» – ведь они созданы с использованием неких принципов. Кроме того, не стоит забывать, что однажды разработанный логотип затем будут воспроизводить другие дизайнеры, и если они будут знать, как выглядит модульная сетка, то им будет гораздо легче справиться с заданием.
Модульные сетки используются в самых разных видах дизайна. Основные правила построения сеток сформировались очень давно – первые признаки использования направляющих можно увидеть, к примеру, в старинных манускриптах. Сетки широко использовались в печатной продукции, а с наступлением компьютерной эпохи совершенно естественным образом нашли себе применение в веб-дизайне.
Что самое интересное, так это то, что многие люди, не только дизайнеры, бессознательно руководствуются правилами построения модульных сеток. К примеру, фотографы, пытаясь получить композиционно выверенный кадр, используют правило третей или правило золотого сечения. Даже классическое выражение «горизонт завален» означает, что фотограф неправильно «использовал» горизонтальные направляющие. Так что дизайнерам логотипов, которые не любят использовать сетку, говоря, что она ограничивает их творчество, следует знать, что любой визуальный объект, имеющий композицию, создан с использованием модульной сетки. Даже если это получилось совершенно случайно.
ПРЕИМУЩЕСТВА МОДУЛЬНОЙ СЕТКИ
Какой тип сетки выбрать, зависит от многих причин – имеет значение лишь конкретный случай. При этом важно не забывать, что дизайнеру должно быть комфортно работать в этой среде. Если использование сетки вызывает дискомфорт и не идет на пользу логотипу, то ее структуру нужно пересмотреть. Невидимые рамки действительно могут мешать, поэтому нужно достаточно спокойно относиться к тому, что некоторые элементы будут нарушать строгую организацию. И это совершенно нормально – ведь символы, которыми набран логотип, имеют разную ширину. В логотипах, в которые используется кириллица, очень сложно придерживаться геометрических принципов. В кириллическом алфавите есть буквы, которые могут привести в дизайнера в отчаяние. Если посмотреть на ту же букву Ю, то становится ясно что мы видим совершенно нелепую конструкцию, которая плохо гармонирует с начертанием других букв, взятых из латинского алфавита. А насекомоподобная Ж? Это вообще страшный сон для любого логотипщика. Но приходится работать с тем, что есть и тут уж не до модульной сетки. Такие символы все равно будут выходить за границы направляющих и с этим нужно смириться.
ПОЧЕМУ СТОИТ ИСПОЛЬЗОВАТЬ СЕТКУ
Логотип можно создать и без использования модульной сетки. Берется готовый шрифт, им набирается название бренда и все. Для графического знака часто тоже не нужно работать с направляющими. Таких логотипов великое множество и это зачастую никак не отражается на узнаваемости бренда. К примеру, логотип Google набран шрифтом Catull. Дизайнер Рут Кедар лишь раскрасила буквы в разные цвета и добавила тени.
Но если логотип создается с нуля, то использование направляющих может стать очень серьезным подспорьем для дизайнера. Сетка помогает сосредоточиться и обратить больше внимания на организационную структуру логотипа. Использование модульной сетки позволяет сфокусироваться и создать логотип, который будет простым и в то же время постоянно актуальным. Если взглянуть на логотипы таких компаний, как Apple, Shell или Nike, то станет ясно, что при их создании использовались простые, классические формы.
С помощью сетки можно создать универсальный логотип, который будет прекрасно смотреться как на визитке, так и на огромном баннере. При этом направляющие, окружности и кривые вовсе не ограничивают полет мысли дизайнера, напротив, они делают его мышление более гибким. В линиях сетки порой можно увидеть гораздо больше вариантов дизайна – ячейки словно подсказывают, как можно переместить символы чтобы, они гармонично смотрелись. То есть, работая с сеткой, дизайнер более эффективно работает с имеющимся пространством.
КОГДА НЕ НУЖНО ИСПОЛЬЗОВАТЬ СЕТКУ
В общем-то, как уже отмечалось выше, на любой логотип, созданный с использованием основ композиции, можно нанести модульную сетку, которая покажет, как именно он был создан. Однако есть несколько аргументов против использования направляющих.
Сетка может ограничивать творчество, так как дизайнер ощущает себя «запертым» среди направляющих. Стараясь не выйти за самим же установленный границы, такой дизайнер испытывает дискомфорт, что не способствует созданию качественного логотипа.
Создание сетки может отнять очень много времени, особенно, если логотип сложный. Очень часто с этим сталкиваются начинающие дизайнеры, которые еще плохо знакомы с законами композиции и поэтому не могут быстро создать сетку.
Так как сетка имеет математическую природу, то легко запутаться во всех этих формах и в результате забыть об основной идее. Нужно всегда помнить, что удачный логотип, это не просто набор геометрических фигур, а их гармоничное сочетание. Стремление некоторых дизайнеров «играть по правилам» зачастую приводит к тому, что у них получается безликий и откровенно неудачный логотип.
ВЫВОД
Все дизайнеры логотипов работают по-разному. Кто-то предпочитает сначала сделать наброски на бумаге, другие сразу же начинают отрисовывать лого на компьютере. Некоторые начинают работу с построения модульной сетки, а другие предпочитают сначала сгенерировать образ и лишь затем сделать его более цельным. Так что нельзя однозначно сказать, что модульная сетка обязательна при создании логотипа. Однако разработку лого можно сравнить со строительством здания. Правильно спроектированный дом простоит дольше, ведь в его основе лежит хорошо продуманный чертеж. То же касается и логотипа: если это корпоративная айдентика, лицо бренда, то лучше всего использовать модульную сетку – ведь логотип будет использоваться компанией на протяжении многих лет. И будет очень хорошо, если он будет композиционно правильным. Ну а для какого-нибудь сайта, который создается, что называется, для души, вполне подойдет логотип, набранный любым красивым шрифтом. И модульная сетка в этом случае не понадобится.
Что такое модульная сетка.
Модульная сетка это система построения визуальной информации на основе блоков – модулей.
(function(w, d, n, s, t) {
w[n] = w[n] || ;
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-269783-9",
renderTo: "yandex_rtb_R-A-269783-9",
async: true
});
});
t = d.getElementsByTagName("script");
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");
Модуль.
Основой модульной сетки является модуль. Модуль происходит от латинского слова modulus – “маленькая мера”. Модулем может выступать любая мера длины, площади или объёма взятая за единицу модульной сетки.
Из истории.
Римский зодчий, Витрувий, в Iвеке до н.э. писал о важности пропорций при построении целого.
Стоит ли говорить о возрасте модульной сетки? Она в буквальном смысле стара как мир. Мы можем видеть пропорциональное модульное деление в древнегреческой архитектуре, когда за основу брался радиус или диаметр колонны и на основе этого деления возводились храмы и сооружения, некоторые из которых сохранились и по сей день.
Для чего нужна модульная сетка.
Модульная сетка позволяет логически структурировать информацию, облегчая тем самым её восприятие. Правильно построенная сетка позволяет легко справиться с вёрсткой как многостраничных изданий так и небольших одностраничных рекламных макетов.
Как правило, ясный и собранный макет оставляет правильное, положительное впечатление. Чёткое и законченное композиционное изложение информации, эстетически более логичное, чем хаотичное. Использование модульной сетки позволяет целиком сосредоточится на информации.
Построение модульной сетки.
Модуль может быть размером в 2 квадратных метра, 3 на 3 миллиметра или 12 на 12 пикселей. Всё зависит от той системы измерений в которой мы его используем.
В веб-дизайне в основном используются модули размером 12, 16 или 24 px. Некоторые рекомендуют брать за основу межстрочное расстояние, что в принципе тоже логично.
Модульные сетки могут быть абсолютно разными. Наиболее примитивной будет сетка состоящая из одинаковых квадратов выстроенных вплотную.
Более сложные модульные сетки используют большее количество элементов. К примеру мы берём за основу модуль Х и получаем сетку с шагом 3Х по горизонтали и 4Х по вертикали. При этом как вертикальные так и горизонтальные блоки разделяются между собой модулем Х.
Нетрудно угадать какой вариант вам понравился, мне лично нравиться первый, тот что слева. У него более явная и чёткая структура. Его найдут более интересным и правильным большая часть людей. Несмотря на то что информация содержится одна и та же, подана она по-разному, а поэтому впечатления после увиденного остаются совершенно разные.
Модульная сетка в айдентике.
Использование модульной сетки в айдентике давно уже стало стандартом. Модульное построение используют начиная с разработки визиток и заканчивают разрабатывая билборды. Использование одной и той же модульной сетки в различных рекламных продуктах создаёт ощущение целостности и единства для всего бренда.
Типографская сетка в журналах и газетах
(function(w, d, n, s, t) {
w[n] = w[n] || ;
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-269783-10",
renderTo: "yandex_rtb_R-A-269783-10",
async: true
});
});
t = d.getElementsByTagName("script");
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");
Типографская сетка является скорее разновидностью модульной сетки из-за специфических особенностей типографского дела.
Журналы просто не могут обойтись без сетки. Чёткая и лаконичная структура притягивает взгляд и облегчает чтение больших объёмов информации.
Модульная сетка не является чем-то обязательным и её использование также дело личных предпочтений и вкусов. Использовать её можно по-разному.
На рисунке 5 вы видите отличный пример использования модульной сетки и сознательное нарушение её границ, что в свою очередь смотрится довольно интересно и заметно оживляет весь разворот.
Редакторы газет одни из первых оценили все прелести модульной вёрстки и на протяжении длительного времени облик газеты незначительно изменился. Мы можем взять в руки газету вековой давности и сравнить её с современной, я думаю что общие черты не претерпели сильных изменений.
Построение модульной сетки в
Corel
Draw
.
Есть несколько вариантов использования сетки в кореле.
Первый это при помощи стандартной сетки. Она отмечена иконкой под номером 1. Нажимая на эту иконку мы активируем сетку. Вы также можете поставить привязку к этой сетке или настроить её по своему желанию.
Второй способ это построение сетки при помощи направляющих. Мы можем сделать направляющие видимыми или невидимыми с помощью иконки под номером 2.
Пример модульной сетки на основе направляющих в кореле на рисунке 4.
Здесь модуль размером 5 миллиметров. С помощью него мы построили более сложную сетку.
Вы можете придумать свой способ, главное чтобы он помогал вам в упорядочивании информации.
Использование модульной сетки в
Adobe
Photoshop
.
Аналогично сетка строиться и в фотошопе. Но здесь дизайнеры пошли дальше и сейчас можно скачать различные плагины для построения модульной сетки с заданными параметрами. Это значительно облегчает и упрощает создание лаконичных дизайн-макетов.
(function(w, d, n, s, t) {
w[n] = w[n] || ;
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-269783-11",
renderTo: "yandex_rtb_R-A-269783-11",
async: true
});
});
t = d.getElementsByTagName("script");
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");
Выводы.
Модульная сетка используется повсеместно. Её значение велико, а возможности нельзя недооценивать.
Хотя во многих проектах можно обойтись банальным выравниванием, этот инструмент нужно отнести к разряду обязательных в вашем арсенале, если хотите делать качественный дизайн.
