​Брендинг цифровых продуктов — важная область в эпоху, когда границы между офлайном и онлайном стираются. Правда, толковых примеров мизер — как правило, всё ограничивается маркетинговой коммуникацией, но не попадает в интерфейс. Да и научиться толком негде — авторы тех 10-15 успешных примеров (Airbnb, Google Material Design, Microsoft Fluent Design, Apple, Miro, Яндекс.Драйв) рассказывают о деталях не так много. Но я не сдаюсь и копаю этот рудник в надежде составить методичку. Вот что происходило в этой сфере с начала года:

1. Microsoft: интеграция команд бренда и продукта, которые позволили сделать сильное обновление в 2015 году. Формат взаимодействия команд на нескольких примерах.

2. Skyeng от Шуки. Освежение, добавление характера и поддержка растущей архитектуры бренда. Применение на сам интерфейс, правда, не показано. Кейс в портфолио.

3. Mixcloud от Output. Хороший приём с пронизыванием фирменной звуковой волны в логотипе, шрифте, анимации и других деталях. Кейс в портфолио.

4. Eventbrite от Moving Brands. Есть примеры приземления в вебе, хотя характера не так много. Кейс в портфолио.

5. TripAdvisor от Mother Design. Удачный пример простого упрощения и освежения без надрыва. Кейс в портфолио.

6. Virgin Atlantic: унификации дизайна всех платформ — сайт, приложение, развлекательные системы на борту самолёта. Статья подаётся как рассказ о дизайн-системе, но технологической составляющей нет, а вот связка совсем разных носителей есть.

7. Envoy от команды продукта.

8. OLX от Design Studio. Динамический логотип с конструктором под разные ситуации, хотя применения на интерфейсы нет.

9. Фирменный шрифт YouTube Sans.

10. Khan Academy: поиск единого визуального языка на базе принципов дизайна.

11. Mentimeter от Bold. Графики и диаграммы здорово провязаны с визуальной рифмой и логотипом.

12. Huma от Koto. С помощью достаточно простых приёмов (градиент, иллюстрации, типографика) удалось сделать хорошо работающее в интерфейсах решение, достаточное чтобы выделиться.

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

14. Waze от Pentagram. Сохранили дурашливый характер персонажа и превратили его в маскота, поддержав в компоновках сайта.

Одна из причин такой разрозненности — команды бренда и дизайна интерфейсов живут отдельно. Те компании, которые смогли починить этот феодализм, имеют больше шансов сделать что-то цельное.

#branding

​Дизайн-системы стали решённой проблемой — плюс-минус понятно, как их делать. Поэтому хайпа вокруг них стало поменьше — это важный, но понятный инструмент (как, скажем, юзабилити-тестирование).

А ещё оказалось, что для её нормального внедрения нужна выделенная команда, чего получается не у всех. Многие компании спокойно пилят себе компонентные фреймворки для своих задач и не особо кичатся этим. Да, стали меньше выкладывать наружу живые гайдлайны — но это большая работа по подготовке, которая приносит пользу далеко не всем (хотя её немало). Поэтому и в дайджесте поток материалов чутка пересох. Но не навсегда:

1. Societe Generale: модель консулов. Это 4 человека из разных команд, которые регулярно ротируются. Процесс добавления нового компонента в таком подходе: как любой участник сообщества в компании может сделать это.

2. Deliveroo: история запуска. Стратсессия для старта работ, набор индикаторов здоровья, расчёт ROI по разным срезам (шаблон).

3. Toolabs: плагин для Figma позволяет управлять токенами дизайн-системы: цвета, шрифты, отступы, анимация, графика и многое другое. Можно переключать темы оформления, есть состояния компонентов. Анонс.

4. Storybook: возможность поиграть с компонентом прямо в живом гайдлайне. А версия 6.0 позволяет собрать несколько веток в единый живой гайдлайн. Для ситуаций, когда разные команды внутри компании делают разные фреймворки.

5. Adobe Spectrum: фреймворк на React.

6. Salesforce Lightning: плагин для Sketch со всеми компонентами.

7. Shopify Polaris:

— Ветка для кассовых терминалов
— Процесс и инструменты для локализации интерфейса.
— Как создавались гайдлайны по текстам в интерфейсе.

8. Brad Frost: опросник, с которым он приходит к клиентам при работе над дизайн-системой.

