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

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

Попробуйте описать свои ассоциации и представления о брендах этих соцсетей. Уверен, они будут очень сильно отличаться.

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

Пример фирменного стиля: элементы деловой документации компании «Микахим»

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

Например, вы зашли в супермаркет, чтобы купить яблочный сок. На полках стоят коробки разных марок. По своему опыту, отзывам друзей и из рекламы вы знаете, что вот в этой зелёной коробке сок так себе — слишком много сахара и неприятный вкус, зато стоит дёшево. Рядом белая коробка сока вдвое дороже, но его вкус намного приятнее, а компоненты в составе натуральные. Эти впечатления, воспоминания и основанная на них оценка — ваше восприятие двух брендов. Цвет коробок и то, как расположены на них логотип, надписи, картинки и другие элементы — это фирменный стиль брендов. А название сока, исполненное особым образом, на каждой из коробок — это его логотип.

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

Со временем такие шрифты становились доступнее — попадали в рекомендуемые подборки и коллекцию Google Fonts. Дизайнеры начали вставлять их везде. Неплохие сами по себе, но изрядно надоевшие, Lobster, Intro, Appetite, Bebas и Philosopher до сих пор смотрят на нас с каждой второй вывески, меню в кафе, биллборда и веб-баннера.

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

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

Где искать
Подборка типографики на Behance
Подборка типографики на Dribbble
Подборка типографики на Tumblr

Представьте: пятница, до конца рабочего дня пятнадцать минут, все дела сделаны, выходные ждут. Осталось только допить последний кофе, выключить рабочий компьютер и бежать навстречу выходным. И тут из типографии прилетает: «Re: Срочно переделайте! Файлы не подходят!»
Такое случается, когда дизайнер запарился и забыл проверить файл перед отправкой в печать, а менеджер не проконтролировал.
Избежать таких страданий и сберечь время поможет список с обязательным минимумом пунктов для проверки готовности макета. На что обратить внимание?

Уточняем размер

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

Например, размер вертикального листа формата А4: 210×297 мм.

Устанавливаем цветовую модель

Цветовой называется абстрактная модель, которая описывает представление цветов с помощью наборов чисел — цветовых координат.
Подробнее о цветовых моделях я писал в статье «Разбираемся с цветовыми моделями или почему типография требует файл в CMYK».
Да, типография попросит вас сохранить рабочий файл в модели CMYK. Это стандарт, просто следуйте ему.

Настраиваем разрешение

Разрешение макета — это максимальное количество точек краски, которое печатная машина способна уместить в одном квадратном дюйме на листе (Dots Per Inch — «точек на дюйм»).
Если верить исследованиям — оптимальное разрешение при печати составляет 300dpi, при меньшем человеческий глаз увидит пикселизацию и менее чёткое изображение.

Одно и то же изображение с разрешением 300, 150 и 72 dpi.

Для биллбордов, перетягов и всех широкоформатной рекламы обычно достаточно разрешения в 90-120dpi.

Добавляем выпуски

Отпечатанные листы тиража в типографии режутся стопками. Эти стопки могут немного смещаться под нажимом печатного ножа. Например, так возникают срезанная с одного края макета информация и непонятные белые поля с другого.
Выпуски (bleeds) — запечатываемые дополнительные поля вокруг макета. Они нужны, чтобы избежать таких проблем на печати. Даже если нож съедет, он захватит запечатанную область из выпуска, и белого поля не появится.
Размер выпусков варьируется от 2 до 5 мм, он зависит от требований типографии.

Пунктиром показана траектория ножа. Пространство между границами основного макета и выпусками будет срезано.

Приводим текст в порядок

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

Переводим шрифты в кривые

Чтобы при печати выбранные шрифты не заменялись ненужными и вёрстка не сползала, переведите массивы текста в кривые.

Слева — редактируемый текст, справа — он же в кривых.

Это необходимо, если вы отправляете в типографию исходник (например, в форматах .ai, .eps, .cdr или .indd).
При сохранении в PDF шрифты встраиваются в файл, если нет лицензионных ограничений.
Также нет нужды переводить шрифты в кривые, если в печать пойдёт растровый TIFF.

Проверяем чёрный

Если макет предполагает сплошную чёрную заливку, простой чёрный свет лучше не использовать (CMYK: 0-0-0-100) — бумага впитает часть краски, и заливка получится неравномерно серой.
Вместо этого попробуйте составной чёрный — он комбинируется из всех четырёх красок.
Максимальную величину суммы красок уточняйте в типографии, обычно это 220-300%. Если краски будет больше, то бумага размокнет и изображение расплывётся.

