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

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

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

1. Ben Lister рассказывает о создании дизайн-системы Sprout Social и том, как менялась её команда. Как это часто бывает, это началось с группы энтузиастов, выделявших 30% времени на работу над ней, но постепенно сформировалась полноценная выделенная группа. Очень крутой пример того, как эволюционирует такая команда с чётко описанными проблемами, целями и задачами. Сама система Seeds и блог команды.

2. Maya King из REI рассказывает о построении команды дизайн-системы Cedar и выпуске её новой версии. Она показала процесс работы над компонентом и идеальный сценарий внедрения в продуктовую команду. Кстати, их консультировал Nathan Curtis.

3. Павел Лаптев научился выгружать токены из Figma в JSON, а затем и CSS-препроцессоры. Хотя разработчики вряд ли возьмут такой код в живой продукт (эта схема должна работать в обратном направлении), такие эксперименты приближают связку компонентов в коде и дизайнерские шаблоны. Репозиторий.

4. Наконец-то вышел Framer Bridge, позволяющий подключить компоненты из технологического фреймворка. Они синхронизируются с компонентами Framer X (которые теперь используют Git для версионирования).

5. Storybook движется в сторону полноценного живого гайдлайна для дизайнеров, а не только разработчиков — в новой версии можно выводить основы визуального языка (цвета, типографика, пиктограммы) и в целом лучше описывать компоненты. Также полезна будет надстройка Chromatic для визуального тестирования компонентов.

6. Дизайн-система австралийских госсайтов.

7. Мини-журнал Jina Anne о дизайн-системах на Medium с интересными статьями сторонних авторов.

8. Figma перезапустили свой сайт о дизайн-системах. В новой версии больше статей о технологических решениях, а не UI Kit, хотя на вид они не особо глубокие. Есть пока полупустая коллекция и совсем уж короткая история, так что у InVision контент-маркетинг получается лучше.

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

#designsystems

https://medium.com/sprout-social-design/designing-our-design-systems-team-184ac9a12c3d

Designing Our Design Systems Team

Earlier this year, we officially formed a design systems team at Sprout Social. While the history of the team is short, the roots of…
| Medium

Короткая, но достаточно жирная подборка интерфейсных паттернов и лучших практик с парочкой крепких хитов:

1. Коллекция хороших видео-презентаций продуктов и их обновлений.

2. Christie Tang изучила и описала интерфейсные патенты крупных технологических компаний. Apple, Facebook, Microsoft, Snapchat, Samsung, Netflix, Airbnb, Tinder.

3. Adil Siddiqui собрал наглядные рекомендации по дизайну мобильных интерфейсов оплаты. Все примеры сопровождаются анимацией в контексте.

4. Edward Scott из Baymard пишет о важности отображения статуса заказа на сайте самого интернет-магазина, а не только компании-доставщика.

5. Виталий Фридман из Smashing Magazine разбирает примеры запросов на использование cookies в современных сайтах. Достаточно большая коллекция одного из самых топорных в истории интерфейсов способов информирования пользователей.

Редкий случай в последнее время, когда не приходится упираться в границы длины поста. Но это временно :)

#patterns

Spectacle - The Best Video Marketing Inspiration

Discover and get inspired by the very best product & marketing videos, everyday.
| spectacle.is

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

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

https://t.me/tlgdoc

Digital Доктор

Живу и работаю в кремниевой долине. Пишу свои мысли о мессенджерах, IT-гигантах и новых технологиях. Препарирую и ставлю диагноз последним новостям, событиям и тенденциям в мире Digital. Чат канала: @chattlgdoc Написать мне лично: @igordor
| Telegram

Dennis Hambeukers запустил блог о дизайн-менеджменте, где описывает своё видение системного развития дизайна в компаниях (до этого он вёл аналогичный по проектированию услуг). Есть кой-чего годное:

1. Модель зрелости дизайна, которую он собрал на основе недавнего подхода InVision и классической концепции Larry Greiner 1972 года. К привычной «лесенке» добавляется сильная идея кризисов роста, которые толкают на следующий шаг.

2. Подход к изменениям в дизайне и организации. Сопроводительная статья о конкретных шагах.

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

4. Модель дизайн-процесса на базе двух популярных подходов — двойного алмаза и постепенно распутывающегося клубка. Он назвал её «воздушным змеем» и в целом похоже на правду.

5. Три стадии взросления дизайн-процесса: делать, учиться, думать. По мере продвижения увеличивается и отдача от него.

6. Этапы развития дизайна (офлайновый бренд, ПО для бизнеса, ПО для конечного пользователя) и современный мир, где бренд и UX сливаются в одно целое.

