Я Team Brandbook
Брендбук в Figma

Содержание раздела

4
Содержание раздела

2D-иллюстрации

В иллюстративном стиле Яндекс Team прослеживается несколько общих ключевых принципов идентичности — это формы, цвета и витиеватые линии

Эмодзи-пак

Для эмоциональности и вариативности коммуникации мы используем «гиковые» эмодзи. Их формы вдохновлены символами и кнопками клавиатуры, что отсылает к разработке и инженерам.

Основные принципы

  • Можно свободно комбинировать элементы лица между собой, создавая новые эмоции

  • Лицо можно накладывать на любую форму головы из набора — круги, овалы, звёзды и другие

  • Используйте простую сетку для построения эмодзи — это помогает держать баланс и пропорции

  • Лицо можно двигать внутри головы (вверх, вниз, влево, вправо), чтобы усиливать эмоцию, — например, поднять глаза и рот выше для удивления

  • Следует придерживаться минимального расстояния от черт лица до краёв формы головы

  • Лицо должно быть оптически сбалансировано относительно формы головы, даже если оно сдвинуто для выражения эмоции

Ошибки

При изменении размера эмодзи важно поддерживать пропорции: толщина линий лица должна соответствовать размеру формы головы и масштабироваться пропорционально

  • пропорционально

  • непропорционально

Сочетания эмодзи
между собой

Не делаем одни эмодзи сильно крупнее или меньше других

  • соразмерно

  • несоразмерно

Скругление формы

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

Сетка

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

Цвета

Допустимо перекрашивать эмодзи в разные цвета из палитры Я Team, но сохраняя контрастность эмоции к лицу и лица к фону

    • Warm Red
      • HEX
        #F8604A
      • Pantone
        7417 C
      • CMYK
        0 74 85 0
    • Violet
      • HEX
        #7642E8
      • Pantone
        2090 C
      • CMYK
        78 82 0 0
    • Yellow
      • HEX
        #FFC812
      • Pantone
        7406 C
      • CMYK
        0 22 93 0
    • Graphite
      • HEX
        #222A3A
      • Pantone
        2379 C
      • CMYK
        85 75 50 55
    • White
      • HEX
        #FFFFFF
      • Pantone
        11-0601 TCX
      • CMYK
        0 0 0 0

Эмодзи в персонажах работают в виде голов, сохраняя все те же принципы построения и палитры

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

В остальных случаях можно применить другие графические средства.

Персонажи

Минималистичные герои в естественных позах. Пластика и пропорции чуть гиперболизированы. Узнаваемая голова, которая сочетается с эмодзи- паком. Линия живая, с лёгкими изгибами

Цвет

Цветом и заливкой выделены голова и объект, с которым взаимодействует персонаж, всё остальное — линия

Делаем не больше трёх цветов в иллюстрации: на голове и объектах, на которые хотим обратить внимание, например на смартфоне в руках

Принцип графики в иллюстрации напрямую связан с главным элементом нашей айдентики — логотипом Я Team.

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

Головы

Мы берём из основного набора эмодзи-пака, соблюдая все правила, которые в нём описаны

Толщина линий

В иллюстрации персонажа линии эмоции должны быть той же толщины, что и линии в теле

Пропорции

Голова персонажа к телу в пропорции примерно 1:5. Если форма головы очень нестандартная, можно немного скорректировать пропорцию

Ошибки

  • Искажение пропорции и анатомии тела, рук, ног

    Форма головы и эмодзи не по гайду

  • Обводка вокруг головы или предмета

    Залиты объекты, на которые не нужен акцент

  • Больше двух цветных акцентов

    Линия не окрашивается в яркие цвета

  • Неверная пропорция размера головы к телу

    Лишняя детализация и форма обуви не по гайду

Детали

  • Петли аккуратные и небольшие

  • Сопутствующие предметы мэтчатся с героями по массе, форме и пластике

  • Линия непрямая, с живыми изгибами

  • Не скругляем конец линии

Детали

Для макетов, где не помещается полноценный персонаж, можно использовать отдельно руки

Правила построения рук

  • Базово на руках четыре пальца

  • Можно усилять жест цветным шейпом

  • Вместе с линейной иллюстрацией можно использовать 3D

  • Руки могут заканчиваться как небольшой петлёй, так и замкнутым контуром

  • Иногда можно добавить пятый палец для полноты жеста

  • Не делаем слишком размашистые петли манжета. Придерживаемся геометрических форм объекта

Руки могут сочетаться с эмодзи или объектами в 2D или в 3D, а также существовать на тёмном или светлом фоне

Цвета

Мы не окрашиваем руки в цвет предмета, чтобы не смещать с него акцент

  • рука — графитовой линией, объект — заливкой цветом

  • линия руки — в цвет объекта, всё слилось

Предметная иллюстрация
используется, когда необходимо изобразить объект

Палитра
для предметных иллюстраций

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

Основные цвета

  • Black

    • HEX
      #000000
    • Pantone
      Process Black
    • CMYK
      0 0 0 100

    White

    • HEX
      #FFFFFF
    • Pantone
      11-0601 TCX
    • CMYK
      0 0 0 0

  • Violet

    • HEX
      #9261FF
    • Pantone
      2665 C
    • CMYK
      60 65 0 0

    Light Violet

    • HEX
      #D8C6FE
    • Pantone
      2635 C
    • CMYK
      15 22 0 0

  • Warm Red

    • HEX
      #F8604A
    • Pantone
      P 171 С
    • CMYK
      0 74 85 0

    Light Red

    • HEX
      #FFC8BC
    • Pantone
      P 169 C
    • CMYK
      0 25 20 0

  • Light Yellow

    • HEX
      #FFD64F
    • Pantone
      114 C
    • CMYK
      0 14 80 0

    Light Yellow 3

    • HEX
      #FFEEB6
    • Pantone
      7401 C
    • CMYK
      0 4 33 0

  • Blue

    • HEX
      #7EB7FB
    • Pantone
      2905 C
    • CMYK
      49 19 0 2

    Light Blue

    • HEX
      #E1EFFF
    • Pantone
      656 C
    • CMYK
      12 6 0 0

  • Green

    • HEX
      #5BD15B
    • Pantone
      7488 C
    • CMYK
      55 0 55 18

    Light Green

    • HEX
      #C3F8C3
    • Pantone
      621 C
    • CMYK
      23 0 23 3

Перспектива

Общие правила: обычно предметы лишены перспективы, но в некоторых случаях необходим псевдообъём, чтобы объект считывался правильно

  • Если внутри предмета есть наполнение, как в случае с ящиком с инструментами — нужен объём

  • Если предмет не считывается без перспективы, надо её нарисовать

  • Если внутри предмета нет наполнения, как в случае с кофемашиной, мы не дорисовываем ей грань

  • Если предмет считывается и без имитации перспективы, лучше не нагружать лишними деталями

  • Если внутри предмета есть наполнение, как в случае с холодильником, лучше добавить грань

  • Предмет НЕ считывается без имитации перспективы и теряет узнаваемость

Правило
масштабирования

  • Пропорционально масштабируем контур при масштабировании иллюстрации

  • Разная толщина линий при масштабировании искажает стиль и нарушает визуальное единство

Детали

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

Заливка

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

Наклон

У всех иллюстраций есть наклон. Он делается с помощью плагина Perspective Toolkit в Figma (вкладка Skew). Угол наклона (Horizontal Skew) для высоких предметов (холодильник) делаем от ‑1 до ‑4. Для низких предметов (ведро) делаем наклон от ‑3 до ‑7.

Построение
макета, отступы и выключка текста

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