AI в дизайне это уже не про отдельные тулзы

На днях наткнулся на цифру: 94% компаний в мире жалуются на нехватку людей с AI-навыками. И, судя по прогнозам, к 2028 году сильно легче не станет. Для дизайна это тоже важный сигнал. Просто уметь делать нормальные макеты уже мало. Бизнесу всё чаще нужны люди, которые понимают, как работать с AI не точечно, а системно: поставить задачу, собрать контекст, проверить результат и отвечать за итог. Проблема в том, что большинство дизайнеров пока используют AI кусками. Тут текст поправить, там референсы собрать, где-то экран накидать. А на реальной задаче всё быстро ломается: AI не помнит бриф, не понимает дизайн-систему, теряет контекст и выдаёт что-то, что потом всё равно приходится руками пересобирать. И вот тут интересная мысль. Возможно, дело уже не в конкретном инструменте, а в том, как вокруг него собрана рабочая среда: папки, скиллы, директивы, дизайн-система, правила проекта. То есть AI не как отдельный помощник сбоку, а как среда, внутри которой ты проектируешь. 13 мая в 18:00 мск Даниил Шишко из Pixel Perfect покажет, как у него устроена такая агентская система. Возьмёт размытое ТЗ в одну строчку от крупного зелёного банка и за 90 минут соберёт концепт банковского дашборда. Будет весь процесс через одного агента в Claude Code: бриф, ресерч, структура экранов, макеты в Фигме по настоящей дизайн-системе и кликабельный прототип. Плюс покажет стек Claude Code, Figma MCP и дизайн-систему, а ещё конкретные шаги, как собрать AI-агента под свои проекты. Если хотите понять, как AI может закрывать не отдельные куски работы, а весь дизайн-процесс — нужно приходить обязательно 🔠 Эфир в канале Даниила 🔠 Эфир в канале Даниила 🔠 Эфир в канале Даниила

AI в дизайне это уже не про отдельные тулзы На днях наткнулся на цифру: 94% компаний в мире жалуются на нехватку людей с AI-навыками. И, судя по прогнозам, к 2028 году сильно легче не станет. Для дизайна это тоже важный сигнал. Просто уметь делать нормальные макеты уже мало. Бизнесу всё чаще нужны люди, которые понимают, как работать с AI не точечно, а системно: поставить задачу, собрать контекст, проверить результат и отвечать за итог. Проблема в том, что большинство дизайнеров пока используют AI кусками. Тут текст поправить, там референсы собрать, где-то экран накидать. А на реальной задаче всё быстро ломается: AI не помнит бриф, не понимает дизайн-систему, теряет контекст и выдаёт что-то, что потом всё равно приходится руками пересобирать. Дело не в инструментах. У AI должна быть архитектура (папки, скиллы, директивы, дс, правила проекта). Он не помощник, а среда, в которой ты работаешь. 😎 13 мая в 18:00 мск Даниил Шишко из Pixel Perfect впервые покажет свою агентскую систему изнутри. Возьмет размытое ТЗ в одну строчку от крупного зеленого банка и за 90 мин соберет полный концепт банковского дашборда. Все этапы работы дизайнера через одного агента в Claude Code: бриф, ресерч, макеты в Figma по дизайн-системе, кликабельный прототип. Что заберешь с эфира: • рабочий стек: Claude Code, Figma MCP и дизайн-система • конкретные шаги, как собрать AI-агента под свои проекты • подход, где AI закрывает весь дизайн-процесс, а не отдельные задачи ➡ Эфир пройдет в тг-канале Даниила: Подписывайся

