Всем привет! Продолжаю знакомить вас c секретами оформления любого творческого проекта от профессионального дизайнера, преподавателя, издателя и автора книг Джона МакВейда.

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

https://vk.com/@ecovered-sekrety-graficheskogo-dizaina-ot-dzhona-makveida-kartinka-i

А эта новая (и заключительная) порция советов и лайфхаков от Джона посвящается типографике. Итак...

Часть вторая: Шрифт

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

1. При выборе шрифтов ориентируйтесь главным образом на ассоциации и практичность.

Давайте разбираться с этими понятиями по порядку.

Ассоциации, возникающие при взгляде на картинку, бывают двух типов.

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

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

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

Чтобы определиться с ассоциациями этого типа, дизайнеру следует ответить на следующие вопросы:

- Что представляет собой фирма или проект, для которого создается дизайн?

- О какой сфере деятельности и/или исторической эпохе идет речь?

- Как выбранный шрифт визуально взаимодействует с естественными линиями изображения?

Допустим, дизайнеру предстоит трудиться над логотипом современной стоматологической клиники для детей.

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

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

И, соответственно, вопросы, которые он должен задать себе, будут следующими:

- Какую эмоцию или ассоциацию я хочу вызвать у смотрящего на результат моей работы?

- К какому действию хочу его подвигнуть?

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

Как говорила Коко Шанель, у вас не будет второго шанса произвести первое впечатление.

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

Пример неудачного шрифта (Bonfx). Как думаете, велика ли очередь из желающих попасть к доктору Брауну, мастеру косметической стоматологии?

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

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

И вуаля!

Пример стильного логотипа для детской стоматологической клиники с удачно подобранной цветовой гаммой и шрифтом (картинка позаимствована на сайте business.tutsplus.com):

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

Она складывается из двух параметров:

- читабельности, то есть, способности смотрящего распознавать написанное без усилий и сторонней помощи;

- уместности, то есть, соответствия выбранного шрифта требуемым стилю, сфере (жанру) и/или эпохе.

Пример неудачного шрифта (в данном случае, это Curlz MT). «Байкерский клуб Большого Ала» невольно представляется кружком любителей розовых «харлеев» и плюшевых единорогов (Bonfx):

Читабельность шрифтов — параметр конкретный и по большей части технический, а вот их уместность требует от дизайнера некоторой профессиональной сноровки и общей осведомленности.

Давайте поговорим об уместности поподробнее.

Существуют универсальные шрифты, которые, несмотря на долгую историю своего существования, и сегодня продолжают широко и повсеместно применяться. Так, например, Helvetica, стиль которой уходит своими корнями в швейцарскую типографику 1950-х и 1960-х годов (в переводе с латинского helvetica означает «швейцарская») весьма популярна и в наши дни — до 2014 года именно она использовалась компанией Apple как основной шрифт. Без нее также не обошлись дизайнеры Panasonic, Jeep и Lufthansa.

Типографский постер с «гельветикой» (Pinterest):

Но есть шрифты более специфические, что были популярны в какую-то конкретную историческую эпоху и поныне с ней тесно ассоциируются.

Это касается, например, шрифта AvantGarde, характерного для середины ХХ века, или фантазийного шрифта Papyrus, напоминающего смотрящему о древних цивилизациях и диких племенах.

Они менее универсальны и требуют дополнительного, скажем так, содержательного обоснования. Это как если мы пропишем название книги шрифтом в стиле японских иероглифов — с пагодами вместо «шляпок» букв и самурайскими мечами на месте их «лапок». Даже если роман будет называться «Лондонские приключения марсиан», ассоциация с Японией начнет преследовать всякого, кто на этот фолиант взглянет. А потому будет по меньшей мере странным использовать подобную типографику при отсутствии в книге какой-либо связи со Страной восходящего солнца. То же происходит и с некоторыми реально существующими шрифтами.

Например, тот же AvantGarde до сих пор успешно применяет компания Adidas. А почему? Потому что обувное предприятие, возникшее еще как Dassler в 20-х годах ХХ века — в эпоху развития авангардного искусства, в честь которого и назван рассматриваемый шрифт, — к 1950-м превратилось в известную нынче марку, а период с начала 1950-х и до конца 1970-х годов стал периодом быстрого роста компании. Глядя на логотип Adidas, мы считываем: это бренд с давней историей, которой хочется гордиться.

Эволюция логотипа Adidas на протяжении существования компании. С небольшими актуальными поправками, в ее названии всегда использовалась одна из bold версий шрифта ITC AvantGarde Gothic (1000logos.net):

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

Постер к фильму «Аватар» (Avatar) 2009 года режиссера Джеймса Камерона (Pinterest):

Бывает и так, что шрифт тесно связан с конкретной сферой, темой или явлением, что также следует учитывать при его использовании. Например, многими любимые шрифты из группы Optima частенько применяются... в надписях на могильных памятниках и надгробиях. Согласитесь, по этой причине они, вероятно, будут не лучшими кандидатами для украшения обложки любовного романа (а на скольких обложках к любовным романам их можно увидеть!).

Вывод из сказанного о практичности будет таков: идеальный шрифт всегда читабелен и уместен.

Лайфхак от Джона: Боитесь попасть впросак с типографикой? Отдавайте предпочтение нейтральным современным шрифтам без засечек и не промахнетесь. Также обратите внимание на актуальные сегодня:

Gotham Narrow

Myriad Pro

Avenir Light

Helvetica Neue Extended

Copperplate (идеален для текста брошюр и веб-страниц)

Trade Gothic

Balto (хорош для заголовков)

Sloop (подойдет для открыток и приглашений)

Sabotage

Futura (популярный и очень практичный шрифт)

Erotica Big Pro y Small Pro (если ищете нарочито чувственный стиль)

Didot (тонкий и элегантный шрифт)

Source Sans Pro (универсальный и техничный, используется, в частности, на сайте LinkedIn)

У каждого дизайнера свои предпочтения, и каждый порекомендует вам свой собственный список любимых шрифтов. Однако базовые в современном графическом дизайне семейства Helvetica, Didot, Futura, Gotham, Avenir, Bodoni, Montserrat, Morganite, Alegreya и Rockwell — это, что называется, беспроигрышный выбор.

Постер, посвященный шрифту Didot, от типографской студии Linotype (DevianArt):

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

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

Шрифт Erotica (typographica.org):

Шрифт Chava (bestfonts.pro):

Золотое правило дизайнера номер два — использовать не более 3-х шрифтов для одной и той же дизайнерской работы. А лучше — меньше.

Лайфхак от Джона: Думаете, такой подход сильно ограничивает вас в выборе? А вот и нет. Помните, что большинство шрифтов имеют в своем наборе несколько вариантов начертаний, отличающихся по толщине и наклону (regular, thin, bold, italic, и т.д.). Так что, если хотите грамотно разнообразить надписи в вашем проекте, выбирайте подходящие виды шрифтов из одного и того же семейства.

Работа дизайнера Malik — постер фирмы Nike, в котором используются различные виды шрифта Morganite (Pinterest). Этот стильный дизайнерский шрифт категории Sans Sherif включает в себя 9 различных вариаций начертания:

3. Если в оформлении шрифтов можно обойтись без обводки и теней, обходитесь!

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

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

Текст с обводкой — неотъемлемая черта стиля поп-арт (catherineasquithgallery.com):

Но если добавлять обводку и тень без всякой объективной надобности — так сказать, для пущей красоты, — картинка будет выглядеть тяжеловесной и менее профессиональной.

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

Надпись шрифтом Futura с обводкой и без. Выбранный фон делает обводку лишней и визуально утяжеляет текст (картинка позаимствована у https://www.atomic-automaton.com/single-post/design-time-4-stroking-your-fonts):

Сравните с вариантами, в которых ненужная обводка отсутствует.

Один из постеров для аргентинского музыкального фестиваля под открытым небом PM Open Air (2014) работы Pi nia (Behance):

Обложка к сборнику эссе Честона Кнаппа (Cheston Knapp) под названием «Вверх - вверх, вниз - вниз» (Up up, down down), Pinterest:

Но вот что не теряет своей актуальности, так это обводка без шрифта. Дизайнерский постер работы Бенедикто Серналя (Benedicto Cernal III), Pinterest:

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

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

Надпись шрифтом Questrial выполнена цветами, взятыми из естественной палитры картинки (Canva):

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

Шаблон флаера для студии по занятию йогой работы MONOGRPH для Envato Elements (Pinterest). Для надписей здесь использован стильный шрифт ADAM.CG PRO:

Одна из версий постера к научно-фантастическому фильму «Связь» (Coherence) режиссера Джеймса Уорда Биркита (James Ward Byrkit), Pinterest:

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

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

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

Лайфхак от Джона: Боитесь, что в картинке не найдете нужный вам тон? Варьируйте его прозрачность от надписи к надписи (а также не забывайте про использование разных видов шрифтов из одного семейства)! Это визуально разнообразит вашу палитру, а заодно создаст перспективу и сделает все изображение более чистым и «дышащим».

Обложка работы Молли Фер (Molly Fehr) для книги Аники Мроуз Рисси (Anica Mrose Rissi) «Никто не знает, кроме тебя» (Nobody knows but you), Goodreads:

Продолжение следует...

©ECOVERED Design

Полная версия статьи для ВК: https://vk.com/@ecovered-sekrety-graficheskogo-dizaina-ot-dzhona-makveida-chast-ii