Много экспериментировал с liquid glass для веба в прошлом году, используя CSS + SVG
Ключом к кроссбраузерности стал переход с svg backdrop-filter на обычный filter, а также синхронизация текстур карты смещения (displacement map)

👉 @PortalToDesign

Кажется, morphing braille loader постепенно становится новым стандартом.

Очень круто выглядит сочетание брайлевского лоадера с плавным морфингом текста.

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

👉 @PortalToDesign

Похоже, работать с OKLCH-цветами в терминале стало заметно удобнее.

oklch-skill добавляет нормальный workflow для работы с современными цветовыми палитрами прямо из терминала, без постоянных прыжков между браузером, дизайн-инструментами и генераторами цветов.

Для тех, кто использует OKLCH в интерфейсах, дизайн-системах или Tailwind-проектах, выглядит как довольно полезный инструмент.

npx skills add jakubkrehel/oklch-skill

https://github.com/jakubkrehel/oklch-skill

👉 @PortalToDesign

websitevice — новая библиотека сайтов для воровства идей вдохновения

👉 @PortalToDesign

Совет: не допускайте повторного переноса текста при появлении полосы прокрутки.
Использование scrollbar-gutter: stable решает эту проблему.

👉 @PortalToDesign

Совет по дизайн-инжиринг:

Отделяйте объект от его тени.
Когда элемент приподнимается над поверхностью, тень не обязана двигаться вместе с ним. Если оставить тень на месте и постепенно уменьшать её интенсивность по мере удаления объекта, можно добиться более убедительного ощущения глубины и физичности.

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

const card = document.querySelector(".notification");
const shadow = document.querySelector(".shadow");

card.animate(
  [
    { transform: "translateY(0)" },
    { transform: "translateY(-160px)" },
  ],
  {
    duration: 900,
    easing: "cubic-bezier(.64,0,.78,0)"
  }
);

shadow.animate(
  [
    { opacity: 0.5, transform: "scaleX(1)" },
    { opacity: 0, transform: "scaleX(.35)" },
  ],
  {
    duration: 700,
    easing: "ease-out"
  }
);

👉 @PortalToDesign

В Figma появился новый инструмент для автоматизации рутинных задач — Check Designs.
Теперь проверка макета на соответствие дизайн-системе занимает считанные секунды.

Чтобы проверить фрейм, просто нажмите правой кнопкой мыши и выберите Check Designs.
Инструмент мгновенно подсветит:

Стили и переменные: привязаны ли цвета и типографика к вашим Libraries.
Доступность: соответствуют ли цвета требованиям по контрастности.
Консистентность: совпадают ли отступы и радиусы скругления с настройками дизайн-системы.
Состояние компонентов: есть ли «отсоединённые» (detached) компоненты, которые требуют обновления.

Все найденные проблемы можно исправить в один клик, а после завершения проверки — изменить статус макета на Ready for dev.
Функция доступна для всех платных подписок Figma.

👉 @PortalToDesign

Прокачай чувство UI-анимации 💪

Набор быстрых упражнений для тренировки навыка motion design: ищешь ошибки в анимации, называешь их и исправляешь.

→ https://emilkowal.ski/ui/train-your-judgement

Автор: Emil Kowalski

👉 @PortalToDesign