3D-конструктор
В нашем конструкторе есть несколько общих ключевых принципов идентичности — это формы, цвета, технологичные текстуры. Они работают в связке с иллюстративным стилем, так как форм-фактором для 3D-элементов послужили эмодзи.
Виды композиций
Можно создавать композиции из конструктора разной плотности и детализации. Подходящий вариант выбирается исходя из масштаба макета и задач носителя
Паттерновое 3D для фонов на экранах и планшетах в переговорках
Моноцветное 3D для длинных баннеров в интранете
Разноцветное 3D для спецпроектных баннеров и ярких сообщений на экранах КП и в интранете
Отдельные 3D-объекты без фона для маленьких баннеров и плашек на Вики и лендингах
Работа с цветом
Композиции можно делать в разных цветовых сочетаниях и даже адаптировать под цвета сервиса, для которого создаётся дизайн
Баннер с цветным конструктором в цветах Яндекс Team
Баннер с моноцветным конструктором в цветах Яндекс Team
Баннер с моноцветным конструктором в цветах сервиса Helpy
Монохромный баннер в тёмной теме
Формы
Объекты конструктора образованы от формы голов эмодзи. Они также подчиняются сетке и скруглениям, можно размещать на них эмоции или оставлять их пустыми.
Детали
Чтобы при создании новых форм наш конструктор сохранял консистентность, важно уделять внимание деталям, таким как фаски, филлеты и уровень детализации
Фаски двухступенчатые. Сначала грань объекта срезается ровной плоскостью без скругления, затем в местах контакта с перпендикулярными рёбрами добавляются вторые филлеты
Углы немного сглаживаются по небольшому радиусу, равному второму уровню сглаживания боковых фасок
Плотность заполнения композиции может быть разной: паттерны могут иметь небольшие пустоты между объектами, а объекты могут накладываться, но подчиняться сетке и направляющим
Детализация объектов выражается в дополнительных вставках и выдавливаниях, фасках, коннекторах, переключателях и эмодзи.
Важно: эмодзи — всегда единичный акцент, они не ставятся в каждый элемент конструктора
Ошибки
- Логотип перекрашен в цвета, не входящие в цветовую систему
- Эффекты, тени, свечения или обводки
Цвета
Основные акцентные цвета в коммуникациях — тёплый красный, фиолетовый, жёлтый и их оттенки
- Warm Red
- HEX#F8604A
- Pantone7417 C
- CMYK0 74 85 0
- Violet
- HEX#7642E8
- Pantone2090 C
- CMYK78 82 0 0
- Yellow
- HEX#FFC812
- Pantone7406 C
- CMYK0 22 93 0
- Graphite
- HEX#222A3A
- Pantone2379 C
- CMYK85 75 50 55
- White
- HEX#FFFFFF
- Pantone11-0601 TCX
- CMYK0 0 0 0
Материалы
Здесь мы делаем отсылки к технологиям, девайсам, архитектурности и инженерности. Это текстурные пластики, сетки, металл, прозрачные вставки, мягкие и объёмные паттерны. Они могут сочетаться между собой в одном объекте, но сами всегда монохромные
Ошибки
- Невыразительно и темно. Если нужна композиция для тёмной темы, она делается графитовыми цветами объектов, но качественно освещается
- Завален горизонт кадра, все объекты падают в пространстве, слишком много оттенков цвета на одном объекте. Важно делать объекты цельными по цвету, разница только в текстурах
- Форма коннекторов не по гайду, они имеют слишком разные пропорции толщины и изгибы
- Мы не делаем эмодзи в виде отверстий или лампочек, также не делаем сквозные отверстия в объектах
Примеры макетов с 3D‑объектами
