Дайджест продуктового дизайна

Ежегодная конференция Google I/O 2024 прошла 14 мая в онлайне (в основном). Как и в прошлый раз, всё внимание ушло на битву ИИ-вооружений — выше крыши новостной пищи про Gemini, маловато про Android и Material Design. Но чуток есть:   ANDROID 15 Детальный обзор экранов и функций. Самое заметное: — Визуальное облегчение статусной строки — Можно делиться не всем экраном, а его частью — Обновление интерфейса камеры — Постоянная панель приложений на больших экранах — Предиктивная логика возврата назад в истории навигации — Пары приложений, которые сразу запускаются с разделением экрана — Насильное включение тёмной темы даже для приложений, которые её не поддерживают   Что нового по функциям: — Приватный раздел, где можно спрятать приложения под пароль. — Защита данных от воровства (телефон определит, если его вырвали из рук и побежали наутёк). — Отслеживание вредоносных приложений в реальном времени. — Можно сфотографировать билет или карту лояльности -- Google Wallet отсканирует её и добавит в коллекцию. — ИИ будет анализировать телефонный разговор в реальном времени, чтобы словить типичные вопросы мошенников и предупредить пользователя. — Project Gameface позволяет управлять телефоном глазами и мимикой людям с ограниченными возможностями.   Gemini полностью встроен в Android. Он запускается как слой поверх текущего приложения. Можно обвести что-то на экране телефона и получить ответ. Можно задать вопрос о видео с YouTube или PDF. Ещё он будет искать внутри Google Photos, объяснять решение проблемы из видео-ролика. Обновления компонентов Material Design. Бета-версию уже можно поставить себе.   Немного новостей по другим платформам — Анонсировали раннюю версию WearOS 5. Расширение возможностей для сторонних циферблатов и API для отслеживания здоровья, повышение энергоэффективности.   — Обновление Android Auto (платформа доступна уже на 200 млн машинах). Можно передавать медиа с телефона через Google Cast, есть новые приложения.   — Google Home открывает свою платформу для сторонних продуктов.   Другие новости про Gemini — Новые версии модели Gemini 1.5: более компактная Flash и совсем портативная Nano для запуска на устройстве.   — Обновились модели Imagen и Veo для генерации картинок и видео.   — В Gmail и Docs появится боковая панель для работы с Gemini.   — Project Astra использует камеру телефона для анализа того, что видит пользователь. Они сделали демо с очками дополненной реальности.   — Gemini Live поможет подготовиться к презентации или собеседованию — с ним можно вести диалоги. Виртуальный коллега в Google Workspace сможет мониторить статус проектов, поможет раскопать контекст из предыдущей переписки, анализировать тренды и организовывать информацию.   — Генеративные ответы в результатах поиска Google теперь доступны в США.   — Цифровые водяные знаки для сгенерированного видео.    Полезные выступления (Liam Spradlin выделил толковые для дизайнеров): — Адаптивность между разными устройствами в дизайне, на базе Material 3 и разработке — Поддержка accessibility — Новые возможности работы с Material Design на Compose — Оптимизация интерфейсов для больших экранов — Android Auto — Нюансы реализации хорошего UX — Работа с генеративным ИИ на телефонах   Abla Hamilton учит использовать умного помощника Google Gemini для анализа дизайна на базе Material Design (например, он подскажет какие компоненты нужно использовать для конкретного макета). Вот такая окрошка новостей на тархуне (такая вся неоднородная), отправленная со смартфона Vivo (меметичная аналогия навязчивости Gemini). 10 июня сравним всё это с обновлением iOS.   #materialdesign #designsystems

