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

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

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

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

1. Контрастность оттенка возникает, когда оттенок или цвет отделяются черными или белыми линиями. Белые линии ослабляют «силу» и внешний вид цвета, а цвета вокруг белых линий кажутся темнее. Напротив, черная линия вокруг цвета усиливает впечатление цвета, а цвета вокруг черных линий кажутся светлее.
2. Светло-темный контраст — это контраст между светлыми и темными значениями.
3. Холодно-теплый контраст относится к контрасту между холодными и теплыми цветами. Теплые цвета — это красный, оранжевый и желтый цвета цветового круга, а холодные — синий, зеленый и фиолетовый.
4. Дополнительный контраст — это контраст между цветами, расположенными непосредственно напротив друг друга на цветовом круге.
5. Одновременный контраст встречается между двумя цветами, которые почти дополняют друг друга. Один цвет — это одна часть слева или справа от дополнительного цвета другого.
6. Контраст насыщенности относится к контрасту между интенсивными цветами и третичными или приглушенными цветами. Приглушенные цвета кажутся более тусклыми, когда они расположены рядом с интенсивными цветами, а интенсивные цвета кажутся более яркими, когда они соседствуют с приглушенными цветами.
7. Контраст расширения относится к контрасту между областями одного цвета и другого. Различные области одного цвета нужны для баланса другого.

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

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

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

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

Изменение масштаба (размера) — один из основных инструментов в наборе инструментов дизайнера. Изменение масштаба важно на двух уровнях. Первый носит чисто композиционный характер: чтобы композиция была динамичной и эффективной, необходимо разнообразие размеров ее элементов. Если все элементы имеют одинаковый визуальный вес, композиция будет плоской. Еще один аспект разнообразного масштаба — концептуальный. Если дизайн визуально искажает соотношение размеров одного элемента к другому, зритель сразу же выясняет, почему. Это отличный способ привлечь внимание зрителя и добавить изюминку в сообщение, встроенное в дизайн. Прекрасным примером этого является рекламная кампания «Думай о малом» 19-го века.60-х годов для Volkswagen Beetle.

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

Близость элементов является частью гештальт-теории, которая представляет собой структуру пространственных отношений, разработанную в 1920-х годах немецкими психологами Максом Вертгеймером, Вольфгангом Колером и Куртом Коффкой. Термин гештальт означает единое целое, и указывает на лежащую в основе концептуальную структуру этой структуры. Гештальт работает, потому что разум стремится организовать визуальную информацию. Композиция, созданная с использованием гештальт-принципов, предопределяет то, как каждый из ее элементов пространственно взаимодействует с другими. В этой системе отношений непосредственная близость объектов, независимо от формы, размера или содержания, указывает на связь. Существует шесть основных гештальт-принципов: (1) сходство, (2) продолжение, (3) замыкание, (4) близость, (5) фигура/фон и (6) симметрия и порядок.

Подобие

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

Продолжение

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

Закрытие

. Замыкание — это метод проектирования, в котором используется склонность ума завершать незавершенные формы (см. рис. 3.21). Этот принцип работает, если зрителю предоставляется достаточно визуальной информации, чтобы он мог воспринять полную форму в негативном пространстве. По сути, ум «закрывает» форму, объект или композицию. В приведенном выше примере треугольник формируется сознанием зрителя, который хочет закрыть форму, образованную пробелами и пространствами соседних кругов и линий. Частичный треугольник, обведенный черным, также намекает на недостающую форму.

Близость

Близость — это расположение элементов, создающее ассоциацию или взаимосвязь между ними (см. рис. 3.22). Если отдельные элементы похожи, то они, вероятно, будут восприниматься сначала как целое, а затем как отдельные компоненты. Если, как в приведенном выше примере, некоторые компоненты образуют большое «целое», аналогичные элементы, расположенные вдали от основной формы, также будут связаны с большой формой. В этом случае зритель интерпретирует их как отпадающие или удаляющиеся от основной формы. Используемые формы не обязательно должны быть геометрическими, чтобы создать эффект близости. Любые компоненты, имеющие сильное сходство по форме, цвету, текстуре, размеру или другому визуальному признаку, могут достичь близости. Близость также может быть достигнута с помощью непохожих форм и текстур, если они умно и концептуально составлены.

Фигура/фон

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

Симметрия и порядок

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

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

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

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

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

Баланс и симметрия являются важными дизайнерскими качествами, поскольку они глубоко укоренились в ДНК человека. Поскольку наши тела симметричны, у нас есть сильная ассоциация и удовлетворение от сосредоточенного, симметричного дизайна. Уравновешивание визуальных элементов композиционно успокаивает напряженность и обосновывает дизайн (см. рис. 3.28). Это важно, если вы хотите передать ощущение стабильности зрителю. Когда мы смотрим на дизайн, мы используем наше врожденное чувство того, что представляет собой «правильный баланс», чтобы оценить его стабильность. Если эта стабильность отсутствует, мы чувствуем напряжение, которое может противодействовать сути сообщения. Композиции с центрированным дизайном очень хорошо работают для стабильного контента, обеспечивающего безопасность, но что делать с контентом, который требует внимания, напряженности или волнения?

Когда центрированная (или стабильная) композиция нежелательна, наилучшей стратегией является разработка асимметричной композиции. Асимметрия исследуется в графическом дизайне последние 150 лет, и дизайнеры продолжают открывать новые стратегии, которые кажутся свежими. Асимметрия не имеет эмпирических правил, а руководствуется неожиданным уравновешиванием распределения основных элементов в пространстве композиции. Контраст и контрапункт — основные средства композиции при асимметрии — крупные формы уравновешивают мелкие; интенсивные цвета уравновешивают нейтральные. Создать асимметричный дизайн непросто, потому что нет четких правил, которым нужно следовать, но по той же причине интересно создавать и интересно видеть.

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

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

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

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

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

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

Название

Функция заголовка — привлечь внимание читателя к содержанию текстового блока. Часто название визуально «ароматно» и обладает сильной визуальной динамикой и энергией.

Подзаголовок

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