Засел на неделю за seifrinat.com - и, кажется, наконец поймал то ощущение, которого добивался.

Поменял основной цвет, переработал скролл, чтобы листалось плавно, и добавил анимацию обратной связи - сайт теперь реагирует на то, что ты делаешь. мелкие приколы, но да из такого и складывается ощущение «живого» продукта. Заодно пересобрал кейсы: убрал лишнее, оставил суть, результат и свою роль в каждом проекте. И перестроил главную так, чтобы первым делом было видно работу, а не меня. Дальше - полностью пересоберу страницу Work и настрою CMS, чтобы каждый кейс открывался в свою отдельную страницу с полным разбором. Ещё допиливаю. Но направление чувствую верное. Открыт к проектам, командам и продуктам — пишите, будем на связи. 🔗 seifrinat.com

Продолжаем тестировать Claude Code: сделала концепт для анимационной студии MAPPA💻

→ CapCut + Figma MCP + Claude Code В этот раз собирала дизайн и монтировала видео в Figma + CapCut, верстку полностью отдала Claude Code – просто попутно объясняя, что я хочу видеть. У меня это заняло 1-2 рабочих дня на все-превсе. А потом говорят «да че там, пару кнопок нажал и готово»😑 В этот раз без инструкции для клодика, так как верстка слишком кастомная, только запутаю всех… #полезное #клод #кейсы

Ура, наконец-то настоящий рабочий кейс с ИИ!

Кейс NDA. Поэтому, увы, покажу вам бокал, но зато расскажу как это было и как можно получить действительно качественный результат. ⚡️ Дано: презентация pptx на 18 слайдов со сложными схемами. В некоторых схемах 3х-ступенчатый уровень вложенности (кто сталкивался — поймет КАК это больно верстать). 💥 Результат: лендинг на 18 экранов в Claude Design за 3(!) часа с сохранением контента, стиля компании, анимациями и интерактивными схемами 🏃‍♂️ Что получилось: — дословный перенос контента — сохранение фирменного стиля компании — сложные, многоэтажные, статичные схемы стали интерактивными. И это стало главным вау-эффектом для заказчика — спецэффекты без боли: анимации появления экранов и отдельных блоков, эффекты стекла и плавные переходы. 🥲 Главное в этом кейсе — это скорость и возможность повторить алгоритм на других презентациях. Напоминаю, эту красоту со сложнейшим контентом удалось сотворить (десктоп+моб версии) за 3(!) часа. По моему скромному мнению, это — невероятный результат. И наконец-то реальный кейс с эффективным использованием ИИ. Кстати, коллегам так зашло, что на встрече с заказчиком показывали именно лендинг, а не классическую статичную презентацию. 💥 Что нужно на вход, чтобы попробовать применить у себя: — собственно оформленная презентация, сохраненная в .pdf. Но если у вас совсем нет времени, то супер базовая верстка и отдельно прикрепить визуалы. 👀 Важный нюанс: все визуалы прикрепляю отдельными вложениями и прописываю на каком экране какой визуал должен быть. — UI-кит стиля компании. Причем я делала компонентами не так много вещей: палитру, типографику и плашки) Все! Никакие skills, референсы и специальные промпты не давали такого результата, как ui-кит и базово оформленная презентация. Пишите в комментариях, если будут вопросы по алгоритму действий 🙏

Figmotion — плагин для создания анимации прямо в Фигме.