Мини-подборки тема — ваша дизайн-система:   1. Brad Frost: Концепция «рецептов». Это специфичные компоненты, которые нужны конкретному продукту в частной ситуации и добавлять их в общий каталог нет смысла. Хотя они должны строиться по тем же принципам. 2. Lukas Oppermann: Платиновая памятка по организации работы над дизайн-системой в Figma. Как вести версионирование, обновление компонентов, историю изменений — дотошно и основательно. 3. Завтра стартует ежегодная презентация Google I/O о будущем Android и Material Design. Liam Spradlin тизерит толковые рассказы от дизайнеров, James Williams показывает обновления компонентов для Android, а Abla Hamilton учит использовать умного помощника Google Gemini для анализа дизайна на базе Material Design (например, он подскажет какие компоненты нужно использовать для конкретного макета). 4. Автомобильный интерфейс Snapp Automotive может иметь разные темы оформления для разных автопроизводителей. Casper Kessels рассказывает об архитектуре токенов и компонентов в Figma для этого. 5. Brad Frost: Мусор в дизайн-системе неизбежен из-за природы продуктовой работы. Но его можно минимизировать. 6. Andrea Zilibotti: Создание дизайн-системы Ritmo для музыкального сервиса Musixmatch. 7. Subframe: Инструмент позволяет собирать интерфейс из компонентов в коде, а потом докручивать его под себя. 8. Supernova: Опрос около 200 дизайнеров и разработчиков о том, как они используют токены.   #designsystems

Дайджест продуктового дизайна за апрель 2024. Рифма шрифта и иконок, рецепты в дизайн-системах, компонентные спринты, калькуляторы, как продать редизайн, алгоритмический дизайн, accessibility, менторство, и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.   Напомню, что его можно получать разными способами: — Telegram — vc.ru — DSGNERS — ВКонтакте — RSS

Долго копился мини-выпуск про связь бренда с интерфейсом, но вроде как пора выпускать:   1. Streamline: Лучшая в мире статья про связь шрифта и пиктограмм в интерфейсах. Супер-детальный и дотошный метод поиска визуальной рифмы с топчанскими примерами для типивых ситуаций.   2. Иви: Исследование эмоционального восприятия нового шрифта. Они сравнили несколько вариантов по набору шкал.   3. Instagram: Язык анимации от голландского агентства Dumbar.   4. Hubbl: Видео-сервис, сделанный внутренней креативной студией Fox Creative.   5. Betterfly: Страховой сервис от британского агентства Design Studio.   6. Klarna: Обновление айдентики финтеха, сделанное внутренними силами.   7. Trust: Финтех-сервис от австралийского агентства Lovework.   8. Docusign: Сервис цифрового документооборота, сделанный внутренними силами (разбор).   9. Uber: Заказ такси от американского агентства Jones Knowles Ritchie.   10. Sendwave: Сервис денежных переводов от британского агентства Design Studio.   11. Customer.io: Сервис рассылок, сделанный внутренними силами.   12. Epidemic Sound: Каталог профессиональной музыки и звуковых эффектов от шведского агентства Bold.   13. ShareFile: Сервис цифрового документооборота от американского агентства Athletics.   14. Sports.ru: Спортивное издание от отечественного агентства Супрематика.   15. CafePay: Зарплатный проект от американского агентства Clay.   #branding

«Я ещё не договорила», сказала недавняя мини-подборка об алгоритмическом дизайне. Лучше выгрузить сейчас, пока снова не стало слишком много:   1. Rosenfeld Media запускают новую конференцию «Designing with AI» с фокусом на дизайн с ИИ. Она пройдёт 4-5 июня в онлайне.   2. UX Pilot: Многофункциональный инструмент алгоритмического дизайна. Умеет генерировать макеты, wireframes, цветовые палитры, тексты, планы рабочих сессий. Также может сделать оценку дизайна.   3. Adobe Photoshop: Можно стилизовать часть изображения на основе другого стилистического изображения-примера, менять части изображения на похожие по духу объекты, вырезать и сгенерирвать фон.   4. Adobe Premiere Pro: Можно генерировать видео по текстовому запросу, добавлять или удалять объекты, расширять кадр. Будет возможность подключить сторонние модели вроде OpenAI Sora, Pika Labs или Runway.   5. Knowing Machines: Откуда берут данные для обучения алгоритмов популярные генераторы фото и иллюстраций. Они пользуются базой LAION-5B, для которой сделали несколько курированных людьми выборок. Исходя из особенностей этих выборок становится понятно, почему многие картинки от Midjourney или Stable Diffusion выглядят однообразно.   6. Oliver Reichenstein: Интервью с основателем iA на тему стоковости результатов работы инструментов алгоритмического дизайна. И то, как может измениться подход дизайнеров, которые хотят этого избежать.   7. Figma Wireframe Designer: Плагин генерирует wireframes по текстовому запросу.   8. Amelia Wattenberger: Интересный концепт алгоритмического инструмента для помощи писателям. Он помогает сбалансировать повествование по сложности, эмоции и другим параметрам.   9. Spline: Генератор 3D-объектов по текстовому запросу.   10. VIDIM: Экспериментальный инструмент Google дорисовывает промежуточные кадры видео по первому и последнему.   11. Google Vids: Генератор видео для Google Workspace на базе презентаций Google Slides. Можно выбрать стиль и записать себя.   12. Яндекс Поиск: Алгоритмический чат-бот на базе YandexGPT.   13. Алиса: Прокачалась с помощью YandexGPT. Она сможет отвечать сама на большее количество вопросов.   14. Meta AI: Алгоритмический чат-бот. Работает как отдельный инструмент и внутри продуктов типа Facebook.   15. Mail.ru: В productivity-сервисах появился генеративный ИИ. Короткий пересказ писем, генерация текстов в заметках.   16. SoundID VoiceAI: Плагин для DAW превращает запись вашего голоса в любой другой и делает его звучание более профессиональным.   #ai #algorithms

