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

16 November 2023 08:04

Большие и маленькие статьи о дизайн-системах за последние полтора месяца, ну и всякое такое на тему:
 
1. Brad Frost: Глоссарий терминов и понятий современной дизайн-системы в большой компании. Не везде нужно всё из описанного, но оно востребовано на масштабе. Его выступление на эту тему.
 
2. Josh Clark: Предлагает смириться с тем, что команда дизайн-системы не успевает за скоростью изменений в продуктах и пересмотреть её роль. Это инфраструктурная часть, которая должна быть надёжной и продуманной. Её роль ― не придумывать любые возможные решения, а курировать уже созданные в продуктовых командах. Сама мысль не новая, но предложение идти от этой реальности ― достаточно свежее и абсолютно разумное.
 
3. Material Web: Вышла первая версия библиотеки компонентов для веба.
 
4. Rama Krushna Behera: Памятка по созданию компонента. От проектирования логики работы до реализации и гайдлайнов. Шаблон в Figma.
 
5. Список конференций и митапов на тему в разных странах мира.
 
6. Wise: Доработка цветовой палитры под требования accessibility. Часть 2 говорит о therealstephsmith/accessible-but-never-boring-part-2-e188db299bd0">типографике, иконках и других аспектах.
 
7. Deliveroo: Обновление цветовой палитры. Как она стала лучше в плане accessibility.
 
8. Odido: robinwesterhoff/design-system-challenge-rebranding-100-touchpoints-in-under-9-months-ca5d9af416eb">Запуск дизайн-системы (слияние голландских T-Mobile и Tele2). Как выбирали стратегию перехода на неё и организовали иерархию стилей.
 
9. zeroheight: Победители их награды этого года.
 
10. Jonathan Dallas: Советы по именованию переменных в CSS.
 
11. Netlify: Канонически обновили интерфейсы под ребрендинг через дизайн-систему с помощью инструментов Storybook.
 
12. Intuit: NateBaldwin/synchronizing-figma-variables-with-design-tokens-3a6c6adbf7da">Инструкция по настройке синхронизации переменных в Figma и токенов их дизайн-системы.
 
13. Sam Gordashko: Шпаргалка по использованию токенов в Figma на основе множества сторонних материалов.
 
14. Вышел Storybook 7.5. На подходе версия 7.6 с развитием инструментов тестирования.
 
#designsystems

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

06 November 2023 08:04

Как всегда, подборка свежего по алгоритмическому дизайну с трудом помещается в один выпуск:

DALL-E 3: Новое поколение позволяет точнее описать детали сцены, рисует людей с меньшим количеством галлюцинаций и генерирует корректный текст. Этические барьеры расширили — помимо известных людей, теперь нельзя мимикрировать под стиль ныне живущих художников (как убрать себя из обучения модели).

v0 by Vercel: Платформа для разработчиков Vercel запустила генератор интерфейсных компонентов. На выходе — код React на базе shadcn/ui и Tailwind CSS. Логика построения компонентов рандомная, но затея интересная.

Getty Images Generative AI: Официальный генератор фото от Getty Images и NVIDIA. Они тренировали его на своей базе фотографий и вроде как платят авторам рефов. Обещают полную лицензионную безопасность.

Baymard: Попробовали ChatGPT для экспертной оценки интерфейса по скриншоту и настоящей ссылке. Результаты мусорные ― находит крайне мало реальных проблем и выдумывает много несуществующих.

NN/g: Типичные задачи, для которых дизайнеры используют алгоритмические инструменты.

User Interviews: Что и для каких задач используют UX-исследователи.

Figma: Особенности современных инструментов для разработчиков, которые автоматизируют часть работы и генерируют код. И что из этого подошло для нового режима для разработчиков в Figma.

NN/g: Несколько моделей поведения пользователей при работе с генеративными сервисами.

Louis Charron: Как «галлюцинации» в генераторах картинок помогают креативности. Он сравнил разные версии Midjourney, которые сначала теряли поэтичность, а под конец немного вернули её.

Андрей Ковалёв: Коллекция стилей, в которые умеет Midjourney. Их можно использовать в своих запросах.

Vizcom: Превращает наброски от руки в полноценные 3D-рендеры.

YandexArt: Обновлённый генератор графики, который развивает прошлое поколение Шедеврум.

NN/g: Почему пользователи присваивают человеческие качества генеративным чат-помощникам и общаются с ними соответствующе.

Алина Сидоренко: Толковая памятка по работе с Midjourney. Как получить результат в разных стилях и видах дизайна (иллюстрации, текстуры, логотипы, интерфейсы и т.п.).

NN/g: Исследование генеративных ботов Bard, Bing и ChatGPT. Насколько хорошо они решают разные задачи.

YouTube: Будет предлагать идеи и сценарии для видео на основе данных об аудитории и её предпочтениях. Авторы смогут генерировать фоны по текстовому запросу и автоматически дублировать ролики на другие языки.

ChatGPT: Сможет принимать запросы голосом и лучше анализировать загруженные картинки. Например, предложит рецепт на основе фото продуктов в холодильнике. На такой картинке можно выделить детали, про которые хочется узнать. Тест-драйв.

fab1an/glifs/clmqp99820001jn0f2xywz250">Генератор скрытых слов на изображениях на базе Stable Diffusion и ControlNet.

Александр Селедчик: Чеклист поможет определить фото, сгенерированное алгоритмами.

Android 14: Генерирует фоны для телефона.

TryOnDiffusion: Экспериментальный инструмент «примеряет» любую одежду на ваше фото.

Jakob Nielsen: Какие метафоры кроме клишированного робота предлагают инструменты для показа самого ИИ.

Javi Lopez: Мини-игра Angry Pumpkins, сделанная с помощью DALL-E и Midjourney (графика) и GPT-4 (код).

