Собрал дайджест продуктового дизайна за октябрь 2017 ― http://www.jvetrau.com/digest-2017-oct/ на основе материалов группы https://www.facebook.com/groups/pdigest/. Подписаться на рассылку ― http://eepurl.com/bu61XX (раз в месяц).

Собрал дайджест продуктового дизайна за ноябрь 2017 ― http://www.jvetrau.com/digest-2017-nov/ на основе материалов группы https://www.facebook.com/groups/pdigest/. Подписаться на рассылку ― http://eepurl.com/bu61XX.

В ближайшие месяцы буду экспериментировать с форматом канала. Просто ежемесячной рассылки свежего выпуска маловато, а дублировать ленту Фейсбук-группы бесполезно и трудозатратно — именно поэтому я год и не решался взяться за Телеграм. Первая попытка — выдержка наиболее интересного в группе за неделю. Начнём с новостей дизайн-инструментов:

*Framer*: 20 декабря выйдет большое обновление инструмента для создания макетов — https://framer.com/features/design/. На сайте есть видео-тизер и краткое описание — работа с векторными объектами, адаптивность и другие обязательные вещи. Читайте инструкцию Павла Лаптева по работе с интерфейсами виртуальной реальности (https://medium.com/inborn-experience/vr-ar-prototyping-for-everyone-ea6fb8f159b5), пошаговое руководство по базовым функциям от Саши Окунева (https://medium.com/sketchdesigner/framer-case-1-e46e3c073d60), смотрите видео-курс от Руслана Шарипова (https://rsgd.ru/framer/).

*Adobe XD*: Декабрьское обновление ― https://theblog.adobe.com/december-update-adobe-xd/. Очень ленивое.

*Sketch*: Вышла версия 48 ― https://blog.sketchapp.com/color-management-sketch-cloud-updates-and-symbol-scaling-in-sketch-48-f4188f4ec6bb. В этот раз без больших рывков: управление цветовыми профилями, развитие Sketch Cloud и библиотек, поиск и замена цвета, улучшенное масштабирование символов и много мелочей. Они также выпустили [официальный UI Kit для iOS](https://sketchapp.com/elements). Плагины: [SketchCleaner](http://www.sketchcleaner.com/) помогает причесать макеты.

*InVision*: Обзор обновлений в основном продукте, которые будут доступны в начале следующего года ― https://www.invisionapp.com/blog/new-invision-v7/.

*Haiku*: Небольшая памятка по работе с этим новым инструментом анимации от Nad Chishtie ― https://medium.com/haiku-blog/getting-started-with-animations-for-the-web-ios-android-with-haiku-568184eb31fa.

2018 год на носу, так что самая пора публиковать статьи с обзором трендов. В таких материалах обычно есть две проблемы ― бесконечно кочующий из года в год тухляк вроде "анимации, фоновых видео и крупных заголовков", либо попытка привязать долгосрочные явления к периоду с января по декабрь (хотя многие из них раскачиваются несколько лет и приходится тянуть их за уши раз за разом). Но полезные вещи всё равно встречаются:

Ежегодный обзор от Fjord ― https://trends.fjordnet.com/?/. Он всегда один из самых сбалансированных.

Толковый обзор визуальных и интерактивных трендов 2018 от дизайн-команды Webflow ― https://webflow.com/blog/19-web-design-trends-for-2018. Минимум пошлятины.

Ольга Шевченко из Vintage Web Production участвует в жюри Awwwards и отмечает одни из самых заметных выразительных приёмов, которые используют современные промо-сайты и сайты компаний ― http://telegraf.design/trendy-veb-dizajna-v-2018-godu/.

Ежегодный обзор трендов от журнала uxdesign.cc, которые перебирают приличное количество публикаций за год ― https://trends.uxdesign.cc/.

Craig Phillips троллит ежегодные обзоры трендов серией дурацких прогнозов ― https://uxdesign.cc/9-%C2%BD-plausible-and-or-absurd-ux-industry-predictions-for-2018-542897a6446a.

