2181
Обо мне: UI/UX дизайнер участвую в разработке мобильных приложений и веб-сервисов для медицинских центров Москвы. База знаний канала uxbase.levicheva.com Все вопросы (рекламу не продаю): @poisonnoir
Где искать вдохновение? Подборка:
https://www.are.na/
https://minimal.gallery/
https://mobbin.design/
https://saaslandingpage.com/
https://refero.design/
https://www.landingfolio.com/inspiration/landing-page
https://www.userbrain.com/en/
https://www.gameuidatabase.com/
https://interfaceingame.com/
https://www.curated.design/
https://designsystems.surf/
https://www.designspells.com/
https://a-fresh.website/
https://maxibestof.one/
https://nicelydone.club/
https://emaillove.com/
https://layers.to/
https://www.framer.com/gallery/
https://screensdesign.com/
https://benchmarkee.ru
https://www.a1.gallery/
https://www.supahero.io/
https://screenbook.ru/?os=iOS
https://www.deck.gallery/
https://craftwork.design/curated/websites/
https://interfaceingame.com/screenshots/
☀️ Надя Левичева × мыслить дизайном
По этому туториалу подключала Claude Code к фигме без MCP.
Полезные ссылки из видео:
- Статья откуда можно скопировать в терминал запросы
- Гитхаб с утилитой figma-cli
☀️ Надя Левичева × мыслить дизайном
Залипла на abtest.design. Это коллекция A/B тестов от крупных продуктов с реальными цифрами. По типу: Duolingo отвязал сохранение стрика от дневной цели и +40% активных юзеров. Uber стал показывать одну более конкретную ожидаемую цену поездки и получил двузначный рост поездок.
☀ Надя Левичева × мыслить дизайном
Попробовала тулзу Wiretext — браузерный инструмент для вайрфрейминга на юникод-символах.
Схему можно скинуть ссылкой или скопировать как обычный текст без Figma выгрузки.
При вайбкодинге: LLM отлично считывает такие ASCII-схемы в промпте, и текстовый запрос обходится дешевле, чем загружать картинку.
☀ Надя Левичева × мыслить дизайном
Адовый UX игрушек.
Сыну 5 лет, тот самый возраст, когда хочется о ком-то заботиться. Вспомнила тамагочи из детства и решила найти современный вариант.
Первым делом наткнулась на дешевые подделки и тут поняла, что остается только плакать. Не смогли скопировать так, чтобы этим вообще можно было пользоваться.
Кнопка сброса выпуклая и находится на передней панели. Смотрела обзор, где мужчина случайно нажал ее во время съемки, и все обнулилось. Представляете, как расстроится ребенок, и при этом подобная ситуация будет повторяться снова и снова.
В оригинальной тамагочи кнопка сброса спрятана в корпусе сзади, случайно не нажмешь (да, даже в карман можно положить).
Еще из примечаний. Персонажей больше 100, но они не растут, т.е. нет прогресс-бара. А ведь именно развитие питомца и дает ощущение, что твоя забота вообще что-то значит.
Аналитика без аналитика, своими руками.
Часть 1.
Понадобиться:
Чат GPT для генерирования SQL
Подключить базу данных и сгенерировать админку через промт в jetadmin.io
Доступ к базе данных (в jetadmin.io нужно будет вести такие данные как HOST, пароль и т.п. )
1. Заходим на сайт jetadmin.io регистрируемся, переходим к генерации внизу промта есть выбор баз данных Airtable, Supabase и многие другие.
2. Я выбрала PostgreSQL и ввела все требуемые данные (HOST, PORT, USER и пароль)
3. Тестовое подключение
4. Если все окей, выбираю и подключаю таблицы из базы данных
Готово теперь они появились во вкладке Data
Далее используем чат GPT:
Просим его написать SQL запрос,например на самые популярные товары.
Копируем идем в jetadmin.io
Нажимаем SQL Collection +
Вставляем запрос - отправляем. Получаем данные.
☀️ Надя Левичева × мыслить дизайном
Сейчас есть всё, чтобы быстро собирать макеты. Очень полезная функция — Find more like this.
Работает это просто:
— выделили элемент
— Actions → Find more like this
— получили подборку похожих решений
Особенно полезно, когда ищете вариации одного типа элементов. Например, у вас есть карточка товара, и нужно посмотреть, как ещё можно её оформить. Или есть кнопка, но хочется найти другие стили.
Также удобно при работе с большой дизайн-системой.
Поиск работает как по вашим файлам, так и по комьюнити.
☀️ Надя Левичева × мыслить дизайном
Помимо создания и обучения своих GPTs для команды под нужды продукта. Можно глянуть еще, что вообще предлагают в каталоге.
Нашла два любопытных это Graphic Designer Assistant - можно закидывать свои макеты и он откомментирует, подойдет начинающим дизайнерам.
UX Copywriter выдает идеи по названию интерфейсных элементов и их аргументирует.
☀️ Надя Левичева × мыслить дизайном
Сделала ролик в нейросетях с собой.
Разбор моего пайплайна.
Всё начинается стандартно: идея → сценарий → поиск референсов. Собираю кадры из фильмов, фотки с Pinterest. Стараюсь подобрать всё в единой стилистике.
Потом мне нужно снять себя на видео и пофотографироваться. Отобрать фотки, обучить LoRA + Character в Higgsfield.
Загружаю мудборд в Midjourney, затем перехожу в ChatGPT. Там у меня настроен прожект с инструкцией, как писать промпты для покадровой генерации. ChatGPT выдаёт по 2–3 варианта на кадр, я прогоняю их через Midjourney, подключая загруженный ранее мудборд в настройках.
Но тут начинается самое весёлое.
Midjourney отлично создаёт артовые кадры, но абсолютно не умеет сохранять персонажей. Получается интересно, но персонажи в каждом кадре разные: одежда разная, объекты не стыкуются.
Называю это «Мудборд 2» промежуточный результат, который нельзя использовать как финал.
Далее перехожу в Higgsfield. Подключаю свой Character и начинаю перегонять кадры из Midjourney. Лицо сохраняется, но детали - одежда, второй план снова плывут.
Мелочи дорабатываю в Nano Banana Pro и Seedream AI меняю детали заднего плана, подчищаю косяки. Эти нейросети не такие креативные, но хорошо сохраняют исходники, дорабатывая их.
Финальная доработка в ComfyUI. Тут можно точечно настроить всё: заменить лицо, переодеть персонажа в единый лук, отредактировать позу. Работаю только с главным героем, потому что LoRA обучена на меня. ComfyUI — это про ноды и работу с ними, а не про промпты, которые не могут дать стопроцентно ожидаемый результат.
Чтобы сделать из кадров видео задействала разные нейросети от Veo до Midjourney. Озвучка - Kling. Музыка - Suno.
☀️Надя Левичева × мыслить дизайном
Перед тем, как заболеть с температурой 39,3. Я успела зафиналить на курсе все домашки. И вот вчера пришел сертификат. AI креатора.
Читать полностью…
Начинаю изучать ComfyUI — пока довольно сложно, особенно с первоначальной настройкой. Но он нужен мне, чтобы больше влиять на результат, который выдают нейросети. Промпты всё равно не дают такого уровня контроля.
Арендовала сервер для работы на runpod.io. Загружаю готовые наборы нод с курса и пытаюсь разобраться в логике, но понимаю, что знания очень специфические. Скорее всего, придётся либо самостоятельно глубже погружаться в тему, либо искать дополнительные курсы, где объясняют, как создавать более сложные композиции из этих нод.
Сейчас использую арендованный сервер, но теоретически можно установить ComfyUI локально. MacBook такое не потянет, зато есть PC — возможно, стоит попробовать локальную установку, чтобы не платить за сервер постоянно.
На этой неделе перенесла дизайн портфолио из Figma в Framer.
На базовом уровне освоила Framer за три дня, этого достаточно для создания портфолио.
Параллельно с практикой смотрела уроки.
Важный нюанс: сам конструктор Framer работает только через VPN, но готовый сайт открывается без VPN. Можно смело использовать для сайтов.
Vizydrop — Инструмент для построения различных графиков, визуализации данных.
Читать полностью…
С чего начать дизайн мобильных приложений?
1. Самое основное и очевидное это гайдлайны Android и iOS.
Human Interface Guidelines
Material Design Guidelines
Есть переводы на русский, например:
Полные иллюстрированные гайдлайны по дизайну под iOS 13
Material Design на русском
2. Исследования NNG
User Experience for Mobile Applications and Websites
3. Материалы для скачивания
Apple Design Resources
iOS 14 GUI
MATERIAL DESIGN KIT (платный)
4. Развивайте насмотренность.
pttrns.com
mobbin
ios icon gallery
uisources
uxarchive.com
androidux.com
androidniceties.tumblr.com
app.itize.us
material.uplabs.com
5. Изучайте параллельно платформы и их ограничения, техническую часть.
Можно просмотреть курсы на Designcode
Здесь можно найти курсы по мобильным приложениям от дизайна до программирования для дизайнеров (доступным языком)
или
Teamtreehouse
или
Udacity
Статья о том как выбрать курсы.
Содержание:
1️⃣ Брать узкопрофильные курсы вроде «работы с фигмой» или «аналитики» вместо фундаментальных программ
2️⃣ Учиться в одном формате, выбирать программы, на которых максимум есть лекция и упражнение, вместо комплексных программ с разнообразными типами заданий
3️⃣ Учиться у теоретиков или у тех, кто «просто работает в корпорации с 10 до 19»
4️⃣ Пускать учебу на самотёк, никак не организовывать себя и не планировать время и нагрузку
5️⃣ Решать абстрактные домашние задания про фейковые ситуации и вымышленных героев вместо того, чтобы сразу практиковаться на своем продукте
6️⃣ Покупать «корочку» для бабушки
7️⃣ Искренне верить, что сам курс все сделает за вас
8️⃣ Выбирать форму, а не смысл. Покупать игрушки, потому что модно, видео, потому что красивый продакшен, курс с сайта, на котором есть продающие слова London/New York/Sydney
Всем тем, кто делает оформление приложений в App Store: before.click для поиска рефов.
☀️ Надя Левичева × мыслить дизайном
Пока я пробовала работать в Фигме, подключая Claudе Code, вышло обновление Comet теперь он тоже умеет в Фигму. Интересно наблюдать, как работает)
Читать полностью…
Figma выкатила обновление и облегчила работу с дизайн-системами. Tеперь не нужно детачить компоненты.
Появились слоты: зарезервированное место внутри компонента, куда можно вставить свой контент (текст, иконки, другие компоненты) прямо в инстансе.
Что это даёт:
Гибкость — меняешь содержимое и структуру компонента (карточки, модалки, списки) без создания десятков вариаций.
Система не ломается — добавляешь контент в слотах как нужно, но общий стиль и поведение остаются под контролем дизайн-системы.
☀ Надя Левичева × мыслить дизайном
Я думала, что за Cursor тоже нужно платить отдельную подписку, но нет, если уже есть подписка на GPT, можно установить плагин Codex. Нашла видео, как правильно это сделать, а то изначально перепутала окна и уперлась в лимиты бесплатного встроенного GPT в Cursor.
Читать полностью…
Теперь в Фигме можно переводить из растра в вектор любые картинки.
☀ Надя Левичева × мыслить дизайном
Качаем UI через повторение чужих работ.
Tут может помочь Codia AI Design. Плагин берёт любую картинку интерфейса и превращает в макет. Получается не идеальная копия, но структура видна отлично.
Что это даёт:
- можешь быстро разложить интерфейс на слои и изучить каждый элемент отдельно
- чуть лучше видишь отступы, размеры
- легче понять систему компонентов
Плагин платный, поэтому еще один вариант закинуть шот в Figma Make и потом уже к себе на холст перенести копию.
☀️ Надя Левичева × мыслить дизайном
Персонализация в GPT
Что в моих настройках personalization:
— чётко прописанная роль и экспертиза
— конкретные инструкции по стилю ответов
— примеры желаемого формата ответа
— ограничения и «не делай этого»
— контекст моей деятельности
— чтобы задавал больше вопросов, а не сразу давал ответ
— после каждого ответа челленджил и задавал дальше ещё 3 вопроса
Кусочек из описания:
Act as a highly qualified subject-matter expert.
If information is unknown, state “I don’t know” plainly, without additional explanation.
Avoid disclaimers about your own expertise.
Do not introduce personal ethics or moral judgments unless they are directly relevant.
Deliver original, non-repetitive responses.
Focus on the core intent of each question.
Decompose complex topics into clear, logical steps.
Present multiple perspectives or solution options.
☀️ Надя Левичева × мыслить дизайном
Growth.design — крутой ресурс про то, как дизайн влияет на бизнес-метрики.
Фишка в подаче: кейсы в формате комиксов + разборы реальных продуктов.
☀️ Надя Левичева × мыслить дизайном
Две книги ко мне пришли, на которые я оформляла предзаказ.
Миша Розов удивил. 😊
Сегодня посмотрела lovart.ai.
Прикладываешь работу, которую нужно изменить, или оставляешь референс для создания новой, добавляешь комментарии как в Figma, обсуждаешь всё с нейросетью, она иногда задаёт уточняющие вопросы.
И когда всё готово, нажимаешь «Run all» . Она применяет все изменения из комментариев разом. Можно, конечно, вносить правки и по отдельности, сразу отправляя комментарии на доработку, но тогда она начинает генерировать без обсуждения.
Framer, как выяснилось, не открывается по мобильному интернету, или открывается, но картинки не подгружаются.
Какая альтернатива?
• Super.so
• Tilda
• BuildIn.ai
• Craft.do
• Вайбкодить
Сегодня тестировала Nanobanana Pro — делала несколько мокапов и экспериментировала с возможностями.
Процесс был такой: сначала создала мокап с MacBook, подобрала стиль, который зашёл по цветовой гамме. Потом скопировала картинку с этим стилем, вставила в промт и попросила AI сделать аналогичный мокап, но уже с iPhone — просто указала на русском, что нужно заменить устройство и какой контент вставить в экран.
Работала через сайт higgsfield.ai, но для примера прикрепляю скриншот, как это можно делать через Figma. Лично мне этот сайт показался удобнее, чем Figma.
В целом инструмент справился с задачей копирования стиля между разными устройствами, но иногда вылезают артефакты.
Вот несколько полезных советов по составлению хороших вопросов для UX-опроса:
1. Не используйте двойные отрицания («Это нетривиальный вопрос? Да/Нет»)
2. Избегайте предвзятых формулировок. К примеру, вопрос «Что вас бесит в этом продукте?» подразумевает, что респонденту в продукте что-то бесит. Не нужно строить догадок. Постарайтесь звучать максимально нейтрально.
3. Задавайте по одному вопросу за раз («Что вы думаете о нашем блоге и о бренде в целом?» — это плохой вопрос)
4. Не задавайте одни и те же вопросы снова и снова («Оцените удобство корзины?» «Оцените удобство сайта в целом?»)
5. Постарайтесь не задавать вопросы о поведении на сайте (что они сделали и как).
6. Используйте сбалансированные шкалы. Если у вас шкала из 4 вариантов ответа (очень плохо, плохо, хорошо, очень хорошо), то людям придется выбирать между «хорошо» и «плохо». Дайте возможность выбрать что-то среднее, чтобы неопределившиеся респонденты не портили вам статистику.
7. Постарайтесь, чтобы значения шкал не пересекались (0-2, 2-4, 4-6)
8. Всегда добавляйте опцию «Другое» или «Я не знаю»
9. Дайте людям возможность поделиться своими мыслями после каждого закрытого вопроса: добавьте необязательное текстовое поле с вопросом «Почему?»
Ссылка на статью
Инструменты для составления CJM — Сustomer journey map
Многофункциональный Miro там же я делаю не только CJM, но и собираю всю информацию о проекте при исследовании, разбивая ее по артбордам.
Но полезно смотреть и на другие ресурсы:
Uxpressia - можно найти шаблоны для Customer Journey Maps и Персон
и еще два инструмента для постраения пути пользователя — это
Сustellence и milkymap
Кто еще не смотрел, рекомендую.
Обсуждение soft skills с Костей Горским и Валерией Розовой.