Jitter

Где-то с марта с переменным успехом балуюсь с интерфейсными анимациями в джиттере. Уже давно вынашивал план заменить слайдшоу полноценными анимациями у себя на сайте. Времени всегда не хватает, поэтому вкатываться в АЕ и воевать с ним очень не хотелось. У джиттера figma-style интерфейс и офигенно удобный импорт из нее. Да, если нужен супер-глубокий и детализированный крафт, то АЕ не заменит ничего. Джиттер проще, чище, фичей меньше, но базовые анимации делаются просто. Я ни одного урока не смотрел, все интуитивно понятно. Еще у них есть поддержка liquid glass, но работает через жопу. Глитчит. Написал напрямую чувакам в чатик с контекстом и скриншотами, а в ответ получил «Ну ты попробуй настройки другие выставить». Камон, я что, свой тупняк от реального бага отображения отличить не могу что ли 🗿 Короче, рекомендую потестить, если нет потребности делать гига-сложные штуки

Replit 15 мая добавил в каталог MCP новый сервер Lazyweb. Если коротко, он позволяет агенту искать по базе из 257k+ реальных экранов приложений. Replit прямо пишет: для UI-референсов и дизайн-исследований. На первый взгляд, маленькая новость из списка обновлений. Добавили ещё один MCP, ну ок. Но для вайбкодинга это довольно важная штука. Потому что сейчас у AI-интерфейсов есть очень узнаваемая болезнь. Попросил собрать сервис, личный кабинет, страницу вакансии, CRM или дашборд, и через минуту получаешь что-то аккуратное, чистенькое и до боли одинаковое. Карточки, табы, серые подписи, синий акцент, график, три метрики сверху. Всё вроде нормально. Только ощущение, что этот экран уже видел тысячу раз и ни один раз не хотел им пользоваться. Проблема часто не в том, что модель не умеет рисовать. Она рисует как среднее арифметическое интернета. А среднее арифметическое обычно выглядит как SaaS, который стесняется сказать, чем он занимается. У агента появляется не только промпт, но и шанс посмотреть, как похожие задачи уже решили живые продукты Это уже ближе к работе дизайнера. Перед тем как делать новый сценарий, ты смотришь, как это устроено у других. Не чтобы скопировать. Просто чтобы понять, какие паттерны вообще существуют, где люди обычно ошибаются, какие решения уже стали привычными, а где можно сделать иначе. Например, тебе надо собрать экран подписки. Вариант «сделай красиво» почти гарантированно даст три карточки с тарифами и зелёную кнопку. А если агент видит реальные примеры, он хотя бы может заметить детали: – где показывают ограничения тарифа – как объясняют пробный период – куда прячут отмену – как оформляют сравнение – где начинается тёмная сторона UX После этого уже можно спорить. Не с пустым экраном и не с абстрактным «сделай современно», а с конкретными паттернами. Это полезнее, чем бесконечно гонять модель по кругу, пока она сама случайно не попадёт в нормальное решение. Конечно, референсы не спасают от плохого дизайна. Можно насмотреться 257 тысяч экранов и всё равно собрать помойку. Особенно если агент будет просто усреднять всё подряд. Но сама идея правильная: интерфейс нельзя делать только из текста в промпте. Ему нужен визуальный и продуктовый контекст. Для дизайнеров тут есть смешной момент. Раньше насмотренность была чем-то личным: папки с референсами, скриншоты, закладки, сохранёнки, чужие продукты, которые ты руками разбирал. Теперь эта насмотренность постепенно превращается в подключаемый источник данных для агента. Референсы становятся не только материалом для дизайнера, но и частью работы инструмента. Агент может искать примеры, сравнивать паттерны, приносить варианты, а дизайнер уже решает, что из этого имеет смысл. Ну, если дизайнер вообще есть в процессе, а не где-то потом приходит чинить результат. По мне главное, чтобы такие базы не превратили всё в ещё более одинаковую массу. Если агент будет брать референсы как повод подумать, это полезно. Если как повод собрать «усреднённый лучший экран», то мы просто получим SaaS-дашборд 2.0, только теперь с доказательной базой. ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Многие заказчики в диджитал оценивают цифровые продукты по визуалу — красиво или нет, современно выглядит или уже устарело. И это нормально, потому что они не погружены в разные процессы. На практике дизайн — это одна из финальных стадий работы. В хорошем диджитал-продукте до появления первых экранов всегда прорабатываются сценарии, логика и поведение пользователя. Да, это не самая «зрелищная» часть работы, но именно она определяет, насколько продукт будет понятным и удобным. Хочу показать, как это устроено у нас в Агентстве.Анкора На скриншоте — кликабельные прототипы приложения «ЕлиПили». Того самого проекта, за который мы получили серебро на Workspace Digital Awards — так что в этой теме мы реально шарим. За время работы мы собрали несколько прототипов под разные пользовательские сценарии. В какой-то момент это превращается в довольно сложную систему: сеть экранов, переходов и взаимосвязей. Но именно внутри этой системы и формируется продуманный и удобный пользовательский опыт. С такими прототипами мы приходим к заказчику на презентацию🔥: просим открыть ссылку и начать пользоваться приложением. Дальше мы наблюдаем и задаём вопросы: ☑️ Понятен ли текст на экране? ☑️ Что вы сделаете дальше? ☑️ Замечаете ли нужную кнопку? ☑️ Понимаете ли, какое действие от вас требуется? там еще 100500 вопросов обычно )) Такие простые тесты помогают находить слабые места в логике продукта. Заказчик почти всегда лучше нас понимает свой бизнес. И через его реакцию мы видим, где пользователь может запутаться, какие элементы остаются незамеченными и какие гипотезы не работают. Потому что любой диджитал-продукт — это, по сути, набор гипотез. Хороший дизайн начинается не всегда с цветов, шрифтов и красивых экранов. Он начинается с понимания того, как человек будет пользоваться продуктом и насколько простым и понятным окажется его путь — от первого действия до результата.

