Логотип, который собирается из частей

Идея ваша и она сильнее всего, что я предлагал до сих пор: знак не рисуется, а собирается — ровно так, как продукт собирается из десятков скиллов, сервисов и плагинов. Мини-ролик здесь не украшение поверх готовой формы, а способ её существования: сначала части, потом целое.

Второе ваше замечание принято буквально. Шрифт больше не «стоит рядом»: в каждой карточке отдельный абзац показывает, какое именно число или приём взяты из знака — толщина штриха, шаг, зазор, скругление, правило контраста. Если знак разорван с зазором 2, шрифт разорван с тем же зазором. Если знак идёт с шагом 21, трекинг тоже 21.

Восемь роликов работают прямо на странице, цикл 4,6 секунды. При системной настройке «уменьшить движение» сборка отключается и остаётся собранная форма.

01 · Сборка из модулей
шрифт
аватар
тёмный
16 px
один цвет

РоликМодули влетают с разных сторон, поворачиваясь, за 0,9 с. Держат форму 2 с. Разлетаются.

СмыслДвенадцать одинаковых модулей встают в одну форму. Так собирается наш продукт: десятки одинаковых по природе инструментов дают один результат.

Шрифт выведен из знакаЗнак — сетка квадратов со стороной 25 и скруглением 2,5. Шрифт наследует ровно это: моноширинная поступь 92 единицы, прямые обрезы, штрих 15 — та же клетка, только вытянутая в строку.

Палитрачернила · киноварь

02 · Слои
шрифт
аватар
тёмный
16 px
один цвет

РоликПластины съезжаются попеременно слева и справа, ложатся в стопку. Верхняя приходит последней.

СмыслКаждый слой — отдельная работа: стратегия, копирайт, дизайн, вёрстка, аудит. По отдельности плоские, вместе дают глубину.

Шрифт выведен из знакаЗнак — пять пластин, каждая со светлой прослойкой между соседними. Шрифт двухлинейный: внутри толстого штриха идёт светлая линия — тот же слоистый разрез, перенесённый в литеру.

Палитраглубина · шафран

03 · Разные детали
шрифт
аватар
тёмный
16 px
один цвет

РоликДетали слетаются с четырёх сторон, каждая своим маршрутом и со своим поворотом.

СмыслРазные по природе инструменты — не набор одинаковых кубиков, а именно разные детали. Вместе они и дают то, что поодиночке не выходит.

Шрифт выведен из знакаЗнак смешивает круг, прямоугольник, треугольник и дугу. Шрифт повторяет смешение: круглые окончания, скруглённые стыки, лёгкий контраст 0,78 — литера тоже собрана из разной геометрии, а не из одной.

Палитрахвоя · трава

04 · Растр стягивается
шрифт
аватар
тёмный
16 px
один цвет

РоликТочки стягиваются из хаоса к сетке, диагональ загорается последней.

СмыслСотни мелких операций стягиваются в одну форму. Диагональ проявляется только когда всё встало на места.

Шрифт выведен из знакаЗнак состоит из кружков радиусом 5,5 — окончание штриха в шрифте сделано таким же круглым и того же диаметра. Монолиния 11: literа — это тот же кружок, протянутый по траектории.

Палитраграфит · бирюза

05 · Веер собирается
шрифт
аватар
тёмный
16 px
один цвет

РоликШтрихи приходят попеременно сверху и снизу и выстраиваются в дугу.

СмыслКаждый штрих — отдельный сервис. Длина разная, потому что вклад разный, но ритм общий.

Шрифт выведен из знакаЗнак — одиннадцать штрихов шириной 8 с шагом 21. Шрифт взял ровно эти два числа: штрих 8, трекинг 21. Слово и знак — один и тот же ритм, продолженный вправо.

Палитраночь · барвинок

06 · Осколки на место
шрифт
аватар
тёмный
16 px
один цвет

РоликОсколки возвращаются каждый по своей дуге и садятся встык.

СмыслРабота приходит разбитой на части и собирается точно. Зазор между частями остаётся виден: мы не прячем сборку.

Шрифт выведен из знакаЗнак разрезан на семь частей с зазором 2. Шрифт трафаретный: штрих разорван с тем же зазором — литера тоже собрана из кусков, а не отлита целиком.

Палитраасфальт · янтарь