Но по факту у многих всё выглядит примерно так: ChatGPT помогает с текстом, Midjourney делает картинки, ещё пара вкладок открыта для ресерча, а макеты, структуру экранов и финальную сборку всё равно делаешь руками. Вроде AI уже в работе, но рутины меньше не стало. Просто вкладок стало больше) И вот тут мне интересен подход Даниила Шишко из Pixel Perfect. Он перестроил процесс так, что один агент в Claude Code проходит всю цепочку дизайнера: от брифа и ресерча до структуры экранов, макетов в Фигме и кликабельного прототипа. 13 мая в 18:00 мск Даниил проведёт эфир и покажет это на реальной задаче. Возьмёт ТЗ в одну строчку от крупного зелёного банка и за 90 минут соберёт концепт банковского дашборда через одного AI-агента. Внутри будет рабочий стек: Claude Code, Figma MCP и настоящая дизайн-система. Плюс конкретные шаги, как собрать такого агента под свои проекты, чтобы AI закрывал не отдельные куски, а весь дизайн-процесс. Если у вас AI пока живёт на уровне «тут текст, там картинка» — приходите обязательно. Хотя бы чтобы понять, как может выглядеть следующий уровень работы дизайнера. 🔠 Эфир в канале Даниила 🔠 Эфир в канале Даниила 🔠 Эфир в канале Даниила

Ты можешь делать крутой контент, но если обложка не работает — YouTube просто не будет показывать твой ролик. В новом видео я на реальном примере показал, как мы подняли CTR с 2% до 12% 🔥 всего за одно превью. Что внутри: — Какие ошибки убивают кликабельность — 5 шагов к обложке, которая приносит просмотры — Почему создание видео начинается не со сценария, а с обложки ⏺ Ролик короткий — всего 5 минут. Но инсайтов там больше, чем в часовых видео. Подходит всем, кто продвигается через контент: экспертам, продюсерам, блогерам, а также дизайнерам. Смотреть тут: 📱 YouTube | 📱 VK Video Как обычно: ставим огонечки, если было полезно. Это мотивирует меня делать больше контента)

🤍 - прайс лист 🖤 - сделать заказ (кликабельно)

🟢 Вакансия открыта Зарплата: Не указана Город: Москва Грейд: Middle Кто ищет: HR Тэги: #designer, #design, #дизайнер, #ищудизайнера, #офис Привет! Мы — коммуникационное агентство полного цикла "БЛЭК." С 2016 года с нуля упаковываем крупных игроков госсектора и бизнеса, делая их цифровые продукты яркими, кликабельными и полезными. Располагаем наработанной базой клиентов, доверие которых мы действительно заслужили. У нас огромное прос... 👁👁 Откликнуться →

Пользователи возможно скажут вам за это «спасибо». Так Google например прислал письмо с настораживающим заголовком «Принять меры», и дальше «Попробовать Gemini». А самое главное, переместил профиль в строку поиску, а на старом месте поместил иконку их ИИ. Вот так «продвигается» ИИ. 🖼️ Хороший интерфейс 🖼️ Концепты интерфейсов 🖼️ Офферы для дизайнеров

🗓 25 июня 16:00-18:00 (МСК) Это практическое онлайн-занятие предназначено для тех, кто хочет научиться самостоятельно создавать кликабельные прототипы простых вайрфреймов в Figma без помощи технического или продуктового дизайнера. В результате занятия должен получиться готовый кликабельный прототип (≈ 10 экранов). 🎯 На занятии: Теоретическая часть: • что такое кликабельный прототип в Figma, зачем он нужен и т.д.; • что такое сетка, зачем она нужна; • зачем нужен горизонтальный вертикальный шаг; • что такое базовая единица, как она применяется; • показываем готовый сценарий или остановимся на создании структуры в FigJam. Большая практическая часть: • Вайрфреймы. Как их рисовать: - нарисуете 1-2 основных экрана со всеми основными элементами. • Создание прототипа: - как в режиме прототипирования в Figma между собой объединять варфреймы по нашему готовому сценарию; - как сделать базовую анимацию перехода между экранами; - участники попробуют сделать несколько экранов в прототипе; - в режиме реального времени показываем создание прототипа. ✨ Занятие будет максимально полезным для: • UX-исследователей, которые хотят научиться работать с Figma, базовыми функциями прототипирования, аналитики, бизнес-аналитики; • менеджеров продукта. ✏️ Записывайтесь на занятие Ждём вас!)