Мета: Оцифровали пару десятков знаменитостей вроде Mr Beast и Snoop Dogg в качестве ИИ-ботов для чата с говорящей головой. И добавили много разных функций вроде алгоритмической генерации стикеров и редактирования фото.

Luma AI: Генератор 3D-моделей и сцен.

Kaiber: Генератор видео-клипов на основе текстового запроса, других видео, фото и аудио.

Suno AI: Генератор песен с вашими словами в разных жанрах.

Just AI Copilot: Свой ChatGPT от Just AI.

IKEA Instructions: Генератор иллюстраций в духе инструкций IKEA на базе Stable Diffusion XL.

Microsoft Copilot: Выходит в свежем обновлении Windows.

Spirals: Генератор спиралевидных фото.

AI Dubbing: Сервис переводит видео на другой язык. При этом он сохраняет голос персонажа.

EmojiGen: Генератор memoji.

#ai #algorithms

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

30 October 2023 08:04

Держите много свежих и вдохновляющих примеров связи бренда с интерфейсом:
 
Patreon: Сервис для поддержки авторов контента от британского агентства Wolff Olins и внутренней команды.
 
Goodnotes: Приложение для заметок от американского агентства Motto.
 
Webflow: Ребрендинг платформы для сайтов, сделанный внутренними силами.
 
Miro: Сервис командной работы от американского агентства AKQA.
 
Marshmallow: Цифровая страховая компания от американского агентства Ragged Edge.
 
Sock: Финтех от британского агентства Koto.
 
Elizabeth Goodspeed: Почему многие ребрендинги похожи друг на друга. И как на это влияют особенности формирования трендов.
 
Hiro: Web3-платформа для разработчиков от американского агентства Porto Rocha.
 
Facebook: Обновление, сделанное внутренними силами.
 
Dribbble: Ребрендинг, сделанный внутренними силами.
 
Android: Обновление лого, сделанное внутренними силами.
 
Shop: Сервис для интернет-заказов от американского агентства Porto Rocha.
 
P.S. Рассказал о своём подходе к анализу брендов цифровых продуктов в «Рефодушке» Антона Черногорова. Похоже, через какое-то время зайду ещё раз — следите за анонсами на канале Дизайн-комьюнити.
 
#branding

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

23 October 2023 09:04

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

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

16 October 2023 09:04

На конференции Adobe MAX 2023 традиционно показали пачку экспериментов с Adobe Firefly (раньше он назывался Sensei). И прокачали саму платформу алгоритмического дизайна:
 
1. Обновили базовую модель Firefly. Она научилась генерировать картинки в заданном стиле (нужно дать несколько примеров или выбрать из существующих рефов). Точнее генерирует людей и позволяет настраивать параметры «фотосъёмки». Помогает задавать правильные запросы (и предлагает подсказки). Ну и, само собой, даёт более лучшее качество.
 
2. Добавили векторную модель Firefly. Она помогает генерировать объекты, которые вписываются в стиль целевой иллюстрации, делает текстуры и градиенты, ну и правильно организует геометрию и слои.
 
3. Сделали модель Firefly Design. Она генерирует цельные редактируемые шаблоны (пока для их инструмента Adobe Express), которые адаптируются для разных сред вроде соцсетей или печати. Предлагает варианты текста, графики и композиции.
 
Кстати, недавно Firefly стал доступен через API в платформе NVIDIA Omniverse.
 
А вот свежие дикие штуки Adobe Sneaks:
 
#ProjectFastFill: Добавляет и удаляет объекты на видео таким же простым способом, то и Generative Fill.
 
#ProjectDraw&Delight: Превращает простейшие наброски рисунков в базовые контурные или полноцветные иллюстрации. Сюжет можно развивать и дополнять постепенно, менять позы персонажей, а также раскрашивать в духе недавнего запуска Illustrator Generative Recolor, ну и доделывать в самом Illustrator.
 
#ProjectNeo: Создаёт псевдо-трёхмерные иллюстрации с помощью простейших объектов. В примере делают архитектурный объект, который выглядит как векторная иллюстрация.
 
#ProjectSceneChange: Позволяет вставить персонажа из видео в любую другую сцену. Причём он докручивает оба видео, чтобы подходили друг к другу.
 
#ProjectPrimrose: Платье из простых текстур меняет цвет. Причём может делать анимацию из этого.
 
#ProjectGlyphEase: Создаёт шрифт на основе трёх знаков для примера, даже если это набросок на бумаге. И стилизует его в нужной технике, в том числе сверх-декоративной.
 
#ProjectPoseable: Генерирует наброски персонажей для сценарных раскадровок. Можно быстро настроить позу модели среди предложенных и описать нужный образ со сценой.
 
#ProjectResUp: Повышает разрешение видео маленького размера.
 
#ProjectDubDubDub: Генерирует дубляж видео или перевод аудио-записей на любой язык. Пытается вписаться в акустическое окружение сцены.
 
#ProjectStardust: Редактирует фото простым способом: переместить, добавить или убрать объекты, поменять одежду или дорисовать недостающую часть человека.
 
#ProjectSeeThrough: Убирает отражения и блики с фото, сделанных через стекло.
 
Скорость попадания этих набросков в основные продукты сильно выросла и в этом Adobe здорово уделывает хейтеров. И если в 2020 году тема почти сдулась, то сейчас снова тонна вдохновляющего.
 
#ai #algorithms #adobe #events

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

28 September 2023 09:04

На удивление компактная подборка нового о пользовательских исследованиях — обычно набегает куда больше:
 
1. User Interviews: Исследование профессии за 2023 год. Они опросили 929 специалистов по самым разным темам, включая орг.структуру, демократизацию, обычные и алгоритмические инструменты и т.п.
 
2. NN/g: Глоссарий методов.
 
3. Jim Lewis и Jeff Sauro: Варианты категоризации пользователей по технической грамотности.
 
4. MeasuringU: Метрики, которые можно получить и посчитать с помощью метода клик-тестов.
 