Слева — простой чёрный цвет (CMYK: 0-0-0-100). Справа — составной чёрный (CMYK: 60-60-60-100).

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

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

Выделяем абзацы

Сплошные простыни текста трудно читать. Они рассеивают внимание читателя и мешают понять смысл написанного. Чтобы такого не случалось, разделите текст на абзацы.

Полотно текста слева читать трудно, справа же он разбит на аккуратные абзацы

1. Чтобы отделить абзацы один от другого, добавьте между ними дополнительное пространство или втяжку.
   Начало абзаца можно выделить абзацным отступом (красной строкой). Но если абзац следует сразу после заголовка, красная строка не нужна.
2. Выбор выключки (выравнивания строк в абзаце) зависит от предпочтений дизайнера, редакционных стандартов или правил из брендбука заказчика.

О выключке

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

Четыре варианта выключки

Закрываем «коридоры»

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

Здесь ещё и пробелы в тексте конские

Работаем с кернингом и интерлиньяжем

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

Изменение расстояния между символами на уровне абзаца или большого массива текста называется трекингом.

Наработать навыки кернинга помогают инструменты вроде KERNTYPE a kerning game.

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

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

Интерлиньяж рассчитывается от базовой линии строки, поэтому его значение всегда больше значения выбранного кегля. Межстрочное расстояние в 120—150% размера шрифта считается самым комфортным для чтения.

Удаляем лишние пробелы

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

Удалить ненужные пробелы можно с помощью команды «Найти и заменить» в текстовом редакторе или программе вёрстки.

Например, чтобы избавиться от пробела между словом и запятой, в поле «Найти» введите без кавычек « ,», а в поле заменить — «,».

Приводим в порядок кавычки

При вёрстке текстов дизайнер сталкивается с цитатами, прямой речью, названиями разных изданий. Все они заключаются в кавычки.
В типографике встречается несколько видов кавычек, среди них «ёлочки» и „лапки“.
В России стандартом оформления печатного текста считаются кавычки «ёлочки».
Если же требуется оформить цитату внутри цитаты, то используются оба типа кавычек. «Ёлочками» выделяется внешняя цитата, „лапками“ — внутренняя.

Например: «„Как это скучно!“ — воскликнул я невольно» (Лермонтов).

Убираем висячие предлоги и союзы

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

Разбираемся с дефисами и тире

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

Дефис используется для:

деления слова на слоги или для переноса слова на новую строку (например: ти-по-гра-фи-ка);
деления частей составных слов (например: северо-восток, тёмно-синий);
сокращения слов (например: д-р — доктор, пр-т — проспект);
присоединения частиц (например: что-нибудь, кто-либо).

Дефис не отделяется от слов, с которыми используется. Исключение — случаи, когда в перечислении ко второй части составного слова присоединяются две первые части (например: фото- и видеоматериалы).

В типографике используется два типа тире.

Короткое тире (n-dash). Называется так, потому что его ширина равна ширине буквы N.
Используется только в диапазонах чисел (например: 5—10 классы, в 2007—2018 годах). Пробелами не отбивается.
Длинное тире (m-dash). Названо так, потому что его ширина равна ширине буквы M. Используется для:

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

Длинное тире всегда отбивается пробелами и на новую строку не переносится.

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

Убираем лишние переносы

Расстояния между словами в строке и между символами в словах должно быть визуально одинаковыми и равномерными. Иногда сделать их таковыми силами кернинга и трекинга не выходит. Это случается, например, при выключке по формату. Если по каким-то причинам сделать выключку текста влево нельзя, используйте переносы.
Напомню, слова переносятся по слогам и разделяются дефисами. Дефис остаётся в конце строки.
Переносы полезны при оформлении текста, но злоупотреблять ими не стоит. Используйте 3—4 переноса в тексте одной колонки и не более двух — при вёрстке книжной полосы.

Работаем с разрядкой

Когда дизайнеру кажется, что инструментов выделения внутри текста мало, он берётся за разрядку. И забывает, что разреженный текст читать трудно — взгляд спотыкается о неоправданно большие расстояния между строчными символами в абзаце.
Однако опасно и лепить буквы друг к другу, чтобы вместить в одну строку как можно больше слов, — страдает удобочитаемость.
Вместе с тем, разрядка в 5—15% не повредит словам набранным капителью (прописными буквами).