7. Ключевая роль прототипирования в современном дизайн-процессе — все этапы работы над продуктом крутятся вокруг них.

Весь архив (там около 50 статей) читать вряд ли стоит (много повторений, выделенные статьи хорошо суммируют основные идеи). Но видно, что у него неплохо получаются разного рода концептуальные модели дизайна, так что полезного хватает.

#designmanagement #designops

https://medium.com/design-leadership-notebook

Design Leadership Notebook – Medium

Notes on the imminent leading role of design.
| Medium

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

1. Acronis несколько лет развивают свою дизайн-систему и выпустили несколько статей о ней, но кроме этого о ней было известно мало. На днях ребята выложили видео-презентацию, которая показывает основные возможности. Получился мощный инструмент, где есть библиотека компонентов в коде и их связка с символами в Sketch. Показано использование для сборки страниц, покрытие тестами, статистика использования компонентов — все модные в дизайн-системах вещи. Не терпится добавить ссылку на живой гайдлайн в клуб создателей отечественных систем.

2. Ещё одна отечественная компания БАРС Груп рассказывает о создании дизайн-системы.

3. Вторая версия дизайн-системы американских госсайтов USWDS 2.0. Токены, тематизация и всё такое.

4. Вышла пятая версия одного из самых популярных живых гайдлайнов Storybook для компонентов на React, Vue, Angular, React Native и Ember. Он наконец-то стал выглядеть прилично и сам построен на базе Storybook.

5. Val Head даёт советы по описанию анимации в дизайн-системах. Ключевые принципы, параметры и нюансы.

6. Hayley Hughes и Yujin Han из Airbnb рассказывают, как команда дизайн-системы вовлекает коллег в её развитие. Это регулярные встречи, на которых можно прийти с проблемами и предложениями.

7. Дизайн-система Flexport. Анонс.

8. Павел Померанцев даёт советы по системной работе с z-index в компонентных дизайн-системах. Как добиться того, чтобы компоненты не ломались при вставке в разные страницы.

Вот-вот появится анонс Mail.ru Design Conference × Dribbble Meetup 2019, на которой будет парочка выступлений на тему от отечественных компаний (спойлер: Ac...is и Ti...ff) ;) Если вы дочитали до этих строк, то знаете, что приходить на неё нужно 29 июня. Об открытии регистрации можно узнать, например, в @mailrudesign.

#designsystems

Acronis Design System - no place for boring tasks!

A happy place for UI designers! Say "goodbye" to mundane tasks - check out how Acronis team deals with day-to-day workload. We created Acronis Design System ...
| YouTube

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

Blocs: Ещё один инструмент дизайна, сфокусированный на адаптивных сайтах. Основан на идее «поясов», которые можно перемещать вверх и вниз по странице — как и привычные Tilda или Squarespace.

Hawkeye: Мобильное приложение позволяет тестировать сайты на iPhone с помощью eye tracking. Само собой, нужен телефон из последних поколений.

UXCam: Сервис аналитики пользователей. Ориентирован на изучение конкретных сессий использования сайта или приложения.

Sketch: Плагины: Sketch Lint: Приносит идею линтинга для проверки макетов на соответствие основным параметрам дизайн-системы. Он подсвечивает нестыковки в элементах интерфейса.

Sheet 2 Site: Вторая версия генератора простых сайтов из таблиц в Google Sheets. Куча новых шаблонов и важных интеграций.

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

Mock: Простой онлайн-сервис вставляет видео интерактивного прототипа в рамку телефона для промо.

Friendly Faces: Генератор иллюстративных аватаров пользователей для макетов.

Abstract: Получили $30 млн инвестиций (всего в них вложили $55). Сильно для относительно простого сервиса, который не является самостоятельным инструментом.

Adobe XD: Коллекция бесплатных иллюстраций.

Awesome Design Tools: Неплохой каталог инструментов дизайна по разным категориям.

Mockdown: Сервис делает схематичную версию макета для презентаций и промо-сайтов.

Workbench Suite: Пачка простых инструментов для работы над макетами — нарезка нужных размеров, тегировние, мета-теги, создание цветовой палитры из фото и другие.

Vector Flow: Процедурный инструмент для работы с векторной графикой. В формате, похожем на Origami, вы выстраиваете ноды и их зависимости, в итоге получаете генеративную иллюстрацию.

Plectica: Ещё один инструмент для совместной работы в цифровом аналоге маркерной доски. Диаграммы, ментальные карты, концептуальные модели и всё такое.

Dislack: Ещё один конструктор форм. Собирает и хранит введённые данные.

Moleskine Studio: Moleskine запустили своё приложение для набросков на планшете.

