Верстка и структура журналов. Лекция 1 3 курс 5 сем

Журна́л (фр. journal — дневник, подённая записка, от фр. jour — день, сутки) — печатное периодическое издание.
В соответствии с ГОСТ 7.60-2003 «Печатные издания» «периодическое журнальное издание, имеющее постоянную рубрикацию и содержащее статьи или рефераты по различным общественно-политическим, научным, производственным и др. вопросам, литературно-художественные произведения».

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

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

По предметно-тематической направленности:
- универсальные;
- специализированные.
По целевому назначению:
- художественные;
- публицистические;
- развлекательные;
- научные;
- рекламные;
- информационные

ФОРМАТ ЖУРНАЛА
А1 594х840 мм.
А2 594х420 мм. половина формата А1.
А3 420х297 мм. четвертая часть от формата А1.
А4 297х210 мм. восьмая часть от формата А1.
А5 210х148,5 мм. шестнадцатая часть от формата А1.
А6 148,5х105 мм. тридцать вторая часть от формата А1.

Содержание (структура)

Обложка

Алгоритм верстки
Результаты исследований
«Что читатели воспринимают в первую очередь»:
80% - общий вид (дизайн) полосы
75% - рассматривают фото
56% - рассматривают заголовки
29% - рассматривают подписи к фото и выносы
25% - основное внимание к текстам
Исследования Eye­Track, 1990
Содержание → Структура → Конструкция → Стиль

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

Алгоритм верстки

Алгоритм верстки
Содержание → Структура → Конструкция → Стиль
Структура
Структура — это мост от содержания к форме.
Один и тот же материал можно по-разному структурировать: часто дизайнер сам решает, на какие части разделить текст и как расставить акценты.

Алгоритм верстки

Алгоритм верстки
Содержание → Структура → Конструкция → Стиль
Конструкция
Конструкция — это визуальное представление структуры и скелет будущего макета.
Если структура невнятная, то и конструкция будет такой же. Одну и ту же структуру можно отобразить с помощью разных конструкций.
Пример:
список — набор однородных и равнозначных элементов — заверстывают в одну строку (все пункты друг за другом), располагают вертикально (каждый пункт с новой строки), по сетке (каждый пункт в отдельном модуле) или вообще беспорядочно разбрасывают по странице.

Алгоритм верстки

Алгоритм верстки
Содержание → Структура → Конструкция → Стиль
Стиль
Стиль — это настроение и «вкус» макета. Источник стиля следует искать как в содержании, так и далеко за его пределами: книга про Гутенберга необязательно должна быть похожа на 42-строчную Библию.
Абсолютно любой элемент — от пропорций формата до межбуквенного расстояния — является стилеобразующим, однако в неравной степени. К одной и той же конструкции применимы разные стили.
Перепрыгивать через этапы опасно, как и менять их местами. Если начать со стиля, есть вероятность погрязнуть в оформительстве. Если пропустить структуру и перейти от содержания сразу к конструкции, то последняя может оказаться неподходящей для материала. И так далее.

Алгоритм верстки

Алгоритм верстки

Эффектная типографическая структура
1. Ограничить набор шрифтов
Не используйте слишком много шрифтов. Целью создания структуры является ясность. Использовать два шрифта для одного дизайна – это самый безопасный стандарт.
Интересный шрифт нужно сочетать с более простым – первый для заголовков, второй для основного текста.
Слишком большое количество шрифтов будет напрягать глаз и отвлечет от основного дизайна.

Эффектная типографическая структура
2. Заполнение и контраст
Сочетание шрифтов serif и sans-serif – универсальный принцип дизайна. А все потому, что сложные, интересные и часто изящные шрифты serif хорошо сочетаются с простыми, чистыми шрифтами sans-serifs, создавая легкую структуру, не вызывающую напряженность.
Надо быть осторожным соединяя два serif или два sans serif шрифта – шрифты из одной классификации обычно приводят к непонятному смешению заполнения и контраста.
Не стоит слишком акцентировать контраст, потому что, выбор двух одинаково ярких шрифтов может привести к неожиданному (отрицательному) результату.

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

Эффектная типографическая структура
4. Размер
Для того чтобы люди смогли понять то, что вы хотите сказать, нужно установить баланс между основным текстом и дополнительными элементами.
Выбирайте такой шрифт, который действительно поможет передать ключевую информацию.
Поскольку мы можем использовать различные по размерам шрифты, необходимо быть внимательным: если вы хотите выбрать шрифт с минимальными декоративными качествами, как Thirsty Script, то это может показаться непрофессиональным и будет трудным для чтения. Например, Open Sans отличный выбор для основного текста, но также будет хорошо смотреться в качестве заголовка, если он будет жирным.

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

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

Характер верстки
Существует четыре группы сложности верстки:
Верстка простого (сплошного) текста;
Верстка текста с нешрифтовыми выделениями, таблицами, формулами;
Верстка текста с выделениями, таблицами, формулами, иллюстрациями с подписью, многоколонная верстка;
Сложная верстка (дополнительно к третьей группе - композиционные выделения)

Характер верстки
Верстка текста
Единообразие
Никаких «висячих строк»
Межсловесный пробел от ¼ до ¾ кегельной
Приводная верстка (совпадение строк на сторонах)
Минимальное количество текста на полосе – три строки

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

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

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

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

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

Типографические модульные сетки
Европейский прямоугольник
Этот прямоугольник обеспечивает основу европейского бумажного стандарта серии А, соответствующего стандартам ISO.
Имеет следующее отношение сторон: один к квадратному корню из двух (1:1,414). Каждая половина листа всегда будет сохранять свои пропорции постоянными, независимо от того, сколько раз размер листа делится пополам.

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

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

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

Расположение элементов дизайна

Расположение элементов дизайна

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

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