P.S. Пока что на вид здоровым подходом выглядит 1-2 поста в неделю — вторник и четверг (для двух) или среда (для одного). Сигнализируйте, попадает ли оно в ваши ожидания 😂

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

Команда Netflix продолжает разрывать шаблоны и рассказывает о следующем поколении своей технологии автоподбора промо-баннеров для фильмов — https://medium.com/netflix-techblog/artwork-personalization-c589f074ad76. Они научились персонализировать кадр для конкретного пользователя в зависимости от того, что лучше зайдёт ― например, настроение сцены или кадр с конкретным актёром.

Подборка 11 экспериментальных проектов Adobe, показанных на конференции MAX 2017 — https://theblog.adobe.com/top-tech-sneak-peeks-max-2017-that-wowed/. Многие из них основаны на платформе алгоритмического дизайна Sensei. Самые интересные ― SceneStitch для быстрой замены целых частей фото (https://www.youtube.com/watch?v=C9AKL328jSU), Puppetron для стилизации фотографий под работы иллюстраторов (https://www.youtube.com/watch?v=UYZMyV6bqKo ― кажется, модель не нужно тренировать заранее) и PhysicsPak для создания сложного паттерна в любой форме (https://www.youtube.com/watch?v=oIRz9cuDbSc).

Экспериментальный инструмент от группы исследователей MIT подсказывает предположительную визуальную заметность элементов на странице или в макете — http://visimportance.csail.mit.edu/. Получается тепловая карта, которую впоследствии должно подтвердить или опровергнуть реальное eye-tracking исследование. Для сравнительно простых интерфейсов это вполне рабочий инструмент, хотя нужно критически относиться к результатам для более-менее сложных продуктов. Видео работы — https://www.youtube.com/watch?v=13YZPndRJdE.

Отечественный сервис помогает генерировать дизайн одежды — http://trendmind.ai/. Один из его основателей Татьяна Попова рассказывает историю создания ― https://vc.ru/29463-my-hotim-dokazat-chto-iskusstvennyy-intellekt-mozhet-zamenit-dizaynerov.

Экспериментальное приложение от Google автоматически собирает комикс в несколько кадров из видео — https://research.googleblog.com/2017/12/introducing-appsperiments-exploring.html. Выбирает нужные моменты, располагает их в шаблоне, обрабатывает с помощью фильтров.

Microsoft добавили в Word помощника по составлению резюме, который ориентируется на других кандидатов с LinkedIn — https://blogs.office.com/en-us/2017/11/08/bringing-ai-to-job-seekers-with-resume-assistant-in-word-powered-by-linkedin/?eu=true. Он подсказывает, какие навыки лучше добавить и на что делать упор, чтобы получить конкурентоспособный профиль и адаптировать его под конкретную вакансию.

Больше вдохновляющих (или устрашающих, для кого как) примеров можно найти в самой коллекции — http://algorithms.design/.

В этом году многие отечественные компании показали наружу свои наработки по дизайн-системам, а к осени пошло особенно кучно ― каждый месяц кто-то да анонсировал свою дизайнерско-технологическую платформу. Мы с Андреем Сундиевым давно в этом ремесле, так что решили придать импульс этой богоугодной тенденции и запустили сайт-коллекцию http://designsystemsclub.ru/.

