Юрий @jvetrau Ветров собирает свежие статьи, инструменты, паттерны, кейсы и тренды с 2009 года. 50 000 читателей на vc, Хабре и других каналах:

ВК — https://vk.com/pdigest
FB — https://www.facebook.com/groups/pdigest/
Рассылка — http://eepurl.com/bu61XX

Когда говорят о внедрении дизайн-систем, как правило используют стандартный набор выхлопа для бизнеса:
1. Повысить скорость сборки макетов и продуктов;
2. Повысить качество продуктов;
3. Получить кумулятивный эффект от удачных продуктовых решений;
4. Упростить взаимодействие с другими командами;
5. Перейти от крупных редизайнов раз в несколько лет к постоянному поддержанию актуальности интерфейса.

Некоторые пробуют посчитать эти умозрительные выгоды в понятных метриках, чтобы просить дополнительные ресурсы на внедрение с цифрами в руках:

1. Cristiano Rastelli предложил подход к расчёту выхлопа на примере Cosmos от Badoo. Он сравнил изменения в коде до и после внедрения единых компонентов и увидел, что активность перетекла из обновлений мобильного сайта в доработки тех же элементов уже во фреймворке. Конечно, многие разработчики скептически относятся к измерениям чего-либо через количество коммитов, но идея интересная.

2. Bryn Rozzier провёл интереснейшие расчёты выхлопа для одного из клиентов. Он попытался перевести стандартные вещи вроде уменьшения трудозатрат, ускорения запусков и улучшения качества в деньги. Показана вся цепочка вычислений и формулы, так что можно применить к своим задачам. Лучший материал на тему ROI внедрения дизайн-систем.

3. Jeroen Ransijn рассказывает о создании дизайн-системы инструмента аналитики Segment. Она выросла из прототипа нового дизайна для конференции — необычный путь создания. Автор показывает толковый дашборд, отслеживающий внедрение дизайн-системы в продукте. Сайт дизайн-системы.

4. Варя Степанова рассказывает о пользовательских исследованиях продуктовых команд, использующих дизайн-систему финского телеком-оператора Elisa. Это помогает понять её проблемы и определить направления развития.

А вот просто немного толковых свежих материалов на тему:

1. Specify: Занятный инструмент для связки двух ключевых частей дизайн-системы — дизайнерских шаблонов в Sketch и компонентов в коде. На вид что-то в духе более мощного Zeplin — ключевые переменные визуального языка экспортируются в виде токенов, дальше они подключаются к компонентам в коде (обещают pull- и push-запросы к Git).

2. Дизайн-система отечественной компании БАРС Груп (дочка Ростех). Страница в клубе создателей отечественных дизайн-систем.

3. Nathan Curtis предлагает подход для описания архитектуры дизайн-систем. На какие ветки они делятся, какие бренды поддерживают, что именно реализовано и на каких продуктах.

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

5. Ryan Cordell из Deliveroo показывает, как интерфейсные писатели интегрировали правила работы с текстами в дизайн-систему.

6. Alan B Smith показывает, как создавать компоненты с поддержкой разных тем оформления на базе фреймфорка Styled System.

7. Пара относительно свежих фреймворков:
CodyHouse.
Emotion.
MDX.js.

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

#designsystems

https://medium.com/@didoo/measuring-the-impact-of-a-design-system-7f925af090f7

Measuring the Impact of a Design System

Visualising the positive impact on the work of a team of UI engineers, by the adoption of a design system.
| Medium

Рождаемость новых инструментов дизайна такая, что астрологи могут чилить ― им не нужно объявлять какие-то особенные недели. Год только раскачивается, а они уже шарашат вовсю:

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

Window: Приложение для Android помогает проверить точность сборки экранов. По сути работает как Zeplin, показывая параметры элементов интерфейса. Анонс.

ScreenSpace: Онлайн-сервис (уже второй) позволяет вставить в макет устройство и на лету повернуть его в 3D нужным образом.

Adobe XD: Январское и февральское обновления. Развитие прототипирования голосовых интерфейсов, улучшение импорта из Photoshop и Illustrator, экспорт в AfterEffects, рост количества плагинов, доработки по ключевым функциям.

