Google показал обновлённую дизайн-систему Material Design 2.0 на конференции I/O — https://material.io/. Это серьёзное изменение визуального стиля и расширение инструментария, первые звоночки которого появились ещё в марте (https://www.theverge.com/2018/3/7/17092800/android-p-new-design-changes-features).

Визуально Android P продолжил сближение с iOS (различия между платформами стираются с обеих сторон):

1. Много скруглений, что сильно перекликается с iOS 10-11 (https://www.theverge.com/2018/3/7/17092800/android-p-new-design-changes-features). Возможно, это сделано с прицелом на безрамочные телефоны, которых становится всё больше — это лучше сочетается с их скруглёнными краями экрана.

2. Цвет настроения — белый (https://uxdesign.cc/previewing-material-design-2-0-ec0215f0588f). Больше нет яркой шапки приложения и серых подложек, сплошное белое пространство с минимумом акцентов. В каких-то приложениях Google встречается цветная нижняя панель (https://cdn-images-1.medium.com/max/2000/1*Tu6q1DcA1aGpUDKoVG4Yzw.png) и сама идея акцентных цветов не уходит из гайдлайнов (https://material.io/design/color/the-color-system.html) но тенденция явная (включая веб — https://www.engadget.com/2018/04/25/google-gmail-redesign/ и https://www.engadget.com/2018/05/10/google-drive-redesign/).

3. Навигация по операционке в духе iPhone X (https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/New-System-Navigation_03.gif). Паттерн «рукоятки» (https://uxdesign.cc/handlebars-in-ui-design-4b36af67733b?gi=aa27f4f2efcd) вместо кнопки «домой» с почти аналогичной механикой, отказ от отдельной кнопки списка приложений (также вызывается свайпом снизу), ну и ставшая официальной в последние годы нижняя панель навигации. Всё это помогает управлять современными телефонами, которые стали не только больше, но ещё и выше за счёт безрамочности. Кстати, в некоторых новых приложениях Google инструменты навигации почти везде внизу (https://www.androidpolice.com/2018/04/25/hands-google-tasks-another-beautiful-disjointed-way-get-things-done-google/). Осталось упростить кнопку «назад» (она уже пропала с домашнего экрана).

Можно назвать это вкусовщиной, но первая версия Material Design имела своё лицо и можно было говорить о характере бренда, выраженном в интерфейсе. Кто-то жаловался, что гайдлайны слишком жёсткие и делают приложения однояйцевыми. Но для многих компаний это был сильный ориентир — как можно создать ощущение единства продуктов без использования логотипа. Хотя поддерживать две платформы станет проще.

С другой стороны, теперь Material Design поддерживает более продвинутую тематизацию, чем просто замена цвета — https://material.io/design/material-theming/. Можно менять шрифтовую сетку, скругления элементов интерфейса (точнее, даже их форму — например, можно сделать диагональные скосы), иконки. К этому прилагается плагин для Sketch — https://material.io/tools/theme-editor/ (можно быстро примерить стиль на свой макет) и библиотека иконок — http://material.io/icons (в пяти стилях). Недавно обновлённые продукты Google также используют этот подход — https://material.io/articles/how-google-created-a-custom-material-theme.html (хотя их стиль как раз выхолощенный).

И самое главное — теперь это полноценная дизайн-система с компонентами в коде (https://material.io/develop), а не просто масштабные гайдлайны и шаблоны к ним с какими-то разрозненными примерами. Эти компоненты также поддерживают тематизацию, так что система выглядит целостной (сами компоненты начали появляться год назад). Новый сайт Material Design (https://material.io/) сделал фокус на две составляющие — дизайн и разработка — более явным. Они также запустили давно обещанный инструмент Gallery (https://material.io/tools/gallery/), аналог Zeplin и Wake. Но это как-то вяло на фоне обещаний, данных после покупки Pixate (основатель ушёл в Figma) и Form (Гугл подтверждает репутацию сгнаивателя купленных компаний).

#android #material

Из других интересных деталей анонса:

1. Четыре цвета логотипа как основа визуального языка (https://www.fastcodesign.com/90171295/google-just-remade-its-brand-again). Это хорошо получилось в Gmail для веба — иконка «+» и цвета индикаторов чётко наследуют идею.

2. Новый стиль иллюстраций Google (https://www.androidpolice.com/2018/04/25/hands-google-tasks-another-beautiful-disjointed-way-get-things-done-google/).

3. Похоже, для своих продуктов компания перейдёт на шрифт Google Sans — https://9to5google.com/2018/05/09/google-sans-vs-product-sans/.

4. Самоограничения на использование телефона и отдельных приложений (https://s.aolcdn.com/hss/storage/midas/26f53c50aaa835c66e937ab98714abbc/206359888/DigitalWellbeing_Blog.gif из https://www.engadget.com/2018/05/09/android-p-features-that-matter/ и https://www.engadget.com/2018/05/08/google-android-p-actions-slices-predictive-apps/). Пользователь сам задаёт их, после этого приложение становится чёрно-белым, мотивируя прерваться. В ночное время телефон полностью переходит в такой режим.

5. Проще настраивать частоту уведомлений (https://www.engadget.com/2018/05/09/android-p-features-that-matter/). Если пользователь несколько раз скрывает уведомление от приложения без прочтения, Android предложит скрыть его вообще. Наушники Pixel Buds могут зачитывать некоторые уведомления голосом (https://www.engadget.com/2018/05/09/google-pixel-buds-let-you-customize-which-apps-send-spoken-notif/).

6. Интеграция сторонних приложений в результаты поиска и контекстные меню в качестве Slices (https://s.aolcdn.com/hss/storage/midas/9a19c2df03d0e18c4dac34b7630ccfce/206359885/Slices_Blog.gif) и поиск по выделенному слову (https://o.aolcdn.com/images/dims?resize=980%2C640&quality=100&image_uri=https%3A%2F%2Fs.aolcdn.com%2Fhss%2Fstorage%2Fmidas%2F6c9302a32a0c5a3baf09628da8c5fbca%2F206360669%2F_MG_1041.jpg&client=cbc79c14efcebee57402&signature=e0c3469b7613c176e864832f38b65ad71d15ac59).

7. Google Assistant может сам позвонить и забронировать ресторан (https://www.engadget.com/2018/05/08/pretty-sure-googles-new-talking-ai-just-beat-the-turing-test/).

8. Мобильный Сhrome поддержит дополненную реальность (https://www.engadget.com/2018/05/09/google-augmented-reality-chrome/).

9. Экспериментальная камера Google Lens научилась делать больше (https://www.engadget.com/2018/05/09/google-lens-hands-real-world-copy-and-paste/) и станет частью стандартного приложения (https://www.engadget.com/2018/05/08/google-integrates-lens-camera-app/).

Бета-версию уже можно поставить на некоторые телефоны — http://android.com/beta. Финальная версия появится осенью. Засучиваем рукава, работы будет много.

#android #material

Сегодня вышла четвёртая рассылка свежих инструментов, экспериментов и исследований на тему алгоритмического дизайна — http://eepurl.com/cKUguj (сам сайт — http://algorithms.design/). Самый сок оттуда:

1. Rama Allen из The Mill размышляет на тему искусства во времена бума искусственного интеллекта — https://qz.com/1023493/ai-will-be-the-art-movement-of-the-21st-century/. Он также видит это как креативное партнёрство между человеком и компьютером, сравнивая с джазовой импровизацией.

2. Sougwen Chung создала робота, который рисует вместе с ней — https://vimeo.com/228868235. Очень яркий пример того, что значит концепция ко-дизайна с компьютером.

3. David Dao собрал примеры неэтичного и даже пугающего использования технологий искусственного интеллекта в цифровых продуктах — https://github.com/daviddao/awful-ai.

4. Tom White научился генерировать человекоподобные абстрактные иллюстрации с помощью алгоритма — он скармливает ему обучающую выборку, а затем подбирает относительно узнаваемое исполнение — https://medium.com/artists-and-machine-intelligence/perception-engines-8a46bc598d57. Проект сделан в рамках инициативы Google Artists and Machine Learning — https://ami.withgoogle.com/ (её блог — https://medium.com/artists-and-machine-intelligence).

5. Christian Noessel проанализировал примеры искусственного интеллекта в фантастических фильмах ― https://scifiinterfaces.com/2018/04/09/untold-ai/. Он разделил их на три категории продвинутости и опубликовал список ― https://docs.google.com/spreadsheets/d/1iLboZJ9zs2OjykYWfGOYMBYEkBruDxi1kErwKjb6aIQ/edit#gid=0.

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

Подписаться на рассылку — http://eepurl.com/cKUguj.

#ai #algorithms

Студия Олега Чулакова опубликовала свою дизайн-систему — https://design.chulakov.ru/. Пока она охватывает только сайт самого агентства, но здорово, когда они осознают их важность в клиентской работе и инвестируют в своё будущее — тот же Brad Frost начал atomic design как решение для клиентских проектов. Одной из первых в Рунете это сделала Мануфактура для клиентских сайтов — https://2015.codefest.ru/lecture/1018. Это хорошо показывает, что дизайн-системы по силам не только гигантским продуктовым компаниям, сейчас хватает инструментов для низкого старта.

Другие новости дизайн-систем:

1. Заработал сайт о дизайн-системах от Figma, который они анонсировали полгода назад — https://www.designsystems.com/stories/introducing-design-systems-dot-com/. В поддержку этого они провели серию митапов по миру — https://www.designsystems.com/stories/what-we-learned-from-hosting-eight-design-system-meetups/. Правда, пока это десяток не особо глубоких статей, так что на фоне общей движухи выглядит малополезным. Из относительно интересного разве что мнения за https://www.designsystems.com/stories/will-design-systems-replace-designers/ и против https://www.designsystems.com/stories/design-systems-will-not-replace-designers/ того, что дизайн-системы снижают потребность в дизайнерах.

Figma также выпустили свой конвертер макетов в код для React на GitHub — https://github.com/figma/figma-api-demo/tree/master/figma-to-react. Karl Jiang рассказывает, как это устроено и что он умеет — https://blog.figma.com/introducing-figma-to-react-d2d545cba3cc. Это важный шаг по связке инструментов дизайна и технологических фреймворков, но без связки с основной библиотекой компонентов это всё ещё игрушка, а это самая сложная задача.

Параллельно инструмент анонсировал разделение стилей на переменные — https://blog.figma.com/figma-styles-beta-a-new-way-to-apply-text-and-layer-attributes-1ecde1b0de74. Это один из важнейших шагов для того что бы связать дизайнерские шаблоны и компоненты в коде — сейчас большинство инструментов не имеет модульности для описания символов и компонентов. Ну а в другой статье Jon Rohan из GitHub рассказывает о том, как устроен экспорт библиотеки иконок из Figma в продукт с помощью нового API инструмента ― https://blog.github.com/2018-04-12-driving-changes-from-designs/. Такими темпами к концу года всё-таки придётся подумать о переезде со Скетча.

2. Brad Frost описывает принцип создания тем оформления в дизайн-системах по всем модным канонам ― токены, единая архитектура элементов интерфейса ― http://bradfrost.com/blog/post/creating-themeable-design-systems/.

3. Jeremy Wilken описывает новую систему версионирования дизайн-системы VMWare Clarity — https://medium.com/claritydesignsystem/updating-the-clarity-release-and-support-strategy-c1e37f7d5a0.

4. Дизайн-система компании Hudl — http://uniform.hudl.com/. Очень толковый пример с хорошей структурой и охватом принципов дизайна.

5. Онлайн-курс по работе с живыми гайдлайнами для компонентов дизайн-системы Storybook ― https://www.learnstorybook.com/.

#designsystems

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

1. Список конференций по дизайну и разработке — https://www.fieldtrips.io/.

2. Серия интервью с интерфейсными дизайнерами в игровой индустрии — https://medium.com/game-ux-interviews.

3. Шикарный список наград и премий по самым разным веткам дизайна — https://www.alistofawards.com/. Дизайнеры агентства Red Collar участвуют в жюри нескольких из них и рассказывают о механике их работы — https://vc.ru/37753-ustroystvo-konkursov-veb-dizayna-awwwards-cssda-fwa.

4. Коллекция тёмных паттернов, который развивает идеи Harry Brignull, главного евангелиста этой темы — https://darkpatterns.uxp2.com/. Он и сам говорит рекомендует этот сайт, поскольку не успевает обновлять свой.

5. Блог дизайн-команды Контур — https://medium.com/designkontur. В одной из свежих статей Александр Храмцов рассказывает о Sketch-шаблонах, которые использует дизайн-команда — https://medium.com/designkontur/%D1%81%D0%BA%D0%B5%D1%82%D1%87-%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B0-%D0%B4%D0%BB%D1%8F-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B-19a692ea959f.

У кого к понедельнику останется меньше десяти открытых вкладок в браузере — тот молодец :)

#links

Громких анонсов свежих претендентов на место 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.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