На третьем этапе определяются смысловые блоки, из которых составляются различные конструкции, формирующие макет. Существует несколько видов конструкций, состоящих из отдельных модулей:
В одну строку (модули идут друг за другом).
Такой вид конструкции используют для представления информации, выражающей определённую последовательность.
Вертикально (каждый модуль с новой строки).
Вертикально логичнее всего завёрстывать списки.
Беспорядочное распределение модулей.
Не связанные между собой модули можно использовать, если блоки текста между собой равноправны.
По сетке [8].
В этой конструкции смысловые блоки текста располагаются по модульной сетке, выбор которой остается за дизайнером.
Чтобы определиться с выбором конструкции, её нужно «примерить» на текст. Первое, на что падает взгляд читателя, -- название. По нему читатель определяет, интересен ли предложенный ему контент. В зависимости от характера и назначения текста, используется или оригинальное название произведения, или генерируется новое. Выбор заголовка во многом определяет настроение объекта, а значит, и будущее оформление. Далее смысловые блоки текста распределяются также в зависимости от характера информации, ее объема и эстетики.
Грамотный человек читает текст и получает из него информацию. Тем не менее, в зависимости от его предназначения, воспринимать текст (на знакомом языке) можно очень по-разному. Текст можно именно читать, спокойно перелистывая страницу за страницей в достаточно толстой книге, обращая внимание только на смысл. Текст для сплошного чтения должен быть как можно более нейтральным. Такое его качество складывается:
- из ритмичной структуры набора, равномерной и сочетающейся с ритмами работы человеческого организма;
- из максимально привычной формы знаков и промежутков между ними, когда мозг улавливает смысл сочетания букв (и заставляет глаз двигаться вперёд) раньше, чем считывает их формы в отдельности.
По этой же причине читатель обычно не замечает опечаток в тексте. Общая форма слова сохраняется, и человек, поняв его смысл, движется дальше. Впрочем, так можно перепутать слова разные по смыслу и похожие по форме. Читатель увидит скорее то слово, которое он ожидает в контексте. На этом приёме бывают основаны графические шутки (как безобидный вариант) и недобросовестные рекламные и маркетинговые ходы.
Можно выделять фрагменты текста из целого. Нарушение ритмической структуры текста привлекает наше внимание; систематические выделения в тексте усложняют сплошное чтение, но упрощают выборочное. Они создают структуру и иерархию, позволяющие отличать друг от друга разные типы информации и отделять главное от второстепенного. Впрочем, акценты в издании для выборочного чтения (несмотря на то, что их задача--привлечь внимание к части текста) рассчитаны на те же условия, что и сплошной текст: нормальное освещение и расстояние 25-40 см от глаз.
Некоторые тексты предназначены для восприятия в нестандартных условиях: с очень большого расстояния, при плохой видимости или недостаточном освещении, в очень мелком кегле. Обычно это короткие фразы: предупреждения, таблички, знаки, другие элементы визуальной коммуникации. В таких текстах важно не столько подсознательное понимание смысла, сколько считывание отдельных знаков. Узнаваемость формы букв здесь важна больше, чем общая ритмическая структура. Привычки и подсознание сокращают время на восприятие знакомых слов и их сочетаний. Но если чело век сталкивается с незнакомым или непривычным словом, то подсознание мало что может подсказать ему. Тогда мы начинаем воспринимать слово буква за буквой, тем самым делая значительную паузу в сплошном чтении. Элементы визуальной коммуникации содержат достаточно много незнакомых слов (например, географических названий). Поэтому они обычно выполняются с учётом требований скорее различимости, чем удобочитаемости.
Как выбрать правильный шрифт?
Отказаться от шрифтов с причудливым начертанием. Они усложняют восприятие информации и не подходят для большинства текстов, однако подходят для одиночных шрифтовых композиций.
Отказаться от шрифтов с сомнительной репутацией. Некоторые шрифты, например, Comic Sans, уже давно не воспринимается всерьез, так как чрезмерно использовался в Интернете для оформления юмористического контента.
Выбор стандартных, дефолтных шрифтов: неустаревающая классика, к которым можно применить совершенно новые приёмы, если того требует композиция и характер объекта.
Смешивание шрифтов:
Не рекомендуется одновременное использование более двух шрифтов в одной разработке - это запутает пользователя при поиске важной информации.
Использование контрастных шрифтов: гротеск со шрифтом с засечками, рукописный - с модерном. Важно сохранить контраст. Два схожих шрифта рядом выглядят неряшливо.
Выбор шрифтов с одинаковой высотой букв. Это поможет выдержать одинаковый уровень насыщенности абзаца. Кроме того, такой текст будет легче читаться.
Набор текста:
Размер шрифта. Не зря для конкретных документов определен стандарт кегля - такие тексты наиболее удобны для воспроизведения в стандартных форматах при печати. В веб-дизайне не рекомендуется использовать кегль меньше 13 пт; также в оформлении какой-либо продукции запрещено использовать шрифт размером менее одного миллиметра.
Корректная длина строки помогает пользователю не сбиться при переходе на новую строку, а также легко отследить и вспомнить информацию из начала. Слишком длинные строки утомляют зрение, а слишком короткие придают тексту рубленный вид.
Интерлиньяж должен соответствовать размеру шрифта. Чтобы достигнуть баланса между текстом и «воздухом», нужно сделать межстрочное расстояние примерно в полтора раза больше высоты строчных букв. В большинстве случаев для работы подходит интерлиньяж, равный 125% размера шрифта.
Абзацы:
Выравнивание по левой стороне. Выключка по правой стороне подходит в основном для эпиграфов или дополнительных блоков текста, но не для основного, выравнивание по ширине - в основном для документов и книг - требует гораздо больших доработок из-за автоматически увеличенных пробелов. Выключенный влево текст легче читать, так как глаз видит чёткое визуальное окончание каждой строки. Но по-русски такой текст удобно читать, если строка не слишком длинная.
Отсутствие большого числа переносов. Вообще, переносов в верстке веб-продукта по возможности следует избегать. Если знаков переноса слишком много, это рассеивает внимание пользователя.
Использование красных строк или отбивок. Этот пункт о том, что следует пользоваться только одним из двух приёмов.
Узкая колонка. Если требуется набрать небольшую колонку текста, стоит использовать узкий шрифт. Так текст будет не только смотреться лучше, но и легче читаться, так как в строку поместится больше символов.
Висячая пунктуация. За линию набора можно выносить кавычки, скобки, дефисы, точки, запятые. Это всегда выглядит элегантно и помогает сохранить нужную форму абзаца. Но не всегда.
«Вдовы» и «сироты». Речь идёт о висячих строках. «Вдова» -- это одно слово на целой строке в конце абзаца или очень короткая строка в конце текста или страницы. «Сирота» -- это висячая строка, которая попадает на начало новой страницы или колонки. Их следует избегать. Исправить эти досадные недоразумения можно, уменьшив межбуквенное расстояние, перенеся строку или отрегулировав размер шрифта.
Злоупотребление пробелами. Комбинации клавиш позволяют совершить такие действия как перенос на новую строку, создание нового абзаца - это экономит время и делает текст более структурированным.
Слова [6]:
Кернинг. Скажем так: не все разработанные гарнитуры идеальны, поэтому налаживать расстояние межу символами приходится вручную, и не всегда автоматический кернинг дает стопроцентный результат.
Трекинг. Следует помнить: при увеличении размера шрифта, расстояние между символами тоже увеличивается. Поэтому, если установить в тексте крупный заголовок, понадобится также пропорционально скорректировать расстояние между символами и словами.
Выделения в тексте:
Выделить важную мысль или слово, на которое нужно обратить внимание, можно самыми разными способами. Не переусердствуйте с ними. Не стоит выделять целое предложение одними прописными -- новичок не всегда может сделать это к месту. Просто используйте полужирное начертание шрифта.
Строчные - без разрядки. Не стоит увеличивать расстояние между строчными. Причина проста: снижается удобочитаемость.
Прописные - с разрядкой. Увеличивать расстояние стоит прежде всего между прописными буквами. В этом случае читабельность возрастает.
Набор заглавными. Не нужно злоупотреблять набором текста заглавными символами. Длина такого набора не должна превышать одну строку.
Отсутствие капители (без надобности). Если в шрифт не включено специальное капительное начертание, лучше его не вводить в работу вообще (речь не идет о художественных произведениях)
Общий вид символов: изменение ширины букв - только для художественного произведения.
Настроение макета зависит от выбранного стиля. Он может быть основан на содержании текста, брендбуке компании, пожеланиях заказчика и т. д. Типографика как искусство наиболее ярко выражено в жанре плаката, поэтому мы рассмотрим некоторые примеры именно этого направления - вышеописанные принципы подходят для любого объекта типографики, тогда как плакат является одной из самых творческих жанров, и у него нет таких ограничений в оформлении, как у той же книги.
На данный момент времени человек владеет таким ресурсом как Интернет, в котором собрано множество примеров из разных стилей верстки и оформления, начиная с классических швейцарского, модерна и минимализма (рис. 17-19) и до нестандартных решений вроде паттерна. Этот подход подходит не только для плаката, но и для общего определения эстетики текста, особенно если он предполагает дополнение в виде наличия иллюстраций.
Рис. 17
Рис. 18
Рис. 19
На примере первого плаката (в швейцарском стиле) и третьего (минималистичного) можно проследить, как дизайнеры использовали приём с сеткой для того, чтобы визуально разграничить текстовые блоки (на плакате в стиле минимализм сохранены фрагменты сетки). Первый плакат также показывает, как выбор цвета позволяет дополнить и подчеркнуть информацию, третий плакат, напротив, представляет собой образец простейшего контрастного отношения. В обоих случаях присутствует иерархия текстовых блоков с целью привлечь внимание пользователя сначала к конкретной части изображения. Плакат в стиле модерн, пожалуй, наиболее выделяющийся по оформлению из ряда представленных работ. В нем текст помимо своей главной функции - информационной - является поддержкой геометрических форм, представленных на листе и задающих композицию работе.
Швейцарский стиль (рис. 17, 20-22) является, пожалуй, одним из самых ярких и узнаваемых в искусстве типографического плаката, эта центрально-европейская тенденция сейчас считается интернациональной, а зародилась она в XIX веке, когда появилось разграничение в понятиях дизайна и изобразительного искусства, а также возникло направление грид-дизайна (дизайн с использованием математических сеток).
Рис. 20
Рис. 21
Рис. 22
Рис. 23. Работа Армина Хофманна. Изображения MoMa
Принципы оформления в швейцарском стиле:
Гротескный шрифт;
Флаговый набор;
Слепые строки для отделения абзацев;
Один шрифт;
Явное использование простой модульной сетки;
Минимальная цветовая палитра, работа с контрастами;
Черно-белая фотография (рис. 23);
Форма и контрформа.
В книге Питера Мэггса «История графического дизайна» рассказано, что международный типографический дизайн начинается с математической сетки.
Эти «сетки» являются «наиболее понятным и гармоничным средством для структурирования информации». Веб-дизайн подразумевает собой использование сетки для проектирования, которая позволяет значительно упростить создание иерархии контента. Сетки гибкие и последовательные, четкие и хорошо работают с коэффициентами (т.е. подходят для использования правила третей, золотого сечения и т.д.). В дополнение к сеткам в швейцарском стиле отдается предпочтение асимметричной компоновке, шрифтам без засечек, а вместе иллюстраций используются фотографии. [10]
Новаторы этого движения объединили элементы других художественных направлений, чтобы разработать швейцарский стиль с его лаконичностью и простотой [5]. Отдельные элементы взяты из дизайнерских разработок школы Баухаус (рис. 15, 16), группы Де Стейл и Новой типографики, и это отобразилось во всех работах Эрснта Келлера, Макса Билла, Йозефа Мюллера Бракмана и Армина Хофманна - пионеров швейцарского стиля.
Инструменты швейцарской типографики:
- шрифт;
- верстка;
- модульная сетка;
- цвет;
- контрформа;
- фотография.
В швейцарском стиле отдается предпочтение классическим шрифтам без засечек - без них система сетки потеряла бы смысл: гарнитуры с засечками имеют свойство выстраивать собственные полосы-«рельсы», благодаря которым человек способен читать длинные тексты, не соскакивая взглядом на другие строки. Уделяя меньше внимания декору, швейцарский стиль фокусирует внимание пользователя на содержании, а не украшениях - именно поэтому шрифт Гельветика, разработанный в 1957 году типографом Максом Мидингером, приобрел огромную популярность и уже более 60 лет остается одной из наиболее используемых гарнитур в мире. Устранение отвлекающих факторов заставляет пользователю воспринимать и изучать сложный информационный дизайн, а не просто смотреть и восхищаться им. Из-за этого шрифты, используемые в швейцарском стиле заточены под решение таких задач как: