Jobs

Типографика

Привет!

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


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

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


Задание 1. Важность деталей.

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


Многие люди с трудом сознательно смогут заметить разницу в шрифтах схожей формы. Например, разницу между двумя гротесками (Arial и Helvetica) или антиквами (Times New Roman или Garamond). Но бессознательно, читая текст, им будет не только проще читать текст написанный одним, а не другим шрифтом, они даже будут по разному относится к его содержимому.


Давай проверим, сможешь ли отличить их ты.

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



Начнем с простого.

Тут два шрифта: Times New Roman и Garamond. Какой из них Time New Roman?


Times New Roman под номером 1. Кстати, во всех гос организациях в нашей и ряде других стран в документах используют шрифт Times New Roman. Есть исследование, результаты которого показывают, что если бы его заменили на очень похожий Garamond, то краски на печать документов тратилось бы на 25% процентов меньше. Правда тут учитывалась печать на струйных, а не лазерных принтерах.


Какой из этих шрифтов Didot?


Didot под номером 2. 

Посложнее: какой тут шрифт Times New Roman?


Times New Roman под номером 1.

И последний, самый популярный: какой из этих шрифтов Helvetica?


Helvetica под номером 2.

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


Вернемся к восприятию шрифтов людьми. Режиссер Эррол Моррис провел эксперимент: 45 000 его участников прочитали отрывок из книги физика Дэвида Дойча о маловероятности того, что Земля будет разрушена астероидом. После прочтения отрывка, Эррол попросил читателей пройти опрос о том, считают ли они утверждение Дойча правдой и насколько они уверены в этом заключении. Эксперимент заключался в том, что отрывок из книги выводился пользователям рандомно одним из шрифтов:


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


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

Посмотри и попробуй догадаться к какому жанру какой шрифт относится.


Как по-твоему, для какого жанра фильмов часто используют этот шрифт?


Чаще всего его используют для комедий:


Посмотри, на постеры к комедийным фильмам, все они с этим шрифтом:


А этот?


Это экшн


Этот и похожие шрифты очень часто используются в различных экшенах.


Еще один:


Такой контрастный шрифт с засечками часто используют в романтических фильмах.



И последний:


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


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


Задание 2. Шрифт.

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


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


На читаемость влияет и форма шрифта и верстка текста. Сейчас поговорим о первом.

Есть два термина, которые очень часто сводят в один или путают: шрифт и гарнитура.

Гарнитура — это шрифтовая семья / набор шрифтов в разных размерах и начертаниях (пропорции, насыщенность, наклон знаков и др.).


Шрифт — набор символов на одном или нескольких языках, объединенных общим стилем. У шрифта есть ряд характеристик:

1. Начертание

  • Насыщенность: thin, regular, medium, bold, extra bold, italic;

  • Пропорции: узкое, нормальное, широкое

  • Наклон знаков: прямой, курсивный

2. Форма: гротеск, антиква, брусковый, акцидентный; которые, в свою очередь, делятся на подтипы.


3. Ряд других характеристик: кегль, межбуквенное расстояние и др.

Гротески в отличие от антикв выглядят более современно, без лишних деталей, понятно и четко.


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


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

Для основного текста, особенно если его много, лучше использовать простой шрифт, без сильного контраста в штрихах и без каких-то ярких особенностей.

Как говорил создатель всем известного Times New Roman: если вы замечаете красивые элементы в шрифте, значит от них нужно избавиться, т.к. они будут отвлекать от текста.