9. SuperFriendly: возможные разделы живого гайдлайна. Исчерпывающий список, хотя заполнять вообще все его пункты необязательно.

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

#designsytems

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— vc.ru
— Рассылка по почте

#digest

​На прошлой неделе вышел июльский дайджест, в котором был кусок свежего про алгоритмический дизайн. Вынесу его в мини-подборочку:

1. Некролог генеративному дизайну от Daniel Davis на примере пром.дизайна и архитектуры. Он очень точно и жёстко описывает причины, по которым эта идея не взлетела ещё в 80х, не взлетает сейчас и вряд ли взлетит в будущем. Daniel приводит утрированный пример с генератором писем электронной почты, что звучит абсурдной идеей. Но результат мало чем отличается от генеративного дизайна:
а) Алгоритмы написаны под очень узкие задачи и их нужно каждый раз переписывать заново.
б) Количество сгенерированных вариантов не приводит к качеству.
в) Вдумчиво выбирать из множества вариантов на деле сложно.
г) Невозможно измерить качество результата, чтобы отфильтровать лучшее.
д) Это примитивизация реального процесса работы дизайнера.
е) Нет примеров универсальных инструментов в других отраслях.

2. Обзор экспериментов на базе модели машинного обучения GPT-3 (часть инициативы OpenAI). Она позволяет генерировать части интерфейса или, скажем, цветовую палитру на основе текстового описания:

— Плагин для Figma генерирует интерфейс. Вы описываете результат словами, он переводит это в JSON с разметкой элементов. Похожий пример, позволяющий создать промо-страницу.

— Debuild генерирует интерфейс и код на React на основе текстового описания. Пример.

— Генератор цветовых палитр.

3. Salesforce: движок Einstein Designer. Он персонализирует блоки интерфейса на базе истории пользователя и его предпочтений — например, карточка товара в интернет-магазине может делать акцент на разной информации. Видео с кратким рассказом.

— Процесс анализа и генерации паттернов.

— Критерии, по которым анализируется интерфейс: группировка, заметность, узнаваемые визуальные коды.

Когда-нибудь руки доберутся перенести сайт-коллекцию на новый движок, чтобы её можно было обновлять без мозолей на руках. А пока ждём Adobe MAX 2020 — хоть там показывают что-то реально толкое из этой области.

#ai #algorithms

​Раз мини-дайджест на этой неделе только один, то объём должен быть увеличен. Свежие, сочные интерфейсные паттерны на каждый день:

1. Smashing Magazine: набор карточек с чеклистами. Как сделать их по уму и избежать типовых ошибок. Желающие могут купить пакет вместе с обучающим вебинаром.

2. George Cave: приёмы организации интерфейсов на примере игрушечных компьютеров из LEGO. Шикарная историческая справка и советы в одном флаконе.

3. Google: медленный интернет.

4. Fintech Insights: анализ интернет-банков. Начали с процесса открытия счёта. У них своя методика оценки — изначально дают каждому 1000 баллов, а дальше вычитают их за сложные этапы процесса. Сравнение крупных британских банков по функциональности.

5. Jeff Sauro и Jim Lewis: сравнительное исследование американских сервисов онлайн-видео Netflix, Hulu, Disney Plus, HBO Plus, Prime Video. Среди прочего они выделили ключевые драйверы, которые важны для пользователей.

6. Caroline Sinders и Natalie Cadranel: чеклист по учёту безопасности и приватности пользователей в интерфейсе и методах работы. Сам чеклист.

7. Caterina Falleni и Mike Shebanek: советы по поддержке accessibility.

8. NN/g: представление сложных и трудночитаемых правил использования сервисов.

9. Andy Clarke: журнальная вёрстка в вебе: Emmett McBain и Bradbury Thompson.

10. Baymard: пользовательские фото в отзывах о товарах в интернет-магазинах.

11. Baymard: наиболее востребованные фильтры в поиске по интернет-магазинам. Цена, рейтинг, цвет, размер, бренд.

12. Atlassian: улучшение экранов встречи нового пользователя. Они помогли улучшить продуктовые метрики за счёт правильного фокуса на важных вещах.

Плотно, но добротно.

#patterns

​1 сентября стартует четвёртый поток моего курса о дизайн-менеджменте цифровых продуктов на Bang Bang Education.

На первых трёх отучились 170 дизайн-директоров, дизайн-менеджеров, арт-директоров, ведущих дизайнеров, креативных директоров из многих отечественных (и нескольких международных) компаний: ABBYY, Альфа-Банк, Apalon, App in the Air, Aviasales, Avito, Badoo, БКС, ВТБ, Chatfuel, EPAM, Foodplex, Mail.ru Group, ManyChat, Miro, Модульбанк, МТС, OneTwoTrip, Открытие, Ozon, ПИК, ПСБ, QIWI, Qlean, Райффайзенбанк, Rambler Group, РБК, Redmadrobot, Ростелеком, Сбербанк, S7, SEMrush, Tele2, Тинькофф, TomTom, Учи.ру, ЦИАН, Voximplant, Wargaming, Wrike, X5, Яндекс и многих других.

Курс построен на базе будущей книги по паттернам дизайн-менеджмента (чистовик готов на 92%). Какие-то части вы уже могли прочитать ранее и, возможно, знакомы с общей концепцией модели зрелости дизайна и продвижения по ней. Значительная часть контента добавлена, а тот что был раньше — переработан и реструктурирован под более практичный формат использования.

Получился огромный массив знаний из 37 уроков на 8,5 часов — 32 паттерна и 5 обзорных уроков, а также несколько инструментов-приложений к ним (помогут подниматься по уровням зрелости). Курс идёт 4 месяца. Помимо видео-лекций есть домашние задания и вебинары после каждого блока. Я постепенно добавляю шаблоны для домашних заданий, которые здорово структурируют мысли.

Самые вовлечённые студенты внедряли улучшения в дизайн-командах по ходу курса, так что к окончанию получили осязаемый выхлоп :)

​Пользовательские исследования делают внутри всё больше компаний. Так что и толковых свежих материалов на тему всё больше:

1. NN/g: фреймворк ResearchOps. Это шесть составляющих: рекрутинг, администрирование, знания, инструменты, компетенция и евангелизм.

2. IBM: лучшая и самая детальная методичка по созданию базы знаний и инсайтов на базе Airtable. Структура, привязка к вопросу исследований, разбивка на находки и наблюдения.

3. Контур: презентация результатов, которая вовлекает всю команду. Это позволяет гораздо лучше понять и прочувствовать находки.

4. NN/g: три вида проблемных респондентов: не подходящие под требования, обманщики и профессиональные респонденты. Что делать с каждым из них и как вообще определить их.

5. Pallabi Roy Singh: надёжность и валидность результатов.

6. Контур: памяткя по подготовке исследования для заказчика. Цели, гипотезы и вопросы, что уже известно о проблеме, пользователи и сценарии, сроки. Шаблон.

7. User Fountain: опрос 55 пользователей на тему используемых методов. Обзор выводов.

8. Facebook: рабочее место для удалённых сессий с пользователями.

Кажется, следующий выпуск соберётся скоро.

#research

​Пару недель назад закончился курс Future London Academy по UX и продуктовому дизайну, который я курирую. В этом году о прошёл в онлайне и новом формате. Основные заметки из отчёта (там много картинок):

1. Carolyn Chmielewski из Spotify рассказала об организации команды пользовательских исследований. До этого она работала в BlaBlaCar и исследователи находились в группе UX. В Spotify они объединены в группу продуктовых инсайтов вместе с data science.

2. Clara Gaggero Westaway из Special Projects описала подход к созданию необычных концептов. Агентство предлагает сильные идеи для взаимодействия пользователя с продуктом, которые сильно выделяются из общей массы. Clara рассказала про подход, который помогает добиться этого.

3. Katie Wishlade из Clearleft показала, как проектируются услуги на примере их городского проекта. У неё наглядная модель, которая учитывает путь от начала до конца для клиента и внутри организации.

4. James Greenfield из Koto прошёлся по проблемам, мешающим выразить бренд в интерфейсе. Это относительно молодая студия выходцев из Design Studio, которые успели поработать над BlaBlaCar, Skyscanner, Venmo, Airbnb и другими брендами. Он наглядно показал на примере сервисов бронирования, что в базовом виде интерфейсы плохо отличимы друг от друга.

