ABRAMOVA | MOBILE APPS | UX/UI DESIGN
Відкрити в Telegram
Про продуктовый дизайн, мобильные приложения и онлайн-образование. Сайт школы https://abramova-freelance.ru/ Сотрудничество @maroot_ux
Показати більше1 632
Підписники
+124 години
+207 днів
+430 днів
Архів дописів
Сегодня проводила очередной эксперимент с Claude Code.
Изначально задача была такая: взять готовые экраны в Figma и собрать из них интерактивный прототип.
Это может пригодиться, когда мы разрабатываем концепцию приложения или сайта и хотим показать её клиенту или команде. Не просто открыть несколько экранов в Figma, а дать работающую версию, в которой можно нажимать кнопки, переходить между экранами и проверять весь сценарий.
Но потом я решила немного расширить задачу.
У меня был только один готовый экран. Я дала Claude Code ссылку на Figma и попросила сначала дорисовать остальные экраны для прототипа.
При этом я вообще не конкретизировала, какие именно экраны нужны. Я объяснила задачу целиком: в результате мне нужен интерактивный прототип, поэтому сначала надо продумать и нарисовать недостающие экраны.
В целом Claude довольно прикольно продолжил существующий стиль. Но сегодня у меня было ощущение, что он работает слегка более тупо, простите, чем обычно.
Были проблемы с отступами. Я не прописывала их отдельно в запросе, но мне бы хотелось, чтобы такие вещи он всё-таки понимал сам.
Ещё была большая проблема с таббаром. Причём с ним не справлялся ни Claude Code, ни Figma Agent. В какой-то момент мне уже стало смешно. Про это, наверное, сделаю отдельный рилс.
Но в итоге Claude справился и когда все экраны были готовы и согласованы, я попросила его собрать интерактивный прототип.
Сейчас он открывается у меня локально как обычная HTML-страница.
Внутри полностью работает основной сценарий бронирования отеля и переходы по главным экранам таббара.
Получается ещё один нормальный рабочий кейс для дизайнера.
Можно собрать концепцию, превратить её в работающий прототип, показать клиенту или команде и использовать для тестирования. И не связывать все переходы вручную.
Но здесь всё равно очень важно правильно поставить задачу и видеть, где AI ошибается. Ошибки он совершает, поэтому всё, что он делает, мы держим под контролем и слепо ему не доверяем.
На мой взгляд, это кейс, который уже точно можно и нужно использовать.
И его мы тоже будем разбирать на интенсиве по Claude для дизайнеров в ШДМА. Стартуем уже в это воскресенье, 27 сентября.
Программа и запись
+7
Капибары выходного дня :)
Съездили в милое кафе, нагладили капибар, посмеялись над сурикатами и познакомились с бамбуковой крысой.
Интересный факт: Их массивные передние зубы (резцы) растут на протяжении всей жизни. Чтобы они не вырастали до опасных размеров, животным приходится постоянно их стачивать. Именно зубами, а не лапами, они прогрызают твердую почву и роют свои длинные подземные туннели в поисках корней бамбука.
Записала бесплатный урок про связку Claude Code и Figma.
Внутри показываю весь процесс на одной конкретной задаче: даю Claude готовый экран, прошу проанализировать недостающие состояния, а потом он идёт в Figma и рисует их прямо в файле.
Видео короткое, 10 минут.
Смотреть бесплатно на Kinescope
___
27 сентября стартует интенсив по работе с Claude. Там будем подробнее разбираться со связкой Claude Code и Figma, делать собственные сайты и сервисы с помощью AI.
Программа и подробности здесь
С чего начать, если вы боитесь AI?
Я собрала большущий гайд для дизайнеров. Внутри есть личное интро, мои мысли о том, как меняется профессия, простое объяснение разных инструментов и конкретные примеры того, что с их помощью можно делать.
Собственно, открывайте, изучайте и задавайте вопросы, если они появятся:
https://telegra.ph/S-chego-nachat-esli-vy-boites-AI-09-12
Хорошо, когда нет внутреннего запрета на делиться личным.
Могу отправить вам шум тропического дождя :)
Очень хочется поделиться тем, что сейчас происходит, потому что я снова немного в шоке от искусственного интеллекта.
⠀
Прямо сейчас я делаю собственную платформу с квизами и видеоуроками для дизайнеров. Там уже есть часть материалов и админка, а дальше я хочу всё это развивать. Но интересно даже не это.
⠀
Саму платформу я создаю вместе с Claude Code. Я объясняю, что нужно сделать, проверяю результат, даю обратную связь, и мы переходим к следующей задаче.
⠀
Но сегодня меня особенно впечатлило то, что я работала не только с Claude Code: разные нейросети одновременно выполняли для меня совершенно разные задачи.
⠀
Пока Claude Code занимался платформой, Codex по моему запросу открыл браузер и начал наполнять каталог видео.
Он сам находил нужную запись, копировал ссылку, переходил в админку, вводил название, добавлял ссылку, сохранял и брался за следующее видео.
И это magic.
⠀
До этого ChatGPT создавал мне презентацию, пока я занималась платформой.
⠀
А сейчас Claude Code собирает отдельный файл со спецификацией визуального стиля, который я использовала в проекте.
⠀
Потом я передам этот файл в другой чат, откуда Claude Code пойдёт в Figma и начнёт собирать первый UI-kit с компонентами, токенами и другими важными штуками.
⠀
То есть искусственный интеллект одновременно пишет для меня код, наполняет админку, работает с браузером, создаёт презентации, помогает переносить дизайн и работает в Figma.
⠀
А моя задача всё больше про то, как развивать этот продукт, давать обратную связь и придумывать, как ещё сильнее ускорить весь процесс.
⠀
Какой-то дивный новый мир.
—-
И, кажется, здесь будет уместно сказать, что уже через пару недель у нас стартует интенсив по Claude Code. (скорее всего добавлю инфу и про Codex). И мне есть чем поделиться :)
+4
Утро сегодня было таким.
25 минут от дома, пустые пляжи и сильный отлив.
Встретили ящерицу и многоножку, выпили вкусный зеленый чай, попытались поесть в модной кафешке, куда больше на поедем.
Прикол жизни в часовом поясе +4Мск в том, что утром все еще спят в Москве и можно провести его как угодно, не думая о работе.
Я завидую своему неврологу.
Лечение мигрени у меня ведет оч крутой доктор. Но как меня предупреждала коллега, он немного не типичный.
Он ведет свой блог в тг и другой соц сети.
При чем помимо проф. контента, активно постит фотки своих котов и собак, прогулки по городу, отчеты с отпуска и прочее прочее.
И блин, у него очень фул запись. И кажется, что никого не смущает такой обьем личного контента. Возможно, даже наоборот.
Так вот, я завидую ему. Потому что где-то в глубине души, да чего там, уже на поверхности, я тоже не хочу ограничиваться только полезняком на тему дизайна. Это как минимум тяжело, постоянно доставать из себя только мысли про работу.
Но за годы ведения этого канала, он оброс в моем сознании рамками, внутрь которых ничего личного не помещается.
К чему я это все. Как вы относитесь к более разнообразному контенту в подобных каналах?
Я знаю, что кто-то оч любит личное, а кто-то сильно против.
Как вы?
Вдруг ваши ответы помогут мне чуть сдвинуть эти рамки.
Как я создавала MVP платформы квизов: история запуска без опыта в коде
1. Замысел и продуктовые границы
Всё началось с идеи создать обучающий инструмент для студентов школы. Хотелось сделать короткие викторины для проверки знаний после пройденных модулей.
Главный продуктовый принцип: в первой версии (MVP) никаких регистраций, аккаунтов и логинов. И вообще все супер просто. Надо было быстро это реализовать, чтобы студенты могли пройти тест за короткое время прямо в браузере. В следующих обновлениях, скорее всего, появится и регистрация, и сохранение индивидуальной статистики, и не только квизы, но это уже тема для другого поста.
При этом мне и кураторам требовалась аналитика прохождений хотя бы для того, чтобы видеть статистику по каждому квизу. Решение нашли в архитектурном разделении: система сохраняет обезличенную статистику по анонимному ID устройства, не собирая при этом персональные данные.
2. Урок взаимодействия с ИИ: что происходит без чёткого ТЗ по стилю
Первая версия интерфейса показала главный подвох работы с нейросетями: если не задать искусственному интеллекту точные рамки, он придумает всё сам.
- Ошибка: Задача на вёрстку первого прототипа была отдана ИИ без конкретных визуальных ориентиров и правил бренда.
- Что сделал ИИ: Claude сгенерировал интерфейс в метафоре проверенной тетради, добавив бумажный фон, чернильные элементы и пометки «учительской» красной ручкой.
- Пивот: Вживую стало понятно, что тетрадный стиль выглядит чужеродно и диссонирует с брендом школы. Прототип пришлось полностью пересобирать под строгую монохромную эстетику.
- Урок: Переделывать сгенерированный код всегда дольше, чем заранее задать нейросети визуальные ограничения.
3. Логические подводные камни и человеческий фактор
Даже когда код пишет нейросеть, качество продукта остается на стороне человека. Здесь тоже не обошлось без курьёзов.
- Паттерн «второй вариант всегда правильный»: При сборке материалов выяснилось, что в исходных списках правильный ответ почти всегда стоял на втором месте. ИИ перенес контент как есть, не догадавшись перемешать варианты. В итоге тесты можно было угадывать по шаблону. Пришлось переписать промпты и автоматически перемешать варианты во всех вопросах.
- Эволюция UX: По мере тестирования интерфейс постепенно очищался. Например, экран результатов из длинного списка превратили в компактный аккордеон, где правильные ответы свёрнуты, а ошибки сразу видны взглядом.
4. Бэкенд, деплой и результат
Когда клиентская часть была уже более-менее отточена для первичной версии, пришло время бэкенда. Я человек, у которого совершенно нет опыта программирования, тем более в части бэкенда и работы с базами данных. Но при этом всё оказалось достаточно легко.
С помощью Claude Code завела простой бэкенд на обычном хостинге, он дал мне супер понятную инструкцию, настроила связку с базой данных и закрыла паролем компактную админку для себя и кураторов.
За время разработки проект прошёл 26+ итераций и превратился в рабочий опубликованный сервис с 8 тематическими квизами по UX/UI.
Главный итог: Чтобы делать работающие цифровые сервисы, сегодня не обязательно быть разработчиком. Главное: быть внимательным автором продукта, вовремя замечать логические баги, направлять ИИ и не бояться исправлять неудачные гипотезы.
ШДМА клуб.
Открыты двери на сентябрь.
Вступить можно сегодня и завтра.
Всем участникам доступ к материалам текущего и всех прошлых месяцев.
Записаться тут
До сих пор не обновилась на iOS 26. И пока не хочу.
⠀
Сегодня понадобились скрины новых экранов для курса. Открыла симулятор в Xcode и там все посмотрела, потому что на свой телефон это ставить пока не готова.
⠀
Слишком много лишнего. Слабый контраст. Тяжело считывать информацию.
⠀
Нажимаешь на крестик, рядом появляется action sheet, и появляется он не просто так, а с кучей анимации. Слайдеры тоже все анимированные.
⠀
Красиво, не спорю. Но глазам тяжело, и систему это явно нагружает.
⠀
А иногда мешает даже не эстетически, а по делу, алерт появляется поверх текста с полупрозрачностью, и сам текст на нем читать неудобно.
⠀
Да, часть этого можно подкрутить в настройках. Но тогда вопрос, зачем мне вообще в это лезть.
⠀
Кто уже обновился, расскажите, привыкли?
Парадокс.
В программах обучения часто можно увидеть очень широкий список UX методов для изучения. И даже сами студенты приходят и спрашивают: а мы будем это учить? а это?
А задаются ли они вопросом, а зачем это учить? применяется ли это в реальной практике?
Я проводила несколько открытых вебинаров и интервью с продуктовыми дизайнерами. Сама руководила командой в небольшом продукте. Несколько наших студентов, кто уже давно работает в продукте после выпуска, делились интересными мыслями. На мой вопрос, используете ли вы CJM? Или джобы? Или карточную сортировку? Все как один говорили, что нет.
С одной стороны, кажется логичным, что чем шире программа и больше методов, тем лучше подготовлен специалист. С другой стороны, реальная практика выпускников показывает обратное: из широкого списка используется буквально два три метода, остальное остается просто теорией.
Вот это столкновение ожидания и реальности и есть настоящий парадокс, не в строгом философском смысле, а в том бытовом, в котором мы обычно используем это слово.
И это сильно возвращает к реальности. Информация становится знанием только после ее практического применения. Это как с вождением, нельзя научиться водить, просто прочитав об этом, нужно сесть за руль. Так же и с дизайном, нельзя научиться делать, не делая.
Сколько бы вы ни читали про джобы, если вы не проводите JTBD, если не ищете постоянно работы, на которые нанимают, это остается просто информацией. Так зачем набивать голову ненужной информацией? В смысле той, которая не является актуальной для применения? (джобы здесь просто как пример).
Когда я все таки приняла решение добавить JTBD в программу, то решила, что это будет дополнительным уроком, не обязательным, не влияющим на общий процесс обучения. Потому что можно потонуть в количестве информации и ничего так толком и не освоить.
На мой взгляд, эффективнее быть экспертом в двух-трех методах, которые наиболее часто применимы в нашей сфере, чем погрузить в свою еще не опытную голову сразу 10-30 разных терминологий и определений и по факту ничего не понять.
Перед началом нового учебного года обновляю материалы нашего основного курса по мобилкам.
Расскажу про UX методы.
Как и раньше, основным навыком будет проведение глубинных интервью и конкурентный анализ. За все годы моей практики и по сей день это остается самым популярным и эффективным подходом.
А еще добавляю уроки по JTBD и CJM. Вместе с методом персон они станут дополнительными инструментами, из которых студент сможет выбрать, что использовать при выполнении домашнего задания.
Также сильно освежаю основную презентацию, добавляю разные методы анализа и обработки информации, полученной в ходе исследований, и в целом шире раскрываю разные UX методы.
Помимо UX Research, обновление затронет модуль гайдлайнов, прототипирования, UI дизайна, а также появятся бонусные уроки по продуктовым метрикам и другие плюшки.
И френдли напоминашка: на курс можно зайти в любой момент, но чем раньше начнешь, тем интереснее :)
По данным некоторых опросов сейчас тестовое задание просят 80-90% компаний в России. Для дизайнеров это давно не новость, как и то, что тестовые почти никогда не оплачивают. Такая вот данность рынка.
Если ищете работу, скорее всего тестовое делать придётся. Но у нас есть выбор, какое тестовое делать, а от какого отказаться. Ну или кажется, что есть выбор :)
Ловите красные флаги, по которым можно проверить компанию перед тем, как сесть за Figma.
1. Тестовое привязано к реальному продукту компании. Просят придумать решение конкретно для их сервиса или доработать существующую фичу. Это спекаут, компания просто собирает бесплатные идеи с кучи кандидатов
2. Просят слишком много. Не один сценарий, а весь сайт или приложение целиком
3. Нет чёткого брифа, а на вопросы отвечают "разбирайтесь сами"
4. Не готовы дать обратную связь на тестовое
5. Просят исходники или доступ к Figma-файлу на редактирование, а не на просмотр
6. Дают тестовое ещё до знакомства с компанией, иногда прямо в вакансии
7. Просят сделать всё супер срочно, за день или два
8. После присланного результата просят доработать и прислать ещё раз
Если задание попадает хотя бы в пару этих пунктов, подумайте, точно ли вам туда надо.
А если есть своя история про тестовое, велком в комменты.
iOS тут выпустила UI kit 27.
Забрать в Figma тут
Вроде как все компоненты собраны хорошо и багов меньше. Ну глянуть точно надо.
Сегодня последний день записи в клуб.
Примеры некоторых материалов, которые будут в августе:
- Где работать, в продукте или студии. В чем разница и что ожидать
- Где искать работу? Рекомендации и ссылки.
- Рекомендации по AI при поиске работы на hh
- Крутой материал с разбором реального продуктового портфолио и кейса.
- Огромный список вопросов на собеседовании и отдельно мое видео с разбором некоторых из нет.
И это еще не все. Оставлю остальное в качестве сюрприза)
И да, помимо этого месяца, доступны материалов всех предыдущих.
Записаться тут
Открываем август в ШДМА Клубе.
В этом месяце основная тема это трудоустройство.
Разберём всё что волнует: чем отличается работа в продукте от студии, как выглядят реальные вакансии и что за ними стоит, как устроены тестовые задания и стоит ли их делать бесплатно, какие вопросы задают на собесах и как на них отвечать.
Отдельно поговорим про AI-навыки: как их развивать и как презентовать работодателю.
Материалы будут в разных форматах: видео, HTML-шпаргалки, аудиоподкасты.
Записаться можно здесь.
Запись открытого вебинара с кучей полезной и интересной информацией про собеседования и тестовые задания.
Смотреть здесь
Ловите ссылку на сегодняшний вебинар. Встречаемся в 19Мск.
https://shdma.ktalk.ru/d3tifk4f2prb
Напомню, что будем обсуждать тестовые, прохождение собеседований и актуальные требования к кандидатам.
В августе в клубе основной темой будет собеседования и тестовые задания.
Будем разбирать вакансии, смотреть примеры тестовых, обсуждать требования и навыки.
В понедельник, в 19Мск я проведу открытый вебинар на эту тему, поделюсь своим опытом найма и ожиданий от кандидата, покажу пару примеров тестовых заданий известных компаний, расскажу о требованиях и отвечу на вопросы.
Приходите послушать!
Ссылка будет в понедельник 😎