Собрали тех, про кого знали ― библиотеки компонентов, статьи, презентации и всё такое. Сейчас там Альфа-Банк, Дизайн Государственных Систем, Mail.Ru Group, Rambler & Co, Яндекс с открытыми живыми гайдлайнами и Acronis, МегаФон и Тинькофф со статьями. Мы слышали про наработки в ещё нескольких компаниях (2ГИС, Авито, EastBanc Technologies, Контур, Райффайзен, Сбербанк, Qiwi), но пока не на что сослаться. Главный критерий ― компания понимает под "дизайн-системой" технологический фреймворк, а не банальный UI Kit в Sketch (или классический гайдлайн на скриншотах). Если мы про вас незаслуженно забыли или переврали в описаниях ― срочно пишите в Спортло…, тьфу, мне (https://facebook.com/jvetrau) или Андрею Сундиеву (https://facebook.com/asundiev).

Конечно, уже есть лучший и главный сайт-коллекция дизайн-систем http://styleguides.io/. Но большинство компаний в нашей подборке работает на русскоязычном рынке и переводить библиотеки компонентов только для попадания туда не особо оправдано. Ну и это, как нам видится, должно подстегнуть развитие темы банальной белой завистью ― "а почему мы ещё не в списке?!" (на самом деле ― покажет, что это не так сложно и вполне посильно). Первая версия сайта просто хоть как-то собрала все ссылки вместе, дальше мы сделаем из неё человека ― станет понятнее, нагляднее, сравнибельнее. Подпишитесь на рассылку, чтобы получать всё свежее раз в месяц — http://eepurl.com/deKCzL.

---

На международном фронте дизайн-систем тоже интересно. Со второй попытки я попал на главную конференцию по дизайн-системам Clarity (https://www.clarityconf.com/). Основная программа, правда, мимо заявленной темы ― из 12 выступлений только 3 реально были посвящены дизайн-системам и ещё 2 частично поднимали тему. Остальное ― неплохие рассказы на общие темы, но такие можно услышать на любой общей конференции по UX. Но самое интересное было в нетворкинге ― тут собралось какое-то невероятное количество людей, которые прямо сейчас либо одни из лучших в построении дизайн-систем, либо просто делают крутые вещи по теме. Обеды, препати и 3 афтепати, серия мини-выступлений (которые были местами полезнее основной программы) ― в суммы вышло 28 часов общения за два дня с хвостиком. Там же презентации новых инструментов от InVision и UXPin, знакомство с авторами их будущих конкурентов.

Сделал для себя вывод, что на узкоспециализированные конференции нужно приезжать с пачкой насущных рабочих проблем, чтобы найти решение в этих кулуарах. На Clarity бегал с ноутбуком и показывал наш текущий подход к раздаче переменных в разные фреймворки ― похоже, мы нащупали что-то очень горячее :) Работаем над второй частью статьи о Paradigm и её версией для Smashing Magazine, должно быть очень актуально :)

---

И немного свежих ссылок в тему:

Безумно интересное выступление Cristobal Castilla о дизайн-системе FIG в Facebook — https://vimeo.com/242899818. Рассказ касается в основном шаблонов для Sketch и Origami, но затрагивает компоненты в коде и подход к развитию платформы в целом. Для дизайнерских инструментов собственными силами написан какой-то космический набор дополнений, прослоек и плагинов. Помимо удобства организации это даёт возможность использовать иконки из единого репозитория с разработкой, подключать данные из личного профиля (это удобно и для прототипирования, и для юзабилити-тестирования). Это очень и очень мощный ориентир того, как можно организовать работу с дизайнерскими инструментами.

Собрал дайджест продуктового дизайна за декабрь — http://www.jvetrau.com/digest-2017-dec/ на основе материалов группы https://www.facebook.com/groups/pdigest/. Будет что почитать на праздниках :) Напомню, что можно подписаться на рассылку по почте — http://eepurl.com/bu61XX.

В первые дни года традиционно проходит самая эффектная технологическая выставка CES (Consumer Electronics Show) — https://www.ces.tech/. Хотя крупнейшие компании вроде Microsoft, Apple и Samsung стараются делать собственные мероприятия для важных презентаций продуктов и платформ, шоу — толковый срез трендов в новых устройствах и форм-факторах. То и дело увидишь материализацию какого-нибудь фантастического фильма.

