Собрал дайджест продуктового дизайна за январь 2019. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте
#digest
Напомню, что его можно получать разными способами:
— ВКонтакте
— Рассылка по почте
#digest
Юрий Ветров об интерфейсах
Дайджест продуктового дизайна, январь 2019
Конференции по дизайну в 2019 году, новые интерфейсы с CES 2019, карта компетенций продуктового дизайнера, модели зрелости дизайна, новые инструменты и ещё сотня свежих ссылок.
Пользовательские исследования становятся всё доступнее — и в плане методов (тонны методичек), и в плане инструментов (даже на русском), и в плане осознания важности (спасибо (без шуток) переупаковщикам под марками «дизайн-мышление» и «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
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
Userinterviews
UX Research Field Guide | User Interviews
An in-depth, beginner-friendly guide on how to conduct effective user research. Topics include: UX research plans, recruiting, methodology, and analysis.
Сборник лучших хитов про дизайн-менеджмент и командную работу по версии дайджеста продуктового дизайна, 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
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
Speaker Deck
Внедрение UX-стратегии 2.1 или DesignOps
Для развития дизайна в компании мы используем долгосрочное планирование и в 2018 запустили свежую версию подхода. Я рассказал о том, как мы системно улу…
Рождаемость новых инструментов дизайна такая, что астрологи могут чилить ― им не нужно объявлять какие-то особенные недели. Год только раскачивается, а они уже шарашат вовсю:
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
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
UserBit
UX Repository and Tools for agencies & freelancers | UserBit
UX design and User research tools for agencies and freelancers
Когда говорят о внедрении дизайн-систем, как правило используют стандартный набор выхлопа для бизнеса:
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
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
Medium
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.
❤1
Один из самых дотошных людей в нашей профессии — это, конечно же, Jeff Sauro. Он с вдохновляющим остервенением берётся разобрать первоисточники какого-нибудь метода пользовательских исследований или метрики, попутно раскапывая уйму ценнейших и редчайших научных публикаций. Если вы когда-нибудь попадали в кроличью нору Википедии с бесконечными переходами по связанным материалам, то ни в коем случае не читайте его недавние статьи об NPS:
1. Классические исследования по NPS проверяют влияние метрики на будущую прибыль привычного бизнеса. Jeff Sauro попробовал посчитать его для программных продуктов. Связь есть (порядка 40% точности предсказания через NPS и SUS), хотя примеров для выборки маловато.
2. У NPS, как и у любого другого метода, есть свои особенности и ограничения, а также критики, которые книжек не читали, но высказаться должны. Jeff повторил эксперимент автора метрики Fred Reichheld и показал распределение оценок и готовности рекомендовать продукт. Спойлер: почти всё работает как обещано.
3. И ещё раз повторил, чтобы убедиться в её валидности. В целом всё так ― обосновывается прибыль в прошлом и с вероятностью в 30% будущая.
4. Исследовал различия между метриками, основанными на готовности рекомендовать продукт в будущем и свершившейся рекомендацией. Второе честнее, но в идеале — связка обоих показателей.
5. Подробнейше разбирает метрику CE11 от Gallup, которую Jared Spool рекомендует использовать вместе NPS. Это 11 вопросов про удовлетворённость брендом и готовность рекомендовать его — опросник появился в одно и то же время с NPS, но не стал популярным. Более распространённые UMUX-Lite и SUPR-Q дают более надёжные результаты.
Не устану рекомендовать подписаться на его бложик — ДУХ СТАРОЙ ШКОЛЫ ЖИВЁТ ТОЛЬКО В MEASURINGU, ГДЕ ПОЛЬЗОВАТЕЛЬСКИЕ ИССЛЕДОВАТЕЛИ ЖИВУТ ЭНЕРГИЕЙ, МОЛОДОСТЬЮ И НОРМИРУЮТ СИСТЕМУ! ТОЛЬКО СТАТИСТИЧЕСКАЯ ЗНАЧИМОСТЬ, ТОЛЬКО ХАРДКОР! ЮНИТИ УЛЬТРАХАРДКОР MEASURINGU!!! ГОВОРИТЕ ОТКРЫТО И СМЕЛО ПРЯМО В ЛИЦО!
#metrics #nps
1. Классические исследования по NPS проверяют влияние метрики на будущую прибыль привычного бизнеса. Jeff Sauro попробовал посчитать его для программных продуктов. Связь есть (порядка 40% точности предсказания через NPS и SUS), хотя примеров для выборки маловато.
2. У NPS, как и у любого другого метода, есть свои особенности и ограничения, а также критики, которые книжек не читали, но высказаться должны. Jeff повторил эксперимент автора метрики Fred Reichheld и показал распределение оценок и готовности рекомендовать продукт. Спойлер: почти всё работает как обещано.
3. И ещё раз повторил, чтобы убедиться в её валидности. В целом всё так ― обосновывается прибыль в прошлом и с вероятностью в 30% будущая.
4. Исследовал различия между метриками, основанными на готовности рекомендовать продукт в будущем и свершившейся рекомендацией. Второе честнее, но в идеале — связка обоих показателей.
5. Подробнейше разбирает метрику CE11 от Gallup, которую Jared Spool рекомендует использовать вместе NPS. Это 11 вопросов про удовлетворённость брендом и готовность рекомендовать его — опросник появился в одно и то же время с NPS, но не стал популярным. Более распространённые UMUX-Lite и SUPR-Q дают более надёжные результаты.
Не устану рекомендовать подписаться на его бложик — ДУХ СТАРОЙ ШКОЛЫ ЖИВЁТ ТОЛЬКО В MEASURINGU, ГДЕ ПОЛЬЗОВАТЕЛЬСКИЕ ИССЛЕДОВАТЕЛИ ЖИВУТ ЭНЕРГИЕЙ, МОЛОДОСТЬЮ И НОРМИРУЮТ СИСТЕМУ! ТОЛЬКО СТАТИСТИЧЕСКАЯ ЗНАЧИМОСТЬ, ТОЛЬКО ХАРДКОР! ЮНИТИ УЛЬТРАХАРДКОР MEASURINGU!!! ГОВОРИТЕ ОТКРЫТО И СМЕЛО ПРЯМО В ЛИЦО!
#metrics #nps
Я регулярно выкладываю подборки интерфейсных паттернов для повышения насмотренности — это помогает расширить инструментарий дизайнера интерфейсов и технично обходить давно известные грабли (архив выпусков ищите по хештегу #patterns).
Ребята из https://news.1rj.ru/str/cultofdetails посвятили этому отдельный канал, где под микроскопом разбирают интересные детальки, пружинки и винтики интерфейсных решений.
Долгое время главным источником вдохновения был Little Big Details, но он затух, а шариться по десяткам Пинтерестов не всегда удобно. Есть десятки сайтов с коллекциями паттернов вроде UI Patterns, но там не особо удобно следить за новостями. Листайте интересные наработки и присылайте свои примеры на @cultofdetails.
Ребята из https://news.1rj.ru/str/cultofdetails посвятили этому отдельный канал, где под микроскопом разбирают интересные детальки, пружинки и винтики интерфейсных решений.
Долгое время главным источником вдохновения был Little Big Details, но он затух, а шариться по десяткам Пинтерестов не всегда удобно. Есть десятки сайтов с коллекциями паттернов вроде UI Patterns, но там не особо удобно следить за новостями. Листайте интересные наработки и присылайте свои примеры на @cultofdetails.
Telegram
cult of details #нетВойне
Делимся классными деталями в интерфейсах и окружающем мире.
В Барселоне проходит традиционная выставка Mobile World Congress по теме достижений мобильных технологий и прочей бытовой техники на пару с просто модными гаджетами. Здесь больше фокуса, чем на CES, хотя меньше уморительной дичи.
Естественно, главная тема года — гибкие экраны. Их, на удивление, меньше сотни:
1. Третий коммерческий гибкий телефон, Huawei Mate X. Экран у него единый, при складывании остаётся снаружи.
2. Oppo показали свой прототип, который подозрительно похож на Huawei Mate X.
3. Nubia показали обновлённую смесь телефона и часов с гибким экраном.
4. Полуживой прототип от TCL с интересными трансформациями.
5. За несколько дней до MWC Samsung показали свой первый коммерческий гибкий телефон Galaxy Fold. Он, конечно, не самый компактный, зато его можно купить и он лучше первого продающегося гибкого телефона от Royole.
6. Комично выглядит затычка в виде двухэкранного телефона от LG, которые не успели на поезд гибких экранов. Nintendo DS на минималках.
Среди других телефонных забав были:
— Ультравысокие киношные экраны 21:9 от Alcatel и Sony.
— Дикий телефон размером с кирпич и батареей на 18 000 mAh от Energizer.
— Производители Android-телефонов массово добавляют отдельную физическую кнопку для вызова Google Assistant.
А ещё оказалось, что мобильная ОС KaiOS стала третьей по популярности в мире — на руках 80 млн телефонов. Она базируется на наработках Firefox OS и заточена под дешёвые кнопочные телефоны.
Вишенкой была презентация Microsoft Hololens 2 за день до открытия. Он стал значительно лучше по всем показателям — качество картинки, угол обзора, распознавание объектов и управление жестами без отдельного контроллера, отслеживание взгляда и управление им. Устройство ориентировано на компании, а не конечных пользователей.
В Unreal Engine 4 появится поддержка устройства. Нарезка ключевых моментов презентации (рвань!).
Ну и возродили Kinect для B2B-рынка.
После чёлочной идиотии безрамочных телефонов (в этом году даже они стали меньше) наконец-то пошла интересная движуха в мобильных интерфейсах.
На нашем конкурсе Mail.ru Design Cup дизайнеры решали задачу на тему почты для гибких экранов. На Dribbble тоже есть пара концептиков: Максим Гедрович, Kizuku Kitada и Александр Шевенёнов. Не все идеи интересные, но любые эксперименты на тему приближают нас к осуществлению эффектных картинок из брендовых видео, показывающих видение будущего.
#trends #mwc
Естественно, главная тема года — гибкие экраны. Их, на удивление, меньше сотни:
1. Третий коммерческий гибкий телефон, Huawei Mate X. Экран у него единый, при складывании остаётся снаружи.
2. Oppo показали свой прототип, который подозрительно похож на Huawei Mate X.
3. Nubia показали обновлённую смесь телефона и часов с гибким экраном.
4. Полуживой прототип от TCL с интересными трансформациями.
5. За несколько дней до MWC Samsung показали свой первый коммерческий гибкий телефон Galaxy Fold. Он, конечно, не самый компактный, зато его можно купить и он лучше первого продающегося гибкого телефона от Royole.
6. Комично выглядит затычка в виде двухэкранного телефона от LG, которые не успели на поезд гибких экранов. Nintendo DS на минималках.
Среди других телефонных забав были:
— Ультравысокие киношные экраны 21:9 от Alcatel и Sony.
— Дикий телефон размером с кирпич и батареей на 18 000 mAh от Energizer.
— Производители Android-телефонов массово добавляют отдельную физическую кнопку для вызова Google Assistant.
А ещё оказалось, что мобильная ОС KaiOS стала третьей по популярности в мире — на руках 80 млн телефонов. Она базируется на наработках Firefox OS и заточена под дешёвые кнопочные телефоны.
Вишенкой была презентация Microsoft Hololens 2 за день до открытия. Он стал значительно лучше по всем показателям — качество картинки, угол обзора, распознавание объектов и управление жестами без отдельного контроллера, отслеживание взгляда и управление им. Устройство ориентировано на компании, а не конечных пользователей.
В Unreal Engine 4 появится поддержка устройства. Нарезка ключевых моментов презентации (рвань!).
Ну и возродили Kinect для B2B-рынка.
После чёлочной идиотии безрамочных телефонов (в этом году даже они стали меньше) наконец-то пошла интересная движуха в мобильных интерфейсах.
На нашем конкурсе Mail.ru Design Cup дизайнеры решали задачу на тему почты для гибких экранов. На Dribbble тоже есть пара концептиков: Максим Гедрович, Kizuku Kitada и Александр Шевенёнов. Не все идеи интересные, но любые эксперименты на тему приближают нас к осуществлению эффектных картинок из брендовых видео, показывающих видение будущего.
#trends #mwc
MWC Barcelona
MWC - The Largest And Most Influential Connectivity Event
Join the mobile technology ecosystem at the largest and most influential connectivity event in the world, hosted by GSMA in Barcelona, Spain, 2026
Ничто не собирается так быстро, как непрочитанные письма, вечерние пробки, новые инструменты дизайна и интерфейсные паттерны. Вот что накопалось по последнему пункту:
1. Отличная памятка Anna Kaley из Nielsen/Norman Group о правильных названиях интерактивных элементов и выборе комбинаций для горячих клавиш (десктопные и веб-приложения).
2. Слава Шестопалов достаточно подробно описал паттерны сложных таблиц с возможностью редактирования. Учтено куча нюансов по взаимодействию с ними.
3. Свежая версия классической подборки ошибок в интерфейсах от Jakob Nielsen и Page Laubheimer.
4. Сотрудники Центра цифровой этнографии в RMIT University Bjorn Nansen и Rowan Wilken исследовали, как дети взаимодействуют с интерфейсами мобильных устройств. Перевод от Usethics.
5. Советы по грамотной локализации продуктов от Jonathan Walter и Elena Dunne, а также отличиях термина от интернационализации и глобализации.
6. Maria Rosala из Nielsen/Norman Group собрала памятку по дизайну интерфейса отслеживания статуса заказа. Она рассматривает два формата — отдельный экран со статусом и письма или уведомления по ходу обновления статуса.
7. Therese Fessenden из Nielsen/Norman Group собрала памятку по проектированию подвалов на сайтах. Типовые элементы и польза в целом.
8. Чеклист по обработке ошибок в формах от Rachel Krause из Nielsen/Norman Group.
9. Edward Scott из Baymard Institute перечисляет способы помощи пользователю при нулевых результатах поиска в интернет-магазинах.
10. Edward Scott показывает, как правильно подавать аксессуары и сопутствующие товары в интернет-магазинах.
11. Jeff Sauro рассказывает о сравнительном исследовании юзабилити сайтов американских авиакомпаний.
В последнее время Nielsen/Norman Group усилили качество и количество своих и без того топовых публикаций, так что эта подборка всё чаще выезжает на их горбу. Некоторые из их статей совсем уж капитанские, но в основном — годнота. Они съели собаку на подтверждении работы интерфейсных паттернов и обнаружении проблем, так что доверие к их выводам повышенное.
#patterns
1. Отличная памятка Anna Kaley из Nielsen/Norman Group о правильных названиях интерактивных элементов и выборе комбинаций для горячих клавиш (десктопные и веб-приложения).
2. Слава Шестопалов достаточно подробно описал паттерны сложных таблиц с возможностью редактирования. Учтено куча нюансов по взаимодействию с ними.
3. Свежая версия классической подборки ошибок в интерфейсах от Jakob Nielsen и Page Laubheimer.
4. Сотрудники Центра цифровой этнографии в RMIT University Bjorn Nansen и Rowan Wilken исследовали, как дети взаимодействуют с интерфейсами мобильных устройств. Перевод от Usethics.
5. Советы по грамотной локализации продуктов от Jonathan Walter и Elena Dunne, а также отличиях термина от интернационализации и глобализации.
6. Maria Rosala из Nielsen/Norman Group собрала памятку по дизайну интерфейса отслеживания статуса заказа. Она рассматривает два формата — отдельный экран со статусом и письма или уведомления по ходу обновления статуса.
7. Therese Fessenden из Nielsen/Norman Group собрала памятку по проектированию подвалов на сайтах. Типовые элементы и польза в целом.
8. Чеклист по обработке ошибок в формах от Rachel Krause из Nielsen/Norman Group.
9. Edward Scott из Baymard Institute перечисляет способы помощи пользователю при нулевых результатах поиска в интернет-магазинах.
10. Edward Scott показывает, как правильно подавать аксессуары и сопутствующие товары в интернет-магазинах.
11. Jeff Sauro рассказывает о сравнительном исследовании юзабилити сайтов американских авиакомпаний.
В последнее время Nielsen/Norman Group усилили качество и количество своих и без того топовых публикаций, так что эта подборка всё чаще выезжает на их горбу. Некоторые из их статей совсем уж капитанские, но в основном — годнота. Они съели собаку на подтверждении работы интерфейсных паттернов и обнаружении проблем, так что доверие к их выводам повышенное.
#patterns
Nielsen Norman Group
UI Copy: UX Guidelines for Command Names and Keyboard Shortcuts
Labels for commands should be brief, informative, rely on verbs and adjectives, and avoid branded terms. Command shortcuts must limit the number of modifiers and follow standard conventions.
Пс-с-с, как насчёт свежего выпуска бесплатной инструкции по пониманию пользователей? Вы только посмотрите на эти статеечки!
1. Золотые слова David Travis из Userfocus: хватит спрашивать пользователя, какой вариант дизайна ему нравится. Это даёт ложные результаты, которые создают иллюзию принятия решений на основе данных.
2. Alan Klement предлагает свою модель Jobs to Be Done, которая очень здорово и подробно описывает предпосылки возникновения «работы», процесс выбора и «найма» продукта. Наикрутейший и ультраполезнейший чеклист ситуаций, опирающийся на десяток существовавших до этого других моделей.
3. В другой статье он разбирает интерфейс LinkedIn в рамках Jobs to Be Done. Alan говорит, что это отличный и яркий пример использования метода — соц.сеть чётко делит пользователей на 4 «работы» и грамотно продаёт каждую из них правильными словами и ценностью.
4. J. Henry McKeen продолжает рассказ о проблемах персонажей в сравнении с Jobs to Be Done.
5. Kate Kaplan из Nielsen/Norman Group показывает, как проводить пользовательские исследования для создания Customer Journey Map.
6. Karan Gupta из Dropbox описывает подход к работе с данными аналитики, пользовательских исследований и поддержки, которые дизайнеры используют в своей работе.
7. Kathryn Whitenton даёт советы для тех, кто только начинает внедрять юзабилити-тестирование в компании и встречает первичное отрицание со стандартными вопросами «это слишком маленькая выборка» и «это какие-то неправильные пользователи».
Полную версию вы, как всегда, можете прочитать в свежем дайджесте, который вылупится из черновика на следующей неделе.
#research #jtbd
1. Золотые слова David Travis из Userfocus: хватит спрашивать пользователя, какой вариант дизайна ему нравится. Это даёт ложные результаты, которые создают иллюзию принятия решений на основе данных.
2. Alan Klement предлагает свою модель Jobs to Be Done, которая очень здорово и подробно описывает предпосылки возникновения «работы», процесс выбора и «найма» продукта. Наикрутейший и ультраполезнейший чеклист ситуаций, опирающийся на десяток существовавших до этого других моделей.
3. В другой статье он разбирает интерфейс LinkedIn в рамках Jobs to Be Done. Alan говорит, что это отличный и яркий пример использования метода — соц.сеть чётко делит пользователей на 4 «работы» и грамотно продаёт каждую из них правильными словами и ценностью.
4. J. Henry McKeen продолжает рассказ о проблемах персонажей в сравнении с Jobs to Be Done.
5. Kate Kaplan из Nielsen/Norman Group показывает, как проводить пользовательские исследования для создания Customer Journey Map.
6. Karan Gupta из Dropbox описывает подход к работе с данными аналитики, пользовательских исследований и поддержки, которые дизайнеры используют в своей работе.
7. Kathryn Whitenton даёт советы для тех, кто только начинает внедрять юзабилити-тестирование в компании и встречает первичное отрицание со стандартными вопросами «это слишком маленькая выборка» и «это какие-то неправильные пользователи».
Полную версию вы, как всегда, можете прочитать в свежем дайджесте, который вылупится из черновика на следующей неделе.
#research #jtbd
Medium
The Jobs to be Done Data Model
A way to communicate, quantify, validate, and design for a Job to be Done
Собрал дайджест продуктового дизайна за февраль 2019 — https://jvetrau.com/digest-2019-feb/. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX
#digest
Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX
#digest
Свежий свежак про свежие инструменты дизайна на свежей волне весенней свежести:
Sketch: Получили $20 млн от инвестфонда Benchmark. В отличие от всех остальных компания все эти годы развивалась на деньги основателей. Но становится видно, как Figma с суммарными $82,9 млн обходит их на повороте.
Ребята тизернули планы на год — браузерная версия с совместной работой, передача макетов из коробки, командные тарифы и пространство в облаке. Правда, темпы всё равно не огонь — первую версию в браузере обещают только к концу года. За это время Figma сделает немало витков вокруг земли.
И немного плагинов:
― Динамичные стрелки для карт сайтов и переходов.
― BillUI. Генерирует вариации интерфейса с помощью алгоритмического дизайна. Можно выбрать параметры для экспериментов (цвет, радиус скругления, граница, тень) и получить быстрые наброски.
Figma: Книга Саши Окунева с подробной инструкцией работы. Thomas Lowry написал памятку по созданию библиотеки элементов. Maxime Robinet поженил инструмент с Lottie.
Haiku Animator: Инструмент сфокусировался на интерфейсной анимации и переименовался соответствующе.
Marvel: Добавили возможность пользовательского тестирования прототипов. Они помогают как с записью сессии, так и с рекрутингом. Также вышла вторая версия плагина Maze для тех же задач.
Adobe XD: Мартовское обновление. Упростилось использование наработок в Adobe Illustrator, доработки интерфейса, улучшение интеграции с Jira.
Joe Schmoe: Коллекция иллюстраций-аватаров пользователей для ваших макетов.
Populate: Огромная коллекция полу-реальных данных для макетов и прототипов. Имена людей, клички животных, адреса, цвета, музеи, художники — всего 120 списков.
AfterEffects: Jonas Naimark из Google выложил шаблон, облегчающий работу с анимацией в Material Design.
Accessible Brand Colors: Сервис подсказывает, насколько выбранные цвета хорошо работают для пользователей с ограниченными возможностями в разных контекстах — фон, шрифты разного размера и т.п.
Usabilla: Инструмент купили SurveyMonkey.
Supernova: Серьёзно обновили техническую начинку.
Рынок (нокаляеться).
#tools
Sketch: Получили $20 млн от инвестфонда Benchmark. В отличие от всех остальных компания все эти годы развивалась на деньги основателей. Но становится видно, как Figma с суммарными $82,9 млн обходит их на повороте.
Ребята тизернули планы на год — браузерная версия с совместной работой, передача макетов из коробки, командные тарифы и пространство в облаке. Правда, темпы всё равно не огонь — первую версию в браузере обещают только к концу года. За это время Figma сделает немало витков вокруг земли.
И немного плагинов:
― Динамичные стрелки для карт сайтов и переходов.
― BillUI. Генерирует вариации интерфейса с помощью алгоритмического дизайна. Можно выбрать параметры для экспериментов (цвет, радиус скругления, граница, тень) и получить быстрые наброски.
Figma: Книга Саши Окунева с подробной инструкцией работы. Thomas Lowry написал памятку по созданию библиотеки элементов. Maxime Robinet поженил инструмент с Lottie.
Haiku Animator: Инструмент сфокусировался на интерфейсной анимации и переименовался соответствующе.
Marvel: Добавили возможность пользовательского тестирования прототипов. Они помогают как с записью сессии, так и с рекрутингом. Также вышла вторая версия плагина Maze для тех же задач.
Adobe XD: Мартовское обновление. Упростилось использование наработок в Adobe Illustrator, доработки интерфейса, улучшение интеграции с Jira.
Joe Schmoe: Коллекция иллюстраций-аватаров пользователей для ваших макетов.
Populate: Огромная коллекция полу-реальных данных для макетов и прототипов. Имена людей, клички животных, адреса, цвета, музеи, художники — всего 120 списков.
AfterEffects: Jonas Naimark из Google выложил шаблон, облегчающий работу с анимацией в Material Design.
Accessible Brand Colors: Сервис подсказывает, насколько выбранные цвета хорошо работают для пользователей с ограниченными возможностями в разных контекстах — фон, шрифты разного размера и т.п.
Usabilla: Инструмент купили SurveyMonkey.
Supernova: Серьёзно обновили техническую начинку.
Рынок (нокаляеться).
#tools
Sketch
Sketch raises $20m in Series A funding from Benchmark
This funding allows us to focus on a whole new set of challenges and build an even better platform for designers and their teams.
Только я подумал, что хайп вокруг алгоритмического дизайна сошёл, как сосули с крыш по весне, так рынок сходу принёс несколько работающих инструментов. Долгое время это были либо просто экспериментальные игрушки, либо собственные решения компаний для внутренних задач. А тут можно получить результат на своём личном компьютере:
1. Bloma: Первый коммерческий инструмент от команды Creative.ai. Позволяет создавать постеры, рекламу и другие простые форматы.
2. Плагин для Sketch BillUI генерирует вариации интерфейса. Можно выбрать параметры для экспериментов (цвет, радиус скругления, граница, тень) и получить быстрые наброски.
3. Ещё один плагин генерирует правдоподобные лица несуществующих людей. Отдельный сайт от тех же авторов (есть похожие про котов и жильё).
Как обычно, генераторов всего чего угодно выше крыши:
1. Интересное сообщество Ganbreeder, где участники ремикшируют работы друг друга до бесконечности с помощью алгоритмического дизайна.
2. Симулятор вождения от Nvidia, в котором вполне реалистичный город сгенерирован с помощью алгоритмического дизайна.
3. Генератор дизайна кроссовок.
4. Ещё один генератор правдоподобных лиц может работать на основе вашей фотографии — можно менять выражение лица и другие характеристики.
И просто материалы для расширения кругозора и изучения предметной области:
1. Группа исследователей Microsoft собрала гайдлайны по дизайну продуктов, использующих технологии искусственного интеллекта. Получилось 18 эвристик, которые достаточно удобно использовать в работе. Анонс. Как использовать их в креативном процессе.
2. Издательство Harvard Business Review Press выпустило в марте 2018 года книгу Paul R. Daugherty и H. James Wilson «Human + Machine» о влиянии технологий искусственного интеллекта на рабочий процесс. Pabini Gabriel-Petit сделала неплохой обзор для UXmatters.
3. Толковая презентация Josh Clark о роли алгоритмического дизайна и том, какие работы заменят роботы, а где лучше справляется человек.
4. Годный разбор этических и законодательных проблем произведений алгоритмического дизайна. Автор проводит аналогию с фотографией, которую изначально также подвергали сомнению, а также скользкие ситуации с правами на результаты работы алгоритмов.
5. Raluca Budiu из Nielsen/Norman Group исследовала, как пользователи реагируют на рекомендательные системы. Зачастую непонятно, почему сервис выдаёт именно этот контент.
Подпишитесь на рассылку новостей алгоритмического дизайна. Не всегда новости по теме собираются быстро, зато точно ничего не пропустите.
#ai #algorithms
1. Bloma: Первый коммерческий инструмент от команды Creative.ai. Позволяет создавать постеры, рекламу и другие простые форматы.
2. Плагин для Sketch BillUI генерирует вариации интерфейса. Можно выбрать параметры для экспериментов (цвет, радиус скругления, граница, тень) и получить быстрые наброски.
3. Ещё один плагин генерирует правдоподобные лица несуществующих людей. Отдельный сайт от тех же авторов (есть похожие про котов и жильё).
Как обычно, генераторов всего чего угодно выше крыши:
1. Интересное сообщество Ganbreeder, где участники ремикшируют работы друг друга до бесконечности с помощью алгоритмического дизайна.
2. Симулятор вождения от Nvidia, в котором вполне реалистичный город сгенерирован с помощью алгоритмического дизайна.
3. Генератор дизайна кроссовок.
4. Ещё один генератор правдоподобных лиц может работать на основе вашей фотографии — можно менять выражение лица и другие характеристики.
И просто материалы для расширения кругозора и изучения предметной области:
1. Группа исследователей Microsoft собрала гайдлайны по дизайну продуктов, использующих технологии искусственного интеллекта. Получилось 18 эвристик, которые достаточно удобно использовать в работе. Анонс. Как использовать их в креативном процессе.
2. Издательство Harvard Business Review Press выпустило в марте 2018 года книгу Paul R. Daugherty и H. James Wilson «Human + Machine» о влиянии технологий искусственного интеллекта на рабочий процесс. Pabini Gabriel-Petit сделала неплохой обзор для UXmatters.
3. Толковая презентация Josh Clark о роли алгоритмического дизайна и том, какие работы заменят роботы, а где лучше справляется человек.
4. Годный разбор этических и законодательных проблем произведений алгоритмического дизайна. Автор проводит аналогию с фотографией, которую изначально также подвергали сомнению, а также скользкие ситуации с правами на результаты работы алгоритмов.
5. Raluca Budiu из Nielsen/Norman Group исследовала, как пользователи реагируют на рекомендательные системы. Зачастую непонятно, почему сервис выдаёт именно этот контент.
Подпишитесь на рассылку новостей алгоритмического дизайна. Не всегда новости по теме собираются быстро, зато точно ничего не пропустите.
#ai #algorithms
John Maeda выпустил свежий ежегодный отчёт Design in Tech Report. В этом году скорее компиляция заметных новостей в проф.сообществе, чем анализ инсайтов, как это было в первые годы и чего обычно ожидаешь от новых выпусков.
Я вообще не очень верю в ежегодные обзоры трендов (хотя, конечно же, обозреваю те что выходят (ещё)) — отрасль меняется медленнее. Многие из тенденций развиваются и живут в восходящем виде пару лет, так что видишь их кочующими в такие отчёты из года в год (виртуальная и дополненная реальность, например). Некоторые вроде «анимации», «крупной типографики» или «фоновых видео» уже стали клише в духе гэгов Бенни Хилла и про них наверняка будут вынуждены читать наши внуки.
Я разделяю дизайнерские тренды на три вида:
1. Технологические. Появление новых способов ввода и вывода информации, развитие методов обработки информации, удешевление ранее недоступных широкому пользователю продуктов, появление новых бизнес-моделей и т.п. Всё это меняет среду пользователя, в которой развиваются цифровые продукты (и наши с вами интерфейсы). Смартфоны существовали задолго до Айфона и Андроида, но благодаря грамотной переупаковке, бизнес-модели и позиционированию они стали второй массовой волной технологий после компьютеров.
2. Интерфейсные. Новые паттерны для ввода и вывода информации, а также методы изучения пользователей, проектирования взаимодействия и проверки решений. Это позволяет представить новые технологии в более дружелюбном виде, чтобы снизить порог входа и повысить отдачу от цифровых продуктов. Например, onboarding раньше считали просто серией попапов при первом входе, а сейчас — все обучающие и вовлекающие ходы в интерфейсе до тех пор, пока пользователь не станет активным.
3. Визуальные. Свежие приёмы визуального выражения. Это добавляет эстетики утилитарным решениям и позволяет дифференцировать бренды. Они постоянно ремикшируются, а многие — цикличны, сменяя друг друга раз в несколько лет (например, минимализм и декоративность).
Самое интересное — наблюдать, как эти тренды друг на друга влияют. Например, постоянное увеличение телефонных экранов мешает дотянуться пальцем до верхней части, не разбив телефон об асфальт. Поэтому мобильные ОС стараются перенести управление вниз (как прошлогодний Android или оболочка Samsung One) и переводят часть действий в жесты (где точность попадания в элемент интерфейса уже не так важна).
В этом году самая горячая тема — гибкие экраны. Текущий конский ценник в пару тысяч евро за гранью добра и зла, да и в целом устройства сырые. Но их уже можно купить, а себестоимость явно упадёт в ближайшие годы, повышая доступность. Это явно повлияет на количество приложений и развитие интерфейсных подходов, а вместе с этим приедут и новые визуальные приёмы.
Или нет — кривая хайпа Gartner показывает, что не все ожидания оправдываются. В первую очередь она про технологические тренды, но отчасти применима и к интерфейсным, и к визуальным.
Так что для действующих профессионалов ежегодные обзоры трендов полезны только в этом контексте — разделение на просто популярные практики (как та же избитая анимация или крупная типографика, изометрическая иллюстрация), набирающие обороты (кинетическая типографика, перламутровые и голографические цвета, 3D-персонажи в иллюстрации, голосовые интерфейсы и умные колонки, Jobs to Be Done) и выходящие из моды (чат-боты, метод персонажей, Мемфис). Это помогает понимать, в какие направления нужно вписываться, а где поезд уже ушёл.
Устоявшиеся практики формируют привычки и ожидания, через призму которых пользователи воспринимают новое. Так что текущие тренды во многом влияют на будущие. В том числе поэтому слежу за статистикой рынка — вместе с дайджестом она помогает трезво оценивать перспективы всех трёх типов трендов.
Кажется, на этом абзаце я обрушу ваши ожидания — разложенного по трём полочкам списка не будет, пока что просто зафиксировал ощущения от ежегодного парада тенденций. Но я большой любитель частых итераций и быстро дописываю интересные мне темы, так что в течение месяца эта заметка может изрядно подрасти.
#trends
Я вообще не очень верю в ежегодные обзоры трендов (хотя, конечно же, обозреваю те что выходят (ещё)) — отрасль меняется медленнее. Многие из тенденций развиваются и живут в восходящем виде пару лет, так что видишь их кочующими в такие отчёты из года в год (виртуальная и дополненная реальность, например). Некоторые вроде «анимации», «крупной типографики» или «фоновых видео» уже стали клише в духе гэгов Бенни Хилла и про них наверняка будут вынуждены читать наши внуки.
Я разделяю дизайнерские тренды на три вида:
1. Технологические. Появление новых способов ввода и вывода информации, развитие методов обработки информации, удешевление ранее недоступных широкому пользователю продуктов, появление новых бизнес-моделей и т.п. Всё это меняет среду пользователя, в которой развиваются цифровые продукты (и наши с вами интерфейсы). Смартфоны существовали задолго до Айфона и Андроида, но благодаря грамотной переупаковке, бизнес-модели и позиционированию они стали второй массовой волной технологий после компьютеров.
2. Интерфейсные. Новые паттерны для ввода и вывода информации, а также методы изучения пользователей, проектирования взаимодействия и проверки решений. Это позволяет представить новые технологии в более дружелюбном виде, чтобы снизить порог входа и повысить отдачу от цифровых продуктов. Например, onboarding раньше считали просто серией попапов при первом входе, а сейчас — все обучающие и вовлекающие ходы в интерфейсе до тех пор, пока пользователь не станет активным.
3. Визуальные. Свежие приёмы визуального выражения. Это добавляет эстетики утилитарным решениям и позволяет дифференцировать бренды. Они постоянно ремикшируются, а многие — цикличны, сменяя друг друга раз в несколько лет (например, минимализм и декоративность).
Самое интересное — наблюдать, как эти тренды друг на друга влияют. Например, постоянное увеличение телефонных экранов мешает дотянуться пальцем до верхней части, не разбив телефон об асфальт. Поэтому мобильные ОС стараются перенести управление вниз (как прошлогодний Android или оболочка Samsung One) и переводят часть действий в жесты (где точность попадания в элемент интерфейса уже не так важна).
В этом году самая горячая тема — гибкие экраны. Текущий конский ценник в пару тысяч евро за гранью добра и зла, да и в целом устройства сырые. Но их уже можно купить, а себестоимость явно упадёт в ближайшие годы, повышая доступность. Это явно повлияет на количество приложений и развитие интерфейсных подходов, а вместе с этим приедут и новые визуальные приёмы.
Или нет — кривая хайпа Gartner показывает, что не все ожидания оправдываются. В первую очередь она про технологические тренды, но отчасти применима и к интерфейсным, и к визуальным.
Так что для действующих профессионалов ежегодные обзоры трендов полезны только в этом контексте — разделение на просто популярные практики (как та же избитая анимация или крупная типографика, изометрическая иллюстрация), набирающие обороты (кинетическая типографика, перламутровые и голографические цвета, 3D-персонажи в иллюстрации, голосовые интерфейсы и умные колонки, Jobs to Be Done) и выходящие из моды (чат-боты, метод персонажей, Мемфис). Это помогает понимать, в какие направления нужно вписываться, а где поезд уже ушёл.
Устоявшиеся практики формируют привычки и ожидания, через призму которых пользователи воспринимают новое. Так что текущие тренды во многом влияют на будущие. В том числе поэтому слежу за статистикой рынка — вместе с дайджестом она помогает трезво оценивать перспективы всех трёх типов трендов.
Кажется, на этом абзаце я обрушу ваши ожидания — разложенного по трём полочкам списка не будет, пока что просто зафиксировал ощущения от ежегодного парада тенденций. Но я большой любитель частых итераций и быстро дописываю интересные мне темы, так что в течение месяца эта заметка может изрядно подрасти.
#trends
John Maeda | Design in Tech Report
Design in Tech Report 2019
Video-version, podcast-version, mobile-version, desktop-versions of the #DesignInTech Report from SXSW are now available as homemade, handcrafted content.
Снова набралась дюжина свежих статей для дизайн-менеджеров. Командная работа, процессы, оргструктуры, стратегия и вот это вот всё:
1. Мощная инструкция по проведению собеседований от Kurt Varner из Dropbox. Много толковых советов по вопросам, формату, портфолио, тестовым, отсеву и другим аспектам процесса.
2. Хорошая подробная памятка по проведению сессий критики дизайна от Atul Handa. Процесс, правила хорошего тона и другие нюансы.
3. Свежее на ту же тему от Rachel Krause из Nielsen/Norman Group.
4. И ещё разок ― интересный подход Budi Tanrim. Он делит встречу на три части (анализ, дискуссия и предложения) и предлагает правильное соотношение времени между ними.
5. Неплохая модель зрелости от Jared Spool. Во-первых, он разделяет зрелость компании в целом и составляющих её дизайн-команд. Во-вторых, конечной точкой «взросления» команды является момент, когда базовые навыки дизайна есть у всех сотрудников.
6. Mia Blume описывает своё видение карьерной лестницы для дизайнеров как исполнителей и менеджеров.
7. Пример диалога между ментором и его подопечной после прохождения практики. Интересно про ожидания обеих сторон.
8. Jennifer Bullard и Carol Bergantino из Veracode рассказывают о создании UX-гильдии в компании, во многом работающей по масштабируемому agile (есть отдельные продуктовые группы по функциям, хотя дизайнеры находятся в централизованной команде). Дизайнеров на всех не хватает, поэтому они сфокусировались на обучении недизайнеров, чтобы продуктовые группы были более самостоятельными и выдавали годный результат.
9. Jim Nieters пишет о разнице между лидером и менеджером. Почему важно избавить креативных специалистов от страха и другие аспекты работы хорошего руководителя.
10. Толковая памятка Славы Шестопалова из Eleks о популярных методах-помощниках при проведении брейнштормов ― шесть шляп мышления Де Боно, креативная стратегия Диснея и SCAMPER от BBDO.
11. Дизайн-студия Hawraf нашумела своим открытым подходом в последние годы. Они решили закрыть компанию, но опубликовали все рабочие документы. Процесс дизайна, работа с клиентом и т.п.
12. Блог дизайн-команды финского телеком-оператора Elisa.
Есть чем качнуть свою команду на новый уровень.
#designmanagement #designops
1. Мощная инструкция по проведению собеседований от Kurt Varner из Dropbox. Много толковых советов по вопросам, формату, портфолио, тестовым, отсеву и другим аспектам процесса.
2. Хорошая подробная памятка по проведению сессий критики дизайна от Atul Handa. Процесс, правила хорошего тона и другие нюансы.
3. Свежее на ту же тему от Rachel Krause из Nielsen/Norman Group.
4. И ещё разок ― интересный подход Budi Tanrim. Он делит встречу на три части (анализ, дискуссия и предложения) и предлагает правильное соотношение времени между ними.
5. Неплохая модель зрелости от Jared Spool. Во-первых, он разделяет зрелость компании в целом и составляющих её дизайн-команд. Во-вторых, конечной точкой «взросления» команды является момент, когда базовые навыки дизайна есть у всех сотрудников.
6. Mia Blume описывает своё видение карьерной лестницы для дизайнеров как исполнителей и менеджеров.
7. Пример диалога между ментором и его подопечной после прохождения практики. Интересно про ожидания обеих сторон.
8. Jennifer Bullard и Carol Bergantino из Veracode рассказывают о создании UX-гильдии в компании, во многом работающей по масштабируемому agile (есть отдельные продуктовые группы по функциям, хотя дизайнеры находятся в централизованной команде). Дизайнеров на всех не хватает, поэтому они сфокусировались на обучении недизайнеров, чтобы продуктовые группы были более самостоятельными и выдавали годный результат.
9. Jim Nieters пишет о разнице между лидером и менеджером. Почему важно избавить креативных специалистов от страха и другие аспекты работы хорошего руководителя.
10. Толковая памятка Славы Шестопалова из Eleks о популярных методах-помощниках при проведении брейнштормов ― шесть шляп мышления Де Боно, креативная стратегия Диснея и SCAMPER от BBDO.
11. Дизайн-студия Hawraf нашумела своим открытым подходом в последние годы. Они решили закрыть компанию, но опубликовали все рабочие документы. Процесс дизайна, работа с клиентом и т.п.
12. Блог дизайн-команды финского телеком-оператора Elisa.
Есть чем качнуть свою команду на новый уровень.
#designmanagement #designops
Medium
Design Interviewing: Ask Me Anything
A few months ago, I tweeted asking if people had questions about design interviewing. The interview and evaluation process can often feel…
Подборки о пользовательских исследованиях стали собираться на удивление бодро. Статей, само собой, хватало всегда, но в дайджест они попадали не такими большими блоками. Вот что приехало на этот раз:
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
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
Nielsen Norman Group
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.
Накануне выхода мартовского дайджеста ловите стопку разборов интерфейсных паттернов и лучших практик дизайна интерфейсов. Говоря словами Тони Роббинса, как сделать так, чтобы не сделать не так:
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
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
www.checklist.design
Checklist Design — A collection of the best design practices.
Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets.
👍1
Собрал дайджест продуктового дизайна за март 2019. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте
#digest
Напомню, что его можно получать разными способами:
— ВКонтакте
— Рассылка по почте
#digest
Не устанет рука собирать свежие инструменты дизайна, которые выпускаются на радость своим создателям (в редких случаях — и вам). Новый выводок, хватайте в охапку:
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: Ещё один инструмент дизайна, сфокусированный на адаптивных сайтах. Основан на идее «поясов», которые можно перемещать вверх и вниз по странице — как и привычные 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
Blocs - The Ultimate Website Builder for Mac and iPad
Blocs is fast, intuitive and powerful visual web design software, that lets you create responsive websites and Wordpress themes without writing code.
👍1
Хотя дизайн-системы постепенно перестают вызывать прежнее восхищение, становясь просто ключевым и обязательным рабочим инструментом современных продуктовых команд, толковые материалы и примеры есть:
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
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
YouTube
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 to manage our work - automating routine tasks to focus on the real creative stuff
#Acronis #CyberFit…
We created Acronis Design System to manage our work - automating routine tasks to focus on the real creative stuff
#Acronis #CyberFit…
👍1
Dennis Hambeukers запустил блог о дизайн-менеджменте, где описывает своё видение системного развития дизайна в компаниях (до этого он вёл аналогичный по проектированию услуг). Есть кой-чего годное:
1. Модель зрелости дизайна, которую он собрал на основе недавнего подхода InVision и классической концепции Larry Greiner 1972 года. К привычной «лесенке» добавляется сильная идея кризисов роста, которые толкают на следующий шаг.
2. Подход к изменениям в дизайне и организации. Сопроводительная статья о конкретных шагах.
3. Подход к масштабированию дизайна в компании. Сопроводительная статья с моделью пользы дизайна на разных уровнях, позволяющую перейти от дизайна продуктов к дизайну организации.
4. Модель дизайн-процесса на базе двух популярных подходов — двойного алмаза и постепенно распутывающегося клубка. Он назвал её «воздушным змеем» и в целом похоже на правду.
5. Три стадии взросления дизайн-процесса: делать, учиться, думать. По мере продвижения увеличивается и отдача от него.
6. Этапы развития дизайна (офлайновый бренд, ПО для бизнеса, ПО для конечного пользователя) и современный мир, где бренд и UX сливаются в одно целое.
7. Ключевая роль прототипирования в современном дизайн-процессе — все этапы работы над продуктом крутятся вокруг них.
Весь архив (там около 50 статей) читать вряд ли стоит (много повторений, выделенные статьи хорошо суммируют основные идеи). Но видно, что у него неплохо получаются разного рода концептуальные модели дизайна, так что полезного хватает.
#designmanagement #designops
1. Модель зрелости дизайна, которую он собрал на основе недавнего подхода InVision и классической концепции Larry Greiner 1972 года. К привычной «лесенке» добавляется сильная идея кризисов роста, которые толкают на следующий шаг.
2. Подход к изменениям в дизайне и организации. Сопроводительная статья о конкретных шагах.
3. Подход к масштабированию дизайна в компании. Сопроводительная статья с моделью пользы дизайна на разных уровнях, позволяющую перейти от дизайна продуктов к дизайну организации.
4. Модель дизайн-процесса на базе двух популярных подходов — двойного алмаза и постепенно распутывающегося клубка. Он назвал её «воздушным змеем» и в целом похоже на правду.
5. Три стадии взросления дизайн-процесса: делать, учиться, думать. По мере продвижения увеличивается и отдача от него.
6. Этапы развития дизайна (офлайновый бренд, ПО для бизнеса, ПО для конечного пользователя) и современный мир, где бренд и UX сливаются в одно целое.
7. Ключевая роль прототипирования в современном дизайн-процессе — все этапы работы над продуктом крутятся вокруг них.
Весь архив (там около 50 статей) читать вряд ли стоит (много повторений, выделенные статьи хорошо суммируют основные идеи). Но видно, что у него неплохо получаются разного рода концептуальные модели дизайна, так что полезного хватает.
#designmanagement #designops
Design Leadership Notebook
Notes on the imminent leading role of design.