Color by Cloudflare Design: Генератор цветовых палитр с учётом пользователей с ограниченными возможностями.

Mockplus iDoc: Ещё один инструмент для передачи макетов разработчикам.

Figma: Получили ещё $40 млн инвестиций (суммарно в них вложили уже $82,9 млн). В ожидании новых рывков посмотрите бесплатные шаблоны и заранее подобранные шрифтовые комбинации.

Sketch: Плагины: Anima 3.0 собрали все свои плагины воедино с возможностью делать достаточно мощные интерактивные прототипы с вводом данных и микро-анимациями.

Screen Guru: Простой сервис для создания скриншотов сайтов — даёте ему ссылку, он на выходе — картинку в окне браузера.

Image Resizer: Онлайн-сервис готовит версию любого изображения в 50 форматах для соц.сетей и других типовых задач.

Tilda: Выпустили учебник по анимации, помогающий собирать более интересные проекты в инструменте.

wiARframe: Сервис для прототипирования в дополненной реальности. Работает в браузере, есть предпросмотр на телефонах и планшетах.

Stubborn Illustrations: Ещё одна библиотека иллюстраций с возможностью сборки конкретного сюжета для конкретной задачи. Судя по всему, в этом году их число дойдёт до сотни — такая модель распространения гораздо лучше стандартных стоков.

Mixed: Ещё один инструмент для совместной работы на «маркерной доске» в браузере в духе RealtimeBoard.

InVision Studio: Купили сервис для версионирования макетов Trunk для интеграции в инструмент. Читайте также учебник по работе с инструментом.

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

#tools

https://userbitapp.com/?ref=producthunt

UserBit - UX Design and Collaboration Tools

Interview stakeholders and users, discover insights, develop personas and sitemaps on one unified platform
| UserBit

Сборник лучших хитов про дизайн-менеджмент и командную работу по версии дайджеста продуктового дизайна, volume 10: январь-февраль 2019 [скачать бесплатно без смс]:

1. Обновил свою презентацию о подходе к долгосрочному планированию изменений в дизайне Mail.ru (с учётом плана на 2019). В начале прошлого года мы запустили свежую версию, с помощью которой системно улучшаем дизайн продуктов и внедряем новые методы работы. В основе — классическая пирамида стратегического планирования от видения и миссии до конкретных шагов на базе OKR (Objectives & Key Results).

2. Рассказы о работе других дизайн-команд:
Лена Куликова о Райффайзен Банке;
Саша Гришин о Badoo.

И относительно недавно появившиеся блоги:
Spotify;
Яндекс;
Рамблер;
Mail.ru.

3. Erin Woo рассказывает о формате недельных выездов дизайнеров мобильного MS Outlook. Коллеги из разных городов съезжаются вместе и решают проблемы пользователей, до которых давно хотелось добраться.

4. James Rotanson из Atlassian даёт советы по настройке Jira для дизайнеров. Он приводит пример работы собственной команды.

5. Советы по правильному взаимодействию интерфейсных писателей с менеджерами продуктов и дизайнерами от Gene Shannon из Shopify. Толковые мысли про формирование ожиданий и хороший пример матрицы RACI для учёта заинтересованных лиц.

6. Jenny Wen из команды Dropbox Paper даёт советы по взаимодействию дизайнеров и разработчиков. Как упростить коллегам жизнь и оптимизировать совместную работу.

7. Конференция по дизайн-менеджменту Design Leadership Summit 2018 прошла 29 сентября в Торонто. Опубликованы видео-записи выступлений.

8. Конференции по дизайн-системам поняли ограниченность темы и переметнулись на общие вопросы по управлению дизайн-командами. DSConf из Хельсинки теперь Joint Futures, а Design Systems London вот-вот объявят ребрендинг. Хайп DesignOps пожирает предыдущих хайпожоров.

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

#designmanagement #designops

https://speakerdeck.com/jvetrau/vniedrieniie-ux-stratieghii-2-dot-1-ili-designops

Внедрение UX-стратегии 2.1 или DesignOps

Для развития дизайна в компании мы используем долгосрочное планирование и в 2018 запустили свежую версию подхода. Я рассказал о том, как мы системно улучшаем дизайн продуктов и внедряем новые методы работы. Это часть серии публикаций о дизайн-менеджменте — http://dmpatterns.com/.
| Speaker Deck

