Дизайн

Когда обсуждают AI-generated UI, разговор обычно быстро уходит в одну из двух крайностей.

Первая крайность звучит так: можно ли это сразу нести в продакшен?

Вторая так: насколько результат похож на дизайн-языки, от Apple до Material Design.

Проблема в том, что мы слишком рано начинаем оценивать AI-картинку как почти готовый интерфейс. Хотя во многих случаях она полезна совсем по другой причине. Не потому, что экран уже получился зрелым, воспроизводимым и пригодным для продуктовой среды. А потому, что он принёс редкую визуальную комбинацию, до которой человек вручную шёл бы заметно дольше, либо вообще не полез бы в эту сторону с первой попытки.

Главная польза AI-generated UI часто лежит не в скорости производства экранов, а в поставке визуальных мутаций.

Но и это, как мне кажется, ещё не самый интересный слой темы.

Есть перспектива глубже. AI полезен не только тем, что выбрасывает необычные визуальные сочетания. Он постепенно меняет саму точку входа в процесс. Раньше сильный визуальный ход обычно должен был родиться внутри головы дизайнера. Теперь он всё чаще может возникнуть снаружи, в виде машины, которая массово производит промежуточные формы. После этого дизайнер уже не столько изобретает первый образ, сколько отбирает, фильтрует, нормализует и превращает удачное отклонение в систему.

Именно этот сдвиг, по-моему, и заслуживает более внимательного разговора.

Стартовый гайд, для тех, кто хочет на простом примере научиться генерировать из Figma как минимум веб-страницу, которая: сделана по дизайну, адаптивна под разные размеры экрана, учитывает retina и non-retina дисплеи, поддерживает локализацию с динамическим переключением языков и позволяет реализовать другие свои хотелки

У продуктовых дизайнеров есть странная ловушка: индустрия производит огромное количество контента про рост в профессии, но сам рост от этого почти не происходит. Можно годами смотреть референсы, читать разборы и ходить по курсам — а потом все равно теряться в работе с живым продуктом, где есть ограничения, метрики, конфликты и цена ошибки. 

Я это видел много раз — и в студии, и в больших командах. Поэтому ниже не советы в духе «потрать 10 000 часов», а разбор того, что реально ускоряет рост и почему стандартные пути часто тормозят и не помогают.

Прилетела как-то ко мне задача: нужно оперативно сделать 4 посадочные страницы для разных чат-ботов, чтобы показать продукты внутри одной компании, то есть, заходя на сайт бренда, можно перейти на промостраницу каждого из них. Сразу поясню – заказчик крупный, мы делаем для него пул задач кастомной разработки. В этот раз он хотел подготовить отдельные промо на каждый вид продукта.

Подобные задачи я делаю на Тильде, которая подходит для небольших проектов. Иногда и сам клиент просит сделать сайт именно на этой платформе, так что опыт работы с ней у меня накопился приличный.

Оценила сроки и выдала: «За 2 недели будет готово». Но у заказчика был конкретный запрос — попробовать собрать лендинги с помощью ИИ и уложиться в более сжатые сроки.

Попробовала прикинуть, как ускориться — например, собрать макеты с помощью AI, перевести в Figma, и можно уложиться в полторы недели. Но и это не совсем подходило. Тогда гендиректор мне подсказал: «А попробуй вайбкодинг». Ну давайте пробовать, что уж там!

Когда разработчик открывает CAD-пакет и начинает разводку многослойной печатной платы, он реализует не только электрическую схему, но и технологическую судьбу изделия. От того, на каких слоях будут проложены сигналы, размещены полигоны питания и «земли», зависит не только помехоустойчивость, но и то, насколько легко плату будет изготовить, проконтролировать и, если потребуется, отремонтировать после пайки.

На нашем производстве мы регулярно сталкиваемся с проектами, где внешние и внутренние слои используются неоптимально. Например, силовые цепи пытаются спрятать внутрь, забывая про теплоотвод, или, наоборот, критичные высокочастотные линии выводят наружу, получая недопустимые наводки. Разберём принципиальные различия между внешними и внутренними слоями — с точки зрения технологии, электрики и эксплуатации.

Внешние слои. Верх и низ (Top и Bottom)

Верхний и нижний слои — это «лицо» печатной платы. Как правило, они покрыты паяльной маской, имеют контактные площадки для компонентов и непосредственно взаимодействуют с окружающей средой. Их трассировка имеет ряд характерных черт.

Технология изготовления

1.       Преамбула

