Персонализируйте движение, но не фирменный цвет

Эффектная версия персонализации перекрашивает всё. Посетитель-стартап? Сделаем синим. Корпорация? Холодный фиолетовый. Это красиво смотрится в демо и тихо разрушает единственный актив, на построение которого бренд тратит годы: цвет, который люди узнают, не читая логотип.

Мы персонализируем, но провели границу по оттенку. Hero-блок нашей главной страницы — это поле частиц на Three.js, и когда сегмент аудитории посетителя определён, он настраивает две вещи: скорость движения и плотность соединительной решётки. Сегмент стартапа получает более быструю, разрежённую решётку с большей энергией. Корпоративный сегмент получает более спокойную, плотную решётку, которая читается как структурированная и устойчивая. Что не меняется — так это акцентный цвет. Фирменная magenta удерживается постоянной во всех сегментах, намеренно, на уровне кода. Мы не перекрашиваем в синий, янтарный или фиолетовый, потому что это сломало бы бренд ради новизны.

За видимой дисциплиной кроется вторая: сегмент определяется автоматически только при наличии согласия на аналитику, и посетитель всегда может изменить выбор вручную. Посетители, пришедшие впервые, все, кто отклонил согласие, и все, кто ещё не выбрал путь, получают нейтральный вариант по умолчанию. Персонализация здесь — это улучшение полноценного опыта, а никогда не барьер перед ним.

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

Принцип: адаптируй ощущение, защищай идентичность. Скорость и плотность несут сообщение; цвет несёт бренд, а бренд — не переменная. Сделанное правильно, это позволяет двум посетителям получить измеримо разный опыт и всё же описать сайт одним и тем же словом — вашим.