5. NN/g: Спутывающие переменные. Это время суток, сезон, возраст и другие подобные факторы, которые могут показать ложную зависимость.
 
6. Steve Bromley: Шпаргалка по методам пользовательских исследований игровых интерфейсов.
 
#research

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

21 September 2023 09:11

Немного новых книг для дизайнеров интерфейсов:
 
1. Justin Dauer «In Fulfillment» о влиянии дизайнера на продукт, бизнес и мир в целом. Отрывок из главы 3.
 
2. Jenae Cohn & Michael Greer «Design for Learning. User Experience in Online Teaching and Learning» о проектировании образовательного процесса. Выдержка из главы №1.
 
3. Michael Angeles, Leon Barnard и Billy Carlson «Wireframing for Everyone» о проектировании wireframes.
 
4. Elizabeth McGuane «Design by Definition» о дизайн-процессе.
 
5. Гигантская подборка книг для дизайнеров интерфейсов. Отдельно — коллекция бесплатных.
 
6. А вот что на подходе у Rosenfeld Media:
— Amy Wells «Designing for Neurodiversity».
 
#books

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

14 September 2023 09:04

Новое про лучшие интерфейсные паттерны и практики:
 
1. Коллекция паттернов автомобильных интерфейсов. Разбито по сценариям использования и экранам, в бета-версии есть полтора десятка машин.
 
2. Creative Navy: Памятка по дизайну интерфейса мастеров настройки. Она грамотно структурирована и собирает хорошие примеры.
 
3. NN/g: Структурированная подборка своих статей о веб-интерфейсах.
 
4. Creative Navy: Обзор интерфейсов управления роботами.
 
5. Alyaa Al-Jasim и Pietro Murano: Юзабилити-тестирование разных вариантов тумблеров и переключателей состояний в интерфейсе. Они составили рекомендации по их проектированию.
 
6. NN/g: Упрощение интерфейсных текстов. Как убирать лишнее и упрощать подачу информации в целом.
 
7. Costa Alexoglou: Способы реализации «безопасного треугольника» для выпадающих меню. Это старый, но важный приём, который помогает пользователю легче попадать мышью в пункты таких меню.
 
8. Lawrence H. Williams: Неоднозначность оценки времени прохождения сценария использования. В примере его исследования видно, что где-то много проведённого времени говорит о проблеме, а где-то — наоборот, о качестве контента.
 
9. MeasuringU: Новое сравнительное исследование сайтов товаров для дома. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
 
#patterns

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

07 September 2023 09:04

Обновление базы знаний по дизайн-системам, выпуск №40:
 
Lukas Oppermann: Карта лиц, принимающих решения, для дизайн-систем. Он собрал разные профили и роли таких людей, плюс методы коммуникации с ними.
 
NN/g: Причины выбора пользователями тёмной темы и реальный эффект от изначальных постулатов пользы от неё. А также собрали советы по внедрению, включая подсветку самых проблемных мест.
 
Zag: Коллекция API для дизайн-систем обещает решить проблему поддержки разных компонентных фреймворков типа React, Vue и Solid. Он даёт логику поведения, которая будет одинаково работать в любом из них.
 
Spotify: Следующее поколение их дизайн-системы Encore. Она объединяет 45 платформ вроде компьютеров, телефонов, планшетов, телевизоров и т.п. Со временем правила стали более жёсткими, чтобы сохранить целостность.
 
Captiv8: slava.karablikov/implementing-color-design-tokens-practical-guide-2ee1d46a1392">Внедрение цветовых семантических токенов на базе цветовой модели CIELAB.
 
Storybook: Плагин для визуального тестирования компонентов. Он автоматически сравнивает новую версию с предыдущей и показывает разницу.
 
Melissa McArthur: Пошаговая инструкция по созданию токенов с помощью новых переменных Figma.
 
Dave Rupert: Анализирует, почему потенциально годный стандарт веб-компонентов не шибко популярен. Полемика Nolan Lawson.
 
Radix UI: Фреймворк для простых дизайн-систем.
 
#designsystem

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

28 August 2023 09:04

Первые полсотни мини-выпусков дайджеста о пользовательских исследованиях: done.
 
1. NN/g: Памятка по формулировкам вопросов в опросниках.
 
2. Google: Интересный метод для регулярного замера отношения пользователей к функциональности через серию стандартизированных опросов.
 
3. Okta: Перевод базы знаний и инсайтов из старого инструмента в Dovetail. Интересно, что рынок дозрел и до таких историй.
 
4. Roberta Dombrowski: Советы по поиску направлений для стратегических исследований и расстановке приоритетов между ними.
 
5. Jim Lewis и Jeff Sauro: Изучили, насколько влияет наличие нейтрального варианта ответа в стандартизированных интерфейсных шкалах опросов. В целом — не особо.
 
6. Jim Ross: Изменения в профессии пользовательского исследователя за последние 25 лет. Терминология, зона ответственности, формат проектов и т.п. MeasuringU также изучили изменения названий профессии.
 
7. NN/g: Советы по оплате респондентам в дневниковых исследованиях. Она влияет на детальность этих само-отчётов.
 
8. Lisa van Ekeren: Созданиие базы знаний из прошлых исследований на базе SharePoint.
 
#research

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

10 August 2023 09:04

Ссылочно-протеиновая масса для тех, кто ищет связь бренда с интерфейсом. Что набралось за пару месяцев:
 
Evil Martians: Фантастическая статья про рифмование шрифта и иконок. Универсальный подход для поиска такой рифмы исходя из особенностей шрифта. Ровно по такой логике мы сделали решение для Райффайзена, хотя здесь целая система.
 
Pinterest: Язык анимации от американского агентства DIA.

OpenAI от французско-американского агентства Area17 (больше деталей).
 
TheFork: Ребрендинг сервиса бронирования ресторанов от британского агентства Design Studio.
 