Пользовательские исследования становятся всё доступнее — и в плане методов (тонны методичек), и в плане инструментов (даже на русском), и в плане осознания важности (спасибо (без шуток) переупаковщикам под марками «дизайн-мышление» и «customer development»). А значит меньше компаний запускает продукты наудачу (шутка.jpeg). Но для тех, кто всё-таки осознал, подсобрал пачку свежих памяток и шпаргалок по базовым и не очень методам:

1. Крутой онлайн-учебник по проведению пользовательских исследований от сервиса User Interviews. Он описывает основы, разведочные методы и валидацию/тестирование, подбор респондентов, инструменты и построение исследовательских команд.

2. Erika Hall показывает разницу между вопросом самого пользовательского исследования и конкретным вопросом интервью с пользователем. Менеджеры продуктов и другие заказчики часто путают их и приходят с конкретным методом в голове, хотя правильно сформулированный вопрос исследования может потребовать вообще другого подхода.

3. Andrea Drugay из Dropbox рассказывает о формате регулярных быстрых сессий пользовательских исследований. Раз в две недели они приглашают несколько респондентов, которые общаются с продуктовыми командами в формате «быстрых свиданий».

4. Простой и мощный подход к выбору методов пользовательских исследований от David Travis из UserFocus. Он основан на классических матрицах 2x2 и предлагает 10 точек зрения на разные задачи.

5. Jared Spool критикует авторов книг о Jobs to Be Done за то, что они поверхностно рассказывают об исследовательской работе в ходе выявления потребностей пользователей. Из-за этого повторить успех красивых кейсов-примеров сложновато.

6. Kate Moran даёт советы по ситуациям, когда данные разных исследований интерфейса противоречат друг другу. Как правильно проверить данные, методы и вообще правильно действовать.

7. Paula Barraza делится советами по проведению быстрого итеративного пользовательского тестирования интерфейсов. Как проводить сессии, фиксировать результаты и общаться с командой.

8. Jim Ross разбирает типичные ошибки при планировании и проведении пользовательских исследований. Часть 2.

9. Jeff Sauro изучил, ради чего пользователи участвуют в бесплатных опросах и как их оценки отличаются от оплачиваемых.

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

#research

https://www.userinterviews.com/ux-research-field-guide

UX Research Field Guide | User Interviews

The UX Research Field Guide is a comprehensive resource for researchers, designers, and product managers of all experience levels covering methods, recruiting, running effective teams, and more.
| Userinterviews

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

Если вы из этой тусовки или дизайнер, который хочет переквалифицироваться (а их всё больше), то 1 марта Аркадий вместе Алексеем Черняком запускают школу менеджеров продуктов. Участие бесплатное, с отбором и оплатой после трудоустройства. 

Принимают заявки до 20 февраля, обучение удалённое — есть ещё 10 дней собраться с силами и податься. Курс идёт 8 недель, по итогу готовится учебный проект и портфолио. Полная программа.

https://productuniversity.ru/product-manager

Product Manager - программа акселерации продакт-менеджеров

Бесплатная программа с оплатой после трудоустройства
| productuniversity.ru

InVision предложили свою модель зрелости дизайна. Это 5 стадий взросления дизайн-команды ― от исполнителя до визионера. В дополнение к модели они опросили 2000 дизайнеров и попытались понять, как отличается зрелость в разных странах, отраслях и типах компаний.

Получился неплохой фреймворк, где карта развития команды представлена в виде лепестковой диаграммы ― это повторяет идею карты компетенций дизайнера, показывая текущее состояние и точки роста.

Я давно собираю модели зрелости в рамках своей серии статей о паттернах дизайн-менеджмента. Серию начал в 2013 году со своей модели, вокруг которой дальше провязал конкретные методы и практики. Она сочетает в себе два подхода:
― «лестница», по которой дизайн-команда поднимается вверх по мере взросления;
― «луковица», где каждый слой можно развивать самостоятельно.

Большинство моделей зрелости используют первый подход, «лестницу»:
1998: Jonathan Earthy (http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/usability-maturity-model[1].pdf). У неё бесчисленное количество вариаций от самых разных авторов.
2006: Rosa Wu и Jess McMullin
2006: Jakob Nielsen
2007: Danish Design Centre
2008: Forrester