Напомню, что в серии статей на Хабре я описываю вольную реализации демонстратора системы взаимодействующих движков Forth в рамках парадигмы обработки данных в потоке. Последняя статья https://habr.com/ru/articles/1002748/ из этой серии была посвящена реализации прототипов взаимодействующих движков Forth класса тактовых генераторов.

Сегодня моя цель - обсудить две возможные схемы реализации интерпретатора, показанные на заставке.

2.       Исходная точка вопроса

Ход разработки демонстратора системы идет в стиле «два шага вперед, шаг назад». Последний шаг назад, повлекший капитальную модернизацию работающего интерпретатора Forth, был сделан на этой неделе.

Дело в том, что я обратил внимание, что в литературе принципиальные схемы так называемой REPL, мягко выражаясь, не совпадают с действительными соотношениями вещей.

Справка из Википедии: "REPL — форма организации простой интерактивной среды программирования в рамках средств интерфейса командной строки."

Я не стал копировать из Интернета иллюстрации REPL интерпретатора, а для единообразия подготовил свою, соответствующую интерпретатору Forth:

Я изучаю информационный мусор, как явление в дизайне, уже более 10 лет — в дизайне интерфейсов он представляет собой избыточный, нерелевантный или конкурирующий визуальный и текстовый контент, который нарушает когнитивные процессы восприятия и затрудняет эффективное взаимодействие пользователя с системой, поскольку человеческое внимание, обладая ограниченной пропускной способностью, не способно одновременно обрабатывать большое количество равнозначных стимулов без потери качества интерпретации этих стимулов.

Информационный мусор может содержаться: в тексте, в навигационных структурах, в колористике, в формах и в избыточности визуальных метафор (иконок) внутри интерфейса.

Сегодня сделать семейное фото онлайн предлагает большое количество сервисов: от ботов в Telegram до мировых лидеров типа GPT Image или Nano Banano (Google). Проблема в том, что большинство реально признанных ИИ недоступны или их через API, что часто сопровождается сбоями в работе и ошибками. Мы собрали лучшие сервисы, с помощью которых Вы сможете сделать совместное фото как по готовым шаблонам (это гораздо проще и часто лучше), так и с помощью промптов в режиме онлайн. В качестве бонуса также предлагаем 15 проверенных промптов, которые хорошо работают в Gemini. 

Сегодня многие пользователи ИИ живут в двух параллельных реальностях: одни получают гранты и «стебут» Голливуд с помощью SeeDance 2.0, а другие не знают, как зарегистрировать аккаунт без зарубежной карты и получить охваты в Тик‑Ток, получая шаблонные «пластиковые» видео на выходе, которые уже «надоели» всем алгоритмам во всех существующих социальных сетях. Отсюда простой вывод — для генерации видео нужно понимать свои цели и потолок того или иного AI для масс‑маркета в контексте поставленной задачи. Сегодня мы расскажем, как создавать любительские видео для развлечений и трафика в социальных сетях максимально просто, и на что способны доступные языковые модели — без профильного образования оператора или дизайнера. 

В этом выпуске пробежимся по самым интересным новостям марта, которые точно стоит посмотреть и взять себе на заметку:

1) Кит — маскот Firefox
2) Новинки от Apple
3) Слоты в Figma
4) Сразу два новых шрифта: Snickers Sans и TikTok Sans
5) Апдейт Google Stitch
6) Интересный UX-кейс с «читами»
7) Дизайн для «Backstage Roasters»
8) SVG-иконки и новые эмодзи
9) «Агентурная» работа прямо на холсте Figma

Когда ты дизайн-директор и берёшься за то, чего раньше не делал, тебя ждёт много интересного: нейросеть выдаёт голубя с переломанными лапами, модель здания не влезает в браузер, а Spline отказывается фиксировать частоту кадров. 

Привет! Меня зовут Алексей Нибо, я дизайн-директор в Атвинте. Это история о том, как я собирал интерактивные 3D-модели для сайта архитектурного бюро.

Несмотря на наличие таких художников как Midjourney, инфографика по‑прежнему играет важную роль, ведь воспринимается в 60 000+ раз быстрее, чем текст. А сегодня как раз время коротких вертикальных видео:

ЦИФРЫ:

94% — больше просмотров, чем у публикаций без визуала;

6× — визуальная информация запоминается лучше, чем текст;

3× — выше вовлечённость: лайки, репосты, сохранения;

Рассмотрим 8 сценариев, когда инфографика полезнее текста.