5. Dan Makoski из Lloyds Banking Group закрыл программу яркой историей о дизайн-лидерстве. Как сформулировать и транслировать цели дизайна в бизнес-стратегии. Он привёл пример метафор графического пользовательского интерфейса и предложил группе набросать свою для управления финансами. А после связал их с моделью жизненного пути клиента, где банк помогает на каждом этапе.

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

Онлайн получился отличным, хотя очень хочется вернуться в живой Лондон в 2021 году :)

#fla

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— vc.ru
— Рассылка по почте

#digest

​Пока я заканчиваю чистовик книги по дизайн-менеджменту (готово 94%), частота дайджеста выходит менее регулярной. Осталось всего несколько недель марафона, после которого ритм вернётся. А пока — мини-подборка на тему:

1. José Torre: Управление календарём для дизайнеров. Как расчистить его и выделить время для дизайнерских задач.

2. Книга Andrea Mignolo «Design Leadership: The First 90 Days» выходит в начале 2021 года. Она посвящена первым шагам дизайн-менеджера в компании. В одной из недавних статей описывает разницу между менеджментом и лидерством. Это разные стороны одной медали, которые работают в разных ситуациях.

3. NN/g: Точность расчётов ROI дизайна. Должны ли мы всегда говорить про деньги и насколько комплексные обоснования нужны.

4. IBM: Зоны ответственности. На чём они фокусируются и как измеряют успех — https://medium.com/design-ibm/the-growing-practice-of-ibm-designops-df6439cd8da8.

5. Julie Zhuo: Руководство по работе с конкретным сотрудником. Он показывает особенности поведения, а также сильные и слабые стороны.

А я пошёл дописывать 4 главы (из 37) и несколько хвостов к ещё пятёрке.

#designmanagement

​Хайп вокруг дизайн-систем ушёл, но польза никуда не делась. Многие компании спокойно пилят компонентные фреймворки для своих задач и не особо светят их наружу. 29 сентября поговорим с Андреем Сундиевым из Intercom и Сергеем Никишкиным из Acronis про текущее состояние темы.

А ещё сегодня пройдёт европейская ветка конференции Figma Config. Я стараюсь добавлять в эту подборку только материалы о компонентных фреймворках, не шаблонах в инструментах дизайна. Но в программе есть трушные выступления.

Вот что свежего публиковали в интернетах:

1. Nathan Curtis: процесс поддержки. Как и в каком формате её пользователи обращаются к тем, кто её создаёт.

2. Amazon: всего 10% публичных дизайн-систем описывают нативные мобильные платформы. Это ключевая, но сложная тема, в которой он видит следующую точку роста для профессии.

3. Sprout Social: отслеживание здоровья дизайн-системы. Они показывают текущий статус компонента или страницы описания, а также подробные детали по нескольким параметрам.

4. FAST: Фреймворк от Microsoft, выросший из технологий Fluent Design. Даёт гибкую тематизацию и работает с React, Angular, Vue и другими платформами.

5. Команда Storybook запустила сайт-памятку по созданию компонентных дизайн-систем.

6. Обновлённая дизайн-система Atlassian. Как и зачем переработали живой гайдлайн.

7. Бренд-система Райффайзенбанка. В публичной версии есть базовая версия, по авторизации — прорва шаблонов на все случаи жизни. Её сделали ещё до моего прихода и это важнейший кирпичик в построении цельного бренда во всех каналах, включая интерфейсы (чем мы сейчас и занимаемся).

8. Бренд-система Airbus. В живом гайдлайне скриншоты компонентов, а не настоящий код, но это всё равно хороший пример цельного подхода.

9. Дизайн-система GitLab.

10. Обзор нюансов создания дизайн-системы для писем рассылки от Ovi Demetrian, Jr. из Superfriendly.

11. Leslie Mu: модель «луковицы». Это мало отличается от других брендированных версий модульного дизайна, но полезно до кучи.

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

До следующего выпуска!

#designsystems

​В сентябрьском дайджесте снова будет пачка статей о лучших паттернах и практиках. Вот что выйдет в нём и выходило в предыдущем:

1. IBM: памятка по поддержке пользователей с ограниченными возможностями.

2. Baymard: ссылки на товары в эффектных промо-фото в интернет-магазинах.

3. Google: адаптация интерфейса для стран, где мобильный трафик дорог. Как ограничивать объём скачиваемых данных и вовремя информировать пользователя.