📈 Увеличим кликабельность и поднимем продажи! 👩🏻‍💻Привет! Я Юля — опытный дизайнер инфографики • 2 года на маркетплейсах • Более 500 успешных проектов 💡МОЙ ПОДХОД: ✅Актуальные тренды ✅ Работа с нейросетями ✅ УТП, офферы, эмоции — всё на месте! 🚀РЕЗУЛЬТАТ: 🔹 Привлекаем внимание 🔹 Увеличиваем доверие 🔹 Мотивируем к покупке 🔥 🔥🔥СКИДКИ — постоянным клиентам! 🔥 ⚡ПОРТФОЛИО и более подробный прайс : @MikhinaDesign 💬ОФОРМИТЬ ЗАКАЗ или задать вопрос в личные сообщения: @julymikhina

🟢 Вакансия открыта Зарплата: До 200 тыс руб. Город: Санкт-Петербург Грейд: Middle Кто ищет: Владелец бизнеса Тэги: #designer, #design, #дизайнер, #ищудизайнера, #freelance Необходимо сделать кликабельный прототип нашего веб приложения в Figma (платформа по созданию и презентации интерьеров)  👁👁 Откликнуться →

• 6, 9 июня в 16:00 (МСК) — Фреймворк Персоны • 11 июня в 16:00 (МСК) — Как разработать стратегию пуш-уведомлений и замерить их в продукте • 16, 18 июня в 16:00 (МСК) — Сustomer Journey Map • 23 июня в 18:00 (МСК) — Как провести опрос и узнать что-то новое • 24 июня в 16:00 (МСК) — Пользовательские сценарии. Проектирование User flow • 25 июня в 16:00 (МСК) — Как сделать кликабельный прототип Figma для тестирования сценария работы продукта ⚡️ Все занятия июня со скидкой здесь. 💬 Поделитесь в комментариях, какие ещё темы занятий вам интересны.

Поигрались в этот AI от фигмы. Записали тим-сессию и собрали тезисы по ней: - Можно просто вставить картинку или скрин — как референс, и AI сам строит структуру дизайна. - AI сам придумывает ТЗ, если его не дать. Например, создаёт структуру приложения по визуальному входу. - AI способен сделать интерактив — в примере: страница достижений была не просто сверстана, но и стала кликабельной. - Всё работает без полноценной базы данных — данные временно сохраняются (например, в cookies или памяти приложения). - Код пишется автоматически, разбивается на компоненты и может быть скачан. - Работает быстро, если дать чёткий визуальный референс: от 3 до 5 минут на генерацию UI и кода. - Есть визуальный редактор кода прямо в интерфейсе, можно быстро редактировать. - Иногда переписывает код целиком, даже если нужно изменить только одну часть — это может быть неудобно. - Придумывает сам копирайтинг и тексты, если их нет. - Умеет делать адаптивный дизайн, без дополнительных указаний. - Запоминает контекст прошлых правок, удобно для итерационной работы. - Вёрстка нативная и аккуратная, иногда игнорирует мелкие детали (например, цвета или иконки). - Поддержка интерактивности — можно тестировать UI прямо внутри генератора. - При дублировании проекта хранит весь контекст, а не только результат - Нельзя получить Figma-файл напрямую из Make — всё конвертируется в код. - Можно публиковать сайт прямо из Make, как мини-лендинг. @osensei_design • oleg&kate

Первый видеоурок уже ждёт вашего просмотра: «Как отключить кликабельность элементов в Taptop» Полезно для прелоудеров или чтобы избежать случайных нажатий на мобилках, где срабатывает анимация при скролле. Из видео ты узнаешь: — Что за свойство такое — pointer-events и особенности его использования в Taptop — Пошаговую инструкцию по отключению кликабельности — Один важный нюанс, который поможет тебе отредактировать некликабельный элемент 📹 Смотреть на Youtube 💬 Смотреть на VK