Более удачные варианты «лестницы» предлагают фреймворк с описанием действий на каждом шаге:
2004: HFI
2013: HIMSS
2014: Keikendo
2015: Macadamian
2015: Nomensa
2015: Infosys
2015: DMI
2018: Richard Banfield

Фреймворки/чек-листы:
2012: Milan Guenther
2016: Forrester

Совмещение «лестницы» и «луковицы»:
2017: Natalie Hanson

«Луковица»:
2009: Sabine Junginger
2017: David Service

Пирамида:
2012: Stefan Klocek

Лепестковая диаграмма:
2018: Gebruiker Centraal

Если собирать все вариации на основе популярных подходов, то за 20 лет наберётся с полсотни моделей зрелости (собираю всё это добро в Pinterest). Зачем так много? Если откинуть задачу продажи консультантами своих услуг, то многообразие организаций и их реальных ситуаций не позволяет создать одну универсальную. Даже если цели системного улучшения дизайна у компаний похожи, особенности орг.структуры и процессов, а также наследие создают уникальную ситуацию, где у каждого будет свой путь.

Более полная версия статьи с картинками.

Кстати, про модели зрелости я рассказываю на курсе о дизайн-менеджменте цифровых продуктов на Bang Bang Education. Места в первом потоке раскуплены, но второй уже объявлен — стартует 14 октября.

#designmanagement #designops #maturity

https://www.invisionapp.com/design-better/design-maturity-model/

The New Design Frontier by InVision

InVision surveyed thousands of companies to explore the relationship between design practices and business performance. What we discovered will transform the way you work.
| Design Maturity Model by InVision: The New Design Frontier

А вот и свежий выпуск магазина на диване готовых решений. Наберите короткий номер @pdigest, чтобы получить подборку новых интерфейсных паттернов:

1. Коллекция примеров интерфейсных звуков известных сервисов. На старте есть Skype, Slack, Facebook, Apple, Whatsapp и другие.

2. Google выложили методички с лучшими практиками, где разобрали многие известные бренды:

Мобильные интернет-магазины
Путешествия
Финансы
Недвижимость
Новостные и контентные сайты
Промо-сайты

3, Компания Growth Rock исследовала 40 крупнейших американских интернет-магазинов и выделила ключевые паттерны оформления заказа в их мобильных версиях. Они проводили некие A/B-тесты на прототипах, что выглядит сомнительно. Но как чеклист — годно.

4. Библиотека паттернов мобильных приложений. Каждый пример можно получить в коде.

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

6. Raluca Budiu из Nielsen/Norman Group разбирает паттерны хороших чатов поддержки. Плюсы, минусы, подводные камни.

7. Гайдлайны по доступности интерфейсов для пользователей с ограниченными возможностями от Сбербанка. Толковый подробный чеклист.

8. Addy Osmani разбирает этапы загрузки страницы сайта и выделяет критические точки, в которых пользователь ожидает увидеть не только основной контент, но и работающие инструменты взаимодействия. Он приводит выкладки влияния этих этапов на конверсию.

9. Команда Codea показывает интересный пример меню в iOS для профессиональных инструментов ― оно ближе к десктопным продуктам. Часть 2.

10. Katie Sherwin и Jakob Nielsen продолжают рассказ о новом исследовании Nielsen/Norman Group особенностей использования интерфейсов детьми разного возраста. В этой статье приводят разницу восприятия типовых интерфейсных паттернов.

12. Colin Eagan показывает, как можно проектировать сервисы, предполагающие персонализацию.

12. Raluca Budiu из Nielsen/Norman Group исследовала, как пользователи реагируют на рекомендательные системы. Зачастую непонятно, почему сервис выдаёт именно этот контент. В другой статье разбирают проблемы рекомендательных систем, которые загоняют пользователя в «пузырь» одинакового контента.

13. Chris Ashton попробовал использовать программу для чтения контента сайта вслух. Проблем у известных сервисов выше крыши.

Тут выше крыши идей для ваших интерфейсов, так что не упустите шанс ― сделайте их лучше и шелковистее уже сейчас.