Голосовые интерфейсы продолжают быть самой горячей темой (в США продано 39 миллионов устройств — https://techcrunch.com/2018/01/12/39-million-americans-now-own-a-smart-speaker-report-claims/). Война за партнёров между Amazon Alexa и Google Assistant — их встраивают в любую штуковину с питанием от электричества. Alexa поднажала в 2017, Google в 2018 — https://www.engadget.com/2018/01/08/google-assistant-everywhere-2018/. Правда, местами это выливается в производство бесполезных устройств — https://www.engadget.com/2018/01/12/smart-display-android-things-google-assistant-ces/ — было показано много "умных экранов", которыми мог бы быть любой дешёвый планшет. Пара свежих статей на тему проектирования голосовых интерфейсов — https://blog.usejournal.com/what-to-know-before-building-your-first-voice-skill-597c99141805 и https://www.uxmatters.com/mt/archives/2018/01/designing-voice-user-interfaces.php.

Умные часы теряют интерес вместе болтающимися в проруби продажами (они снова упали в 3 квартале — https://www.canalys.com/newsroom/media-alert-apple-retakes-lead-wearable-band-market-q3-2017). Была пачка стандартных анонсов, интересен разве что умный браслет Sgnl, чтобы говорить по руке — https://www.engadget.com/2018/01/07/sgnl-wristband-phone-call-hands-on/ — нужно приложить палец к уху.

Умные гарнитуры и наушники, наоборот, интерес набирают с развитием технологий и инфраструктуры. Они хайпанули ещё на CES 2014, а в 2017 ещё раз с анонсом Google Pixel 2, который переводит иностранную речь на лету (есть и покруче — https://www.engadget.com/2018/01/07/mymanu-clik-translation-headphones/), туда же идут Airpods. Сейчас было много такого слабослышащих — https://www.engadget.com/2018/01/14/assistive-hearing-wireless-earbuds-bragi-nuheara/.

Виртуальная и дополненная реальность остаётся важной, но пока сражающейся за взрывной рост (все мечтают о новых смартфонах и ПК, ага). Ещё с конца прошлого года то и дело показывают положительную динамику в решении родовых травм (провода, качество, сенсоры, способы управления) с анонсами от Oculus и HTC. Из интересного: Tobii встроили в шлемы eye tracking — https://www.engadget.com/2018/01/13/tobii-vr-eye-tracking/, а Looxid Labs ещё и считыватель мозговой активности с помощью ЭЭГ — https://www.engadget.com/2018/01/10/looxidvr-brain-monitoring-vr-headset/.

Авто-интерфейсы показывают всё чаще, у каждого широченный экран на всё торпедо (https://www.engadget.com/2018/01/10/byton-suv-concept-first-look/), сыплются баззворды про автономность, электричность и прочую хайтековость. В реальные машины это попадает дозированно, хотя GM планирует выпустить первое авто без руля в 2019 году — https://www.engadget.com/2018/01/12/gm-fully-autonomous-car-no-wheel-2018/. Nissan экспериментирует с интерфейсами "мозг-компьютер" (https://www.engadget.com/2018/01/03/nissan-brain-to-vehicle-tech/), а Harman — с интерьерами автономных машин (https://www.engadget.com/2018/01/08/harman-smart-interiors-autonomous-cars/).

Полно просто интересных технологий вроде объединения нескольких мониторов (https://www.engadget.com/2018/01/10/asus-bezel-hiding-kit-ces-2018/) и сенсоров отпечатка пальца под экраном (https://www.engadget.com/2018/01/10/this-phones-in-display-fingerprint-sensor-is-a-taste-of-things/). Ну и всякой дичи вроде гаджетов для легалайза (https://www.engadget.com/2018/01/11/the-challenge-of-showcasing-weed-tech-at-ces/), передачи запахов (https://www.engadget.com/2018/01/07/sniffy-market-will-let-you-smell-products-as-you-shop/) и криптомайнера от Kodak (https://www.engadget.com/2018/01/11/kodak-kashminer-bitcoin-mining-machines/). В общем, есть чем развлечься до выхода нового "Железного человека".

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

Alan Klement стартует с одной из лучших статей года — https://jtbd.info/know-the-two-very-different-interpretations-of-jobs-to-be-done-5a18b748bd89. Он говорит о том, что под маркой "Jobs to Be Done" продвигаются два разных подхода — общий прогресс в достижении жизненных целей (кем человек хочет быть) и более-менее конкретная активность (что хочет сделать). Например, косметическая компания Revlon продаёт надежду стать лучше и это процесс без чётких границ, а избитый пример про то, как "люди покупают не дрели, а отверстия в стенах" ближе ко второму. Это сложилось исторически (разные авторы ссылались на разное и решали разные задачи), но приводит к путанице и скепсису (мол, да это же переименованный анализ деятельности).

Сайт Laws of UX собрал и наглядно представил дюжину ключевых теоретических интерфейсных принципов — https://lawsofux.com/. Стилизован под приятные винтажные методички.

Про случай на Гавайях (оператор центра информирования граждан о чрезвычайных ситуациях случайно отправил массовое сообщение о ракетной атаке) уже написали даже журналы кроссвордов. А это значит, что из этих статей можно сделать дайджест :) Многие ссылаются на проблему в интерфейсе инструмента оповещения и Jared Spool неплохо разобрал ситуацию — https://medium.com/ux-immersion-interactions/the-hawaii-missile-alert-culprit-poorly-chosen-file-names-d30d59ddfcf5. Более-менее толковый обзор был также у Nielsen/Norman Group, а Business Insider заметил ещё и хранящийся в открытом виде пароль ― http://www.businessinsider.com/hawaii-emergency-agency-password-discovered-in-photo-sparks-security-criticism-2018-1.

Вышли памятки David Travis из UserFocus по четырём ключевым принципам психологии пользователей, важных для проведения исследований — https://www.userfocus.co.uk/articles/field-guide-to-psychology.html, а также Sarah Gibbons из Nielsen/Norman Group по созданию карт эмпатии — https://www.nngroup.com/articles/empathy-mapping/. Ну а Mike Frederick Ziethlow перечисляет степени качества реализации индикатора загрузки, который помогает пользователям — https://medium.freecodecamp.org/the-pain-of-waiting-navigating-the-7-levels-of-progress-indicator-hell-decd3e019495.

UX Pin запустили каталог дизайн-систем, который они анонсировали на конференции Clarity в ноябре — https://adele.uxpin.com/. Для каждой компании указано около 30 параметров, показывающих степень её зрелости. Впервые у styleguides.io появился достойный конкурент. В каталоге отечественных дизайн-систем мы также планировали добавить степень развития платформы после сбора базовой информации, но в более простом и читабельном виде (кстати, недавно там появилась страничка СКБ Контур ― http://designsystemsclub.ru/companies/kontur.html).

Из других свежих кейсов — рассказ Mariah Muscato из HubSpot — https://product.hubspot.com/blog/how-building-a-design-system-empowers-your-team-to-focus-on-people-not-pixels и пример единой реализации drag&drop от VMWare — https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d. Вообще в этом году особенно горячими должны стать две темы:

Во-первых, централизованная раздача переменных (или токенов) в разные технологические фреймворки. Они позволяют подружить не просто разные технологии (React, Angular и т.п.), но и платформы — веб, Android, iOS. Недавно краткий обзор идеи сделал Louis Chenais — https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71 (хотя лучше всего её описал Nathan Curtis два года назад — https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421; кстати, обнаружился их генератор статического сайта — https://github.com/EightShapes/esds-build). Свежий пример генератора файлов стилей для веба и мобильных можно посмотреть у Nate Baldwin — https://github.com/NateBaldwinDesign/dragoman, Design Systems Manager от InVision тоже умеет экспортировать переменные и иконки во все возможные форматы (хотя такой код надо потом перерабатывать). Грядущее обновление нашей дизайн-системы Paradigm будет как раз про это — готовим вторую статью и примеры кода к публикации.

Во-вторых, связка инструмента дизайнера и технологического фреймворка. Сейчас под "дизайн-системой" очень многие понимают банальный UI Kit в Sketch, но это мышление середины прошлого века, когда термин описывал бумажные брендбуки классических компаний. Как именно "поженить" два мира — вопрос на миллион, приходится поддерживать обе ветки параллельно (шаблон и фреймворк), здесь легко и непринуждённо появляются расхождения. Но попытки появляются то тут, то там. Например, Joel Besada из Tictail рассказывает о прототипе связки библиотеки компонентов на React и макетов в Sketch — https://medium.com/tictail/code-with-design-how-we-built-a-tool-to-export-react-prototypes-from-sketch-c8d0c23e8126. Они собрали её для своих задач и на первом этапе она достаточно костыльная, но это важное подтверждение того, что в эту сторону можно и нужно двигаться.

В другую сторону работает библиотека от Seek — https://github.com/seek-oss/html-sketchapp-cli — она генерирует файлы Sketch из HTML. Например, можно превратить в живой гайдлайн символы, чтобы связать компонентный фреймворк с макетами. Или плагин Shopify Telescope, который позволяет искать компоненты в их дизайн-системе Polaris не уходя из Sketch — https://github.com/Shopify/polaris-telescope/ (скачать ― https://polaris.shopify.com/resources/polaris-telescope).

В общем, впереди одиннадцать месяцев интереснейших новостей и технологий на эту тему.

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

Интереснейшая статья Patrick Hebron, в которой он описывает своё видение современных инструментов алгоритмического дизайна — https://medium.com/artists-and-machine-intelligence/rethinking-design-tools-in-the-age-of-machine-learning-369f3f07ab6c. Это одна из моделей, по которым они строятся, так что получилось достаточно характерно. Его блог об алгоритмическом дизайне — https://medium.com/intelligentdesign.

Экспериментальный бот Microsoft научился рисовать изображения по словесному описанию — https://blogs.microsoft.com/ai/drawing-ai/. Глядишь, поисковики будут дорисовывать результаты сами, если ничего не нашлось по запросу. В эту сторону копал и Nao Tokui — он сгенерировал звуки окружающей среды для панорам Google Street View — https://www.engadget.com/2018/01/08/ai-soundtrack-google-street-view-imaginary-soundscapes/.

Развитие экспериментального проекта pix2code, позволяющего получить HTML-вёрстку любого макета — https://blog.floydhub.com/Turning-design-mockups-into-code-with-deep-learning/. А лаборатория Microsoft Garage пробует делать приложения для Windows и Android на основе грубого wireframe — https://www.microsoft.com/en-us/garage/blog/2018/01/napkin-disrupted-meet-ink-code-microsoft-garage-project/. Есть небольшое видео работы — https://www.youtube.com/watch?v=0xSnzh0pm5s (правда, результат толком не виден).

Ещё один экспериментальный (пока большинство решений алгоритмического дизайна в таком состоянии) сервис от команды uKit, который анализирует эстетичность сайта — https://atg13.ukit.space/. Правда, пока оценке не хватает деталей ― по абстрактному числу сложно принимать решения по улучшению. Но он должен стать частью более масштабного продукта по автоматическому обновлению старых сайтов (https://ukit.ai/), так что это скорее затравка на будущее.

Хороший пример применения принципов дизайна для машинного обучения на практике показывает Josh Lovejoy из Google. Статья о проектировании взаимодействия с их новой камерой Clips, которая сама выбирает удачные кадры — https://design.google/library/ux-ai/.

Ну а если у вас уйма времени и тяги к знаниям, то на сайте мини-конференции Machine Learning for Creativity and Design (она прошла 8 декабря 2017 в Лонг-Бич (Калифорния)) есть научные публикации от выступавших — https://nips2017creativity.github.io/. Она посвящена использованию машинного обучения в дизайне и других креативных видах деятельности.

В общем, будущее настойчиво похлопывает по плечу тех, кто ещё не проснулся. А то даже мемасы будут делаться холодными механическими руками — https://tjournal.ru/65510-novoe-primenenie-neyroseti-dlya-nakladyvaniya-lic-teper-vezde-podstavlyayut-nikolasa-keydzha.