4. Alex Trudov: все версии формы регистрации Google с 2005 года.

5. Arun Venkatesan: эволюция настроек macOS. Как менялся их состав и конкретные иконки.

6. Val Head: режим ограниченной анимации в вебе. Это проблема для пользователей, у которых большое количество движения на экране вызывает когнитивные нагрузки.

7. Baymard: хлебные крошки в мобильных интернет-магазинах.

8. Сравнение процесса открытия нового счёта в американских банках Chime и Wells Fargo.

7. Слава Шестопалов: псевдо-диаграммы. Они хорошо смотрятся на Dribbble, но плохо представляют данные.

8. NN/g: иконки для раскрывающихся списков на мобильных. Стрелка вниз ожидаемо самая узнаваемая, при этом с такой иконкой чаще нажимают на неё саму, а не на название элемента списка.

9. Конспект выступления редактора интерфейсов Анны Кочетковой из Тинькофф Бизнес. Советы и лучшие практики.

10. Salesforce: приборные панели для метрик, которые могут меняться со временем.

11. Andrew Birgiolas: редизайн приложения Sephora. Они проверяли много прототипов с помощью метода RITE и постепенно фильтровали идеи.

12. NN/g: проблемы виртуальных туров по туристическим местам. Из-за пандемии они вроде бы должны стать востребованы, но обычная фотогалерея удобнее и практичнее.

Много — не мало.

#patterns

​Чтобы не рыться каждый раз в архивах мини-дайджеста, собрал все полезные материалы про унифицированные иллюстрации. Рассказы от Adobe, Airbnb, Creative Market, Dropbox, Лаборатории Касперского, Mail.ru, Putnam Studio, Shopify, Slack, WordPress.

Если кто просил добавочки к ним, то вот она (хотя какие-то ссылки залежались в черновике слишком долго):

КЕЙСЫ
1. Booking.com. Как анализировали цели использования, выбирали стилистику и адаптировали под конкретные задачи.

2. Spacebase.

3. Netguru. К нему сделали конструктор сюжетов.

КОНСТРУКТОРЫ
1. Drawer. Новое слово в жанре — теперь они ещё и анимированные.

2. Open Doodles, Smash и Vector Creator: Ещё три бесплатные коллекции иллюстраций с конструктором.

3. Superscene: 3D от Сraftwork.

Кстати, чистовик книги по дизайн-менеджменту готов, так что дайджест снова обретёт регулярность. А если хорошенько отдохнуть — то и в подводках эпистолярность.

#illustrations

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— vc.ru
— Рассылка по почте

#digest

​В этом году титульная презентация новых продуктов и экспериментов Adobe MAX 2020 прошла с 20 по 22 октября в интернете. Килотонна полезных выступлений от создателей инструментов и просто дизайнеров. Вот что там анонсировали:

XD: Октябрьское обновление. Появилась совместная работа над макетом, 3D-трансформация элементов, общая работа над дизайн-системой через библиотеки Creative Cloud, вложенные компоненты и их состояния, интеграция с Visual Studio Code. Они также создали формат DSP (Design Systems Package) для стандартного описания дизайн-систем.

Photoshop: Замена неба на фото с цветокоррекцией окружения. Нейросетевые фильтры на базе платформы Sensei: перенос стиля, расцветка чёрно-белых фото, увеличение элементов маленького изображения с улучшением качества, туман, мощные трансформации портрета (поменять эмоцию, возраст, поворот головы, очистить недочёты). Улучшенное распознавание шрифтов. Развиваются контенто-зависимый выбор части изображения, обтравки и заливки.

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

Illustrator для iPad: Доступен для всех. Как его делали.

InDesign: Обсуждение макетов командой в браузере, поиск и замена цвета, улучшенное обтекание текста.

Fresco для iPhone: Инструмент для иллюстраторов теперь и на телефоне. В основной версии также много улучшений.

After Effects: Доработанный режим работы с 3D.

Aero 2.0: Бета-версия инструмента для дизайна в дополненной реальности.

Creative Cloud: Можно вести стриминг работы над макетом или обсуждать их командой в Photoshop, Illustrator и Fresco. Поддержка большего количества документов: видео, модели и т.п. Версионирование в Photoshop.