Обычно AI-агенты работают с интерфейсом как человек: делают скриншот, пытаются понять по пикселям, где кнопка, и тыкают по координатам. Это медленно, дорого по токенам и довольно хрупко. Автор показывает более умный путь: использовать accessibility tree, который уже есть внутри iOS-приложения и который читают VoiceOver и XCTest. Если у элементов нормально заполнены identifier, label, hint, value и traits, агенту не нужно гадать по картинке. Он может детерминированно находить элемент, понимать, что он делает, и нажимать точно в цель. Плюс это полезно не только для AI: вы одновременно улучшаете доступность для людей и делаете приложение гораздо удобнее для автоматизации, тестов и агентной навигации. Внутри: – Почему навигация по скриншотам для AI дорогая, медленная и хрупкая; – Что такое accessibility tree и какие пять свойств в нем важны; – Какие SwiftUI-модификаторы стоит добавлять на кнопки, строки списков и экраны; – Зачем отслеживать координаты элементов, если у них уже есть identifier; – Почему строгий нейминг accessibility-id сильно помогает агентам; – Как populated accessibility tree меняет экономику токенов и скорость работы; – Почему AI-навигация полезна не только для тестов, но и прямо во время разработки; – Как accessibility и AI support здесь работают как одна и та же инвестиция. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Мечта любой команды разработки сейчас — автоматизировать сборку дизайна с помощью LLM, чтобы ускорить delivery-процесс. Я видел несколько разных подходов, но в итоге пришёл к чему-то, что, как мне кажется, должно сработать удобно Рассказываю на примере проекта, где я на фрилансе (oversecured.com) Дано: - legacy-архитектура фронта, которую сложно масштабировать с LLM-кой - отсутствие части макетов в Figma + неактуальность макетов Что хотим: - заиметь макеты в Figma, которые выступают как источник правды - можно дать ссылку на макет, и LLM (Codex/Claude) его соберёт - UI-kit/дизайн-система, которая полностью совпадает в Figma/code Как мы решили это сделать: 1. Подключаем для кода open-source библиотеку компонентов shadcn (https://ui.shadcn.com/create). Компонентов там достаточно много + они гибкие (можно внутрь прокидывать много свойств). Это наша база, из которой мы будем собирать весь фронт 2. Берём для этой же библиотеки какой-то из Figma-файлов (вот здесь (https://ui.shadcn.com/docs/figma) есть несколько ссылок на файлы community, на них ссылается сам shadcn). Это наша вторая база, из которой мы будем собирать все макеты в Figma Мы пока не придумываем дизайн и не собираем компоненты с нуля, чтобы ускориться на старте, — просто берём готовое решение. 3. Начинаем собирать макеты в Figma из компонентов, которые мы взяли в community. На скрине — дизайн 4. Дальше через Figma MCP мы можем отдавать нашему AI-агенту ссылку на макет и просить собрать дизайн с помощью компонентов shadcn (можно также использовать shadcn MCP (https://ui.shadcn.com/docs/mcp)) Для тех, кто еще не знает: MCP — это протокол, через который LLM общается с внешними тулами вроде Figma. Важно здесь отловить одну вещь: AI-агент должен вытаскивать из Figma не скриншот макета, а структуру страницы (для этого используются разные методы). И всё — это работает. Простые страницы уже собираются верно на 95–100%, страницы посложнее пока тестируем Первая задача — актуализировать весь фронт на новых гибких компонентах. Во второй части (когда я к ней подойду) я хочу иметь возможность стилизовать компонент в Figma и стащить дизайн на фронт, чтобы в коде он тоже стилизовался В теории, проблемы тут быть не должно, потому что мы взяли в коде и в Figma одинаковую семантику токенов (и там и там shadcn) — то есть цвет в коде и цвет в Figma называются одинаково, например surface-default-100 Я уже предвижу некоторую сложность со стилизацией и со сборкой сложных экранов, так как в Figma компонент не всегда соответствует по пропсам тому, что есть на фронте в библиотеке shadcn (часть свойств может отсутствовать, часть — называться иначе). Тут потребуется немного ручной настройки и тюнинга компонентов в Figma Часть 2 напишу, когда подойду к ней!

Полная Figma скриншотов еще не делает дизайн лучше. Можно часами собирать чужие экраны, но так и не понять, что именно оттуда брать в свой проект. Самая частая ошибка тут простая: смотреть на референсы как на вдохновение вообще, а не как на инструмент под конкретную задачу. Катя из Digital Oxygen предлагает понятную рамку: делить референсы на функциональные и стилистические. Первые нужны, чтобы разобрать логику, структуру, прогрессию интерфейса и привычные паттерны жанра. Вторые помогают собрать настроение, визуальный язык и направление стиля. Плюс она показывает, как на этом этапе можно быстро подключать нейросети, чтобы снять страх белого листа и накидать первые концепты. Внутри: – Почему сохраненные картинки сами по себе почти не помогают в работе; – Как делить референсы на функциональные и стилистические; – Зачем в игровых проектах сначала разбирать логику, а не визуал; – Почему важно смотреть не только на первый экран, но и на прогрессию интерфейса; – Как удобно сортировать референсы по экранам и сценариям прямо в Figma; – Почему стилистический поиск лучше расширять за пределы прямых аналогов; – Как называть найденные визуальные направления, чтобы команда говорила на одном языке; – Где нейросети реально полезны, когда нужно быстро нащупать общее настроение проекта. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Вчера с одним из подписчиков прошел смол толк — о том, что я невыгодно вложилась в квартиру для жизни в ЖК Остров. Мол, я купила ее за 70 млн, а сейчас точно такую же можно купить за 65 млн — скриншот объявления был приложен, как доказательство. Я не первый день в интернете, и не первый день в роли блогера. Фактчек в делах ремонтных провожу не хуже команды Ксении Собчак. Оказалось, что квартира, которую мне прислали — меньше моей на 15 м2 и стоит 65 990 000 (то есть, 66 млн 😁). 15 м2 это существенная разница, на практике, это -1 комната. Я пошла дальше, решила поискать лот, максимально похожий на мою квартиру. И нашла!!! В том же корпусе и с такой же планировкой 1 в 1. Сейчас она стоит 85 500 000 рублей — я свою купила за 70 000 000 рублей в ипотеку, напоминаю. Но мне совершенно неважно, насколько подорожала или подешевела моя квартира. Я покупала ее для долгой и счастливой жизни, не с целью перепродажи — для такой покупки работают совершенно иные критерии. Моя задача была найти лучшее из возможного на рынке, чтобы объект соответствовал всем моим требованиям: площади, локации, виду из окна. Это квартира, где будут расти мои дети, где я буду проводить семейные праздники с мужем. Поэтому квартира должна нравиться в первую очередь мне, а не рынку. Но расследование было уже не остановить! Я пошла смотреть, сколько стоят квартиры в тех ЖК, где я приобретала объекты под ИНВЕСТ цели. И не зря — приятно убедиться, что я сапожник с сапогами, и предлагаю вам не кота в мешке, а твердую экспертизу по подбору лотов с потенциалом роста цены. Показать вам разницу ДО и ПОСЛЕ цены моих инвест красоток? 🔥🔥🔥

Плагин позволяет перетаскивать иконки и скриншоты приложений из App Store Скачать плаг🖥 #plugin

В новой версии добавили презентацию приложения в режиме реального времени, новые мокапы, таймлайн, создание скриншотов для AppStore и многое другое. www.rotato.xyz

Требования: набрать минимум 100 очков в игре Ловкий проджект и прислать нам скриншот. (шутим) На самом деле нужно просто иметь классное портфолио и желание работать с проектами на спортивную тему. 💜Ждем ваши отклики здесь! 💜 креативная студия Сирена

На макете всё почти всегда выглядит хорошо. Проблемы начинаются уже в реализации: экран открылся не той анимацией, скелетон мигнул, чекбокс нажимается только в крошечной зоне, тень обрезалась, текст поехал, в темной теме картинка стала чужой. По отдельности это мелочи. Вместе именно они создают ощущение сырого продукта. В этом гайде ребята из Т-Банка хорошо разложили, как смотреть на дизайн-ревью системно, а не просто сверять экран с макетом. Не только статичное состояние, но и весь опыт целиком: переходы, загрузка, скролл, нажатия, выходы с экрана, типографика, иконки, поведение в светлой и темной теме. Внутри: – Как проверять переход к экрану и не путать типы презентации; – На что смотреть в загрузке: лоадеры, скелетоны и смену состояний; – Почему скролл и нажатия часто ломают впечатление от готовой фичи; – Какие жесты выхода должны работать по умолчанию; – Как сравнивать реализованный экран с макетом через скриншоты в Figma; – Что проверять в отступах, размерах, скруглениях и тенях; – Какие ошибки чаще всего всплывают в цветах и темной теме; – Почему типографика и редполитика тоже часть дизайн-ревью; – Что важно проверить в иконках, графике и видео до релиза. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Есть бесплатный ограниченный доступ. Цена Pro-подписки — 400 ₽. #инструменты@zhurnalus_lite

Об этом объявили на открытии предаукционной выставки «Архитектура мечты», подготовленной к 13-му Благотворительному аукциону Фонда Cosmoscow. Игорь Самолет работает на стыке фотографии и инсталляции. Его основная техника — перенос цифровых изображений (скриншотов, личных фото, переписок) в физическую среду. Художник печатает на пенопласте, ткани или превращает в объекты и пространственные инсталляции. В марте на крыше самарской галереи «Виктория» открылась новая инсталляция художника Игоря Самолета — «Солнышко». Об этом и о связи художника с городом, мы писали тут. Также ранее Самолет в интервью The Blueprint подробнее рассказал о своем подходе к жизни, работе и творчеству. Его можно прочитать тут. Подписывайтесь на вечернюю рассылку | 🔹The Blueprint News

В продолжении потрясной короткометражки от Дяди Вани хочу рассказать про то, как субтитры помогают людям с потерей слуха прожить историю так же полно, как и слышащие зрители. Главный принцип: субтитры — это не транскрипция речи, а перевод всего звукового пространства. Диалоги, атмосфера, музыка, звуки монстров — всё это несёт смысл и эмоцию, и задача субтитров передать их полностью. За субтитрами SDH (субтитры для глухих и слабослышащих) к сериалу «Очень странные дела» стоит Джефф Т., который придумал «[eldritch thrumming]» - [потустороннее гудение]. [Потустороннее гудение] - хороший субтитр. Слово eldritch — из словаря D&D и старой готики: что-то потустороннее, древнее и угрожающее. Джефф вставил его как пасхалку: это ещё и название заклинания чернокнижника. Звук сразу обретает характер существа. [Музыка] - плохой субтитр: «Музыка» не передаёт ничего: ни жанра, ни интенсивности, ни эмоции. Глухой зритель лишается контекста, который слышащий получает автоматически. Звуковые эффекты создают напряжение, страх, атмосферу. Заменять их общим словом — всё равно что убрать саундтрек из фильма хоррора, который решает все ) Для дизайнеров важное про паттерны цифровой доступности: каждый звук в интерфейсе несёт смысл — и если пользователь его не слышит, этот смысл должен быть передан визуально: ✦ Субтитры включены по умолчанию, а не спрятаны в настройках. ✦ Настраиваемые параметры: шрифт, размер, цвет текста и фона — пользователь сам выбирает под своё зрение. ✦ Визуальные уведомления вместо звука: popups не исчезают сами собой. ✦ Пропущенные события не исчезают сами: бейджи и счётчики остаются видны до явного подтверждения пользователем. ✦ Ошибка, успех, загрузка передаётся цветом, иконкой и текстом одновременно. ✦ Текст состояния конкретный: не «Ошибка», а «Не удалось отправить сообщение — проверьте соединение» (актуалочка подъехала). Alt текст: Скриншот из «Очень странных дел»: тёмно-синяя сцена, в центре кадра — Векна, гуманоидная фигура с кожей, покрытой прожилками, окружённая длинными органическими щупальцами. Внизу экрана белый субтитр на чёрном фоне: [tentacles squelching wetly] [щупальца хлюпают мокро] — пример профессионального SDH-субтитра, описывающего звук, а не просто называющего его.

