Новый навык /apple-design поможет применять принципы дизайна Apple на практике

Появился новый навык /apple-design, основанный на материалах конференции WWDC от Apple. Его автор изучил лучшие доклады о дизайне и собрал 17 ключевых принципов дизайна и анимации, которые лежат в основе пользовательского опыта продуктов Apple.

👉 @PortalToDesign

Некоторые из моих любимых UI-библиотек:

NumberFlow — для анимации чисел.
input-otp — для полей ввода одноразовых кодов (OTP).
Liveline — для графиков в реальном времени.
Leva — для создания настраиваемых GUI.
cmdk — для командных меню (command menu).
Virtuoso — для виртуализации списков.
dnd kit — для реализации drag-and-drop.
Sonner — для toast-уведомлений.

👉 @PortalToDesign

Вау. Просто подборка кинематографичных hero-секций.

https://openhero.art/

👉 @PortalToDesign

😂😂😂

👉 @PortalToDesign

ловите вдохновения

👉 @PortalToDesign

А это курируемая коллекция готовых промптов для создания впечатляющих лендингов и мобильных приложений: https://motionsites.ai/

Просто копируйте, вставляйте и запускайте 🦍

👉 @PortalToDesign

Рисуем свет сквозь ребристое стекло и изучаем паттерн отражения (Reflection Pattern) в Figma.

👉 @PortalToDesign

Необычным образом стилизуем текст с помощью новых инструментов в Figma.

👉 @PortalToDesign

Разработчик Эрик Лу придумал Ghost Font — шрифт, который могут прочитать люди, но не нейросети.

На самом деле это не совсем шрифт, а способ кодирования текста в анимированном видео с движущимися точками. Точки, из которых состоят буквы, движутся в одну сторону, а точки фона — в другую.

Наш мозг легко улавливает это движение и быстро складывает его в буквы. Поэтому человек практически сразу понимает текст.

А вот ИИ-модели разбивают видео на кадры, анализируют их как отдельные изображения и пытаются восстановить смысл. Но в каждом отдельном кадре букв нет.

При этом для нейросетей также добавляется «ложный текст», который они уже могут прочитать. Это служит дополнительной ловушкой для ИИ.

Даже самые мощные ИИ-модели Fable и GPT Sol 5.6 Ultra не могут прочитать настоящее сообщение.

Вы также можете [написать собственное послание] другу.

👉 @PortalToDesign

Быстро и просто анимируем иконку в Figma Motion.

👉 @PortalToDesign

С помощью ИИ и Three.js можно просто создавать красивые 3D-миры кодом.
Вот мой рабочий процесс ↓

1/
Сначала я описываю ИИ мир, который хочу создать.
Не только то, как он должен выглядеть, но и:
• атмосферу
• композицию
• взаимодействия
• анимацию
• уровень реализма
• что должно генерироваться процедурно, а для чего нужны внешние ассеты ↓

2/
Затем я прошу ИИ определить подходящие технологии.
В зависимости от концепции это могут быть:

Three.js
GLSL / TSL
GSAP
постобработка
процедурная геометрия
системы частиц
физика и анимация

Стек должен подстраиваться под идею, а не наоборот. ↓

3/
Далее я прошу ИИ превратить концепцию в подробный промпт для написания кода.
В нём описываются структура сцены, материалы, освещение, анимации, взаимодействия и технические ограничения.
Так ещё до написания кода появляется гораздо более чёткий план реализации. ↓

4/
Также я генерирую референсное изображение специально под реализацию.
Важный момент: на нём должны быть формы и конструкции, которые реально воспроизвести кодом, а не произвольные детали, работающие только в статичном изображении.
Референс — это визуальный ориентир, а не изображение, которое нужно копировать пиксель в пиксель. ↓

5/
Затем появляется первая реализация.
И почти никогда она не становится финальной.
После этого начинается настоящая работа — итерации:
> корректировка пропорций, исправление расположения объектов, улучшение шейдеров, доработка движения, уменьшение визуального шума и приближение атмосферы к исходной задумке.

👉 @PortalToDesign

Сделали небольшое терминальное приложение для скачивания видео из X, YouTube, Instagram и других сервисов.

Копируете URL поста, вставляете — и файл скачан.

npm i -g yoinks

https://github.com/pablostanley/yoinks

👉 @PortalToDesign

Iconbuddy 2.0 — библиотека из 200 тысяч иконок во всех популярных форматах и разрешениях от 24px до 1024px

👉 @PortalToDesign