Только я собрался собрать мини-подборку о дизайн-системах, как Figma провела мини-конференцию Framework на тему 16 апреля (и сделает ещё пару доп.событий 18 и 23 числа).   Во-первых, запустили много фешенебельных новых функций: шрифтовые и градиентные токены, аналитика использования библиотек. И, самое главное — родная связка с реальным кодом компонентов через Code Connect, благодаря которой разработчики могут получить его прямо из макета (причём это не мусорная автогенерация).   Во-вторых, выпустили серию кейсов о командах дизайн-систем:   — Компонентный спринт в Washington Post. Дизайнер и разработчик в паре про прорабатывают все вопросы в течение 10 дней.   — Как переезжали на Figma в Carvana и Alaska Airlines.   Была ещё пара общепроцессных статей, но они водянистые. Зато неплохой обзор плагинов для связки кода и дизайна в Dev Mode.   Бонус — несколько статей о новых возможностях переменных в CSS: 1. Michelle Barker: Относительно новая функция color-mix(), которая помогает делать вариации цветов в токенах.   2. Bramus van Damme: Функция light-dark(), которая позволяет задавать цвета для обычной и тёмной темы оформления.   3. Lea Verou: Предлагает отличную идею групп для переменных. Они могли бы упростить описание шрифтовых наборов, цветовых градаций и других связанных токенов.   #designsystems

Шепотка новых материалов о пользовательских исследованиях:   1. NN/g" Мощная детальная памятка по проведению дневниковых исследований. Виды, подготовка, проведение, анализ данных.   2. Chris Chapman: Метод оценки отношения пользователей к цене Van Westendorp.   3. Jeff Sauro и Jim Lewis: Сравнивают возможные подходы к выборке респондентов для опросов. 4. Dovetail: Сервис для ведения базы знаний и инсайтов анонсировал прорву новых возможностей по автоматизированной обработке результатов исследований, выделению тем, обработке видео и т.п. 5. Chris Chapman: Точной итоговой оценки у опросников зачастую не существует. Попытка получить её — самообман, поэтому нужно воспринимать их как поддержку принятия решений.   6. IBM: Советы по подготовке, проведению и использованию результатов исследований, с учётом ожиданий ключевых участников проекта. 7. Maze: Опросили 1200 участников продуктовых команд на тему состояния рынка пользовательских исследований. Каких-то откровений нет, но вдруг пригодится.   #research