Плагины по всем продуктам развиваются как цельный магазин дополнений. Теперь ими можно централизованно управлять через десктопное приложение. Фреймворк для их написания обновился, а сторонние сервисы теперь могут работать с библиотеками Creative Cloud.

Ещё одна интересная инициатива — проверка аутентичности дизайна. Они изучают историю создания и изменения изображений, что помогает ловить ворованные работы и фейки.

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

#tools #adobe #events

​На недавней конференции Adobe MAX 2020 традиционно показали пачку экспериментов с Adobe Sensei. Правда, в этот раз было жиденько — видимо, Adobe тоже видят, что тема алгоритмического дизайна затухает.

1. 2D Plus: помощь в создании двухмерных иллюстраций, на которых присутствует глубина и перспектива. Позволяет автоматически расставить объекты по удалённости, добавить освещение и тени.

2. Comic Blast: автоматизация создания простых комиксов. Делает сетку сцен и фразы героев на основе текстового сценария, помогает в оформлении. Правда, в комментариях к видео профессиональные художники комиксов разнесли концепт, как Танос — половину вселенной.

3. Typographic Brushes: моментально создаёт шрифт на основе нескольких штрихов кистью в Adobe Fresco.

4. Sharp Shot: улучшает резкость кадров в видео.

Негусто. Но я понял, что в беготне не делал подборку экспериментов алгоритмического дизайна с Adobe MAX 2019. Держите немношк:

1. Body Tracker: технология, которая позволит отслеживать движения человека и применять их в анимации. Body Tracker призван облегчить традиционный процесс анимации, уменьшив количество кейфреймов. Есть вероятность, что подобный инструмент скоро увидим в After Effects.

2. Fantastic Fonts: добавляют к обычным шрифтам множество настраиваемых параметров. Так, используя акселерометр устройства, можно анимировать надпись и добавлять эффекты движения.

3. Project Image Tango: позволит применить рисунок и текстуру с одной картинки к другой. Тут опять работает Sensei, который (нам кажется, с помощью свёрточной нейросети) вычленяет признаки с одного изображения и переносит на другое. Помимо того, можно создать ряд «переходных» изображений.

4. В Premiere Pro появился умный инструмент Auto Reframe, который обрезает видео под разные соцсети. Указываешь насыщенность движения в ролике, и инструмент сам за тебя генерирует ключевые кадры, по которым потом и будет происходить обрезка всего видео.

В отличие от стартапов-дрозофил, Adobe внедряет многое из этого в реальные продукты. И эта магия постепенно становится обычным повседневным инструментом.

#ai #algorithms #adobe #events

​В дайджесте много любимых тем, особенно — обзоры дизайн-систем. Немного статей подобралось затем, чтоб было с дизайном у вас je t'aime:

1. Nathan Curtis: Мощнейший разбор принципов именования токенов. Все возможные варианты и подходы в одной статье.

2. Spotify: Истории развития дизайн-систем в компании и текущем подходе Encore.

3. Google: Как появилась фирменная плавающая кнопка в Material Design. Она стала одним из самых ярких элементов интерфейса, усилившим этот внутренний бренд.

4. IBM: Анализируют опыт работы над дизайн-системой Carbon. Она даёт серию советов начинающим — местами очевидных, но всё равно полезных.

5. Lyft: Особенности работы с цветом.

6. WebNL: Неудачная попытка старта и успех со второй.

7. Ahmad Shadeed: Подробная памятка по переменным в CSS, самой простой реализации токенов в дизайн-системах.

На концовку дурацкого стишка нет, но это и хорошо.

#designsystems

​С каждым мини-выпуском дайджеста подборка о пользовательских исследованиях всё жирнее и бодрее. Пришлось удалить половину, чтобы хоть как-то влезло в пост:

1. Авито: Новая модель работы — множество фрилансеров, готовых быстро подхватить проект.

2. Dropbox: Демократизация пользовательских исследований. Как они обучают и вовлекают дизайнеров и менеджеров продуктов, освобождая время профессиональным исследователям для стратегических проектов.

3. Condens: Сервис для базы знаний и инсайтов. Статья от со-основателя.

4. Jonathan Richardson: Процесс создания базы знаний и инсайтов. У него простая версия — каталог отчётов, без разделения на отдельные инсайты. Он также показывает свой формат описания потребностей пользователей и рассказывает, как стандартизировал весь набор под него.