07 · Конвейер
шрифт
аватар
тёмный
16 px
один цвет

РоликСтолбцы въезжают слева друг за другом с задержкой 85 мс и встают в ряд.

СмыслКонвейер, а не мастерская. Детали приходят по одной, каждая встаёт в своё место, порядок не меняется.

Шрифт выведен из знакаЗнак — шесть столбцов шириной 11 с шагом 20, сжатая плотная поступь. Шрифт сужён до 70% и стянут до трекинга 9: та же плотность строя, перенесённая в набор.

Палитрасталь · оранж

08 · Гармошка
шрифт
аватар
тёмный
16 px
один цвет

РоликСкладки расходятся слева направо, гармошка раскрывается на всю ширину.

СмыслСложенное разворачивается. Презентация, которая оказывается лендингом, — первый из новых форматов.

Шрифт выведен из знакаЗнак — складки, где освещённая грань толстая, теневая тонкая. Шрифт контрастный по тому же правилу: вертикали толстые, горизонтали 0,34 от них. Одна логика света в знаке и в литере.

Палитраслива · марсала

Вторая серия: другие механики сборки

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

09 · Бриф в материалразворачивание строк
шрифт
аватар
тёмный
16 px
один цвет

РоликСтроки разворачиваются слева направо одна за другой, как заполняющийся документ.

СмыслСлева приходит текст брифа, справа выходит материал. Строки разной длины — это и есть неровный человеческий вход, который мы принимаем.

Шрифт выведен из знакаЗнак — семь строк высотой 8,9 с шагом 14,3. Шрифт сужен до 86% и стянут до трекинга 13, чтобы плотность набора совпала с плотностью строк в знаке.

Палитраграфит · киноварь

10 · Трое в одинсхождение и рост
шрифт
аватар
тёмный
16 px
один цвет

РоликТри столбца съезжаются к центру сверху, затем под ними вырастает общее основание.

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

Шрифт выведен из знакаТри столбца шириной 26 и общий блок под ними. Штрих шрифта 16 — ровно 0,62 от ширины столбца, то же отношение, что у зазора к столбцу в знаке.

Палитрахвоя · латунь

11 · Три позициирост снизу
шрифт
аватар
тёмный
16 px
один цвет

РоликСтолбцы вырастают снизу вверх с задержкой, средний приходит последним и выше всех.

СмыслДешёвый инструмент, мы, дорогая студия. Средний выше не потому, что лучше всех, а потому что стоит там, где никого нет.

Шрифт выведен из знакаСтолбцы шириной 24 с шагом 38. Шрифт взял тяжёлый штрих 18 и плотный трекинг 12 — та же массивность, что у столбцов, без воздуха между ними.

Палитрасталь · оранж

12 · За один деньзаполнение по кругу
шрифт
аватар
тёмный
16 px
один цвет

РоликСекторы загораются по кругу один за другим, последний — акцентный.

СмыслДвенадцать часов. Не «быстро», а конкретный срок, который можно проверить по часам.

Шрифт выведен из знакаЗнак собран из двенадцати секторов круга. Шрифт монолинейный с круглыми окончаниями — та же дуга, только развёрнутая в строку; штрих 12 равен толщине сектора у края.

Палитраграфит · бирюза

13 · Точечная правкаодин элемент из двадцати пяти
шрифт
аватар
тёмный
16 px
один цвет

РоликСетка неподвижна. Один элемент пульсирует и меняет цвет — всё остальное не шелохнулось.

СмыслНаш проверенный отличитель: меняется ровно то, что названо, соседнее не съезжает ни на пиксель. Двадцать четыре элемента стоят, один живёт.

Шрифт выведен из знакаСетка 5×5 с ячейкой 17,6. Шрифт моноширинный с поступью 88 — сетка, вытянутая в строку: каждая литера занимает одну ячейку независимо от формы.

Палитрачернила · киноварь

14 · Плагины в шинувтыкание сверху и снизу
шрифт
аватар
тёмный
16 px
один цвет

РоликМодули приходят сверху и снизу поочерёдно и втыкаются в шину.

СмыслСкиллы, сервисы и плагины подключаются к общей шине. Каждый сам по себе бесполезен, вместе они и есть продукт.

Шрифт выведен из знакаШина высотой 12 и четыре модуля шириной 14,6. Штрих шрифта 14 равен ширине модуля — литера и модуль это одна и та же деталь.

