Значок - главный элемент цифрового логотипа
Значок - это то, что остается от логотипа, когда убирают текст. Именно он становится аватаркой в соцсетях, иконкой приложения и favicon сайта. Поэтому значок должен работать самостоятельно, без подписи и пояснений.
Требования к значку простые:
- квадратная или круглая форма с равными пропорциями;
- отсутствие мелких деталей и тонких линий - они исчезнут при уменьшении;
- контрастность: значок должен читаться и на светлом, и на темном фоне;
- читаемость в размере 16×16 пикселей - это размер favicon, и если значок там превращается в кашу, он не подходит.
Название - читаемо и без излишеств
Название компании - вторая обязательная часть логотипа. Оно должно читаться в шапке сайта, в подписи к посту, на маленьком экране смартфона. Поэтому шрифт выбирается простой, без сложных засечек, рукописных элементов и декоративных росчерков. Название не должно сливаться со значком и не должно быть крупнее, чем нужно - его задача быть читаемым, а не доминировать.
Дескриптор - коротко о сути бизнеса
Дескриптор - это пояснение под названием, которое за секунду объясняет, чем вы занимаетесь: стоматология, доставка еды, ремонт квартир. Это не слоган и не миссия, а навигация для клиента.
Важно понимать: дескриптор входит в полную версию логотипа и используется на сайте, но не попадает в иконку и аватарку. Поэтому он должен легко сниматься без потери узнаваемости и легко меняться, если бизнес расширится. Сегодня вы Кровати, завтра Мебель для спальни - логотип не должен ломаться от этого.
Логотип - это единое целое и набор версий одновременно
Логотип нужно рассматривать с двух сторон. С одной стороны, это единая композиция, где значок, название и дескриптор работают вместе и воспринимаются как один образ. С другой стороны, это набор отдельных элементов и их вариаций, которые живут своей жизнью на разных площадках.
Поэтому на выходе нужен не один файл, а система:
- основная горизонтальная версия (знак + название + дескриптор) - как единое целое;
- вертикальная версия - для узких мест;
- только знак - для иконок и аватарок;
- монохромная версия - для печати на чеках, документах, вышивке;
- инверсия - для темного фона;
- favicon - отдельный файл под 16×16 и 32×32;
- аватарка для соцсетей - квадрат и круг
Смысл в том, что каждая часть логотипа должна работать и в связке с остальными, и сама по себе. Если знак не читается без названия, а название не читается без знака, а инверсия ломает композицию - логотип не готов. Без такого набора версий логотип будет постоянно ломаться при попытке приспособить его к новой площадке.
Полная версия должна складываться в единую композицию
Полная версия логотипа - это не просто знак и текст рядом. Это единая композиция, где значок, название и дескриптор собраны в одно целое и воспринимаются как один образ. Ничего не должно вылезать за общие границы, свисать, отрываться или болтаться отдельно.
Что это значит на практике:
- у всех элементов общие границы по высоте и по ширине;
- нет случайных отступов и элементов, которые торчат в сторону;
- значок, название и дескриптор выровнены друг относительно друга и образуют плотный, собранный блок;
- при взгляде на логотип не хочется мысленно что-то подрезать или пододвинуть.
Такая композиция легко встает в шапку сайта, в баннер, в визитку, в подпись письма. Она предсказуемо масштабируется и не разваливается при изменении размера. По ней легко задать охранное поле и правила размещения на фоне.
Если при взгляде на полную версию логотипа хочется мысленно провести рамку и она получается ровной - композиция собрана правильно. Если рамка получается рваной или с выступающими кусками - логотип нужно дорабатывать.
Стиль - минимализм и плашечные цвета
Для интернет-маркетинга лучше всего работает минимализм. Простые формы, чистые цвета, отсутствие мелких деталей. Такой логотип хорошо читается издалека, легко запоминается и легко воспроизводится - на визитке, вывеске, в приложении, на форме курьера.
Градиенты и тонкие переходы цвета - не запрещены, но требуют осторожности. Они плохо переживают сжатие в мессенджерах, плохо печатаются и почти всегда теряются в favicon. Если градиент нужен - обязательно делайте плоскую версию для маленьких размеров.
Размещение на сайте
На сайте логотип обычно размещается слева вверху - там, куда пользователь смотрит первым. Он должен быть кликабельным и вести на главную страницу, это стандарт.
Для языков с письмом справа налево (арабский, иврит, фарси) логично учитывать зеркальное направление чтения, но это не жесткое правило - решение принимается исходя из дизайн-системы и тестирования. Важно не путать: левый верхний угол - это про размещение на странице, а не про форму логотипа.
Файлы, которые нужны на выходе
Векторные форматы - SVG, AI, EPS, PDF. Они позволяют масштабировать логотип без потери качества от билборда до иконки приложения. Растровые - PNG с прозрачностью для веба. Цветовые пространства: RGB для экрана, CMYK и Pantone для печати.
Проверка перед утверждением
Прежде чем согласовать финальный вариант, прогоните его через простые тесты:
- уменьшите значек до 16×16 - читается ли он?
- сделайте черно-белым - работает ли?
- поместите на темный и светлый фон - видно ли?
- впишите в круг - не обрезается ли?
- положите на шумное фото - не теряется ли?
- мысленно обведите полную версию рамкой - получается ли ровная композиция без выступающих элементов?
Если хотя бы один тест провален - логотип нужно дорабатывать.
Чего избегать
Фотографий и сложных иллюстраций, большого количества текста, тонких линий и мелких деталей, зависимости от градиента или конкретного цвета, сложных декоративных шрифтов. Все это делает логотип нерабочим в цифровой среде.
Итог
Хороший логотип для сайта - это простой знак, который работает как иконка; название и дескриптор в полной версии; набор готовых версий под разные площадки. Полная версия должна складываться в единую композицию, а каждая часть - работать и отдельно, и в связке.
Все перечисленное - это рекомендации и "правила хорошего тона", а не догма. Но если отклоняться от них, лучше понимать, зачем и какие проблемы это создаст на практике. Логотип, который следует этим правилам, легко масштабируется, читается издалека, узнается и воспроизводится без потерь - и работает на ваш бренд в интернет-маркетинге годами.