#процессы A/B-тест — это способ проверить, какая из версий интерфейса работает лучше. Пользователи разделяются случайным образом на когорты — одна часть видит текущую версию (А), другая — новую (B). Если вариантов больше, это уже ABCD-тест: каждый сегмент получает свой вариант. Затем сравниваются ключевые метрики: кто чаще нажал кнопку, купил, заполнил форму, вернулся через день и т.д. Пример 1: В мобильном приложении ты меняешь онбординг. A — 4 экрана с описанием. B — 2 экрана и сразу вход в продукт. Если B показывает выше конверсию в регистрацию — значит, гипотеза сработала. Пример 2: Тестируем нейминг в кнопке на том же онбординге. A — кнопка «Начать бесплатно», B — «Попробовать демо», C — «Получить доступ», D — «Зарегистрироваться». Сравниваются клики и последующие действия. Это уже ABCD-тест. Роль дизайнера в проектировании A/B тестов ✦ Формулирует гипотезу. Например: «Если показать преимущества тарифа в виде иконок, то пользователи будут чаще покупать». В следующем посте расскажу о том, как правильно формулировать гипотезы. ✦ Проектирует новый вариант. Это может быть один экран, флоу или отдельный элемент. ✦ Определяет метрику успеха. Часто вместе с аналитиком или продактом: что измеряем — клики, покупки, завершение шага? ✦ Передаёт вариант в разработку. После запуска отслеживает, как идёт тест. ✦ Анализирует результат. Сработало или нет? Почему? Что можно улучшить? Примеры 3: Тестируем порядок шагов в оформлении заказа в e-commerce приложении. A — сначала ввод адреса, потом выбор доставки. B — сначала выбор доставки, потом адрес. Если B даёт меньше отказов на втором шаге и выше завершение заказа — он выигрывает. Пример 4: Тестируем дизайн карточки товара в интернет-магазине. A — карточка с ценой и кнопкой «Купить» сразу под фото. B — карточка, где сначала описание, потом кнопка. Если A показывает выше кликабельность и больше покупок — оставляем этот вариант. Пример 5: В приложении по подписке тестируем экран оплаты. A — обычный экран с выбором тарифа. B — тот же экран, но с иконками преимуществ тарифа и отзывами. Если B даёт выше конверсию в оплату — UI работает лучше на принятие решения. Мы в продукте проверяли каждый чих через AB. Это на самом деле супер удобная механика, но не у всех продуктов она есть. На старте в первые месяцы жизни продукта нормально просто катить фичи в прод и смотреть что из этого выходит. Небольшое количество пользователей и ограниченный функционал дают свои преимущества. Тестировать с помощью AB можно от кнопки, до флоу. Мы делали тесты на редизайн целых разделов в продукте: порядка месяца набирали данные, чтобы потом принять решение о раскатке. 🔥 Жду твой огонёк. ————————— Навигация ← Пост 3 @design_awesome

Помимо основных факторов, которые влияют на кликабельность, есть еще один не такой очевидный - это «быстрый просмотр». Кто в танке - не обязательно заходить в карточку, чтобы ознакомиться с товаром, слайды можно просто проскроллить в общей выдаче. Собственно эта функция урезает многим конверсии в корзину из-за непроработанной воронки. Если проще: покупатель в выдаче увидел привлекательную карточку (зачастую тестируют только обложку) - скролит/листает дальше (натыкается на слайд, который не несет никакой ценности для покупателя) - перестает листать и идет штурмовать выдачу дальше - итог - ваша тестируемая обложка заинтересовала покупателя, но перехода в карточку не случилось, как и продаж. Поэтому, чтобы действительно отследить покупательский интерес, важно проработать не только обложку, но и хотя бы 3 последующих слайда. Попробуйте, показатели конверсии точно изменятся А на слайдах кстати экспериментальный креатив для женской бритвы. Минималистичное оформление, совершенно не похожее на конкурентов. А еще у меня был вариант с цветочками, который тоже улетел на тест, его добавлю в комменты