добавили подписку на сайт, за 4к получается доступ ко всем воркшопам, записи остаются, всегда можно посмотреть после воркшопы апреля: ❤️❤️❤️ Создание ❤️❤️❤️ гибридных зверей ❤️❤️❤️ 12.04, 12:00 задача воркшопа — научиться получать предсказуемый и управляемый результат. разберём, как в Recraft добиваться нужного стиля и не получать каждый раз случайную графику, как описывать персонажей и животных так, чтобы они были узнаваемыми и повторяемыми, и как из отдельных генераций собрать цельную серию. поэкспериментируем с гибридами и нестандартными образами, чтобы выйти за пределы банальных решений. в итоге каждый соберёт собственную линейку стикеров, готовую к использованию купить место ❤️❤️❤️ Быстрое создание 3D ❤️❤️❤️ логотипа и анимации ❤️❤️❤️ 18.04, 15:00 быстрый результат в 3D — это не про сложные сцены, а про правильные приёмы. на воркшопе разберём, как за короткое время собирать 3D-логотипы и анимации без перегруза: какие инструменты использовать, какие настройки дают максимум качества при минимуме усилий и как упрощать процесс без потери визуала. в итоге каждый соберёт свой 3D-логотип и базовую анимацию, которые можно сразу использовать в кейсах или проектах. купить место ❤️❤️❤️ 10 плакатов ❤️❤️❤️ за 1 час (часть 2) ❤️❤️❤️ 30.04, 19:00 вы создадите 10 плакатов из готовых элементов: типографики, графики и фото. на каждый макет ровно 6 минут. после первых 5 работ получаете обратную связь от преподавателя, затем ещё 5 плакатов с учётом рекомендаций. в результате вы прокачаете композицию, скорость работы и получите 10 работ для портфолио. подойдёт как новичкам так и дизайнерам с опытом. купить место ❤️ купить подписку ❤️ Со скриншотом чека из личного кабинета / оплаты напишите в телеграмм Евгению Вас добавят в чат с информацией о проведении воркшопа

