Визуальная айдентика DDRW связывает логотип, шрифт, цвет, графику и оформление цифровых продуктов. Её задача — дать разным носителям общий характер и понятные правила: чтобы сайт, карточка материала и презентация воспринимались как части одной системы.
В этом материале разбираем собственный пример: из чего складывается визуальный язык DDRW, как он переходит в интерфейс и какие решения можно использовать при работе над брендом своей компании. Показываем действующие элементы сайта и макеты применения из нашего комплекта Visual Identity.
От логотипа к системе
Логотип помогает узнать компанию, но сам по себе не определяет, как должны выглядеть страница услуги, обложка статьи или коммерческое предложение. Для этого нужны дополнительные решения: характер заголовков, цветовые роли, ритм отступов, работа с изображениями и правила композиции.
У DDRW отправной точкой служит тонкая геометрическая надпись. В ней сочетаются дуги, прямые линии, диагонали и открытые участки контура. Эти же приёмы можно продолжать в графике, не добавляя к каждой новой задаче случайный декоративный элемент.
Такой подход удобно оценивать через практический вопрос: получится ли собрать новый носитель из уже заданных элементов? Если для каждой обложки приходится заново придумывать шрифт, палитру и расположение логотипа, система ещё не стала рабочим инструментом.
Логотип, отдельная D и пространство вокруг
Основной идентификатор DDRW — полная надпись. Для компактных форматов в комплекте предусмотрен логомарк: первая D из того же векторного оригинала. Это сохраняет связь между полной и сокращённой версиями. Самостоятельная D подходит для аватара или иконки; там, где человек впервые встречает бренд, полезнее показать полное название.
Мы используем готовые векторные контуры логотипа. Набор букв похожим шрифтом не воспроизводит его форму и интервалы. При масштабировании знак сохраняет пропорции; на светлой поверхности применяется тёмная версия, на тёмной — светлая.
В комплекте предложено охранное поле не меньше половины видимой высоты знака — H/2 с каждой стороны. В эту область не должны попадать подписи, край фотографии или соседняя кнопка. Минимальную ширину полной надписи рекомендуем начинать со 120 px на экране и 32 мм в печати. Это ориентиры для макета: конкретный размер нужно проверять на устройстве или пробном оттиске, особенно на фактурном материале.
Свободное пространство здесь выполняет понятную работу: помогает тонким контурам оставаться различимыми и отделяет знак от остального содержания.
Цвет: спокойная основа и заметные акценты
В палитре комплекта Visual Identity есть тёмный Navy, белый White, светлый Cloud и три акцента — Violet, Cyan и Pink. Нейтральная основа оставляет место текстам и изображениям, а цвет помогает выделить одну мысль, раздел или действие.
Палитра не означает, что каждый элемент нужно окрасить в один из ярких цветов. Например, мелкий цветной текст на белом может потерять необходимый контраст. В таком случае лучше оставить тёмный текст и использовать акцент в подложке, линии или более крупном графическом элементе.
На сайте эта логика адаптирована под две темы. В светлой используются почти белый фон, тёмные синие оттенки текста и более сдержанные акценты. В тёмной — чёрный фон, светлая типографика и более яркие голубые, фиолетовые и розовые детали. Нельзя просто поменять местами чёрный и белый: границы карточек, вторичный текст и состояния кнопок требуют отдельных значений.
Поэтому фирменная палитра и цвета интерфейса связаны через роли. Один набор задаёт характер бренда, другой помогает читать и действовать в конкретных условиях. Фотографии товаров и экраны клиентских проектов при этом сохраняют собственные цвета.
DDRW Sans: характер в заголовках, ясность в тексте
В текущей версии сайта используется DDRW Sans 06 — фирменная модификация Inter. Мы сохраняем сведения об исходной основе и лицензию SIL Open Font License 1.1. Это адаптация существующей гарнитуры; создание шрифта полностью с нуля мы не заявляем.
В системе три начертания: Regular 400 для основного текста, Medium 500 для навигации и коротких акцентов, SemiBold 600 для заголовков. Кириллица и латиница находятся в одном семействе, включая Ё и ё. Благодаря этому название услуги, русский абзац, английский термин и цена могут работать в одном визуальном ритме.
Работа со шрифтом продолжается после выбора букв. Крупному заголовку подходит более плотный межстрочный интервал; длинному абзацу нужны свободные строки и обычные межбуквенные интервалы. Настройки выразительного заголовка нельзя автоматически переносить на подпись поля или текст статьи.
В шестой версии уточнялись интервалы отдельных пар знаков при сохранении рисунка предыдущей версии. Такие детали особенно важны в интерфейсе: один и тот же шрифт встречается в короткой кнопке, длинном заголовке, числах и пользовательском вводе.
Паттерн из одного элемента
Декоративный модуль DDRW взят из той же D, что используется в логотипе. Повторение, равномерный шаг и поворот модуля позволяют получить разные поверхности из одной формы. Связь с основным знаком сохраняется без постоянного повторения полного названия.
У паттерна есть граница применения. В нём можно менять масштаб и интенсивность, но активную графику не стоит размещать под длинным мелким текстом. Для чтения нужна спокойная область. Декоративную D допустимо кадрировать в композиции; основной логотип должен оставаться целым.
Этот принцип относится и к цифровым эффектам. Полупрозрачная поверхность, движение или цветной акцент полезны, пока помогают отделить блок, показать связь или привлечь внимание к действию. Если эффект мешает прочитать содержание, его параметры нужно менять.
Как айдентика становится интерфейсом
На сайте визуальная система проходит проверку содержанием: длинными названиями услуг, карточками проектов, таблицами в статьях, фильтрами магазина и формами. На каждой из этих страниц одних красивых цветов недостаточно.
Например, у карточки должны быть понятные заголовок и действие, у поля — видимая граница и состояние фокуса, у таблицы — читаемые столбцы на узком экране. Одинаковая форма кнопок помогает узнавать действие в разных разделах. Матовые поверхности отделяют содержание от фона, но сохраняют общую среду страницы.
Здесь проходит граница между айдентикой и дизайн-системой интерфейса. Айдентика определяет визуальный характер. Дизайн-система закрепляет его в компонентах, состояниях и правилах поведения. Для цифрового продукта нужны обе части, иначе фирменная презентация и рабочий сайт быстро начинают выглядеть по-разному.
Это можно посмотреть на главной странице DDRW, в каталоге услуг и магазине. Макеты из комплекта показывают ещё одну сторону системы — применение на отдельных носителях.
Пост и вертикальная публикация отличаются пропорциями, но сохраняют общий набор: исходный логотип, DDRW Sans, заданные цвета и одну главную мысль. Это макеты применения, а не фотографии изготовленного тиража. Для печатных материалов отдельно потребуется подготовка под требования производства.
Что проверить в визуальной системе своей компании
Соберите несколько реальных задач: страницу услуги, экран телефона, обложку материала и документ с длинным заголовком. Попробуйте оформить их одним набором правил. Такая проверка покажет больше, чем логотип на пустом фоне.
- Узнаваемость: полная и компактная версии знака связаны между собой, а графика продолжает их характер.
- Типографика: русский текст, цифры, длинные названия и короткие подписи читаются без случайных замен шрифта.
- Цветовые роли: понятно, где основной текст, вторичный, ссылка и главное действие; смысл сохраняется без яркой подложки.
- Применение: новый носитель можно собрать из готовых элементов с предсказуемыми отступами и иерархией.
- Передача: команда получает векторные оригиналы, шрифты с лицензией, палитру и редактируемые шаблоны.
Визуальная система DDRW показывает этот подход на собственном бренде. Её ценность — в согласованности решений: от отдельной D до страницы, которую человек читает и использует.
Если вы готовите новый сайт или обновляете существующий, можем обсудить визуальную систему интерфейса: какие элементы бренда уже есть, чего не хватает для цифрового продукта и какие состояния нужно проработать. Расскажите о задаче — определим состав работ под ваш проект.
