Как проверить фирменный стиль на разных носителях и описать правила для других

Один и тот же знак живёт в размерах от 16 пикселей до полутора метров. В каждом крайнем размере нужна своя версия.

Проверьте себя

Восемь мест, где стоит знак «Лесной обжарки». Какая версия нужна?

Стиль проверяют не только там, где он красив. Ещё — там, где у него отняли часть приёмов: в письме, документе, аватаре, печати в одну краску.

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

• почта может не загрузить шрифт: Gmail не показывает в письмах подключённые шрифты, Outlook для Windows их игнорирует;
• документ открывается на чужом компьютере, где шрифта нет;
• аватар обрезают кругом;
• пакет печатают в одну краску.

Важно, что от стиля остаётся в каждом случае.

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

Охранное поле задают не в пикселях, а через часть самого знака: тогда правило работает в любом размере.

У «Лесной обжарки» поле вокруг знака со словом — половина высоты зерна.

Включите слой и посмотрите, куда нельзя заходить тексту и краю.

Так поступают и большие бренды.

• Spotify — охранное поле в половину высоты значка. Минимальный размер записан отдельно для экрана и печати: логотип не меньше 70 пикселей или 20 миллиметров, значок — не меньше 21 пикселя или 6 миллиметров.
• Slack — поле вокруг логотипа не меньше длины одной «пилюли» из решётки в знаке.

Есть и встречный взгляд. Антон Шнайдер в «Советах» Бюро Горбунова считает правило отступов вокруг логотипа ненужным и формальным. Опытному дизайнеру оно не нужно, а тому, кто не понимает, зачем знаку свободное место, не поможет.

Правило всё равно стоит записать: исходники есть у дизайнера, а не у типографии и не у партнёра, который ставит ваш знак на свой сайт.

Правило «не искажать знак» каждый понимает по-своему. Пары картинок на настоящем знаке понимают одинаково.

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

lesnaya-obzharka/
  logo/
    lockup-color.svg        знак со словом, основная версия
    lockup-negative.svg     для тёмного фона
    lockup-one-color.svg    для печати в одну краску
    mark-color.svg          знак без слова
    mark-small.svg          упрощённый знак для 16–32 пикселей
  web/
    favicon.svg, favicon.ico
    apple-touch-icon.png    180 × 180
    icon-192.png, icon-512.png
  avatar/
    avatar.png              квадрат, знак по центру с запасом под круг
  colors.txt                HEX и RGB для экрана, цвета для печати — по пробе типографии
  fonts.txt                 где скачать шрифт, лицензия, чем заменять в письмах и документах
  templates/
    presentation            шаблон презентации
    letter-header.png       шапка письма картинкой
    document                шаблон документа
  rules.pdf                 страница правил с запретами

Правила работают, когда по ним делает материалы другой человек.

Вот десять материалов, которые сделал новый дизайнер «Лесной обжарки» по странице правил. Пять из них придётся переделать.

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

Проверьте свой стиль на пяти носителях разного размера и напишите страницу правил с примерами и запретами.

Часть 1 · Пять носителей, 60 минут

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

Часть 2 · Правила, 60 минут

1. Задайте охранное поле через часть знака и минимальный размер для экрана.
2. Нарисуйте пары «так» и «не так» — не меньше пяти, на своём знаке.
3. Запишите замены: шрифт в письмах и документах, версия знака для круга и одной краски.
4. Соберите пакет файлов с понятными именами.

Часть 3 · Проверка чужими руками

1. Попросите коллегу сделать по вашим правилам один новый материал, не объясняя ничего устно.
2. Каждый его вопрос — место, где правила молчат. Допишите их.

Что должно получиться

• Пять носителей с заметками, что от стиля остаётся.
• Страница правил: версии знака, охранное поле, минимальный размер, замены, запреты парами.
• Пакет файлов с понятными именами.
• Материал коллеги и список правок правил по его вопросам.

План работы: час на носители, час на правила и пакет. Время коллеги — отдельно.

Частые сложности

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

Стиль готов к чужим рукам, если

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

Что мешает

• Проверка только на презентации. На аватаре и чеке стиль разваливается.
• Охранное поле в пикселях. На вывеске его нет, в подписи письма оно огромное.
• Запреты словами. «Не искажать знак» понимают по-разному.
• Файлы в переписке. Каждый новый материал начинается с поиска логотипа.
• Нет версии для тёмного фона в пакете. Партнёры ставят основную туда, где она тонет.

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

• Design & Branding GuidelinesSpotify for Developers · на английском · бесплатноРаздел о знаке в правилах Spotify для партнёров: полный логотип или значок, охранное поле, минимальные размеры, запреты.
• @font-faceCan I email · на английском · бесплатноВ каких почтовых клиентах работает свой шрифт: Gmail, Outlook.com и Mail.ru его не покажут. Данные на конец 2023 года.
• Define a favicon to show in search resultsGoogle Search Central · на английском, есть на русском · бесплатноТребования Google к значку в выдаче: квадрат от 8 × 8, лучше крупнее 48 × 48, какие форматы подходят, один значок на домен.
• Building an adaptive faviconweb.dev, Адам Аргайл · на английском · бесплатноКак сделать значок вкладки в SVG, который сам меняет цвет в тёмной теме, и оставить .ico для остальных. Статья 2022 года, с кодом.
• Add a web app manifestweb.dev · на английском · бесплатноСправка для разработки о манифесте приложения: иконки 192 и 512, короткое имя для тесных мест, цвет темы и заставки.