InVision: Обновление айдентики от британского агентства Ensemble.
 
Askly: Айдентика сервиса для общения с пользователями сайта от эстонского агентства Tabasco.
 
Unmind: Ребрендинг сервиса для ментального здоровья сотрудников компаний от американского агентства Ragged Edge.
 
Glassdoor: Ребрендинг сайта о работодателях от британского агентства Koto.
 
Guild: Ребрендинг карьерно-образовательного сервиса от американского агентства Collins — .
 
Airtm: Ребрендинг финтеха от британского агентства Design Studio.
 
MUX: Ребрендинг видео-платформы от австралийского агентства For the People. История работы над проектом.
 
AMP: Ребрендинг музыкального сервиса от британского агентства Koto.
 
Kili: Ребрендинг ИИ-платформы от американского агентства Ragged Edge.
 
Pley: Ребрендинг игровой компании от шведского агентства Essen.
 
Replay: Ребрендинг компании генетического анализа от британского агентства Koto.
 
Runway: Ребрендинг финтеха от американского агентства Reform Collective.
 
Антипример для Nike от агентства Instrument. Это яркий бренд с простейшими характерными базовыми приёмами, но для него сделали максимально бесхребетную и унылую дизайн-систему.
 
Ostro: Ребрединг медицинского сервиса от испанского агентства Mucho.
 
DailyMotion: Ребрендинг видео-сервиса.
 
Lookout: Ребрендинг компании по кибер-безопасности от американского агентства Emotive Brand.
 
#branding

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

02 August 2023 10:04

Новёхонькая подборка об алгоритмическом дизайне собралась в рекордные сроки:
 
1. Adobe Photoshop: Новая функция Generative Expand на основе их движка алгоритмического дизайна Firefly. Она продолжает Generative Fill, но более удобна для дорисовки изображения за текущими границами. Как она работает.
 
2. Stable Diffusion XL 1.0: Выпустили новую версию для всех.
 
3. Clipdrop Stable Doodle: Превращает наброски от руки в фото и иллюстрации.
 
4. GetIMG.AI: Ещё один инструмент алгоритмического дизайна, который собрал вместе кучу модных утилит — генерация картинок и расширение существующих изображений, обучение собственного стиля и всё такое.
 
5. Canva Magic Design: Запустили алгоритмического помощника, который помогает генерировать шаблоны, изображения и другие аспекты дизайна.
 
6. Benedict Evans: Алгоритмические инструменты не сократят рабочие места, а наоборот — создадут много новых. Он ссылается на парадокс Jevons, который показал — когда какой-то ресурс становится дешевле, его наоборот начинают потреблять больше. И приводит много подходящих примеров.
 
7. Rest of World: Журнал пообщался с низкооплачиваемыми работниками в нескольких профессиях (иллюстратор, редактор, ассистент, аналитик), которых потенциально могут заменить алгоритмы. Что они делают с этим прямо сейчас и видят ли свою полную замену (скорее нет, хотя работать придётся больше). Интересно, что журналисты попросили сделать одинаковую задачу руками и с помощью новых инструментов.
 
8. Shopify Sidekick: Готовят алгоритмического помощника. Он анализирует исторические данные по интернет-магазину, предлагает рекомендации по перестройке ассортимента и может обновить сайт по этим рекомендациям.
 
9. Per Axbom: Проблемы с этикой и качеством инструментов алгоритмического дизайна в виде инфографики.
 
10. YouTube: Бета-версия пересказа содержания видео.
 
11. SciSpace Copilot: Плагин для Chrome помогает анализировать научные публикации и выделять из них основное.
 
12. LoopPanel: Помогает обрабатывать заметки из пользовательских интервью и выделять инсайты из них.
 
13. Kraftful: Помогают разбирать обратную связь от пользователей и раскладывать её по категориям с помощью ChatGPT.
 
14. Pika Art: Генератор видео по текстовому описанию.
 
15. HiFa: Экспериментальный инструмент генерирует 3D-модели по текстовому описанию.
 
16. Рекламная кампания очков Georgetown Optician, которую агентство Design Army сделало в Midjourney.
 
#al #algorithms

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

24 July 2023 09:05

1 сентября стартует десятый поток моего курса о дизайн-менеджменте цифровых продуктов на Bang Bang Education. На первых девяти отучились более 550 дизайн-директоров, дизайн-менеджеров, арт-директоров, ведущих дизайнеров, креативных директоров из многих отечественных (и нескольких международных) компаний: 1C, ABBYY, AIC, Ак Барс, Альфа-Банк, Apalon, App in the Air, Arrival, Aviasales, Avito, Badoo, BBC, Билайн, БКС, ВТБ, Chatfuel, Clay, Газпром, de Bijenkorf, Delivery Club, Детский мир, Dodo Pizza, ДОМ.РФ, EPAM, Foodplex, HeadHunter, Heads & Hands, Hoff, inDriver, Joom, Kaspi, Klarna, Комитет, Красцветмет, Леруа Мерлен, Литрес, Loóna, Луч, MacPaw, Mailchimp, Mail.ru Group, Манго Офис, ManyChat, М.Видео, Microsoft, Miro, Модульбанк, МосБиржа, МТС, Naumen, Okko, OneTwoTrip, OpenWeb, Opera, Открытие, Ozon, PayPal, Петрович, ПИК, Pinkman, ПСБ, QIWI, Qlean, Райффайзенбанк, Rambler Group, РБК, Readdle, Redmadrobot, Reg.ru, Ренессанс Страхование, Росбанк, Россельхозбанк, Ростелеком, S7, Сбербанк, Ситимобил, Спортмастер, Столото, Selectel, Semrush, Skyeng, Tele2, Тинькофф, Трипстер, TomTom, Touch Instinct, Точка, Учи.ру, Уралхим, Финам, ЦИАН, Эксмо, Voximplant, Wargaming, Wrike, X5, Яндекс и многих других.
 