В сети тысячи промптов для фотосессий, но почти все они выглядят примерно одинаково. «Гиперреалистичный портрет, 8K, кинематографический свет, красивая девушка, f/1.8.» Копируешь. Вставляешь. Получаешь пластиковое лицо которое выглядит так, будто его сгенерировал кто-то, кто никогда не смотрел на фотографию, которую любит. Это явно не тот максимум, который сегодня может выдать Gemini, ведь модель научилась отлично держать лицо. Пойдем за экспериментами. 

Мы прошли через всё что есть — Pinterest, TikTok, YouTube и ботов со своими коллекциями образов: 

ИИ фотосессия по фото — это всегда компромисс между «пластиковыми» лицами и фотореализмом: одни нейронки хорошо держат консистентность, но добавляют «мыло», а другие предлагают уникальный художественный стиль, но портят референс. Тем не менее, сегодня есть достаточно много вариантов ИИ для фотосессий, которые предлагают приемлемый результат. Мы собрали лучшие модели, как для нашего рынка, так и зарубежные сервисы для тестирования которых нужно будет постараться чуть больше. 

Нейрофотосессия онлайн — это олицетворение сложного термина, но предельно простой задачи для ИИ, с которой сегодня может справиться почти любая популярная нейронка: от GPT Image до Midjourney. Проблема в том, что эти сервисы ориентированы на свою целевую аудиторию, и не доступны у нас на сегодняшний день. Впрочем, это не мешает нам делать студийные фотосессии, ведь у многих мировых движков есть API, которыми пользуются разработчики для создания своих сайтов, ботов, приложений. И их очень много. Однако, не все работают корректно и прозрачно. Собрали для Вас топ нейронок для создания фотосессий и бонус в виде промптов, которые сегодня «вирусятся» в сети. 

На связи Антон Черный, лид команды продуктового дизайна. На примере типовой задачи рассказываю, как мы пересобрали UX-процесс и ускорили проверку гипотез с помощью AI-first прототипирования.

Привет, Хабр!

У меня была довольно простая идея — сделать несколько принтов с хоккеистами. В итоге всё закончилось тем, что я превратил их в богов и собрал серию THE HOCKEY GODS SERIES.

1. Предисловие

Сегодня я хотел бы рассказать о небольшом дизайнерском проекте, который я планировал реализовать уже давно, но никак не доходили руки.

Идея была такова: сделать небольшую коллекцию футболок с эпичными изображениями современных хоккеистов. Идея базировалась на трёх архетипах «Александр Овечкин — Архангел», «Здено Хара — Кибервойн» и «Виктор Хедман — Ледяной страж», но в процессе работы по ряду соображений (узнаваемость бренда у российский аудитории и некоторые сложности с результатами генерации по Здено Харе) я решил исключить всех иностранных хоккеистов или выделить их в отдельный блок. Таким образом, сейчас в коллекцию входят футболки со следующими хоккеистами: Александр Овечкин, Артемий Панарин, Сергей Бобровский, Павел Дацюк, Михаил Сергачёв и Евгений Малкин.

Психологи уверены: то, как мы воспринимаем происходящее, — в том числе заслуга шрифтов. Они могут быть холодными и отстраненными, теплыми и яркими. Сегодня поговорим о нескольких старых шрифтах и расскажем, как они были созданы.

Пользователи DeFi‑приложений — независимо от опыта — в первой сессии сталкиваются с нагрузкой, где нужно разбираться в ключах, адресах, комиссиях, пулах ликвидности и пр., что становится причиной финансовых ошибок и высокой доли отказов

Проверил гипотезу влияния выбора модулей приложения в онбординге на устойчивость к ошибкам, понятность и скорость сценариев перевода, обмена и стейкинга

Результат хорошего видео сегодня — это не столько про возможности ИИ, сколько про понимание его работы и логики выполнения поставленных задач. Поверьте, никто лучше самих ассистентов (GPT и Cloud) не понимает «потолок», который можно вытащить из нейронок. И вовсе не обязательно проходить курсы по промпт‑инжинирингу, чтобы научиться создавать или находить хорошие промпты для генерации видео — этому уже посвящены целые сайты, разделы в Pinterest. Мы решили собрать немного интересных идей в одном месте, посвященных видео, которые прямо сегодня «разрывают» Тик Ток и Ютуб. 

Сделать такие видео Вы можете в Fox AI — это бот, который включает разные движки самых популярных ИИ (Kling, VEO, Sora и другие). Работает в Telegram без ВПН;