Чтобы пакет с пакетами про алгоритмический дизайн не успел переполниться, закидываю его сюда:   Relume: Грамотная концепция конструктора сайтов на базе алгоритмического дизайна. Он помогает составить карту сайта, сделать wireframes и собрать стиль на основе мудбордов. Всё это можно экспортировать в Webflow или Figma (они сделали тонну компонентов для типовых ситуаций).   NN/g: Помощь пользователям-новичкам при работе с алгоритмическими чат-ботами. Они провели небольшое исследование китайских сервисов и описала типичные проблемы людей, которые сталкиваются с таким впервые.   OpenAI: Попросили семь художников и режиссёров попробовать их новую модель Sora для генерации видео. Получилась крутая демонстрация возможностей.   Google AI Studio: Общедоступная версия языковой модели Gemini 1.5 Pro через новый, частично визуальный интерфейс.   Midjourney Character Reference: Теперь можно сохранить черты лица или детали одежды персонажа в разных генерациях.   Vincent Koc: Фреймворк «компас генеративного ИИ». Он помогает проектировать интерфейсы таких продуктов. MeasuringU: Можно ли использовать ChatGPT для тестирования дерева в информационной архитектуре? Успешность выполнения задач сильно завышена, а вот простоту решения задачи предполагает неплохо.   Jakob Nielsen написал спорную статью об автоматической поддержке accessibility с помощью ИИ. Это вызвало огромную волну критики в проф.сообществе и Adrian Roselli собрал ссылки на все такие статьи.   Maze: Сервис для проведения пользовательских исследований добавляет алгоритмические функции. Он подскажет как грамотно сформулировать вопрос для респондента, задать догоняющие вопросы, анализировать общие темы и в целом организовывать проекты.   Devin: Платформа для разработчиков, которая мощно развивает концепцию копилотов. Она не только пишет код и исправляет баги, но и помогает разобраться в незнакомых технологиях, выкатывать на прод и много чего ещё.   Adobe Acrobat: Дизайн интерфейса Generative summary. Их принципы алгоритмического дизайна.   Victoria Turk: Анализирует современные инструменты генерации изображений по текстовому запросу и показывает на конкретных примерах, насколько они полны клишированных стереотипов.   Leonardo AI: Генератор фото и иллюстраций по текстовому описанию.   Blaze: Алгоритмический генератор текстов для блогов, социальных сетей и рекламы.   Jakob Nielsen: Приводит несколько исторических аналогий на тему страха «использующие ИИ-инструменты отупеют». Это далеко не всегда так.   Everypixel: Глоссарий самых популярных терминов, использующихся на текущем этапе эволюции ИИ.   Adobe Project Music GenAI Control: Генератор музыки по текстовому описанию. Можно докрутить готовую композицию по скорости, экспрессивности и т.п.   Arcads: Генератор вертикальных рекламных видео с вымышленными актёрами. На входе – ваш сценарий.   HeyGen Avatar in Motion 1.0: Генератор вертикальных рекламных видео с вымышленными актёрами в движении.   Grok-1: xAI Илона Маска опубликовала исходный код своей ИИ-платформы Grok-1 на GitHub.   YandexGPT 3: Новая версия языковой модели Яндекса. Также в Yandex Cloud появился API YandexArt для генерации фото и иллюстраций.   Яндекс Почта: Научилась пересказывать важные письма за последнюю неделю с помощью YandexGPT.   Intuit Assist: Алгоритмический помощник подсказывает, как управлять финансами.   #ai #algorithms

Дайджест продуктового дизайна за март 2024. Менеджмент дизайн-систем, как спроектировать плагин для браузера, страницы 404, исследование отечественных UX-писателей, «сочные» дизайн-решения, алгоритмический дизайн, дневниковые исследования и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.   Напомню, что его можно получать разными способами: — Telegram — vc.ru — DSGNERS — ВКонтакте — RSS

И снова прорва свежих ссылок об интерфейсных паттернах и лучших практиках:   1. Creative Navy: Браузерные расширения. Популярные подходы и их особенности.   2. Brad Woods: Концепция «сока» в играх, которую можно применить для внедрения эмоционального дизайна в интерфейсах.   3. Коллекция примеров страниц ошибки 404.   4. Коллекция примеров интересных интерфейсных решений, во многом на базе анимации.   5. Welcome to the Jungle: Проектирование и тестирование навигации.   6. NN/g: Главные страницы сайта. Правда, с поправкой на то, что у многих сайтов пользователи в основном попадают на конкретную страницу из поиска или соцсетей, минуя главную.   7. Luke Wroblewski: Проблемный интерфейсный паттерн «пинбол», когда глазу приходится сканировать последовательность элементов на экране в хаотичном порядке.   8. Brian Merrell: Переосмысление панели настроек анимации в After Effects. Визуализация с помощью метафоры автобусного маршрута помогла упростить работу.   9. Baymard Institute: Как спроектировать правильный фильтр по размерам одежды и обуви в интернет-магазинах.   10. Creative Navy: Проанализировали сайты производителей промышленного оборудования.   11. Arun Venkatesan: Толковая навигация по содержанию статьи в своём блоге.   #patterns