#patterns

https://uisounds.prototypr.io/?ref=producthunt

UI Sound Inspiration for UX/UI Design

Learn sound design for user interfaces by example.
| uisounds.prototypr.io

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

Design Camera: Приложение для Mac позволяет вставить в макет устройство и на лету повернуть его в 3D нужным образом.

Sketch 53 (бета): Обещают более точные настройки изменяемых свойств символов и более удобный интерфейс их замены. Обзор. Плагины: 

MakeUI: Конструктор UI Kit для Sketch. Можно выбрать основные параметры элементов интерфейса (цвета, радиус скругления и т.п.), на выходе получите библиотеку символов.

Pointbreak: Позволяет делать адаптивные макеты.

Draftium: Занятный новый онлайн-инструмент прототипирования. Выбираете промо-сайт из шаблона, меняете тексты и смотрите на устройстве.

Studio 2.0: Вышла вторая версия инструмента. Теперь это не просто прототипирование, а цельный инструмент дизайна с возможностью экспортировать код и опубликовать сайт. Совместная работа прилагается.

Adobe XD: Декабрьское обновление. Облачное хранение макетов и намёк на совместную работу как в Figma. Также обещают версионирование и организацию грамотной библиотеки компонентов для команды. 

Shane Williams сделал пачку простых и наглядных примеров использования новой возможности авто-анимации в Adobe XD. Какие состояния экранов нужны для каждого из прототипов.

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

Weblium: Ещё один конструктор промо-сайтов. Подаётся как основанный на ИИ, но, видимо, имеются в виду совсем простые вещи. Из интересного ― гибкое применение тем оформления (можно отдельно и цельно менять цветовую палитру, шрифтовой набор и вид элементов управления).

Tilda: Обзор новых возможностей, запущенных в 2018 году.

Readymag: Запустили галерею примеров удачно сделанных сайтов, показывающих возможности платформы.

Webflow: Коллекция шаблонов и других вспомогательных ресурсов.

remove.bg: Онлайн-сервис убирает фон с фотографии.

Nolt: Сервис для работы с базой знаний инсайтов. Агрегирует обратную связь из разных источников и помогает сформировать продуктовый план на их основе.

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

Marvel: Шаблоны для рабочих сессий дизайн-мышления.

Illustrations.design: И ещё один сервис стоковых иллюстраций, которые можно настраивать под свою ситуацию. На сдачу дают ещё и шаблоны самих промо-сайтов.

Flare: Команда показывает, что можно сделать с помощью инструмента.

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

В 2019 будет жарко — ключевые инструменты сделали мощные ставки в прошлом году. Figma несётся с космической скоростью и каждый второй уже изменяет Скетчу с ней. Adobe XD поднялись над собой и закрыли кучу брешей, мешавших им восприниматься серьёзно. Sketch как текущий дефолтный выбор должен сделать рывок, чтобы не проиграть наседающим на пятки. Рыба карась — игра началась.

 #tools

https://designcamera.app/

Rotato - 3D mockups, drag and drop - - Animated 3D mockups for your app designs

Animated 3D mockups for your app designs. No 3D experience required. Free beta.
| Rotato - 3D mockups, drag and drop -

Вы, наверное, уже заметили, что я давно дружу с ребятами из https://t.me/psd_eu. Пару раз участвовал в их онлайн-интенсивах Design Line (http://intensive.dsgnline.ru/), где выступает много сильных отечественных дизайнеров в развёрнутом полуторачасовом формате. Мы постоянно обмениваемся опытом по ведению Телеграма.

Они давно ведут канал @psd_eu об отечественном дизайне, фестивалях, адекватных заказчиках, полезных рабочих сервисах и инструментах. В последнее время пошла серия содержательных интервью, выходят статьи, обзоры работ лучших студий — полезно следить за ними, чтобы оставаться профессионально свежими.

https://t.me/psd_eu

PSD | Дизайн-пространство

Пишем просто, понятно и по делу обо всём околодизайнерском 🔥 UI/UX, веб-дизайн, графический дизайн и многое другое. По поводу рекламы и сотрудничества: @design_manager_bot Наши проекты: t.me/onbehancer t.me/magazine_design t.me/package_design
| Telegram