Product Design * Motion in App
الذهاب إلى القناة على Telegram
Найкращі приклади анімацій в застосунках та на сайтах. Туторіали з анімації інтерфейсів та корисні посилання для дизайнерів. 👉 Умови, ціни та формати співпраці: http://bit.ly/4pjLByL Реклама та співпраця: @ivanpokazka
إظهار المزيد6 373
المشتركون
+124 ساعات
-37 أيام
-930 أيام
أرشيف المشاركات
Макет у Figma розробник однаково перемальовує в коді, тож навіщо малювати його двічі?
Дизайн-інженер працює одразу в Claude Code. Ресерч, вайрфрейми, інтерфейс, токени й анімація в нього живуть у коді, і розробнику він віддає репозиторій, а не картинку. AI-агенти у Figma досі на слабких моделях, і розрив між дизайнерами, які сидять там, і тими, хто працює в Claude Code, вже величезний.
Цього я, Денис Осадчий, дизайн інженер, вчу на курсі Design Engineering Pro Max 2.0. 12 живих уроків по півтори години, я веду через них один кейс, а ви на домашці повторюєте процес на своєму. У кінці в кожного репозиторій свого продукту від ресерчу до хендофу і набір перевірених промптів, щоб пройти цей шлях з іншим продуктом. Старт 22 жовтня, четвер, 19:00.
📎 Програма курсу
✏️ Забронювати в Telegram
#AD
Крута штука 🔥 Завжди подобалася інтеграція чогось олдскульного в сучасний цифровий світ.
😍 Product Design * Motion in App | Підписатися
Збирав референси для ізометричних іконок на сайт SaaS-продукту та знайшов справжній скарб✨
Prompt:
«/isometric-objects Мені потрібна ізометрична ілюстрація у форматі SVG, це має бути старий фізичний монітор, схожий на перший ПК від Apple, з логотипом Anthropic на екрані, а також, щоб там була інтерактивна клавіатура з кабелем»Виглядає доволі гарно 🔥 😍 Product Design * Motion in App | Підписатися
Скільки часу ви витрачаєте у Figma на те, що можна не робити руками?
Дмитро Ніколаєнко, 15 років у продуктовому дизайні і 8 мобільних банків як лід, зробив 4 безкоштовні плагіни, які забирають рутину:
- VooDoo Maker - дизайн-система з одного кольору за хвилину: 150+ змінних, світла і темна тема, 12 компонентів зі станами
- Code Runner - Claude пише скрипт, плагін виконує його за секунду. 51 хардкод-хекс у токени одним кліком
- Design System Doctor - знаходить усе, що не прив'язано до токенів
- Claude to Figma - описуєш екран словами, отримуєш живі шари з auto layout
До них є воркбук: як використовувати плагіни разом, промпти і готові скрипти під кнопкою «Копіювати».
✅ Забрати безкоштовно
Безкоштовні ефіри про AI для дизайнерів щочетверга о 19:00 - у каналі UX Hero:
🔗 Посилання тут
#AD
🚀 Junior Frontend Developer | Київ, офіс
TenThousand запрошує на роботу! Якщо ви не можете знайти першу роботу через відсутність комерційного досвіду чи дефіцит пропозицій на ринку, ми запрошуємо вас до нашої команди.
💰 Зарплата: $300–1000 (перегляд кожні 6 місяців)
📍 Локація: Київ, офіс (компенсуємо витрати на переїзд)
Що ми очікуємо від вас:
🔹 Хороша база в JavaScript & TypeScript.
🔹 Знання одного з фреймворків: React / Angular / Vue.
🔹 Рівень англійської від B1+.
➡️ Відгукнутися
#job #sponsored
Higgsfield тепер збирає анімації в 🖼️ After Effects за допомогою 🤖 ChatGPT
Дарма я побачив це перед сном. Хто вже тестував, діліться своїми враженнями.
https://higgsfield.ai/ai-motion-designer
😍 Product Design * Motion in App | Підписатися
Як змінився підхід до проєктування продуктів 😅
😍 Product Design * Motion in App | Підписатися
🖌 Figma додала комбінації клавіш для перемикання режимів:
— Alt + Tab (на Mac:
Option + Tab) — наступний режим
— Alt + Shift + Tab (на Mac: Option + Shift + Tab) — попередній режим
Або вибирайте курсором. Оновлення буде доступне всім протягом тижня.
😍 Product Design * Motion in App | Підписатися🍏 Apple випустила гайдлайни для iPhone Duo. Це перший раз, коли iOS-додаток треба готувати до складаного екрана. Подивився сесію Marcos і Vince з дизайн-команди 🍏 Apple, ось що звідти важливо для роботи.
КОНТРОЛИ ПЕРЕЇЖДЖАЮТЬ УБІК
Закритий пристрій має ширший і нижчий дисплей, ніж звичний iPhone. Тому таб-бар, тулбари, кнопка «назад», перемальований статус-бар і Dynamic Island тепер живуть у вертикальній смузі праворуч. Так вивільняється вертикаль під контент, а керування лишається під великим пальцем. Мапінг з наявного айфона прямий: що було вгорі тулбара, іде вгору смуги, що було внизу, лишається внизу, таб-бар знизу. Широкі елементи типу текстових кнопок і segmented control залишаються в нав-барі.
МАКЕТИ ПІД КОЖНУ ПОЗУ
Пристрій розкривають наполовину як книжку, ставлять на стіл як ноутбук, лишають стояти на ребрі. Спокуса намалювати окремий макет під кожен випадок велика, і Apple прямо каже цього не робити. Замість цього два size class: compact width зовні, regular width всередині. Ніяких фіксованих ширин і брейкпоінтів під конкретний екран, тільки layout margins і horizontal safe area insets. Формулювання Vince я б повісив на стіну: проєктуйте так, щоб додаток вільно ресайзився.
ЗОВНІШНІЙ ДИСПЛЕЙ
Центрувати контент по всій ширині за замовчуванням більше не вийде, йому потрібен офсет, щоб не ховатися під контролами. Якщо верстка спирається на safe area insets, це стається саме. Виняток є: імерсивні візуальні екрани без скролу можна лишати центрованими, якщо контроли нічого не перекривають. Змішаний варіант теж працює, коли фон чи хедер ідуть на всю ширину, а скрольований контент має відступ.
ВНУТРІШНІЙ ДИСПЛЕЙ
Тут не має бути розтягнутого айфона. Split view показує кілька рівнів ієрархії одночасно. Вертикальний стек може перебудовуватися у дві колонки, коли з'явилася горизонталь. Таб-бар можна подати як сайдбар, але це радше для щільних застосунків типу Health.
СКЛАДАННЯ
Кнопки, що опиняються прямо в згині, натискати незручно. Тому системні компоненти самі відсувають інтерактивні елементи вбік: шіти, алерти, меню, кнопки тулбара. Скрольований контент відсувати не треба. Для мене це найсильніший аргумент не малювати власні компоненти там, де є системні.
Шіти окремо: зовні їхні контроли теж ідуть убік, і це можна вимкнути, якщо кнопка одна. Всередині, у портреті й ландшафті, працюють звичайні горизонтальні бари.
І те, що варто винести з усієї сесії: ієрархія і функції не залежать від пози. Люди складатимуть і розкладатимуть пристрій прямо посеред сценарію, тож додаток має поводитися передбачувано.
Практично все зводиться до адаптивності. Роботу, яку хороші продуктові команди й так мали робити, тепер просто не вийде відкласти.
А ви вже приміряли свої макети до цього форм-фактора?
Відос адин: https://www.youtube.com/watch?v=do3UqxfYc3I
Відос два: https://www.youtube.com/watch?v=qsd-VwqmZvI
😍 Product Design * Motion in App | Підписатися
+3
Цікаво, що компанія, яка використовує штучний інтелект, найняла дизайнера-людину, щоб він вручну, по одному, створив їхній набір іконок 😮
Мареку Мінору знадобився рік, щоб створити новий набір іконок для Cursor. Мені подобається увага до деталей у цьому прикладі.
Детальний розбір кейсу за посиланням: https://www.minoradventures.co/blog/the-making-of-cursors-icons
😍 Product Design * Motion in App | Підписатися
У дизайнерів з'явилася нова спеціалізація: Прибиральник матеріалів, створених нейромережами 💩
Компанії все частіше спочатку генерують логотипи, ілюстрації, тексти та відео, а потім наймають фрілансерів, щоб виправити все це. Потрібно видаляти зайві пальці та шум, підвищувати роздільну здатність, виправляти криві тексти, роботизовану озвучку, а іноді повністю переробляти результат, пише
The Guardian
Для деяких спеціалістів корекція матеріалів, створених ШІ, вже стала основною роботою. У одного з героїв матеріалу такі завдання займають 90% замовлень і приносять від 60 до 70% річного доходу. На платформі типу Freelancer кількість вакансій, у яких згадуються помилки та "галюцинації" ШІ, зросла на 87%, на Upwork таких завдань стало на 70% більше за рік, а на Fiverr попит зріс більш ніж у 20 разів з 2023 року.
Проблема в тому, що замовники часто вважають таку роботу швидкою та дешевою. Хоча на виправлення згенерованого матеріалу може піти стільки ж часу, скільки й на створення роботи з нуля.
Як ви гадаєте, чи скоро все таки настане той час коли дизайнери будуть не потрібні і зможуть піти варити каву на барі, та розводити курочок в селі?😍 Product Design * Motion in App | Підписатися
Цікавий сервіс для презентації інтерфейсів – UI Camera
Закидаєш скріншот або відео інтерфейсу, налаштовуєте кут у 3D по осях X / Y / Z і отримуєте акуратний кадр, майже як зі студійної зйомки.
Можна створити просто гарний статичний кадр для кейсу, лендінгу або презентації, а можна зібрати відео з рухом камери і використовувати його як частину продуктової презентації.
Для швидких кейсів класна штучка...
Лінк на "спробувати" тут: https://ui.camera/
😍 Product Design * Motion in App | Підписатися
Вийшла версія 🤖 Fable 5.1
Claude останнім часом почав дивно часто "зависати". Він став повільнішим, лінується, і на простих завданнях може довго "думати" – і тоді у мене виникла думка: можливо, Anthropic готує нову версію Fable або Opus.
Минув тиждень... Вітаємо Fable 5.1
До того ж, у описі Anthropic акцентується увага на тому, що модель краще виконує запити і менше проявляє "самодіяльність".
Також було збільшено ліміти, тому зараз піду тестувати. Особливо цікаво подивитися, що змінилося в Claude Code, тому що саме там минулого тижня Fable мене найбільше дратував.
Тільки б обнулили тижневий ліміт 🤞🏻
😍 Product Design * Motion in App | Підписатися
Ставте лайк, якщо сьогодні теж йдете до школи 👨💻
На щастя, ті самі дні знань, з лінійкою давно минули. А ось постійне навчання – ні. І це одна з найкращих частин моєї роботи.
Раніше було приблизно так: закінчив навчання, зібрав портфоліо, знайшов роботу, поступово накопичуєш досвід і все впевненіше збільшуєш зарплату.
Але якщо вирішили зануритися у сферу ШІ, ця модель починає руйнуватися. Тут не вийде один раз вивчити 10 інструментів і далі працювати за звичною схемою. І немає сенсу вивчати 50 – стек оновлюється зі швидкістю світла. З'являються нові моделі, агенти, AI-функції та підходи.
Набагато важливіше швидко розбиратися в новому, розуміти, де це може дати вам перевагу, і збирати робочі комбінації під конкретне завдання.
Тому навчання не закінчилось після отримання атестату чи диплому, навчання стало частиною мого робочого процесу 🎉 З 1 Вересня всіх 😘
____________
До речі, осінь — моя найулюбленіша пора року, і перший день осені у Львові розпочався дуже вайбово. Густий туман, дощ, прохолода — все те, що я обожнюю в осінній час 🍂
Також запрошую Вас до мене в LinkedIn: https://www.linkedin.com/in/pokazkaivan/
Вибачте за оффтоп. Такий то сьогодні день
😍 Product Design * Motion in App | Підписатися
Прикольний сайт CV дизайнера з 🇬🇧 Великої Британії
Автор: Mike Barton
Лінк: https://www.mikes.cv/
😍 Product Design * Motion in App | Підписатися
У Figma оновили роботу з векторами, з'явився повноцінний ластик, і покращили Paint Bucket (інструмент заливки).
Тепер можна стирати окремі ділянки векторних контурів прямо на полотні, а заливку або градієнт — протягувати одразу через кілька областей, щоб швидко їх перефарбувати.
Ластик працює в режимах Vector Edit та Draw, гаряча клавіша: Shift + E.
😍 Product Design * Motion in App | Підписатися
Repost from Дизайн без фігні
Якщо давно хотіли знайти якісь курси де розповідали б про те як користуватись Claude Code - то ловіть мій авторський інфоциганський курс то ловіть посилання на офіційну Claude Академію де зібрані всі корисні матеріали про те як користуватись АІшкою
А ще, "супер нова та game changer фіча" - можна напряму спитати в чаті питання яке тебе турбує і клод (маючи базу знань зі всієї академії) - детально відповість
В соц мережах вже почався тиждень повідомлень "курси більше не потрібні"