Нормальная, слишком узкая и слишком широкая разрядка строчных + два варианта разрядки прописных — обычная и 10%.

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

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

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

1. Не соответствует бренду

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

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

2. Выглядит устаревшим

Как минимум дважды в год отраслевые порталы по брендингу и дизайну, например, 99 designs и LogoLounge, выпускают обзоры тенденций в дизайне логотипов. Одни тренды сохраняют лидерство годами, другие представляют новые веяния, третьи — давно забытые, но воскресшие.
Например, одна из тенденций последних лет — логотипы, в виде стопок из букв.

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

3. Вызывает сомнительные ассоциации

В дизайнерских сообществах всплывают подборки «самых неудачных логотипов». И неудачны они не из-за низкого качества работы дизайнера: дурной типографики, цветовых сочетаний или неаккуратной прорисовки. Общая их черта — неоднозначные ассоциации.

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

4. Перегружен

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

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

5. Не выглядит уникальным

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

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

6. Тяжело масштабируется

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

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

7. Сделан кустарно

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

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

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

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

Я записал два сценария действий — для горизонтальных фото и для вертикальных. Сценарии пропорционально изменяли размер фотографии, размещали её в центре макета, сохраняли файл макета в .AI и экспортировали готовый проект в .JPG и .TIFF.

В результате

1. Нервы в порядке, так как однообразные действия раздражают, а Иллюстратор сделал монотонные операции по нажатии на одну кнопку.
2. Не было ошибок в последовательности действий, например, в выборе цветовой модели или разрешения при экспорте.
3. Дизайнер сэкономил час-два времени.

«CMYK и ничего кроме него!» — говорит типография, заворачивая очередной макет. Но что это такое и почему кроме него ничего нельзя использовать?

Начнем с азов. CMYK — цветовая модель или абстрактная модель, которая описывает представление цветов в виде наборов чисел. Эти наборы именуются цветовыми компонентами или цветовыми координатами.

Для CMYK такие компоненты — три базовые краски — Cyan (голубая), Magenta (пурпурная) и Yellow (желтая). В смешении они должны давать чистый черный цвет, но на практике же он получится ближе к грязно-коричневому. Поэтому к сочетанию CMY добавляют черную краску (Key Color).

Цветность печати в CMYK

Цветность печати — еще один термин, который вы, вероятно, встретите при общении с дизайнером и типографией. Под цветностью печати понимается количество красок, требуемое для печати конкретного макета. При этом мы подразумеваем только рассмотренные выше 4 краски.
Поскольку для печати, как правило, используются листы бумаги, то цветность печати обозначается двумя числами — количество красок на лицевой стороне и на оборотной. Если оборот чистый, то для обозначения используется ноль — «0».
Примеры обозначения цветности:

4+4 — с обеих сторон полноцветная
4+1 — полноцвет с одной стороны и черно-белая печать с оборотной
1+1 — двусторонняя черно-белая
4+0 — односторонняя полноцветная

Почему именно эти краски?

Цветовые модели, в числе прочих, делятся на аддитивные («складывающие») и субстрактивные («вычитающие»).
Создавая макет для печати, в редакторе мы выбираем цветовой режим CMYK, но на экране, где макет просматривается, применяется ругая цветовая модель — RGB. Она складывается из названия трех цветов, использующихся для вывода на экран цветного изображения: Red (красный), Green (зеленый), Blue (синий). Если интенсивность каждого достигает 100%, то получается белый цвет. Отсутствие всех трех цветов дает цвет черный.

На бумаге все иначе: отсутствию цвета соответствует белый, а смешению максимального количества красок — черный.
Поэтому при подготовке к печати мы сохраняем изображение не в аддитивной модели цветов RGB, а  в субтрактивной модели CMYK, поскольку она использует противоположные исходным цвета, ведь бумага цвет поглощает, а не светится сама по себе. То есть, вычитая из белого три первичных цвета — RGB, мы получим те самые цвета CMY.

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

Статья переехала в мой канал в Телеграм

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

Читайте также: Где дизайнеру найти бесплатные шрифты для проектов

1. Открываем Майфонтс и нажимаем «Go» в строке поиска

2. Разворачиваем список опций «Show Advanced Search» под заголовком результатов поиска

3. Заполняем поля, как показано на скриншоте ниже, и запускаем поиск с помощью кнопки «Search»

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