Design Portal

Прокачай чувство UI-анимации 💪 Набор быстрых упражнений для тренировки навыка motion design: ищешь ошибки в анимации, называешь их и исправляешь. → https://emilkowal.ski/ui/train-your-judgement Автор: Emil Kowalski 👉 @PortalToDesign

В Figma появился новый инструмент для автоматизации рутинных задач — Check Designs. Теперь проверка макета на соответствие дизайн-системе занимает считанные секунды. Чтобы проверить фрейм, просто нажмите правой кнопкой мыши и выберите Check Designs. Инструмент мгновенно подсветит: Стили и переменные: привязаны ли цвета и типографика к вашим Libraries. Доступность: соответствуют ли цвета требованиям по контрастности. Консистентность: совпадают ли отступы и радиусы скругления с настройками дизайн-системы. Состояние компонентов: есть ли «отсоединённые» (detached) компоненты, которые требуют обновления. Все найденные проблемы можно исправить в один клик, а после завершения проверки — изменить статус макета на Ready for dev. Функция доступна для всех платных подписок Figma. 👉 @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

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

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

Лето начинается: водные развлечения, гриль на острове и новые маршруты в бутик-отеле «Заонежье» Для гостей бутик-отеля «Заонежье» к новому сезону подготовлены лесные трассы для первых заездов на новых квадроциклах — они позволяют исследовать дикие уголки карельской тайги и скалистые берега озер. Велопрогулки по дорогам Заонежья стали еще комфортнее благодаря электробайкам, которые этой весной пополнили велопарк отеля. В мае, в отеле открылся сезон водных развлечений: гостям доступны сапы, каяки и весельные лодки. В этом году пользование ими - комплементарное для всех гостей. Также появились новые маршруты для катеров по заливам Онежского озера. Ресторан «Руна» представляет летнюю серию гриль-сетов, которые можно приготовить самостоятельно на одном из необитаемых островов или устроить барбекю на лужайке у дома. В меню — овощные и рыбные сеты, а также мясное ассорти. Бутик-отель «Заонежье» приглашает к активному отдыху среди озер и северной природы Карелии.

Похоже, работать с OKLCH-цветами в терминале стало заметно удобнее. oklch-skill добавляет нормальный workflow для работы с современными цветовыми палитрами прямо из терминала, без постоянных прыжков между браузером, дизайн-инструментами и генераторами цветов. Для тех, кто использует OKLCH в интерфейсах, дизайн-системах или Tailwind-проектах, выглядит как довольно полезный инструмент. npx skills add jakubkrehel/oklch-skill https://github.com/jakubkrehel/oklch-skill 👉 @PortalToDesign

Кажется, morphing braille loader постепенно становится новым стандартом. Очень круто выглядит сочетание брайлевского лоадера с плавным морфингом текста. Такие мелочи редко влияют на функциональность, но интерфейс сразу ощущается более живым и продуманным. 👉 @PortalToDesign

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

7 правил сетки, которые улучат ваш дизайн. 👉 @PortalToDesign

Гайд по созданию стеклянно-металлических кнопок в Figma. 👉 @PortalToDesign

Reve 2.0 тихо зарелизили. Бесплатная модель для генерации изображений, которая продолжает удивлять. Что нового: • теперь сначала строит layout сцены, а уже потом рендерит изображение • из-за этого гораздо проще править отдельные объекты и детали • сразу генерирует в 4K • отлично справляется с интерфейсами и текстом на картинках • работает заметно быстрее многих конкурентов На сложных сценах всё ещё встречаются артефакты, но для бесплатной модели результат выглядит слишком хорошо. Похоже, разрыв между бесплатными и платными генераторами изображений становится всё меньше. Попробовать можно здесь: https://blog.reve.com/posts/the-layout-bet/ 👉 @PortalToDesign

При анимации weight вариативного шрифта не забывайте одновременно уменьшать optical sizing, чтобы сохранять ширину текста. 👉 @PortalToDesign

Рецепт плавного появления попапа opacity + scale + смещение по оси Y (translateY) + blur (размытие) 👉 @PortalToDesign

Делаем деформированный текст без Figma плагинов. 👉 @PortalToDesign

ASCIInator Превращает изображения в ASCII-графику: можно настроить шрифт, размер и цвет текста, а результат экспортировать в SVG или PNG. Отлично для ретро-интерфейсов и необычного текстурного визуала. 👉 @PortalToDesign

3dsvg — бесплатный сервис для создания 3D объектов из SVG изображений. 👉 @PortalToDesign

Подборка из 3 полезных сервисов для дизайнеров. 👉 @PortalToDesign

gr iii d — бесплатный редактор для создания собственных листов для блокнота, можно скачать как пдф или сразу распечатать 👉 @PortalToDesign

Всё что вам нужно знать о лицензиях на шрифты для дизайнеров. 👉 @PortalToDesign