Что логотипу поручить в первую очередь?

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

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

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

Имя, символ или их сочетание

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

Длинное имя стоит проверить в первую очередь. После уменьшения покупатель может увидеть узор вместо названия.

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

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

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

Наглядный разбор

Три формы для разных мест

  1. Словесный знак

    Сохраняет название на вывеске, странице или документе.

  2. Символ

    Работает в маленьком поле после того, как связь с именем понятна покупателю.

  3. Сочетание

    Даёт полную и компактную версии с правилами выбора.

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

Где знак обязан остаться читаемым

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

Для карточки на Картах действуют отдельные параметры. Справка Яндекс Бизнеса указывает размер от 200 × 200 пикселей и соотношение сторон 1 : 1. Это требования к файлу.

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

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

Цвет, фон и одноцветная версия

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

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

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

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

Файлы для сайта, карточки и печати

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

Растровая картинка задаётся пикселями. Документация Adobe Illustrator указывает, что при экспорте в PNG программа растрирует графику с выбранным разрешением. Поэтому PNG удобен для загрузки на площадку, но маленький файл не стоит отдавать для крупного производства: пропавшие края не восстановятся от смены расширения.

Для профиля компании Яндекс перечисляет JPG и PNG. Размер файла — до 10 МБ. Загружают через «Загрузить логотип» в разделе фотографий и видео.

Копию для профиля стоит держать отдельно от SVG. Тогда менеджеру не придётся конвертировать её перед публикацией.

Комплект для разных исполнителей

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

Приёмка по носителям, а не по слайдам

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

МестоЧто предоставитьЧто посмотреть при приёмке
Шапка сайтаПолная и компактная версииНа узком экране имя различимо или написано рядом, знак не сдвигает меню
Карточка на картеКвадратный JPG или PNGВидна основная форма, отступы не съедают изображение
ДокументОдноцветная версияНазвание читается при обычной печати
ВывескаФайл по требованиям изготовителя и макет входаИмя различимо с того места, где покупатель выбирает дверь

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

Откройте каждый файл при передаче. Сотрудник должен суметь взять нужный вариант без звонка дизайнеру и выбрать светлый или тёмный фон по короткому правилу. Если в папке несколько версий с одинаковым названием, попросите объяснить различие или удалить промежуточные варианты до приёмки.

Что отправить дизайнеру перед сметой

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

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

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

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

Источники и полезные ссылки

  1. Яндекс Бизнес: требования к логотипу в профиле ↗
  2. W3C: координаты и область просмотра SVG ↗
  3. Adobe Illustrator: поддерживаемые форматы файлов ↗

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

Игорь Крещенко

Руководитель ШТАБ ИТ. Занимается управлением проектами, веб-разработкой, рекламой и PR. Подробнее об авторе →