5. 4 Принципа дизайна для работы с текстом

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

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

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

  1. Размер
  2. Сочетание шрифтов
  3. Направление текста

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

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

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

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

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

Теперь переходим ко второму способу – это сочетание шрифтов.

Когда мы используем в дизайне одну гарнитуру шрифта, например, Times New Roman, то всё просто. Обычный (регулярный) вариант шрифта считается универсальным и подходит для основного текста. Это оптимальный выбор для больших объемов информации, таких как статьи или инструкции, поскольку он обеспечивает хорошую читаемость и комфортное восприятие при длительном чтении. Используйте его для основного контента, который не требует акцента, чтобы не перегружать визуальное восприятие.

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

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

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

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

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

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

С другой стороны, текст, направленный вправо вниз, часто ассоциируется с негативом, сомнением или упадком. Примеры использования такого текста могут включать фразы вроде «Неудача близка» или «Всё идет не по плану», и его можно встретить в контексте предупреждений и критики. Этот стиль может подойти для оформления постов в социальных сетях о сложных ситуациях, например, о проблемах в работе, личных кризисах или предостережениях о возможных рисках. Такое направление текста помогает передать меланхолию и неоптимистичность.

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

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

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

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

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

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

Двигаемся дальше. А дальше у нас третий принцип дизайна – и это приближенность.

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

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

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

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

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

На этом с теорией всё, приступаем на следующем уроке к практике.