Speak Human: Генератор рыбных интерфейсных текстов, которые правдоподобны.

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

#tools

Blocs - Fast, easy to use and powerful visual web design tool, that lets you create responsive websites without writing code.

Blocs for Mac is a fast, easy to use and powerful visual web design tool, that lets you create responsive websites without writing code.
| Blocsapp

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

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

#digest

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

1. Коллекция чеклистов по проектированию типовых интерфейсных паттернов. Что не забыть при их использовании.

2. Отличная памятка по обработке ошибок пользователей от Emanuel Serbanoiu. Он разбирает психологические их причины и даёт рецепты по типовым ситуациям.

3. Вдогонку ― чеклист по понятным и ёмким сообщениям об ошибках в формах от Amy Leak.

4. Памятка Kim Flaherty из Nielsen/Norman Group о том, как правильно показывать скидки и промо-акции в интернет-магазинах. Она разобрала кучу страниц и сценариев, где упоминание уместно.

5. Паттерны грамотной интеграции ограничений и требований GDPR от Claire Barrett. Как не превратить интернет в ещё одно бюрократическое окошко, а рассказать пользователю о пользе и важности этих действий.

6. Anna Kaley из Nielsen/Norman Group разбирает особенности использования контекстных меню в интерфейсах.

7. Edward Scott из Baymard пишет о том, как учитывать поисковые запросы о работе интернет-магазина, а не товарах.

8. Он же даёт советы по правильному интерфейсу выпадающего меню пользователя в интернет-магазинах.

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

#patterns

https://www.checklist.design/

Checklist Design - best UI elements for the best UX practice

Checklist Design is a collection of best UI and UX you need to provide a complete, honest and rewarding experience for your users.
| www.checklist.design

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

1. Alita Joyce и Jakob Nielsen из Nielsen/Norman Group рассказывают о пользовательском исследовании подростков и того, как они работают с интерфейсами. Полезная привязка к паттернам в конце и сравнение с другими возрастами (дети, студенты, взрослые).

2. Carol J. Smith, Thyra Rauch и Hannah Moyers подробно описывают модель интеграции пользовательских исследований в канонический agile-процесс. Это три типа работ (learning, problem solving и execution), для каждого из которых показан пример реальных задач.

3. Годная памятка Jeff Sauro о том, зачем вообще делаются измерения UX, по каким принципам они работают и какие ответы можно получить с их помощью. Как выбрать правильные метрики и как связать изменения интерфейса с их улучшением.

4. Lexie Martin из Nielsen/Norman Group даёт советы пользовательским исследованиям по составлению портфолио. Хотя у них нет визуально наглядных результатов, можно неплохо рассказать об исследовательских проектах и их результатах.

5. Kim Flaherty и Kate Moran из Nielsen/Norman Group пишут о пробелах в знаниях пользователей о предметной области, которые должен решать интерфейс. А если не решает ― люди вынуждены разбирать информацию из разрозненных источников.

6. Sarah Gibbons из Nielsen/Norman Group разбирает формат описания пользовательских потребностей. Она советует использовать глаголы (цели и конечные состояния), а не существительные (конкретные решения).

7. Jeff Sauro задаётся вопросом, влияет ли размещение вопросов в опросниках на одной странице или разных на ответы пользователей. В целом не сильно, хотя одностраничники немного ухудшают оценки.

8. Советы Sam Yuan из Shopify по грамотной подготовке, проведению и обработке результатов карточной сортировки.

Кстати, моя коллега Ксения Стернина запустила канал. Она одна из лучших отечественных UX-исследователей и это первый специализированный канал в Телеграме. Пока только раскачивается, но будет гарантированно огонь.

#research

https://www.nngroup.com/articles/usability-of-websites-for-teenagers/

Teenager’s UX: Designing for Teens

Teens are (over)confident in their web abilities, but they perform worse than adults. Lower reading levels, impatience, and undeveloped research skills reduce teens' task success and require simpler sites.
| Nielsen Norman Group

Хотя дайджест делается в первую очередь для продуктовых дизайнеров, его темы сильно пересекаются с управлением продуктами. Я периодически ссылаюсь на каналы по теме и в этот раз — https://t.me/ruspm от Владимира Миролюбова из EPICSTARS.

Он также ведёт блог Единорог с дайджестом продуктового менеджмента и сопутствующих тем (в том числе маркетинг и дизайн).

https://t.me/ruspm

Product Management

Все о боли запуска, развития и роста онлайн-проектов от @mirvla (Владимир Миролюбов), CEO EPICSTARS. Автор пособия: http://mirvla.com/2683/ Нужен совет или фидбек? Пишите ЛС, помогу чем смогу
| Telegram