воркшопы апреля КНИ | 09.04 - ЧТ - 19:00 | Создание гибридных зверей с AI ОТГ | 18.04 - СБ - 15:00 | Быстрые способы создания 3D логотипа и анимации СВД | 30.04 - ЧТ - 19:00 | 10 плакатов за 1 час - часть 2 Со скриншотом чека из личного кабинета / оплаты напишите в телеграмм Евгению Вас добавят в чат с информацией о проведении воркшопа Всем участникам будут большие скидки на основные курсы, расписание вот тут, покупайте заранее - так дешевле

Гугл делал агент, который сам проверяет созданные приложения: делает скриншоты, отправляет их мультимодальной модели, та решает куда кликать и что вводить. Технически крутая задача, но сложная. Барон Вебстер, дизайнер в команде, спросил: а зачем? Давайте просто покажем сайт пользователю и попросим его протестировать. Вся сложная система стала не нужна. Вебстер работает в Фигме как дизайнер моделей. Это первая такая роль в мире. Не обычный дизайнер интерфейсов. А человек, который работает с моделями, проверками, промптами и понимает поведение AI на глубоком уровне. До Фигмы сделал Teachable Machine в Google (2017), потом три года в Replit запускал AI-фичи, которые вывели стартап в единороги. Теперь учит дизайнеров Фигмы работать с AI и строит инструменты для прототипирования AI-фич до того, как рисовать интерфейсы. Внутри: — Не делайте интерфейс для идеального случая. Сначала поиграйте с моделью, потом рисуйте кнопки; — Проверки работы модели это как покрытие тестами в программировании. Без них проверка вручную занимает огромное время; — Главный совет: потратьте время, чтобы понять, что входит в модель и что выходит. Иначе станете просто рисовальщиком кнопок; — В Replit две трети успешных проектов были реактивными: выкатили фичу, посмотрели кто её использует, поговорили с ними; — Риск для дизайнеров: инженеры контролируют промпты, проверки, модели. Дизайнеры могут остаться только делать интерфейсы. А вы работаете с AI-продуктами? Или пока смотрите, что делают другие? ➡️ Читать интервью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Исполняя песню 4chan Stan (в ней поется о том, как Аллен узнала об измене своего бывшего мужа Дэвида Харбора по обнаруженным чекам из универмага Bergdorf Goodman), певица облачилась в длинную ткань, на которой были напечатаны те самые чеки вместе со скриншотами переписок Харбора и рукописными текстами ее новых треков. 🔹The Blueprint News