5. Вадим Шлячков: Анализ научных работ на тему исследования эмоций пользователя. В реальности оценивать их сложно.

6. Jim Kalbach и Elaine Matthias: Сайт с обучающими материалами и шаблонами в дополнение к книге о Jobs to be Done. А ещё он объяснил её обложку: на ней и трубочка для молочного коктейля (отсылка к концепции Clayton Christensen), и сверло дрели (концепция Theodore Levitt). Это две школы мысли — работа как прогресс и как процесс. Они работают на разных уровнях.

7. Facebook: Методы тестирования контента и интерфейсных текстов. Часть из них универсальны (например, 5-секундный тест), но часть — необычные приёмы.

8. Во время карантина дом стал офисом для значительной части людей. Larry S. McGrath из Facebook рассказывает о важности конкретных мест и комнат, где пользователи работают с продуктом.

9. Flexport: Адаптация исследователей к миру карантина.

10. NN/g: Подстраховка на случай, если респондент не пришёл.

11. Контур: Основные понятия при рекрутинге респондентов. Как строится грамотная выборка.

12. Jeff Sauro и Jim Lewis: Как размечать найденные пользователями ошибки в немодерируемом юзабилити-тестировании.

13. Jim Lewis и Jeff Sauro: Насколько корректно использовать в опросах эмоджи вместо стандартных ответов. Данные не ухудшаются, но и смысла в этом нет.

Плотнее уже не впихнуть.

#research

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

Напомню, что его можно получать разными способами:
— Facebook
— vc.ru
— ВКонтакте
— Рассылка по почте

#digest

Конференция Fintech Design Conf 2020 пройдет 12 ноября в онлайне. Дизайн-команды современных банков и финансовых сервисов покажут, что интересного происходит в отрасли, и расскажут, куда движется индустрия. N26, Тинькофф Инвестиции, Альфа-Банк, Райффайзенбанк, Home Credit Bank, Сбер, Открытие Брокер, БКС, AIC и Контур поговорят о дизайн-системах, бренде, пользовательских исследованиях и других аспектах современной продуктовой работы.

Я 8 лет со-организовывал Mail.ru Design Conf / Moscow Dribbble Meetup, так что не мог бросить одно из любимых занятий :) Мы начинали её с 70 слушателей в подмосковной глуши, а в прошлом году на ней было 1100 человек в зале и 20 000 в онлайне.

Fintech Design Conf — пока новый бренд и название, но мы собрали уже более 4000 регистраций. Мы вложили много сил в то, что бы это не было обычной Zoom-конференцией. Участие, как всегда, бесплатно.

P.S. За обновлениями можно также следить в Телеграме.

#events

​Плотная подборка паттернов и лучших практик из будущего дайджеста и недавних. Залежалось в черновике, но никогда не поздно:

1. NN/g: Сложные приложения. Обучение, контент, навигация и т.п.

2. Tim Kaldec: Бездумное использование схематичных экранов загрузки. В большинстве случаев они создают ощущение медлительности интерфейса, а не помогают скрасить ожидание.

3. Ирина Рускакова: Улучшение интерфейсов для пользователей с аутизмом. Чем проще структура и меньше отвлекающих элементов — тем лучше.

4. Коллекция маркетинговых паттернов: промо-сайты, промо-письма, публикации в блогах и целые цепочки встречи нового пользователя.

5. Коллекция паттернов процесса встречи нового пользователя в мобильных приложениях. Для всех записано видео.

6. NN/g: Одна из самых главных интерфейсных коллизий — единая кнопка, которая обозначает текущее состояние и одновременно меняет его.

7. Lyft: Индикаторов и объекты на картах.

8. Baymard: Предостережение от использования подстраниц у карточек товаров в интернет-магазинах на мобильных. Аккордионы подходят лучше.

9. NN/g: Ситуации, в которых уместно открывать ссылку на сайте в новом окне. Их немного — в большинстве случаев решать должен сам пользователь.

10. Growth Design: Опыт первого использования TikTok и основные механики вовлечения пользователей.

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

12. Коллекция ссылок на тему доступности интерфейсов для пользователей с ограниченными возможностями. Инструменты, статьи, гайдлайны и т.п.

13. Stream: Оптимизации интерфейса чата в онлайн-трансляциях.

Плотно, но потенциально годно.

#patterns