Я полностью перезаписал все видео, переехал на новую образовательную платформу и постоянно развиваю формат домашних заданий и вебинаров. Курс построен на базе будущей книги по паттернам дизайн-менеджмента (идёт корректура в издательстве). Какие-то части вы уже могли прочитать ранее и, возможно, знакомы с общей концепцией модели зрелости дизайна и продвижения по ней, но это около 20% материала курса.
 
Получился огромный массив знаний из 37 уроков на 10 часов — 32 паттерна и 5 обзорных уроков, а также несколько инструментов-приложений к ним (помогут подниматься по уровням зрелости). Курс идёт 4 месяца. Помимо видео-лекций есть домашние задания и вебинары после каждого блока. Результат — рабочая дизайн-стратегия, которая основана на проблемах и целях вашей компании. Я постепенно добавляю шаблоны для домашних заданий, которые здорово структурируют мысли. Проверяю всё сам.
 
Самые вовлечённые студенты внедряли улучшения в дизайн-командах по ходу курса, так что к окончанию получили осязаемый выхлоп :)
 
#management

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

17 July 2023 09:04

Свежая подборка свежего про свежие интерфейсные паттерны и лучшие практики:
 
1. Rauno Freiberg: Под микроскопом разбирает жесты и анимацию интерфейса в операционках Apple. Он делал интересный концепт MercuryOS, которая ощущается так же плавно и аккуратно, как и они.
 
2. Swiggy: Отличный рассказ о работе над конкретным компонентом кнопки в сценарии оформления заказа. Как они замеряли связанные метрики и доработали первую версию, уделяя внимание небольшим, но критичным деталям.
 
3. Wikipedia: Как делали редизайн.
 
4. Dan Brown: Рассуждает о сложностях описания информационной архитектуры продуктов, где интерфейс строится вокруг центрального объекта (например, календарь или документ). А ещё — о корпоративных продуктах и их отличии от продуктов для массового пользователя.
 
5. NN/g: Советы по дизайну интерфейса виртуальной очереди. Как показывать пользователю статус и сообщать о важных вещах.
 
6. Robert Goesch: Интересный концепт поиска авиабилетов. Их агентство DUMBO попробовало пересмотреть порядок действий пользователя, чтобы оптимизировать основной (по их мнению) сценарий использования.
 
7. Indeed: Роль прототипов в проверке продуктовых решений. В статье есть ещё одна классификация глубины их проработки и общие советы по применению.
 
8. IBM: Простой чеклист по свежему стандарту accessibility WCAG 2.2.
 
9. MeasuringU: Новое сравнительное исследование сайтов парков развлечений. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
 
#patterns

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

10 July 2023 09:05

Собрал дайджест продуктового дизайна за июнь 2023. visionOS и iOS17, алгоритмический дизайн, CSS для дизайн-систем, тренды в логотипах и упаковке, отдача от UX-исследований, куча нового в Figma, открытая библиотека книг, упрощение длинных страниц и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS

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

13 November 2023 08:04

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

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

02 November 2023 08:04

Не успевал упаковать весь свежак про свежие интерфейсные паттерны и лучшие практики, да как вдруг успел:
 
1. Casper Kessels: Отличная памятка по прототипированию автомобильных интерфейсов подручными средствами. Инструменты и способы быстрого вывода на устройство.
 
2. Scott Jenson: Шикарный детальный анализ проблем в клавиатурах на мобильных от легенды нашей профессии. Он также предлагает своё решение, которое представил на симпозиуме UIST.
 
3. Коллекция примеров интересных «подвалов» сайтов.
 
4. Dongkyu Lee: Как сделать анимацию переходов между экранами и их состояниями более логичной и симпатичной.
 
5. Swiggy: Редизайн процесса встречи нового пользователя в приложении. Как упрощали его и вовлекали людей.

6. NN/g: Структурированная подборка своих статей об accessibility и инклюзивности.
 
7. Аида Пачева: aidapacheva/%D0%BD%D0%BE%D0%B2%D1%8B%D0%B9-%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4-%D0%B2-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5-%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D1%81%D0%B8-%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2-c8532d409c80">Подход к адаптивности в вебе. Она ориентируется на современные подходы вроде component queries, а не жёсткие breakpoints для всего макета.
 
8. Creative Navy: Интерфейсы производственных линий по сборке автомобилей.
 
9. Slack: Рассказ о недавнем крупном редизайне интерфейса. Результат неоднозначный, но интересно посмотреть на ход процесса. Отдельные статьи про мобильную версию и боковую панель.
 
10. NN/g: Оглавления в вебе и на мобильных.
 
11. Growth Design: Эффект «фрейминга» в интерфейсах. Как правильно подавать варианты выбора и рекомендации.
 
12. Peter Ramsey: Процесс оформления подписки на сервис доставки готовой еды Hello Fresh.
 
13. Creative Navy: Интерфейсы медицинских приборов для диализа.
 
14. Jason Grigsby: Просит не использовать «ленивую загрузку» для абсолютно всей графики — это ломает саму идею и пользовательский опыт.
 
15. Ксения Толокнова: Разница между action sheets, диалогами и панелями для уведомлений в мобильных приложениях. Когда и для чего их использовать.
 
16. MeasuringU: Сравнительное исследование сайтов краски для дома. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
 
#patterns

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

26 October 2023 09:04

Пятый год я провожу исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные?
 
Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда для профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.
 
Буду благодарен, если вы пройдёте опрос. Результаты исследования опубликую в январе. Вы найдёте отчёт в крупных дизайн-каналах и изданиях.
 
P.S. Результаты за 2021, 2020, 2019 и 2018.

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

19 October 2023 09:05

Продолжим новости с конференции Adobe MAX 2023 — что там нового во флагманских продуктах Creative Cloud:
 