Палитраночь · электрик

15 · Хаос в порядокразлёт и сборка
шрифт
аватар
тёмный
16 px
один цвет

РоликЯчейки прилетают с разных сторон, поворачиваясь, и садятся в ровную сетку.

СмыслЗаявка приходит беспорядком. Наша работа — не добавить красоты, а поставить всё на места.

Шрифт выведен из знакаШестнадцать ячеек 20,25 со скруглением 2. Шрифт наследует скругление и плотность: прямые обрезы, трекинг 14 — тот же шаг между ячейками.

Палитратушь · охра

16 · Оттискприпечатывание
шрифт
аватар
тёмный
16 px
один цвет

РоликПлашки приходят с масштаба 1,25 и жёстко садятся в подложку — удар, а не наплыв.

СмыслПечать ставит тот, кто отвечает. Материал не выкладывается, а припечатывается — с ответственностью за результат.

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

Палитрасажа · сурик

17 · Опус раскрываетсяразворот створок
шрифт
аватар
тёмный
16 px
один цвет

РоликСтворки разворачиваются от корешка на 74° и встают в плоскость.

СмыслOpus — произведение, у которого есть корешок и разворот. Мы делаем не файлы, а работы, которые открывают.

Шрифт выведен из знакаСтворки со светлой и теневой стороной. Шрифт контрастный по тому же закону: вертикали полные, горизонтали 0,34 — одна логика света в знаке и в литере.

Палитраслива · марсала

18 · Две части сходятсявстречное движение
шрифт
аватар
тёмный
16 px
один цвет

РоликПоловины прилетают навстречу друг другу с поворотом и садятся замком.

СмыслРазвитие того хода, который вы отметили первым. Части приходят порознь и сходятся без зазора — точная сборка, а не склейка.

Шрифт выведен из знакаЗамок глубиной 12 при ширине половины 38,7. Штрих шрифта 21 повторяет толщину перемычки замка, трекинг 11 — её зазор.

Палитрахвоя · трава

19 · Нота собираетсялинейка и головка
шрифт
аватар
тёмный
16 px
один цвет

РоликЛинейки разворачиваются слева направо, затем вырастает головка и поднимается штиль.

СмыслOpus — это музыкальный термин. Стан появляется первым, нота ставится последней: сначала система, потом произведение.

Шрифт выведен из знакаНотный стан из линеек толщиной 3,5 и головка радиусом 13. Шрифт волосяной 9 с круглыми окончаниями — тонкая линейка и круглая головка, перенесённые в литеру.

Палитраграфит · лаванда

20 · Рука на конвейерепадение с неровностью
шрифт
аватар
тёмный
16 px
один цвет

РоликСтолбцы падают сверху по очереди, два садятся с лёгким перекосом и так и остаются.

СмыслКонвейер даёт скорость, рука даёт то, чего у генератора нет. Два элемента из пяти живут не по линейке — и именно это отличает работу от машинной.

Шрифт выведен из знакаПять столбцов, два из которых намеренно сдвинуты и повёрнуты. Шрифт с тем же дрожанием 2,2 — неровность в знаке и в наборе одной величины, а не на глаз.

Палитрасепия · терракота

21 · Слои включаютсяпроявление рамок
шрифт
аватар
тёмный
16 px
один цвет

РоликРамки проявляются от внешней к внутренней, третья — акцентная.

СмыслТак выглядит работа изнутри: слои включаются по одному, и только вместе они дают изображение.

Шрифт выведен из знакаПять контурных рамок толщиной 5,5 со сдвигом 7,5. Шрифт двухлинейный: внутри штриха идёт светлая полоса — тот же контур, вложенный сам в себя.

Палитраглубина · шафран

22 · Стягивание к ядрусхождение по радиусу
шрифт
аватар
тёмный
16 px
один цвет

РоликСпутники сходятся к центру по радиусам, ядро вырастает последним.

СмыслСотни идей вокруг одного ядра. Первая — презентация как лендинг, остальные подтягиваются.

Шрифт выведен из знакаВосемь спутников радиусом 8,5 и ядро 16. Шрифт монолинейный со штрихом 11 и круглыми окончаниями — тот же кружок, протянутый по траектории литеры.

Палитратёмная хвоя · изумруд