Марта Барандій · Бренд-система

Рух

Тут усе рухається, як шовк: мить на розгін, рух із вагою — і спокій. Ніщо не смикається, щоб привернути увагу.

Поводіть курсором — за ним тягнеться червона ниткаЗменшений рух враховано всюди

Три принципи

Тканина, а не м’ячик.

Крива за замовчуванням — шовк: повільний початок, повільне завершення. Пружина — лише для натискання, яке відпускають. Жодної гумовості, жодного хитання.

Один зрежисований момент.

Кожен екран має одну появу, яка розповідає історію: сантиметр, що розмотується на головній, нитка через результат. Усе інше просто з’являється. Ми не проявляємо кожен розділ із прозорості.

Відповідайте людині.

Рух — це відповідь: наводите курсор — нитка натягується; обираєте — зав’язується вузол; швидко прокручуєте — поділ хвилюється. Якщо нічого не змінилося, ніщо не рухається.

Згладжування: як рухаються речі

Чотири криві — і нічого більше. Натисніть картку, щоб пустити кульку її кривою. Числа під кожною — точні значення для Figma, After Effects чи розробника.

Тривалості

Чотири щаблі. Дрібне — швидке; те, що рухається далеко, — довше. Понад секунду — лише для зрежисованого моменту.

140 мснаведення
260 мснатискання, колір
520 мсформа, стібок вкладки
900 мспоява, смуги-пігулки

Спробуйте

Торкніться кожного. Під ним: що означає рух, скільки він триває і якою кривою йде.

Нитка, що малюється

Будь-яка лінія бренду (нитка, монограма, лінія графіка) один раз сама промальовується, коли з’являється на екрані. 1600 мс, крива «шовк». Ніколи не зациклюється.

Торкніться будь-де тут.

Вузлик-спалах

Рішення зав’язується: маленький червоний вузол там, де ви торкнулися. 700 мс, швидкий старт і м’яке приземлення. Супроводжує кожну червону кнопку рішення.

Швидкість прокручування зараз

Прокрутіть сторінку швидко, потім повільно. Поділ унизу хвилюється у вашому темпі й заспокоюється, коли ви зупиняєтеся. Картки з подолом і поділ між розділами реагують так само.

Хвиля подолу

Що швидше прокручуєте, то глибша хвиля: від рівної лінії до повної. Невдовзі після зупинки вона знову вирівнюється.

Ближче

Магніт

Кнопка тягнеться до курсора на 10 px, не більше. Лише для миші й трекпада; для головної дії, один раз на екран.

Картка результатуНахиляється за курсором.

Нахил

М’який об’ємний нахил, щонайбільше 8°, слідом за курсором. Для того, що залишається з вами: картки результату, плаката, який можна завантажити.

Поводіть курсором будь-де на цій сторінці.

Нитка за курсором

М’яка червона нитка з легкою вагою тягнеться за курсором і згасає, коли ви зупиняєтеся. Лише на комп’ютері.

12випусків Brussels Ukraïna Review, 2019–2024.
Зразок А90
Зразок Б55
Зразок В30

Лічильник і смуги-пігулки

Числа набігають один раз, 1400 мс: спершу швидко, потім сповільнюючись до кінцевого значення. Смуги ростуть, коли з’являються на екрані, 900 мс. Кінцеве число завжди на місці — для екранних читачів і для всіх, хто пропустив анімацію.

Крок 1 з 5

Вузли прогресу

Кожен крок зав’язує червоний вузол. 520 мс, крива «шовк».

Зменшений рух: та сама історія, без переміщень

Якщо людина просить свій пристрій зменшити рух, кожен ефект стає простою зміною стану.

Переверніть кожну картку, щоб побачити, що відбувається натомість.

Наведіть на мене
Розгорніть мене

Зі зменшеним рухом вона розгортається без повороту плюса.

Перевіряйте кожен дизайн з увімкненим налаштуванням «Зменшити рух» на пристрої, а не лише цим перемикачем.