Photoshop: Всё катанули ещё до мероприятия. В основной версии вышли из беты алгоритмические фукнкции Generative Fill и Generative Expand, упростилось удаление объектов. На iPad появился фильтр Camera Raw. А накануне дали доступ к браузерной версии с частью функциональности для всех.
 
Illustrator: Запустили бету для веба. В основной версии можно генерировать векторные иллюстрации по текстовому описанию через Firefly, накладывать графику на макет мерча с предложением перспективы (выросло из прошлогоднего концепта #ProjectVectorEdge), преобразовывать растровый текст в редактирумый, оптимизировать векторы.
 
Firefly: Доступен в вебе, работает на базе новой модели Firefly Image 2.
 
InDesign: В основной версии можно оформить большой кусок контента с помощью автостилизации на базе наборов стилей, встраивать Google Analytics, лучше контролировать экспорт.
 
Lightroom: В основной версии можно играть с глубиной на фото через инструменты размытия (тоже родом из экспериментов Sneaks).
 
AfterEffects: В основной версии новая Roto Brush лучше выделяет объекты на видео, прокачали работу с цветом и скриптами.
 
Express: Основная версия генерирует цельные редактируемые шаблоны, которые адаптируются для разных сред вроде соцсетей или печати. Предлагает варианты текста, графики и композиции. Переводит на 45 языков.

Premiere Pro: В основной версии можно искать по транскрипции текста и вырезать эти части из видео (прошлогодний эксперимент #ProjectBlink), подчищать качество диалогов, экономить время на цветокоре, плюс оптимизировали интерфейс таймлайна.
 
Fresco: В основной версии обновления вышли ещё в сентябре. Вертикальные тексты, улучшение экспорта видео, больше кистей.

Общий тюнинг в Animate и Character Animator.

Дикий крутяк то, что многие из алгоритмических нововведений основаны на экспериментах Adobe Sneaks, которые тизерили последние годы. Так что компания смогла наладить понятный путь реализации этих диких идей, а не просто хайпанула потешками.
 
#tools #adobe #events

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

09 October 2023 10:55

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

Это, если что, скриншот из первых свёрстанных страниц, а не просто Фигмы. Идея с шоколадками в обложках будет буйно цвести по всему сайту — начал пилотировать их ещё весной. Думаю, до конца октября заработает альфа-версия на Webflow. А дальше буду переносить контент и жить в этой прекрасной новостройке.

#announcements

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

25 September 2023 09:05

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

Надеюсь, к концу года успею выкатить — будет много дополнительной ценности к текущему контенту. Немного тизеров вы уже видели в новых обложках выпусков, а в полной версии будет намного больше и жирнее :)

#announcements

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

18 September 2023 09:04

Свежая выгрузка инструментов и в целом движа в алгоритмическом дизайне:
 
1. Adobe Firefly: Инструмент вышел из беты и доступен подписчикам Creative Cloud.
 
2. Everypixel: Статистика по количеству изображений сгенерированных инструментами алгоритмического дизайна DALL-E 2, Stable Diffusion, Midjourney и Adobe Firefly. Темпы роста огромные, хотя сюда, судя по всему, включены все промежуточные итерации, которые не идут в финальный макет.
 
3. Jambot: Официальный плагин на базе ChatGPT для FigJam. Он может просуммировать результаты брейншторма и сгенерировать идеи. Интервью с командой создателей.
 
4. Midjourney Inpainting: Новая функция позволяет изменить только часть изображения — например, только персонажа, не трогая саму сцену.
 
5. Matej Latin: Изучил, насколько удачно подбирают шрифтовые пары сервисы алгоритмического дизайна FontJoy и ChatGPT. Кое-что могут, но с кучей проблем и ограничений.
 
6. DreamFace: Генерация реалистичных трёхмерных моделей лиц по текстовому описанию. Они анимированы и текстурированы.
 
7. Captions: Многофункциональный алгоритмический инструмент создания и обработки аудио и видео. Генерирует голос по кусочку его записи, убирает слова-паразиты, улучшает попадание мимики рта в произносимый текст и много чего ещё.
 
8. Maggie Appleton: Презентация о современных языковых моделях и алгоритмических сервисах. Она описывает особенности их построения, проблемы в получении внятных результатов и свои интерфейсные концепты их решения.
 
9. TextFX: Экспериментальный проект Google, который помогает реперам писать рифмы.
 
10. HayGen Video Translate: Сервис переводит видео на другой язык. При этом он сохраняет голос и подгоняет мимику персонажа под новый текст.
 
11. Stable Audio: Новая модель от создателей Stable Diffusion позволяет генерировать музыку по текстовому описанию.
 
12. AudioGen: Экспериментальное решение Меты позволяет генерировать звуки по текстовому описанию.
 
13. Musicfy: Сервис позволяет напеть мотив песни и преобразовывает его в мелодию на конкретном инструменте.
 
14. Albus: Экспериментальная записная книжка на базе ChatGPT, которая помогает исследовать тему с разных сторон и генерировать заметки о ней.
 
#ai #algorithms

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

11 September 2023 09:04

Мини-подборка для дизайн-менеджеров и тех, кто тоже тащит эти задачи:
 
1. Brian Chesky: Мощное интервью с основателем и главой Airbnb, которое Dylan Field взял у него на Figma Config 2023. Он один из редких дизайнеров-основателей компании такой крупной компании и рассказал о перестройке организации во времена ковидного кризиса. Это не самая типичная история, но крутой пример того, какой эффект может иметь дизайнерский взгляд на все вещи в компании. Такие мощные мотивационные публикации выходят несколько раз в десятилетие.
 
2. Figma: Поэтапный запуск бета-версии режима разработчика. Они ориентировались на WAU (еженедельные активные пользователи) и настроили оперативные каналы сбора обратной связи для быстрой доработки интерфейса.
 
3. Indeed: Создание принципов дизайн-команды. Хорошая и простая памятка по процессу.
 
4. NN/g: Формат карты взаимоотношений дизайнера в компании. Этот инструмент похож на карту лиц, принимающих решения. Шаблон ― https://miro.com/app/board/uXjVM3IMpAA=/.
 
5. NN/g: Проблемы кросс-функционального взаимодействия при работе над дизайном. И даёт рекомендации по снижению рисков.
 
6. Dan Ramsden: Предлагает свою модель креативного процесса, потому что считает ограничения «двойного алмаза» проблемой. Это некий трёхмерный треугольник.
 
#management

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

04 September 2023 09:04

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

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

14 August 2023 09:05

Ещё чутка свежих интерфейсных паттернов и лучших практик:
 
1. Тарас Бакушевич: Удачные практики создания индикаторов загрузки для разных ситуаций.
 
2. GNOME: Новый способ организации окон программ в операционной системе. Это «мозаика» — смесь плитки и свободного расположения.

3. Пошаговые методички по методам проектирования, дизайна и исследования интерфейсов от Университета Аризоны.
 
4. Léonie Watson и Rakesh Paladugula: Основные тезисы из дискуссии о поддержке accessibility. Получился отличный чеклист.
 
5. NN/g: Тренды в интранетах 2023 года. Недавно они анонсировали победителей своих ежегодных наград.
 
6. Hajira Atheeque: Подробно разбирает принципы пространственного дизайна в Apple Vision.
 
7. NN/g: Памятка по дизайну аккордеонов в интерфейсах. Когда они работают и когда мешают.
 
8. Hannah Milan: Разные способы наложения текста на изображение в вебе, которые хорошо поддерживают accessibility. Часть 2.
 
#patterns

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

07 August 2023 09:04

Дайджест продуктового дизайна за июль 2023. Алгоритмический дизайн, интранеты, индикаторы загрузки, детали анимации iOS, токены в дизайн-системах, матрица CSD, бронирование билетов, подача результатов исследований, клик-тесты, пространственный дизайн и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
 
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS

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

27 July 2023 09:40

И снова массивный дроп свежего про пользовательские исследования:
 
1. Jim Lewis и Jeff Sauro: Сравнивают несколько чеклистов для оценки компьютерной грамотности пользователей.
 
2. Lyft: Системный подход, который поможет презентовать результаты исследований команде. Как обернуть их в историю, которая подсвечивает главное и за которой интересно следить.
 
3. MeasuringU: Памятка по использованию метода тестирования интерфейсов с помощью «первого клика» (она же в виде шпаргалки). Они также изучили, насколько метод клик-тестов на макетах позволяет предугадать реальное поведение пользователя на сайте. В целом — очень близко.
 
4. NN/g: Изучили сервисы для обработки результатов исследований, которые обещают готовить инсайты на их основе. В целом всё плохо — корявые выводы, невозможность отследить исходный материал конкретной сессии, непонимание контекста.

5. Marvin: База знаний и инсайтов из пользовательских исследований. Помогают разбирать заметки и раскладывать их по категориям с помощью алгоритмов.
 
6. NN/g: Как работать с матрицей CSD (Certainties, Suppositions, Doubts). Она помогает разложить предположения о пользователях по стопкам (уверены, предполагаем, сомневаемся) и системно работать по повышению степени уверенности.
 
7. David Tang: Ограничения и риски демократизации исследований в компании. В ней есть польза, но только если это управляемый процесс, который решает правильные задачи.
 
8. Condens: Метод кабинетных исследований и ситуации, в которых он полезен.
 
9. User Interviews: Памятка по поиску и отбору респондентов. А также советы Mary Nolan для B2B-продуктов.
 
10. User Interviews: Пообщались с несколькими продуктовыми командами и узнали, как они работают идеологии постоянно идущих исследований.
 
11. Rohan Irvine: Советы по выстраиванию ResearchOps в компании. Он делится опытом удачных и проблемных ситуаций из компаний, где внедрял эти подходы.
 
12. Jeff Sauro и Jim Lewis: Продолжают изучать метод юзабилити-тестирования, когда респондент проговаривает проблемы вслух. Так респонденты находят больше проблем, хотя они не проверяли реальность этих проблем.

13. NN/g: Мощный глоссарий терминов в количественных пользовательских исследованиях.
 
14. Robert McWhirter: Процесс проверки продуктовых гипотез на самой ранней стадии с помощью исследований и экспериментов.
 
15. NN/g: Памятка по проведению экспертной оценки. Они дают полезный шаблон, который основан на классических 10 эвристиках Нильсена.
 
#research

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

20 July 2023 09:24

Сегодня — всё, что попадало в дайджест о дизайн-системах за последние месяцы:
 
1. Lukas Oppermann: Подробнейше разложил по полочкам системную работу с новыми токенами в Figma. Как реализовать все аспекты, важные для дизайн-системы и связать её с компонентами в коде. Ну и рассказал про текущие возможности и ограничения бета-версии.
 
2. Авито: Как визуально срифмовали набор иконок со шрифтом. Отличная пошаговая инструкция для важной задачи, до которой редко добираются команды.
 
3. Pinterest: Измерение «покрытия» продуктов на уровне Figma. Это главный показатель успеха внедрения и у них получился отличный и не сильно затратный подход.
 
4. Booking.com: Процесс работы над компонентом (он есть в Figma). И рассказывает о других инструментах в работе над ней.
 
5. Intuit: NateBaldwin/creating-a-flexible-design-token-taxonomy-for-intuits-design-system-81c8ff55c59b">Работа над семантическими токенами. Как они пришли к их архитектуре и типизации.
 
6. Lyft: Процесс внедрения платформы для платежей. Самая ценная часть статьи — подход к оценке новых запросов в дизайн-систему.
 
7. Storybook: Дополнение, которое позволяет переключать тему оформления для любого фреймворка.
 
8. Wikipedia: Как искали единую сетку для редизайна.
 
9. Proportio: Сервис помогает построить пропорциональную систему размеров, которая объединяет шрифт, иконки и отступы. Обзор от автора. Правда, сейчас там есть странности типа размера иконок 23x23.
 
10. Stephanie Eckles: Все современные приёмы CSS для описания компонентов и дизайн-систем в целом.
 
#designsystems

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

13 July 2023 09:04

Некоторое количество свежего для дизайн-менеджеров:
 
1. Karin den Bouwmeester: Фреймворк для оценки выхлопа от пользовательских исследований в компании. Она делит их на влияние на бизнес и UX в целом, а также организацию и самих специалистов по исследованиям.
 
2. Design Dept.: Советы для дизайн-менеджеров в ситуациях экономического кризиса, когда компании колбасит.
 
3. IBM: Памятка для фасилитатора рабочих сессий. Как понять, что всё идёт хорошо.
 
4. NN/g: Чеклист для оценки качества отработки ошибок в интерфейсе. Это измеримый подход, к которому идёт шаблон в Excel.
 
5. Emma Boulton: Плюсы и минусы централизованной и погружённой оргструктуры для пользовательских исследователей. И показывает, как лучше всего отработать в каждой из ситуаций.
 
6. NN/g: Польза приглашения пользователей на воркшопы. Он описывает несколько форматов таких сессий и даёт советы по их проведению.

7. Andrea Mignolo: Перечисляет фреймворки для описания лидерских стилей. И делает особенный акцент на коучинговом стиле.
 
8. Shamsi Brinn: Концепция «no handoff» (без передачи проектных артефактов от дизайнера разработчикам). Это процесс, в котором нет явного перехода между этапами, а постоянная совместная работа.
 
#management

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

06 July 2023 09:04

Продолжу выгрузку накопившегося по алгоритмическому дизайну, которая копилась последние пару месяцев:
 
ДИЗАЙН-ПРОЦЕСС
1. Dan Mall: Простыми и чёткими мыслями пересказал стандартную логику процесса алгоритмического дизайна, актуальную на сегодняшний день. Она повторяется из года в год, не меняясь при смене волн хайпа.
 
2. Matty Brownell: Иллюстративная графика для бренда в едином стиле с помощью Midjourney.
 
3. David Truog: Смогут ли такие инструменты развиваться, если сами дизайнеры не будут поставлять им свежие обучающие данные из своих работ.
 
4. Jay Anthony: Реалистично ли писать сценарии для юзабилити-тестирования через ChatGPT. Конкретики мало, но ограничения подсвечены.
 
5. Как сделать иллюстративные QR-коды от nhciao через Stable Diffusion, которые работают на самом деле.
 
ПОЛЬЗОВАТЕЛЬСКОЕ ВЗАИМОДЕЙСТВИЕ С НИМИ
1. Jakob Nielsen: Современные генераторы по текстовому запросу — это новая интерфейсная парадигма после пакетной обработки в первых компьютерах и командной строки. Впервые пользователь описывает сам конечный результат, а не последовательность команд для его получения.
 
2. Luke Wroblewski: Прикрутил поиск по своему блогу на базе ChatGPT (включая видео и подкасты). Затея интересная — он отвечает на вопросы в свободной форме выводами из статей Люка (а он написал очень много материалов за 25 лет). Его мысли про стандартную иконку такого поиска через «магические искры».
 
3. Stephen P Anderson: Проблемы генераторов текстов а-ля ChatGPT. Они способны создавать черновики, но многие забывают, что эти черновики нужно критически анализировать и доводить до ума.
 
4. Jakob Nielsen: Одно из первых вменяемых исследований на тему продуктивности и качества работы специалистов, использующих ChatGPT. Они стали тратить меньше времени на написание черновиков, но больше на редактуру. В целом качество материалов достойное. Бонусом они традиционно шутканули на 1 апреля на эту тему.
 
5. Luke Wroblewski: Переход редакторов графики и видео от инструменто-центричных интерфейсов к объекто-центричным. Алгоритмический дизайн подталкивает к этому.
 
6. Maggie Appleton: Концепты взаимодействия с чат-ботами. Как они могут уточнять и дополнять текст.
 
КАК ВСЁ ЭТО РАБОТАЕТ
1. Алина Валяева: Политика фотобанков и сайтов вопросов и ответов по поводу использования контента, сгенерированного алгоритмами.
 
КУЛЬТУРНЫЙ ЭФФЕКТ
1. Amy Goodchild: Примеры алгоритмического дизайна из 50х и 60х. Забавно, что даже дискурс про роль таких инструментов местами такой же, как в текущую волну.
 
2. Fast Company: Значительная часть логотипов современных сервисов вокруг ИИ ходят вокруг разного рода шестигранников.
 
КАКИЕ РАБОТЫ УЙДУТ
Идущие и планирующиеся сокращения в IBM, Bild, Bluefocus Intelligent Communications Group Co.
  
НЕ ДЕЛАЙТЕ ТАК
1. Niloufar Salehi: Попробовал сервис Synthetic Users, который якобы генерирует персонажей на основе публичных данных без проведения пользовательских исследований. По факту это просто мусорная информация — не сильно лучше высосанных из пальца персонажей, которые пишут дизайнеры без исследований. ChatGPT создаёт похожие по бесполезности материалы.
 
2. Arvind Sanjeev: Как закрытые личные данные утекают для обучения алгоритмов. Например, многие генераторы лиц как будто ненастоящих людей на самом деле берут настоящие фото и просто немного дорабатывают их.
 
3. Использовались ли ваши данные или фото для обучения алгоритмов. Это часть более крупной инициативы Spawning по защите своих персональных данных от обработки.
 
4. Bloomberg: Как сервисы генерации изображений по текстовому запросу воспроизводят расовые и гендерные стереотипы.
 
#al #algorithms