✨ SBS-анимация фоновых картинок
Для оживления любого блока можно поставить на фон видео или написать код для эффектного слайдера, а можно воспользоваться тем, что дает нам сама Тильда и собрать вручную зацикленную пошаговую анимацию с плавной сменой фоновых картинок. Делюсь с вами готовым шаблоном с анимацией для бесконечного слайдера из семи изображений, которые медленно увеличиваются и плавно сменяют друг друга через прозрачность — Template id: 148628486 ✨ Примечания: 🧡 Если вам надо уменьшить или увеличить количество картинок, соответственно отнимайте или добавляйте ко времени ожидания (delay) 6 секунд за каждое убранное или добавленное изображение. ❤️ Сами картинки удаляйте, начиная с предпоследней (или добавляя после предпоследней), первую и последнюю не удаляйте, только меняйте время. 💜 Если вместо эффекта увеличения нужен другой, например, сдвиг вверх или вниз, то напишите мне, я помогу объяснить какие настройки требуются, тут не все так просто 😅 ❤️ Любые вопросы по анимации можете задать в комментариях к посту #тильда #верстка
🚗 Интерфейс за рулём нельзя проектировать как обычное приложение
Команда дизайна и исследований Делимобиля собрала гайд по безопасным интерфейсам для сервисов, которыми могут пользоваться в машине. Это не только про карты и навигацию. Сюда же попадают звонки, музыка, заправки и любые сценарии, которые человек хотя бы теоретически может открыть во время движения. Важная рамка здесь простая: сначала нужно спросить не «как сделать удобнее», а «должен ли водитель вообще делать это за рулём». Если нет, функция должна уходить в режим стоянки или автоматизироваться. Если да, интерфейс проектируется по другим правилам: меньше действий, выше читаемость, крупнее цели, понятнее состояние, меньше визуального шума. На скорости 60 км/ч одна секунда взгляда в экран это уже 16 метров без полноценного внимания к дороге. Внутри: – Почему водительский интерфейс нельзя считать упрощённой версией мобильного приложения; – Как решить, можно ли вообще оставлять сценарий доступным во время движения; – Почему лучшая функция для водителя часто та, которая не требует действия; – Какие правила помогают оценивать читаемость, контраст, шрифты и анимации; – Что разрешено делать за рулём, а какие сценарии лучше блокировать до стоянки; – Из каких компонентов собирать безопасные экраны для машины; – Почему дизайн-решения здесь оцениваются не только по удобству, но и по риску отвлечения; – На какие стандарты опирается гайд: ГОСТ, ISO, NHTSA и Android Automotive. ➡️ Читать гайд ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Анимация интерфейса.
🚦 Как 2ГИС превратил «зелёную волну» в интерфейс
Я кайфанул от статьи, это прям продуктово покопаться в таком незначительном элементе) Даня из команды Транспорт в 2ГИС рассказывает, как в навигаторе запускали подсказку для проезда светофоров без лишних остановок. Идея звучит просто: если известны состояния светофоров по маршруту, можно подсказать водителю скорость, при которой он попадёт в зелёную волну. Но в машине простой идеи недостаточно, потому что каждый новый элемент на экране конкурирует не с красивой пустотой, а с дорогой, маршрутом, манёврами, камерами и вниманием водителя. Самое интересное в кейсе, как команда искала форму для этой подсказки. Текстовые сообщения оказались слишком тяжёлыми, одно число требовало постоянного сравнения, а зона спидометра уже была занята предупреждениями. В итоге решение собралась из двух слоёв: плашка с диапазоном скорости даёт точность, а аналоговая шкала с зелёной зоной помогает быстро понять, в потоке ты или нет. Отдельно сильная часть кейса, что дизайнер не остановился на макетах, а полез в математику стрелки, код и параметры анимаций, чтобы фича доехала до релиза в нужном виде. Внутри: – Почему «просто показать скорость» оказалось плохой постановкой задачи; – Как интерфейс навигатора ограничивает любое новое решение; – Почему зелёная волна должна ощущаться как состояние, а не как уведомление; – Как диапазон скорости оказался понятнее одного целевого числа; – Зачем в интерфейсе появился аналоговый спидометр с зелёной зоной; – Как анимации помогают дать обратную связь без лишнего шума; – Почему дизайнеру пришлось проверять техническую реализацию самому; – Что 2ГИС планирует добавить дальше: награды за серию зелёных светофоров и новые города. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
❤️ а продолжим уже тут! ❤️
Воркшоп | 21.06 12:00 | «Моушн на слух: визуализируем звук в After Effects» 21.06 в 12:00 разберёмся, как визуализировать звук и музыку через движение, форму и трансформацию объектов в After Effects. Спикер: Евгения Никонова — моушн-дизайнер в Rambler&Co, новый куратор курса БМГ. Ex-ревьюер в Яндекс Практикуме, преподаватель, выпустила более 300 студентов. Работала с Авито, ВТБ, VK, Купер, ВДНХ, Ростех и другими На воркшопе разберём базу ключевой анимации, траекторию и приёмы трансформации объектов. Покажем, как синхронизировать вайб трека с графикой и собрать видеоарт на свою музыку. В финале Женя даст фидбек по работам участников. По итогам у вас: — видеоарт на ваш трек — базовый навык работы в After Effects и моушн-дизайне — лайфхаки и обратная связь от куратора Воркшоп подойдёт новичкам и тем, кто ни разу не открывал программу. After Effects нужно будет установить заранее, ссылкой поделимся. [ занять место ] любые вопросы можно задать в @alkali_support_bot
😝 дайджест задротских 😝
моушн-событий июня! ❤️ начнём отсюда ❤️ Вебинар | 14.06 12:00 | «Как моушн превращает кейсы в вау-презентацию» 14 июня в 12:00 по мск разберём, как моушн-дизайн помогает усиливать портфолио и продавать проекты быстрее. Статичные работы можно показать динамично: через анимацию, ритм, акценты. Моушн помогает за несколько секунд объяснить идею, удержать внимание и сделать так, чтобы портфолио хотелось досмотреть до конца. Спикер: Евгения Никонова — моушн-дизайнер в Rambler&Co, новый куратор курса БМГ. Ex-ревьюер в Яндекс Практикуме, преподаватель для абитуриентов, выпустила более 300 человек. Еx-арт-директор в креативном агентстве полного цикла НСМ, сотрудничала с Авито, ВТБ, VK, Купер, ВДНХ, Ростех и другими. 1. Посмотрим, в каких областях дизайна можно применять моушн (спойлер: везде, даже в книгах) 2. Разберём примеры выигрышного использования анимации в портфолио, на которое залипнут работодатели 3. Личный опыт Жени, как за счет моушн-дизайна повысить свой чек, а в конце ответим на все вопросы участников [ бесплатная регистрация ]
Минутка букв:
Люблю анимацию про кинетическую, подвижную типографику. Особенно как промо и попытку привлечь внимание дизайнеров. Дизайн для дизайнеров от дизайнеров. Десятилетний юбилей шрифтовой студии Blaze Type. Обновили сайт по этому поводу.
Анимации в логотипе?
Анимированные логотипы становятся все более популярными для размещения их на сайтах. Многие бренды анимируют существующие логотипы или создают новые модные варианты анимации. Анимированный логотип приковывает взгляд и нарушает однообразие дизайна благодаря движению. Лучше сделать анимацию понятной и простой. Слишком сложный интерактивный логотип может оказывать противоположный эффект. Пользователям будет трудно его прочитать или понять его суть. Figma
CGI BATTLE «ШАХ И МАТ»
СПОРТ КЛУБ Щ® х REP CHESS x 3DЩ совместно с креативной мастерской керамики ТЫ ЧО ТВОРИШЬ создай 3D модель чемпионского кубка в виде шахматной фигурки! Формат: изображение или видео 1920 x 1920 (квадрат) статика (png) или анимация (вращение, до 10 сек, mp4) черный фон (важна именно форма) краткое описание концепта приветствуется! Критерии: Критериев, кроме эстетического, нет, но есть нюансы: 1) модель должна быть не более 30см в высоту и ширину 2) модель не должна иметь острые углы 3) модель не должна иметь слишком мелких деталей Призы: 10.000 рублей сертификат на шахматное обучение от Rep chess edu сертификат на мастер-класс от студии «Ты чо творишь» Дедлайн: 13 июня Работы присылать под этот пост!
🙂 Helsa Display в движении
Нежный и дерзкий эльзевир… Это всё о Хельзе Ника Недашковского — стройной и эксцентричной антикве для заголовков и коротких текстов. В Хельзе есть ноги-шпоры «R», шипастая «К», политонический греческий, тире и двоеточие, выравнивающиеся по центру прописных, есть цифры на все случаи жизни и математические символы в индексах. Что ещё спрятано внутри этой антиквы, а также истории о шрифтовых пасхалках — в статье Ника «Helsa Display — история, картинки и разговоры». Рисунок букв Хельзы основан на голландских образцах, а в деталях есть отсылки и к американским шрифтовым каталогам, и к литерам из словолитен Вольфа и Гербека. И теперь вся эта красота ожила благодаря курсу Кирилла Пестовского Motion Type на площадке школы «Вольница». Мы обещали, что буквы будут танцевать. И это случилось. Автор анимации Хельзы: @daryatokk Если понадобится промокод на Хельзу, играйте в игру от наших партнеров — SPELLLENS, где нужно собирать три в ряд, только с диджитал-брендами 🐶
5 сервисов для анимации, которые повысят чек by yanadlx
Держите ссылки на сервисы из этого видео: — Jter — Rive — SVGator — LottieFiles — Haiku Animator #подборка #лайфхаки
Беспилотные Waymo
Waymo разрабатывает технологию полностью беспилотных такси. Увидела статью в New York Times и пошла с Клодом проверять, а что же по доступности? А они-то молодцы! Начали ей заниматься давно. Причем как физической, так и цифровой! Клод сделал интерактивный отчёт со всеми WCAG-критериями, user journey и рекомендациями → https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/ А тут давайте тут расскажу, что мне очень понравилось. Заказать поездку можно только через мобильное приложение Waymo One. После вызова к вам приезжает полностью пустой электромобиль и всё взаимодействие от посадки до климат-контроля и музыки идёт через приложение. И вот его-то и разберем. · Приложение работает с VoiceOver (iOS) и TalkBack (Android). Во время поездки информация дублируется голосом, включая статусы («машина приехала», «можно отстегнуть ремень»). · Audio guidance («Голосовые подсказки»): при приближении к автомобилю приложение через динамик телефона проговаривает расстояние и направление. · Honk to find («Посигналить для поиска»): кнопка в приложении удалённо подаёт звуковой сигнал автомобиля. · Световые сигналы фар: визуальный аналог гудка для глухих и слабослышащих. · Extra time to board: пассажир может заранее выбрать увеличенное время на посадку, чтобы водительский автомобиль дольше ждал. · Braille-надписи на кнопке двери и поручнях. · Текстовые субтитры всех голосовых объявлений на экране в салоне. · Приложение минималистично. Основной экран — это карта с минимумом элементов. Как же это важно! · Фирменная анимация «радара». При поиске машины над кнопкой появляется вращающаяся дуга, напоминающая лидар-сканер. Такой индикатор активности системы. · Микро-взаимодействия и тактильная отдача. Когда машина подъезжает, телефон даёт характерную вибрацию. Анимация подсказывает, с какой стороны и на каком расстоянии автомобиль. · Инициалы на крыше. При заказе пассажир может включить отображение своих инициалов на куполе автомобиля. Приложение подсказывает: «Ищите свои буквы». Ну гениально же ) · Waymo проводит регулярные юзабилити-сессии с участием людей с нарушениями зрения, слуха, подвижности и когнитивными особенностями. Недоработки тоже есть и они в отчете → https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/
Минутка анимации:
Несколько лет назад обратил внимание на рекламный ролик в котором оживает фантазия о мире будущего с экологичным киберпанком и умиротворением от естественности технологий. Назывался «Дорогая Алиса». Вспомнил и решил с вами поделиться.
🆕 Анимация иконки в кнопках Zero Block
Появилась возможность добавлять анимацию для иконок в кнопках Zero Block. Например, анимацию увеличения (Scale) или прозрачности (Opacity). Это поможет акцентировать внимание пользователей на важных действиях и сделает интерфейс сайта более отзывчивым. Где найти: Настройки (Settings) 👉 Иконка (Icon) 👉 Анимация (Animation) #tildaupdates
Анимация 3D-иконок в интерфейсе.
Анимация смены карточек.