Громких анонсов свежих претендентов на место Sketch пока не было, но движухи в инструментах дизайна хватает. Вот что я нашёл для вас:

Hadron (https://hadronapp.com/): новый инструмент на стыке дизайна и разработки веб-интерфейсов. Он позволяет наглядно набросать компоновку экрана, используя библиотеку компонентов из дизайн-системы в духе Framer. Анонс ― https://medium.com/@HadronApp/its-about-time-to-design-in-the-real-world-introducing-hadron-f17c460401f7.

Phase: первая версия будет сконцентрирована на создании динамики ― https://blog.prototypr.io/phase-v1-all-about-interactions-3860b57dbbf0. Во второй обещают достаточно сложную адаптивность ― https://blog.prototypr.io/layouts-in-phase-panta-rhei-2ef57ffc5442. Кстати, основатель инструмента Nick Budden выступит на Mail.Ru Design Conference 2018 — https://www.facebook.com/events/161273841218868/, так что можно будет послушать о планах из первых рук.

Adobe XD: майское обновление — https://theblog.adobe.com/may-2018-update-adobe-xd/. Появилась бесплатная версия (один публичный прототип), открыт инвестфонд на $10 млн. для создателей плагинов и расширений (https://theblog.adobe.com/investing-future-creativity-announcing-adobe-fund-design/), быстрая замена символов и массовая вставка из буфера, доработки импорта из Photoshop и Sketch.

LayoutIt (https://www.layoutit.com/build): Онлайн-инструмент позволяет быстро набросать сетку блоков для Bootstrap.

Visual Inspector (https://www.canvasflip.com/visual-inspector/): плагин для Chrome позволяет ковырять стиль сайтов в более наглядном виде, чем стандартный инспектор кода. Изменения можно обсуждать с коллегами.

Fuse: стал бесплатным и open source — https://blog.fusetools.com/announcing-fuse-open-free-ea289bbf32d0.

Spirit: вышла версия для Mac — https://spiritapp.io/.

Marvel: Maze помогает проводить юзабилити-тестирование на базе прототипов Marvel — https://maze.design/. Даёте пользователям специальную ссылку, на выходе много полезной аналитики вроде тепловых карт и времени выполнения задач.

Haiku: запустили галерею пользовательских проектов — https://share.haiku.ai/. Для чего и как это работает — https://www.haiku.ai/blog/kickstart-design-and-development-with-forks/.

Про движуху у Figma упомянул в предыдущем выпуске про дизайн-системы — https://t.me/pdigest/56. Делаем ставки, кого из перечисленных купит InVision в течение года :)

#tools

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

Здоровая критика
1. Один из лучших материалов на тему здоровой критики дизайн-мышления — http://interactions.acm.org/archive/view/may-june-2018/the-divisiveness-of-design-thinking. Jon Kolko начинает с предыстории появления основных составляющих методологии, а после этого приводит мнения за и против того, что происходит вокруг этого баззворда сейчас. Получилась одна из самых взвешенных статей на тему с отличными выводами.

2. Отличнейший здоровый взгляд Khoi Vinh на никак не умолкающую дискуссию о том, полезен ли для профессии лейбл «дизайн-мышление» или это пустой маркетинговый баззворд — https://www.subtraction.com/2018/04/02/in-defense-of-design-thinking-which-is-terrible/. Даже если кто-то использует его неправильно, это мощный инструмент для того, чтобы сделать дизайн более массовым явлением (пусть даже кто-то поначалу будет делать это неправильно).

То же самое сейчас происходит с программированием — огромное количество курсов для детей и просто начинающих наверняка породит массу дрянного кода, но это решаемая проблема. Он также полемизирует с Natasha Jen из Pentagram, чьё одиозное выступление в прошлом году — чистейший кликбейт и непонимание роли дизайнера в современных продуктах и мире в целом.

3. Richard Banfield — ещё один дизайнер, которого утомил кликбейт Natasha Jen. Он разбирает её псевдо-критику (https://medium.com/fresh-tilled-soil/design-thinking-is-bs-is-bs-b5e5d2e71c4c).

4. Jared Spool пишет о том, что методологически в дизайн-мышлении нет ничего нового — это новое название для тех подходов, которые и так давно используются в дизайне интерфейсов — https://medium.com/ux-immersion-interactions/ssh-dont-tell-them-there-s-no-magic-in-design-thinking-b95f33867656. Но термин выстрелил, поскольку помог выделить те задачи дизайнеров, которые касаются понимания проблемы, а не только производства.

5. Как и многие опытные проектировщики интерфейсов, Christina Wodtke скептически относится к хайпу вокруг «дизайн-мышления» — во многом это просто добротный процесс проектирования, который существует давно — http://eleganthack.com/how-i-stopped-worrying-and-learned-to-love-design-thinking/. Но если смириться с тем, что люди из других профессий используют термин как попало, в нём есть несколько важных дополнений к стандартному процессу: ко-дизайн, «думание руками» и итеративное моделирование идеального результата.

6. Влад Головач писал на эту же тему — https://medium.com/kulturvolk/%D0%B0%D0%BF%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%BC%D1%8B%D1%88%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-fadeec04830b.

———

Едкая критика
1. Мощный лонг-рид Lee Vinsel с глубокой критикой дизайн-мышления — https://medium.com/@sts_news/design-thinking-is-kind-of-like-syphilis-its-contagious-and-rots-your-brains-842ed078af29. Он копает в сторону нездорового отношения к понятию «инновации» и абстрактному желанию «переизобрести что-нибудь» без попытки осознать, как эта вещь или явление работает и в чём именно его проблемы. Дизайн-мышление — отличный способ популяризации вдумчивого дизайн-процесса для недизайнеров; проблема в том, что зачастую всё заканчивается просто на уровне простого выплеска «креативной энергии».

#designthinking #discourse

История, ROI, проблемы внедрения и всё такое
1. Феерически крутое исследование корней дизайн-мышления от Jo Szczepanska — https://medium.com/@szczpanks/design-thinking-where-it-came-from-and-the-type-of-people-who-made-it-all-happen-dc3a05411e53. Она копает с середины 20го века от работ Buckminister Fuller и скандинавских практик кооперативного дизайна. Каждое десятилетие отмечено изменениями как самого метода, так и сфер его применения. Ключевые фигуры, книги, цитаты — просто золото!

2. Forrester провели по заказу IBM опрос-исследование экономического выхлопа от внедрения практик дизайн-мышления — https://www.ibm.com/design/thinking/static/media/Enterprise-Design-Thinking-Report.8ab1e9e1.pdf. Цифры радужные. Краткий обзор — https://medium.com/design-ibm/a-new-study-on-design-thinking-is-great-news-for-designers-593f71b40627

3. Martin Kupp, Jamie Anderson и Jörg Reckhenrich рассказывают о проблемах, с которыми сталкиваются классические организации при внедрении практик дизайн-мышления — http://sloanreview.mit.edu/article/why-design-thinking-in-business-needs-a-rethink/. Процессные и культурные особенности таких компаний противоречат многим установкам итеративной совместной работы, поэтому важно решить их, чтобы избежать провала.

4. Мини-статья Tim Brown из IDEO о том, что по мере распространения дизайн-мышления оно перестает быть конкурентным преимуществом для компаний — https://hbr.org/2015/08/when-everyone-is-doing-design-thinking-is-it-still-a-competitive-advantage. Видимо, поэтому они решили, что в профессии давненько не было новых баззвордов и в конце 2016го запустили руководство по циклическому дизайну — http://circulardesignguide.com/. Берём дизайн-мышление, устойчивое развитие, гибкие и lean-методики и — вуаля! — новый метод готов. Срочно обновляем профессиональные профили.

———

Меня, конечно, и самого бомбит от того, что привычный процесс проектирования называют маркетинговым баззвордом. Но если это помогает донести идеи и ценность хорошего дизайна до менеджеров и разработчиков — готов называть процесс как угодно. Характерно, что и поисковые запросы «design thinking» уделывают «UX» в разы — видно, что термин понятнее людям.

#designthinking #discourse

Массовые рассылки сервисов для соответствия требованиям европейского законодательства GDPR стали главным мемом конца мая. К сожалению, многие делали это крайне топорно, так что интернет приобрёл черты бюрократической конторы, где люди должны заполнять бесконечные и не очень понятные бланки. Сайт собрал самые убогие подходы к решению проблемы ― https://gdprhallofshame.com/. Ну и небольшая инструкция по тому, как учесть требования GDPR в дизайне ― https://uxdesign.cc/3-things-to-keep-in-mind-before-you-design-for-gdpr-92cc6b591fbc.

Другие, здоровые интерфейсные паттерны:

1. Один из новых интересных интерфейсных паттернов ― предугадывание движения курсора мыши к важному элементу на экране ― https://tympanus.net/codrops/2018/05/02/ideas-for-proximity-feedback-with-progressive-hover-effects/. Mary Lou показывает несколько примеров реализации ― это помогает экономить время и силы.

2. Дизайн-студия Creative Navy рассказывает о своём опыте проектирования POS-интерфейсов для кассиров. Хороший обзор особенностей использования и лучших практик ― https://medium.com/uxjournal/pos-ux-design-part-one-the-16-ux-factors-in-point-of-sale-b94661936eea. Часть 2 ― https://medium.com/uxjournal/the-design-principles-in-the-pos-system-pos-design-guide-part-2-57d1bcb30ac0.

3. John Ogata и JonDelina ‘JD’ Buckley сравнили обычные бумажные инструкции и более современные, с использованием дополненной реальности ― https://www.uxmatters.com/mt/archives/2018/05/measuring-usability-in-a-lean-assembly-environment.php. Это сценарий использования AR продвигает каждое новое поколение устройств и он действительно позволяет сократить количество ошибок и ускорить процесс.

4. Коллекция интерфейсных паттернов в виде видео-записей прохода по сценариям ― https://pageflows.com/.

5. Julie A. Kientz, Lisa Anthony и Alexis Hiniker делятся опытом проектирования интерфейсов для детей ― http://uxpamagazine.org/playful-interfaces/. Они дают неплохие практические советы по особенностям таких интерфейсов.

Feel free to check out my updated terms & conditions, как говорят в одних известных интернетах.

#patterns

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

1. Отличная статья Alastair Simpson о трёх стадиях роста дизайн-менеджера: первый опыт управления дизайнерами, управление другими дизайн-менеджерами и работа с целым портфелем продуктов — https://medium.com/designing-atlassian/learning-to-let-go-as-a-design-leader-part-1-4e7b92774db0. Он даёт советы по тому, как грамотно вести себя на каждом из них. Часть 2 ― https://medium.com/designing-atlassian/learning-to-let-go-as-a-designer-leader-part-2-5f6427d6f204.

2. Интервью с Eik Brandsgård из LEGO о внедрении практики дизайн-спринтов в компании ― https://uxplanet.org/how-lego-run-design-sprints-at-scale-47bf56b785f7. Они решили сделать революционные, а не эволюционные изменения и запустили одновременный процесс с десятками команд. Для этого пришлось приостановить всю работу на два месяца, но по его словам, результат того стоил.

3. Конференция Enterprise UX 2017 прошла 7-9 июня в Сан-Франциско, США. Обзор первого (https://www.uxmatters.com/mt/archives/2018/04/review-enterprise-ux-2017-part-2-conference-day-1-2.php) и второго дня (https://www.uxmatters.com/mt/archives/2018/05/review-enterprise-ux-2017-part-3-conference-day-2.php) выступлений от Pabini Gabriel-Petit.

4. Julian Shapiro даёт пачку советов владельцам дизайн-студий по грамотной организации работы над проектами и бизнеса в целом ― https://www.julian.com/blog/running-an-agency. Интересно, что его видение проектной работы похоже на работу продуктовых команд.

5. Dave Malouf описывает ценность дизайн-команды для компании по нескольким срезам ― https://medium.com/amplify-design/how-does-designops-increase-your-design-value-7c7ace84660f. Получился чеклист по организационным вопросам.

Кстати, черновик свежего дайджеста уже готов, так что всё это и ещё сотня-другая ссылок на подходе.

#designmanagement

Вчера анонсировали iOS 12 — https://www.apple.com/ios/ios-12-preview/. С точки зрения интерфейса изменений немного, основной упор сделан на повышение производительности (iOS 11 была одной из самых сырых и глючных). Причём её можно будет поставить на те же устройства, что работали с прошлой версией — пул доступных устройств получается шире.

Неплохие обзоры обновления сделали The Verge — https://www.theverge.com/2018/6/4/17417730/apple-ios-12-iphone-update-best-features-wwdc-2018 и Engadget — https://www.engadget.com/2018/06/04/apple-ios-12-update-wwdc-2018/. Какие визуальные и интерфейсные нюансы можно отметить:

1. iOS-приложения можно будет портировать для MacOS — https://www.engadget.com/2018/06/04/apple-ios-apps-mac-cross-platform-sort-of/. Пока это сделано для некоторых приложений Apple, со следующего года станет доступно сторонним разработчикам. Но это не объединение платформ, о чём мечтают многие.

2. Уведомления от приложений складываются в стопки — https://cdn.vox-cdn.com/thumbor/m_Y8ggxPlX7nqaMl6dXJxKHTDRA=/1600x0/filters:no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/11476969/groupednotif.gif
и https://www.engadget.com/2018/06/04/ios-12-grouped-notifications/.

3. Apple Books (бывший iBooks) использует шрифт с засечками для заголовков — https://o.aolcdn.com/images/dims?resize=2000%2C2000%2Cshrink&image_uri=https%3A%2F%2Fs.blogcdn.com%2Fwww.engadget.com%2Fmedia%2F2018%2F06%2Fwwdc18-501.jpg&client=a1acac3e1b3290917d92&signature=36b48b85f9a0abf7890f06b46f3acf5ab0c7bd97 и https://www.engadget.com/2018/06/04/apple-books-replaces-ibooks-ios-12/. Палитра визуального языка становится ещё богаче.

4. Как и свежий Android, платформа будет помогать бороться с телефонной зависимостью — https://www.engadget.com/2018/06/04/ios-12-will-help-you-fight-your-phone-addiction/. Неплохой пример экрана с инфографикой оттуда — https://www.apple.com/ios/ios-12-preview/overview/screentime/image_large_2x.jpg.

5. Ещё один стиль кнопок в action sheets — https://www.apple.com/ios/ios-12-preview/overview/notifications/image2_large_2x.jpg.

6. Apple, Adobe и Pixar продвигают единый стандарт файла для описания дополненной реальности — https://www.engadget.com/2018/06/04/apple-pixar-adobe-standardized-ar-file-format/.

7. Shortcuts, своя версия IFTTT на базе купленного продукта Workflow — можно создавать собственные операции для Siri, которые затрагивают несколько действий в разных приложениях — https://www.theverge.com/2018/6/4/17414648/siri-update-new-features-apple-wwdc-2018.

8. Автоподстановка кодов подтверждения, которая поможет мобильным банкам.

9. Умельцы раскопали намёк на тёмную тему — https://developer.apple.com/documentation/uikit/uiuserinterfacestyle?changes=latest_minor. Она появится в новом MacOS, в iOS была в некоторых приложениях (например, будильник).

Короче, для дизайнеров новостей мало, получился скорее релиз про полировку и оптимизацию. Полный список изменений — https://www.apple.com/ios/ios-12-preview/features/. iOS 12 будет доступна в сентябре, но уже сейчас можно поставить бета-версию — https://beta.apple.com/sp/betaprogram/.

#ios #mobile

Собрал дайджест продуктового дизайна за май 2018 ― https://jvetrau.com/digest-2018-may/. Спасибо ребятам из Setka за редактор статей и помощь в работе с ним.

Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX

И снова кучно пошло на фронте новых инструментов дизайнера интерфейсов:

1. ToyBox (http://toyboxsystems.com/): создатели перенесли концепцию линтинга из разработки в работу над дизайн-системами. Это серия инструментов (отдельная продукт Measure и плагин Roller для Sketch), которые помогают сравнивать идеальное видение дизайна с реализацией. Они показывают расхождения в макетах и реальном продукте, что облегчает отслеживание косяков. Пока доступен только плагин и они работают только с цветами и шрифтами, но сама задумка крайне интересная.

Это не всё новьё:

2. Sketch.systemsSketch.systems (https://sketch.systems/): Инструмент помогает определить все альтернативные и краевые состояния интерфейса — взаимодействие с курсором (наведение, фокус), нулевое, ошибки, загрузка и т.п. Сначала описываете его в виде списка, потом добавляете внешний вид.

3. Axure: анонсирована бета-версия Axure RP 9 — https://www.axure.com/blog/new-in-9. Обещают переработанный интерфейс и полностью переписанную версию для Windows.

4. Framer: тизернули Framer X, серьёзное обновление продукта осенью — https://framer.com/announcement. Информации кроме загадочного видео (https://www.youtube.com/watch?v=bDGDsxn67d4) и пары слов Koen Bok (https://www.facebook.com/groups/framerjs/permalink/1533856133408119/) нет, но там обещают работу с React — есть шанс, что появится ещё один инструмент дизайна для связки с дизайн-системами.

А вот что свежего про инструменты было в недавнем дайджесте — https://jvetrau.com/digest-2018-may/:

5. Apply Matter (https://www.applyds.com/): ещё один инструмент для дизайнеров, который обещает экспорт макетов в код. В комплекте идёт аналитика и другие полезные ништяки.

6. InVision: анонсировали платформу для плагинов к Studio — https://www.invisionapp.com/studio/platform. Как и Adobe XD, они будут давать гранты лучшим разработчикам из своего Design Forward Fund — https://www.invisionapp.com/design-forward-fund. Порог входа для новых инструментов опять увеличился, теперь платформами себя называют все 4 ключевых игрока — Adobe, Figma, InVision, Sketch.

7. Marvel: инструмент открыл API и также стал платформой — https://marvelapp.com/developers. Первые интеграции (https://marvelapp.com/features/integrations) достаточно базовые — Slack, Dropbox, Sketch. Из действительно интересных — Maze (юзабилити-тестирование на базе прототипов Marvel), Lookback и Niice (мудборды).

8. Overflow: вышла публичная бета ― https://blog.overflow.io/announcing-overflow-public-beta-33fafc45d357.

9. Avocode: Выпустили отчёт о популярности тех или иных приёмов работы с макетами за 2017 год ― https://avocode.com/design-report-2017. Дизайнеры стали использовать меньше слоёв и больше систем контроля версий.

10. Wired Elements (https://wiredjs.com/): Коллекция элементов интерфейса на HTML и CSS для стилизации прототипов под бумажные скетчи.

11. Whimsical: История работы над инструментом ― https://whimsical.co/design/fast-collaborative-wireframing-app/.

Бодро идёт, несмотря на начало лета. И это мы ещё не видели Sketch 51, который вот-вот объявится. Кстати, не забудьте переподписаться на рассылки инструментов ― чёртов GDPR сбросил многие из них.

#tools

InVision выпустили электронную книгу о DesignOps ― набирающем обороты термине-аналоге «UX-стратегии» и «дизайн-менеджмента» ― https://www.designbetter.co/designops-handbook. Авторы: Dave Malouf (Digital Ocean), Collin Whitehead (Dropbox), Meredith Black (Pinterest), Kate Battles (Fitbit). Организационные модели, координация команд, Research Ops.

Про формирование Research Ops недавно написала Saskia Liebenberg из Deliveroo ― группы, которая поможет исследователям внутри продуктов ― https://medium.com/deliveroo-design/introducing-research-ops-at-deliveroo-1e4deb141847. Правда, большинство UX-лабораторий и так работают в формате внутреннего агентства, которое помогает всем продуктам. Charlotte Clancy описала роли в этой команде ― https://medium.com/deliveroo-design/elevating-the-impact-of-our-research-3267068937fe.

Кстати, у одноимённой конференции DesignOps Summit 2018 от Rosenfeld Media появилась дата проведения ― https://rosenfeldmedia.com/designopssummit2018/ ― 7-9 ноября в Нью-Йорке. Хотел попасть ещё в прошлом году, но не сложилось ― в этот раз точно доберусь. Моргните, если вы тоже едете.

Вот ещё несколько свежих статей на тему дизайн-менеджмента (или как ещё его назовут через два года):

1. Marco Di Costanzo из IBM описывает подход компании к поиску ключевых моментов в продукте и фокусе всех активностей дизайна и продуктовых команд в целом на них ― https://medium.com/design-ibm/have-you-defined-your-products-core-experiences-b995af69fdc0. Отличный пример того, как дизайнеры могут повысить ценность своей работы.

2. Shaun Archer из Capital ONE описывает типовые проблемы при планировании и проведении дизайн-спринтов ― https://medium.com/capitalonedesign/why-your-design-sprints-always-end-in-tears-5f883c07124a.

3. Команда Airtable показывает, как использовать инструмент для приоритезации продуктового плана по нескольким подходам ― https://blog.airtable.com/3-ways-to-prioritize-your-product-roadmap-with-a-matrix/.

4. Eliel Johnson, глава дизайна Charles Schwab, рассказывает о том, как устроена дизайн-команда в компании ― https://www.invisionapp.com/blog/charles-schwab-design/.

Ops, I did it again! Дизайнеры, как цыгане, постоянно кочуют от тренда к тренду и любят новые блестящие штуки ― термин и концепцию DevOps уже натягивают на дизайн-системы (Design Systems Ops). Бежать и перекрашиваться в новые определения каждые полгода не обязательно, но понимать движуху и её причины полезно ― мы все стремимся сделать инициативы по дизайну системнее и масштабнее.

#designmanagement

Любимые издательства O'Reilly и Rosenfeld Media продолжают выпускать толковые книжки для дизайнеров интерфейсов. Вот что произошло за последние пару месяцев (кстати, ко многим из них есть бесплатные отрывки):

1. Rosenfeld Media: Chris Risdon и Patrick Quattlebaum «Orchestrating Experiences» — https://rosenfeldmedia.com/books/orchestrating-experiences/. Она посвящена проектированию карты взаимодействия пользователя с продуктом в широком смысле, причём авторы старались не ограничиваться цифровыми продуктами или услугами. A List Apart публикует часть 2 из неё — http://alistapart.com/article/orchestrating-experiences.

2. O’Reilly: второе издание Theresa Neil «Mobile Design Pattern Gallery» — https://www.safaribooksonline.com/library/view/mobile-design-pattern/9781449368586/. Они публикуют главу 1 из неё — https://www.oreilly.com/ideas/how-to-enhance-the-navigation-experience-on-mobile-devices. Правда, примеры настолько морально устарели, что я несколько раз перечитал дату публикации — странноватый подход к обновлению.

3. Вышел перевод книги Raph Koster «Theory of Fun for Game Design» — https://www.books.ru/books/razrabotka-igr-i-teoriya-razvlechenii-4872136/?show=1. Она рассказывает о предыстории появления компьютерных игр и теории развлечений в целом. Сайт книги — https://www.theoryoffun.com/.

4. O’Reilly: John Alderman и Christine W. Park «Designing Across Senses» — https://www.safaribooksonline.com/library/view/designing-across-senses/9781491954232/. Они публикуют часть 1 из неё, посвящённую работе с разными чувствами в цифровых продуктах — https://www.oreilly.com/ideas/returning-to-our-senses. Профессия прошла интересный цикл от их внимательного учёта в пром.дизайне до сильного упрощения в эпоху экранных интерфейсов, а теперь целостный подход возвращается.

5. Smashing Magazine открыли предзаказ на свою «Smashing Book 6: New Frontiers in Web Design» — https://www.smashingmagazine.com/2018/06/meet-smashing-book-6/. Они опубликовали отрывок из главы от Виталия Фридмана — https://www.smashingmagazine.com/2018/06/bringing-personality-back-to-the-web/.

Также открылся предзаказ на:

1. Jorge Arango «Living in Information» от Rosenfeld Media — https://rosenfeldmedia.com/books/living-in-information/. В следующем году у них появится ещё 6 книг — https://rosenfeldmedia.com/books/#books-upcoming.

2. Pamela Pavliscak «Designing for Happiness» — http://shop.oreilly.com/product/0636920049036.do.

3. Austin Govella «Hacking Product Design» — http://shop.oreilly.com/product/0636920057895.do.

4. Amber Case и Aaron Day «Designing Products with Sound» — http://shop.oreilly.com/product/0636920051923.do.

У самых счастливых отпуска уже начались, так что будет что почитать в ленивом режиме.

#books

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

Figma 3.0 (https://blog.figma.com/figma-3-0-217d6c248f85): Улучшение прототипирования, полноценная версия анонсированных ранее стилей, управление организацией.

Плагины:
— Relay (https://relayforfigma.com/) позволяет экспортировать графику из макетов Figma прямо в репозиторий разработки.

Zeplin 2.0 (https://blog.zeplin.io/introducing-zeplin-2-0-components-and-a-ton-more-goodies-7c09dacc1f48): Теперь вместе с общими стилями макета показываются и компоненты (символы) — на старте Sketch, позже появится Figma и Adobe XD. Вдовесок — пачка улучшений интерфейса.

Avocode 3 (https://blog.avocode.com/introducing-avocode-3-worlds-first-truly-cross-platform-design-hand-off-tool-b204d518e07f): Работает на Windows, Mac и Linux, можно загружать макеты из Sketch, Photoshop, Adobe XD. Обещают добавить поддержку Illustrator.

Adobe XD: июньское обновление — https://theblog.adobe.com/june-2018-release-adobe-xd-overlays-fixed-elements/. В основном тюнинг по стандартным функциям для инструмента дизайна интерфейсов.

Sketch: Полноценное решение для экспорта макетов Sketch в код на React — https://sketch2react.io/. Это плагин и фреймворк, которые позволяют быстро получить адаптивный прототип. Они используют сетку Bootstrap 4 и шрифты с Google Fonts. Анонс — https://medium.com/sketch-app-sources/introducing-sketch2react-design-with-code-inside-of-sketch-47cd90eab220.

Плагины:
— Meng To запустил онлайн-курс по созданию плагинов для Sketch — https://designcode.io/sketch-plugin.
— Easing Gradient делает градиенты более плавными — https://github.com/larsenwork/sketch-easing-gradient.

Gravit: Corel купил инструмент — https://medium.com/gravitdesigner/welcoming-gravit-to-the-corel-family-9cd0c7f3a32c. Самое время для стандартных шуток «а что, они ещё живы?».

Webflow: Шаблон для wireframes — http://vireflow.webflow.io/about.

Phase: Команда рассказывает о том, как будут устроены библиотеки компонентов — https://blog.prototypr.io/libraries-everything-is-a-component-f62bf7251494. Обещают недостающий в текущих инструментах уровень переменных, на основе которых строятся и компоненты в коде.

Скорость такая, что пока я опубликую этот мини-дайджест, к вечеру появится какой-нибудь Sketch 51 — уже больше месяца не было крупных релизов.

#tools

Сяду на свой любимый конёк дизайн-систем и накидаю свежих ссылок по теме за последние недели:

1. Дизайн-система британских государственных сайтов — https://design-system.service.gov.uk/. Её части были доступны и раньше, но теперь собрали воедино и расширили. Команда дизайн-системы включает инициативные группы из разных подразделений — https://gds.blog.gov.uk/2018/06/22/introducing-the-gov-uk-design-system/. Кстати, они дотошно тестируют компоненты и паттерны на пользователях. Осенний тизер с рассказом о целях — https://gds.blog.gov.uk/2017/10/30/building-the-gov-uk-design-system/.

2. Студия Sparkbox провела опрос среди 400 дизайнеров и разработчиков, работающих над дизайн-системами (86 продуктовых команд) — https://designsystemssurvey.seesparkbox.com/. Получились достаточно характерные ответы о том, для чего им нужна такая инициатива и какую пользу она приносит продукту и самим дизайнерам.

3. CSS Stats: анализирует CSS сайта и показывает использующиеся визуальные стили: цвета, шрифты, отступы — https://cssstats.com/. Отличный способ найти проблемы внедрения дизайн-системы.

4. Nathan Cutis продолжает свой универсальный справочник по описанию компонентов в дизайн-системах. Четвёртая часть о правилах использования — https://medium.com/eightshapes-llc/component-design-guidelines-eca706100e7c. Чуть раньше он писал об инструкциях для разработчиков по использованию дизайн-системы — https://medium.com/eightshapes-llc/getting-developers-started-with-a-design-system-d814fd390389.

5. Dan Mall рассуждает, должна ли каждая дизайн-система описывать все возможные компоненты или только те, что реально нужны по специфике продукта — http://danmall.me/articles/distinct-design-systems/. Он собрал сравнительную таблицу доступных компонентов для семи известных дизайн-систем.

6. Elliot Dahl показывает примеры реализации шрифтовой сетки в соответствии с 8-пиксельным микро-модулем — https://medium.freecodecamp.org/8-point-grid-typography-on-the-web-be5dc97db6bc.

7. Docz (https://www.docz.site/): фреймворк для описания живых гайдлайнов для дизайн-систем.

Есть что почитать, есть что поковырять на предмет вдохновения. Удачной систематизации дизайна!

#designsystems

Баззворд «DesignOps» грозится вытеснить «UX-стратегию» и другие термины для описания дизайн-менеджмента. Он периодически всплывал в последние годы, но с подачи свежей методички от InVision (https://t.me/pdigest/67) ворвался на вершину хайпа. Термин не создаёт новый смысл (дизайн-менеджмент, UX-стратегия, дизайн-лидерство говорят про то же), скорее называет уже существующее по-новому.

Походу, придётся переименовывать мою серию статей — https://www.uxstrategy.co/. Не то чтобы я бежал за каждым трендом, но DesignOps лучше описывает инициативную группу, которая улучшает инфраструктуру компании для реализации хорошего дизайна — кто и как это делает. Это не просто про работу над конкретным продуктом — скорее про то, как системно улучшить работу разных продуктовых команд. Централизованные дизайн-команды и так живут по этому принципу; в более современной модели а-ля Spotify речь об отдельной команде, которая работает с остальными по внедрению лучших практик.

Чёрт, это попахивает терминологическим спором, самой бесполезной тратой времени после создания погодного чат-бота. Но иногда от этого не скрыться и не все обновления терминов плохи. Jared Spool говорит, что «что-нибудь»-ops — это новое «что-нибудь»-мышление (https://twitter.com/jmspool/status/980631043614134274). Fabricio Teixeira собрал предысторию появления понятия — https://uxdesign.cc/designops-the-questions-youre-probably-asking-yourself-now-fdac491bfe4f (хотя его трактовка термина спорная).

Ладно, хорош трепаться, время свежих ссылочек. Жемчужина в моих новых подписках — блог дизайн-команды Athena Health — https://medium.com/athenahealth-design. В нём много отличных публикаций о дизайн-менеджменте…, тьфу, DesignOps:

1. Scott Mackie описывает подход компании к управлению дизайном на разных уровнях — https://medium.com/athenahealth-design/embedding-product-design-in-a-large-agile-organization-d3b5063d656c. Отличная современная модель — и в плане организации, и в плане методов, и в плане отслеживания результатов.

2. Он же пишет об организации дизайн-команд — https://medium.com/athenahealth-design/creating-a-dual-track-design-leadership-structure-for-large-teams-a8fbe9aba577. У неё два руководителя — эксперт по управлению и по предметной области. В статье неплохое описание специфики каждой из ролей.

3. Jennifer Cardello рассказывает об обновлённом устройстве команды пользовательских исследований — https://medium.com/athenahealth-design/scaling-user-research-in-an-agile-r-d-organization-71f9be1097e2. Отличный набор инструментов, который помогает масштабировать пользу от исследований.

4. Она же описывает структуру DesignOps в компании — https://medium.com/athenahealth-design/how-we-approach-designops-at-athenahealth-8997a1b16ce5. Очень системный и грамотный подход.

5. И снова она рассказывает о масштабном редизайне продукта и том, как дизайн-команда выбрала точки фокуса и измеряла улучшение по ним — https://medium.com/athenahealth-design/establishing-a-design-quality-metric-to-build-design-credibility-61236b8a4567.

Из пяти конференций на тему дизайн-менеджмента (LX Conference, UXSTRAT, Leading Design, DesignOps Summit, Enterprise UX) две проводят Rosenfeld Media. Natalie Hanson регулярно бывает на последней и пишет крутые обзоры выступлений. Вот свежий, на ту, что была 13-15 июня — https://nataliehanson.com/tag/eux18/.

Кстати, открылась продажа билетов на DesignOps Summit 7-9 ноября в Нью-Йорке — https://rosenfeldmedia.com/designopssummit2018/register/?mc_cid=9eea776357&mc_eid=5877482e69 (до 17 июля можно получить хороший скидос). Я уже в деле (пойду на мастер-класс Peter Merholz и Kristen Skinner). Айда вместе :)

P.S. Есть билеты и на Leading Design 10-12 октября в Лондоне (https://2018.leadingdesignconf.com/), но туда эконом-вариант разобрали за пару дней.

#designmanagement #designops

Аня Булдакова, продакт-менеджер в Facebook (а до этого ― в Яндексе и Intercom), рассказывает про аспекты разработки и развития продукта на канале No Flame No Game ― https://t.me/proproduct.

Аня делится советами из собственного опыта (вот, например, про принятие решений ― https://t.me/proproduct/663), рассказывает про полезные книжки и переводит статьи (вот краткое изложение на русском книги про Jobs To Be Done ― https://medium.com/no-flame-no-game/%D1%87%D1%82%D0%BE-%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-jobs-to-be-done-%D0%B8-job-stories-4c57c1dc84cf), а также порой приглашает в гости крутых продуктовых ребят ― например, недавно вышло интервью с Михаилом Карповым, директором по продукту в Skyeng ― https://www.youtube.com/watch?v=0bYH-ywcIjM.

Подписывайтесь → @proproduct

Собрал дайджест продуктового дизайна за июнь 2018 ― https://jvetrau.com/digest-2018-jun/. Спасибо ребятам из Setka за редактор статей и помощь в работе с ним.

Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX

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

1. Siddhant Mehta из команды мобильного Microsoft Outlook рассказывает, как они используют GitHub как полноценную среду для ведения продуктовых задач — https://medium.com/microsoft-design/github-for-product-and-design-collaboration-b9107177f5b0. Интересный график коммитов в середине статьи, который хорошо показывает наиболее активные фазы работы над дизайном.

2. Термин DesignOps знатно пошумел в июне, собрал все ссылки про него из своих закромов — https://vk.com/@pdigest-designops-definition.

3. Alan Klement приложил метод персонажей и его защитников, пытающихся доказать, что они не привязаны к демографическим данным, которые уводят фокус продуктовой команды от поведения ― https://jtbd.info/yes-personas-focus-on-demographics-and-how-to-fix-that-f27c02498e9d. Даже если фото и небольшое описание контекста занимают небольшую часть описания персонажа, они всё равно искажают мышление.

4. Шикарная историческая справка Inês Almeida о том, как развивалось использование гибких методологий в бизнесе и к каким проблемам для единого customer experience это привело — http://www.apdgroup.com/scaling-agile-not-path-business-agility/.

5. Годная статья Yohann Kunders из ChargeBee о том, как не просто встретить нового пользователя, а сделать его активным — https://www.chargebee.com/blog/beyond-user-onboarding/. Он выделяет работу над «первой милей» и «энной» — это две разные задачи, которые одинаково важны для успеха пользователя.

Полный выпуск — https://jvetrau.com/digest-2018-jun/.

Напомню, что дайджест можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX

Будущее у голосовых интерфейсов получше, чем у покрывающихся пылью ботов. Продажи устройств бодро растут, а основные платформы стремительно обзаводятся партнёрствами и интеграциями во всё, что подключено к электричеству и интернету. К концу года прогнозируют 100 миллионов устройств (https://voicebot.ai/2018/07/10/smart-speakers-to-reach-100-million-installed-base-worldwide-in-2018-google-to-catch-amazon-by-2022/); уже 20% американских семей имеют умную колонку (https://www.comscore.com/Insights/Blog/Smart-Speaker-Penetration-Hits-20-Percent-of-US-Wi-Fi-Households). Ну а отечественные хайпожоры вчера стояли в очереди за Алисой. Были вы там или нет, изучить тему полезно.

Главная книжка — Designing Voice Interfaces от Cathy Pearl — https://www.safaribooksonline.com/library/view/designing-voice-user/9781491955406/. Она, кстати, руководит дизайном Google Assistant и описывала недавно основные особенности проектирования голосовых интерфейсов ― https://www.uxmatters.com/mt/archives/2018/05/making-the-shift-from-designing-guis-to-designing-vuis.php.

У каждой крупной платформы есть гайдлайны по проектированию интерфейсов для них:
1. Amazon Alexa — https://developer.amazon.com/alexa-skills-kit/design.
2. Google Assistant — https://designguidelines.withgoogle.com/conversation/
3. Microsoft Cortana — https://docs.microsoft.com/en-us/cortana/voice-commands/voicecommand-design-guidelines
4. Apple Siri — https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/siri/
5. Яндекс Алиса — гайдлайнов по дизайну пока нет, но есть общая документация https://tech.yandex.ru/dialogs/alice/doc/development-docpage/

Лучше всего развита экосистема Alexa — для неё хватает инструментов и интересных экспериментов (у платформы более 50% рынка). Например:

1. Онлайн-сервис Storyline для создания навыков — https://getstoryline.com/.

2. Echoism для их тестирования — https://echosim.io/.

3. Rafal Cymerys из Upside показывает эксперимент по голосовому управлению StarCraft II на базе Alexa — https://blog.upsidelab.io/design-voice-user-interface-starcraft/. Он неплохо подходит для операций, включающих последовательность нескольких примитивных действий, хотя базовые операции всё же проще делать через мышь и клавиатуру.

4. Хватает голосовых игр и квестов вроде Jurassic World — https://www.engadget.com/2018/06/22/jurassic-world-revealed-alexa-voice-game/. Есть интересные комбинации с настолками — https://www.engadget.com/2018/06/29/alexa-when-in-rome-board-game/. И даже Skyrim в ироничном виде — https://www.polygon.com/e3/2018/6/11/17448080/skyrim-alexa-iphone-android-how-to-play.

Кучу свежих новостей и актуальной статистики можно найти на сайте Voicebot — https://voicebot.ai/. А вот просто парочка относительно свежих статей на тему:

1. Несколько стендап-комиков оценили юмор умных помощников Amazon Alexa, Apple Siri, Google Assistant и Microsoft Cortana — https://www.engadget.com/2018/06/26/siri-alexa-cortana-google-jokes/. Например, в Google работает отдельная команда писателей, которые обеспечивают шутки.

2. Jacky Li из Connected Lab провел несколько пользовательских исследований на тему управления функциями машины с помощью сенсорного экрана и голоса — https://uxdesign.cc/why-touchscreens-dont-work-in-cars-69b6ff3d4355. Сенсорные экраны, очевидно, отвлекают водителя. Но и голосовое управление не лучше (свежая статья Nielsen/Norman Group приводит конкретные причины — https://www.nngroup.com/articles/distracted-driving-ux/).

3. Памятка Frederik Goossens по проектированию голосовых интерфейсов — https://www.toptal.com/designers/ui/designing-a-vui.

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

#voiceui

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

persP (https://try.persp.info/): Ещё один новый инструмент дизайна, который играет на поле Figma ― одновременная работа нескольких дизайнеров в браузере. Заявлен весь комплект современных возможностей (прототипирование, обсуждение экранов, адаптивность, символы/компоненты). Из новых идей ― поддержка нескольких языков в макете, экспорт макетов в код и загрузка на сервер, быстрый просмотр на телефоне через QR-код. Анонс от создателей ― https://blog.prototypr.io/and-finally-the-day-has-come-world-this-is-persp-13269d6181bf.

Sketch 51 (https://blog.sketchapp.com/styles-in-libraries-and-fixed-elements-in-prototyping-in-sketch-51-aab4074c3f46): Теперь стили можно добавить в библиотеки. Много небольших доработок по прототипированию и основному интерфейсу. Плагины:
― Timeline 2.0 (https://medium.com/sketch-app-sources/timeline-2-0-interaction-design-for-sketch-f6fc0a852c8a): надстройка от Anima стала ещё мощнее и сделала упор на интерактивные компоненты, код которых можно выгрузить (пока голый HTML/CSS/JS, но обещают React, VueJS, Angular, Lottie, iOS и Android).

Affinity Designer для iPad (https://affinity.serif.com/ru/designer/ipad/): Вышла планшетная версия приложения. Первое время можно купить со скидкой 30%. Кстати, можно почитать пошаговое руководство по работе с инструментом от Isabel Aracama — https://www.smashingmagazine.com/2018/07/flat-vector-illustration-affinity-designer/.

Adobe Photoshop для iPad: Bloomberg вбросил информацию, что на Adobe MAX 2018 этой осенью покажут полноценную версию для планшетов — https://www.bloomberg.com/news/articles/2018-07-13/adobe-is-said-to-plan-photoshop-for-ipad-in-app-strategy-shift (сейчас есть простецкий Photoshop Express). Источники анонимные, так что это всё ещё не точно.

Flowmapp (https://flowmapp.com/): Добавили инструмент для описания пользовательских сценариев — https://www.youtube.com/watch?v=CnO6d7lLv6o. Здорово, что не нужно мучаться с этим в каком-нибудь Sketch или создателе ментальных карт.

Modulz (https://www.modulz.co/): Colm Tuite сравнивает два популярных подхода к дизайну интерфейсов — работа в инструментах-наследниках печатного дизайна, результаты которых потом передаются в разработку, и визуальное программирование, где этого перехода нет ― https://medium.freecodecamp.org/the-design-tool-dilemma-225541c4ad1d. Он с прошлого года работает над инструментом Modulz, который движется во вторую сторону и позволяет в наглядном виде работать с компонентами на React.

InVision: Вышла вторая версия мобильного приложения — https://www.invisionapp.com/blog/invision-mobile-app-ios-android/. Можно комментировать на планшетах и телефонах с помощью Freehand, быстро открывать прототипы Studio через QR-код.

Polypane (https://polypane.rocks/): Ещё один инструмент для тестирования адаптивных сайтов в браузере. Stephen Hay, один из ключевых авторов на тему, считает его одним из лучших.

Carbon (https://carbon.now.sh/): Онлайн-сервис помогает сделать эффектную подачу куска кода.

Artboard Studio (https://artboard.studio/): Инструмент помогает делать эффектную подачу макетов интерфейса. Обзор — https://blog.prototypr.io/early-impressions-with-artboard-studio-eee95742420e.

Shotsnapp (https://shotsnapp.com/): Ещё один инструмент для эффектного оформления экранов интерфейса.

Firefox: Появился инструмент для анализа accessibility сайта — https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector.

Overflow: Мощный пример того, что можно делать в инструменте — https://overflow.io/s/F7AGBM/.

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

#tools

Конференция по дизайн-системам Design Systems London пройдёт 15-16 ноября в Лондоне — http://www.designsystemslondon.com/. Пока объявлены локальные спикеры без ярких звёзд, но анонс только-только появился. Это уже третья конференция по дизайн-системам в дополнение к Clarity в Сан-Франциско (https://www.clarityconf.com/) и DSConf в Хельсинки (https://dsconference.com/).

Я был на Clarity в прошлом году (https://www.facebook.com/502273249/posts/10155309403678250/), но программа сильно сдала относительно первой в 2016.

Mikhail Gündoğdu побывал на многих выступлениях о дизайн-системах и собрал на их основе неплохую памятку для начинающих — https://medium.com/tradecraft-traction/eight-things-you-need-to-know-about-design-systems-bae8bd884b3b.

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

Шикарный рассказ Diana Mounter о появлении и развитии дизайн-системы GitHub — https://medium.com/@broccolini/design-systems-at-github-c8e5378d2542. Поэтапное развитие, примеры внутренних документов и процессов.

Mark Argyle рассказывает о принципах работы команды дизайн-системы Atlassian — https://www.atlassian.com/blog/inside-atlassian/designops-atlassian-design-studio. Достаточно подробное описание процесса в типовых ситуациях.

Всё больше полезных инсайтов о практической работе команд, всё меньше «основ атомарного дизайна».

#designsystems

Создатели отечественного инструмента UXPressia для работы над customer journey map выпустили версию 4.0 — https://uxpressia.com/blog/introducing-uxpressia-4-0-overview. Появилась совместная работа и расширился инструментарий по всем аспектам — сами карты взаимодействия, персонажи, карта эмоций. Основатель Юрий Веденин (https://www.facebook.com/yuri.vedenin) и команда плотно работают над продуктом и готовы помогать желающим попробовать его. Несколько лет назад они описывали задачи и принцип работы инструмента в рубрике «Дизайн» на vc.ru — https://vc.ru/12495-uxpresso.

Вот ещё несколько недавних материалов на тему customer journey map:

1. Steve Offsey из сервиса Pointillist, помогающего создавать customer journey map, рассказывает о подходах к аналитике этапов карты ― https://www.pointillist.com/blog/what-is-customer-journey-analytics/

2. Richa Prajapati из Salesforce рассказывает о построении customer journey map для сервиса аналитики ― https://medium.com/salesforce-ux/agile-journey-mapping-with-empathy-3e6c5a876347. Они использовали её для поиска проблем пользователей, решение которых улучшает продукт.

3. Rachel Krause из Nielsen/Norman Group показывает, как создавать раскадровки сценариев использования ― https://www.nngroup.com/articles/storyboards-visualize-ideas/. Они показывают кусок customer journey map, причём эти два подхода можно совместить.

Недавно дочитал свежую книгу Chris Risdon и Patrick Quattlebaum «Orchestrating Experiences» на эту тему — https://rosenfeldmedia.com/books/orchestrating-experiences/ (упоминал её в дайджестах). Очень хороший подробный инструктаж по всем аспектам работы с customer journey map, так что рекомендую интересующимся темой.

#cjm