Разработаю для вас качественную инфографику для WB и OZON, которая эффектно демонстрирует продукт и его преимущества, повысит кликабельность и увеличит ваши продажи ✅На связи 24/7 ✅Учту все ваши пожелания! ✅Проведу анализ товара  у конкурентов ✅ Сроки выполнения индивидуальны и зависят от объема работы, в среднем 1-3дня ✅ Правки бесплатно ✅Работаю с ТЗ и без него Моё портфолио 👇 https://t.me/AlenaINSTART22

В этот раз давайте разберём термины мира маркетинга. Апселл (upsell) Техника продаж, когда покупателю вместо выбранного им товара или услуги предлагают купить более дорогую и функциональную версию продукта. CTR (Click-Through Rate) Показатель кликабельности, который отражает, сколько пользователей кликнули на рекламное объявление по сравнению с количеством показов. Парсинг (parsing) Автоматический процесс сбора и систематизации данных из открытых онлайн-ресурсов с помощью специальных скриптов (парсеров). Ремаркетинг (remarketing) Инструмент цифрового маркетинга, который позволяет повторно взаимодействовать с пользователями, которые уже посещали сайт или использовали мобильное приложение. Продакт-плейсмент (product placement) Неявная реклама товаров в фильмах, телепередачах, клипах, сериалах и т.д. Например, герои фильма могут ездить на машине определённого бренда. #словарик #маркетинг 🍑 Явно.Дизайн

В этой серии постов, состоящей из двух частей, расскажу какие брейкпоинты (сокращенно БП) я чаще всего беру при верстке на Тильде в zero блоке. Количество и значения БП у меня зависят от: 1. выбранного типа верстки; 2. конкретного дизайна; 3. и моих личных предпочтений. Про второй и третий пункт опустим, это слишком ситуативно, рассмотрим обобщенно значения БП в зависимости от типа верстки. В первой части поста расскажу про свои типовые БП для Автоскейла: 360, 640, 960 (или 980), 1200 и 1600 (или 1800). 🔸 360 Меняю стандартный 320 на 360 по нескольким причинам: ● Удобнее верстать на чуть большем экране, и в размер 360 легко ложится 4-х пиксельная сетка, по которой я рисую дизайн. ● На экране 360 соответственно все делаю чуть крупнее и благодаря этому тексты можно не мельчить и делать размером от 12рх и выше. Это важно для поисковой оптимизации сайта: если на мобильной версии шрифты меньше 12рх (если я не ошибаюсь, то именно 12рх) поисковики занижают такой сайт в выдаче. ● Для крайнего левого БП при автоскейле работает технология даунскейла — масштабирование в меньшую сторону. Поэтому БП 360 уменьшится до более маленьких экранов телефонов, и нет необходимости верстать еще и на 320. 🔸 480 убираю совсем. Горизонтальную ориентацию телефонов не рассматриваю в качестве актуального разрешения для просмотра сайтов, считаю его вымирающим форматом. В случае если заказчик настаивает на адаптивной вёрстке под такое разрешение, отказываю ему по причине низкой востребованности и невозможности технически корректно адаптировать под горизонтальный формат современных телефонов с соотношением сторон примерно 5:2. 🔸 640 Оставляю для вертикальных планшетов, верстаю этот формат как расширенную версию телефона. Не убираю этот БП, т.к. смотреть с планшета гигантский мобильный дизайн неприятно. Да, % просмотров с такого устройства очень мал, но я лично предпочитаю верстать под все адекватные форматы вне зависимости от их популярности — не зря же мой слоган это «Ювелирное качество верстки», вот я ему и соответствую 😉 🔸 960 (или 980) При необходимости сочетать zero блок с диапазонами видимости стандартных блоков меняю 960 на 980. Этот БП оставляю для горизонтальных планшетов, т.к. именно в такой ориентации с них смотрят сайты чаще всего, И так как у современных планшетов достаточно большие экраны и высокое разрешение, то верстаю под них почти что десктопную версию, но слегка упрощенную и с более крупными кликабельными элементами. 🔸 1200 БП для ноутбуков, на котором я стараюсь верстать блоки ближе к соотношению сторон 16:10 (чуть ближе к квадратному). Именно для этого БП я рисую дизайн макет. 🔸 1600 (или 1800) Ввожу дополнительный БП специально для широкоформатных мониторов, в котором я слегка меняю дизайн и композицию из предыдущего БП под соотношение сторон 16:9 или 2:1. А также подгоняю шрифты и отступы таким образом, чтобы на больших экранах они не выглядели гигантскими. 🔹 Почему я задаю последнему БП именно такие значения, а не как разрешения мониторов — 1680рх или 1920рх: Дело в том, что не редки случаи, когда браузерное окно развернуто не на весь экран, либо браузер имеет дополнительные боковые панели, уменьшающие область просмотра сайта. В таких случаях мы получаем вьюпорт не 1920рх, а, например, 1919рх, 1902рх или 1880рх. И получается, что наш БП 1920рх здесь не сработает, и будет показываться версия сайта из БП 1200, хотя смотрим мы сайт с большого монитора. По этой причине я делаю запас в значении БП для больших экранов. Для 1800 довольно большой запас выходит, но тут я специально беру такой размер, чтобы удобно было верстать этот БП на моем обычном FullHD мониторе. Продолжение про БП при резиновой вёрстке в следующем посте, а все вопросы по данной теме вы можете задать в комментариях ☺️ #тильда #автоскейл #верстка

Только собрался написать статью о том, что каждый дизайнер обязан уметь превращать свои экраны в кликабельные прототипы — с помощью Bolt, Lovable и других инструментов (не беру Cursor, он уже посложнее), — как Figma выкатывает апдейт. И не просто апдейт, а буквально встраивает под капот тот же Bolt, на базе Claude Sonnet 3.7. Без лишнего шума Figma делает то, что должно было случиться: превращает среду проектирования в среду исполнения. Теперь ты не просто рисуешь экраны — ты можешь сразу собирать из них работающие штуки. Это ожидаемо, логично и, я бы сказал, органично. Всё, о чём я говорил в своих видео, теперь выходит на другой уровень. Раньше это были эксперименты в сторонних инструментах — теперь это становится частью самого процесса. Не где-то рядом, а прямо внутри того, где дизайнер работает каждый день. Поэтому теперь всё просто: нет смысла спорить, надо ли дизайнеру уметь работать с ИИ. Надо. Уже сейчас. Иначе будешь не в процессе, а догоняющим. (На фотографии я с сыном — без всяких ИИ, просто момент. Для нас это уже наступившее будущее, для него — будет обыденной реальностью. И в этом, наверное, самый интересный контраст.)

Сначала про пример из видео. Первый раз решил зайти в Пятерочку и заказать продукты там, обычно юзаю Яндекс.Лавку и Перекресток. Начал с авторизации. Находим по привычному паттерну иконку ЛК вверху — всё ок. Затем жмем на нее — ничего не происходит. Нам предлагается выпадашка из одного пункта «Войти». Это уже какая-то фигня, ибо пользователю надо вместо клика на иконку навестись на неё, затем выбрать единственное действие и кликнуть. Но и тут проблемы не заканчиваются. Кликабельная область — тема поста. На видосе видно, что кликабельна не вся плашка, а только тоненький контейнер текста «Войти». Я изначально тыкал просто по плашке и не понимал, почему ничего не происходит. Потом понял, что нужно навестись именно на текст. Это распространенная проблема, которая, к сожалению, встречается и у корпораций (потому что не всем ещё успели интерфейсы сделать, ыхых). Делают порой большую плашку на странице, с картинкой, заголовком, описанием. А кликабельной является только заголовок или какая-то маленькая ссылка «подробнее». Пользователи давно уже понимают че такое эффект наведения (hover) — достаточно подсветить всю плашку и переход станет очевидным. Ссылку можно выводить в мобилке, для тех кто в танке, но и там бОльшая часть юзеров уже понимает, что по плашкам можно тыкать пальцем для перехода. Например, когда показывают категории товаров в виде иконки + текста. Поэтому на этапе верстке уделяйте внимание кликабельным областям. Это важная мелочь, которая может стоить вам конверсии.