Мой хороший знакомый Сергей Андронов наверняка известен многим в отечественном дизайн-сообществе. Он уже не первый год в жюри легендарного FWA, активно выступает в России и много делает для развития дизайнеров. Когда-то он делал шикарные обзоры трендов и свежих новостей дизайна Designgest в виде презентаций на SlideShare, а теперь завёл Телеграм-канал для этого ― https://news.1rj.ru/str/designgest.

Получилась толковая смесь обзора новостей и личного опыта, а он у Сергея богатый ― он успел поработать арт-директором Hungry Boys, Looi, Havas Digital, Advance Digital. Например, несколько публикаций о роли арт-директора и развитии дизайнера в целом:
― https://news.1rj.ru/str/designgest/97
― https://news.1rj.ru/str/designgest/99
― https://news.1rj.ru/str/designgest/109

Для меня это отличный пример того, как можно развивать Телеграм-канал и лишнее подтверждение того, почему этот формат хорошо зашёл отечественным дизайнерам. Кстати, архивы дайджеста можно посмотреть на его сочно оформленном сайте ― http://designgest.ru/.

#friends

Вышел первый в этом году новый инструмент для дизайна и прототипирования интерфейсов Phase — https://phase.com/. Стандартный набор из возможностей анимации, создания символов для чего угодно, адаптивности, экспорта в код для веба и нативных платформ.

Последние три-четыре года движуха на этом рынке стала настолько заметной, что про неё написал даже Bloomberg, который обычно витает в облаках мега-корпораций — https://www.bloomberg.com/news/articles/2018-02-01/startups-try-to-chip-away-at-adobe-s-dominance. Неплохой индикатор зрелости рынка, где дизайнеры ещё лет шесть назад смиренно думали, что им придётся вечно довольствоваться Фотошопом — обноском со старшего плеча, никак не заточенным под интерфейсы. Это видно и по деньгам: в InVision вложили уже $235 млн (https://www.businesswire.com/news/home/20171101005389/en/InVision-Raises-100M-Series), Figma — $42,9 млн (https://www.crunchbase.com/organization/figma), Framer — $9 млн (https://blog.framer.com/building-your-go-to-interactive-design-tool-900b276e19d6), Marvel — $8 млн. (https://www.crunchbase.com/organization/marvel), Zeplin — $1,2 млн (https://techcrunch.com/2015/11/24/zeplin-raises-1-2m-to-sync-designers-and-developers-with-less-hassle/). Есть и покупки, но пока частично удачные — InVision свою экосистему укрепляет, а Гугл сгноил Pixate и Form.

Если возвращаться к практике, то вот что интересного происходило за последние месяц-полтора:
— Adobe XD: Январское обновление (https://theblog.adobe.com/january-update-adobe-xd/): интеграция с Zeplin, Sympli и аналогичными инструментами, предпросмотр файлов в Dropbox. Издательство SitePoint выпустило в 2017 году книгу Daniel Schwarz «Jump Start Adobe XD» ― https://www.sitepoint.com/premium/books/jump-start-adobe-xd. UXmatters публикует главу 2 из неё, посвящённую основам прототипирования в инструменте ― https://www.uxmatters.com/mt/archives/2018/01/sample-chapter-jump-start-adobe-xd.php.
— Marvel Design (https://marvelapp.com/design): он тоже становится инструментом дизайна интерфейсов, а не просто прототипирования — эту тенденцию не остановить.
— Haiku: Вышел предварительный релиз — https://www.haiku.ai/blog/introducing-haiku/. Можно скачать приложение для Mac и посмотреть движок веб-компонентов — https://github.com/HaikuTeam/core.
— Rightware Kanzi (http://www.rightware.com/kanzi/): Специализированный инструмент для дизайна автомобильных интерфейсов.
— Sketch: Свежие плагины: Timeline от Anima для создания анимации (https://timeline.animaapp.com/), экспорт макетов в Jira (https://sketch.atlassian.com/), Paddy для сохранения внутренних отступов при изменении размеров (https://github.com/dwilliames/paddy-sketch-plugin), Font Rapid для создания шрифтов (https://fontrapid.com/), Gif Me для вставки анимированных гифок в макеты (https://www.sketchgif.me/), тёмная тема оформления (https://midnightsketch.com/).
— InVision: Maze помогает проводить юзабилити-тестирование на базе прототипов InVision — https://maze.design/. Даёте пользователям специальную ссылку, на выходе много полезной аналитики вроде тепловых карт и времени выполнения задач.
— Framer: Новые официальные шаблоны — https://framer.com/getstarted/resources/ (iOS, Android, веб, wireframes).

Мир любит дизайнеров, кто бы что ни говорил.

#tools

Яндекс запустил набор инструментов прототипирования и тем оформления для БЭМ ― http://bem.design/. Получился неплохой шаблон для быстрого старта своей дизайн-системы — можно переопределить стили под свои задачи (так делали студия Мануфактура и первую версию платформы Альфа-Банка). Статья Михаила Колоскова о подходе в целом ― https://habrahabr.ru/company/yamoney/blog/341028/ и презентация к запуску ― https://wsd.events/2018/02/03/pres/bem-design.pdf. БЭМ вообще одна из самых уважаемых в международном сообществе отечественных наработок ― огромное количество людей на прошлогодней конференции по дизайн-системам Clarity с теплотой вспоминали о нём. Будет здорово, если из этого получится «наш Bootstrap».

Такие инициативы помогают менять сознание дизайнеров, многие из которых всё ещё понимают под дизайн-системой шаблон в Sketch или другом инструменте дизайна, а не технологическое решение на компонентах в коде, в которые вшит дизайн. Brad Frost тоже устал от этого ― http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/. Это мышление середины прошлого века, когда под этим словом понималась система визуальной идентификации бренда, к которой шла красивая печатная книжка (их активно переиздают последние годы). Но тогда речь шла о физических продуктах и объектах, которые стоят на полке в магазине (или сама сеть магазинов), а мы-то с вами работаем с цифровыми продуктами, где макет ничего не гарантирует и много раз меняется перед запуском на пользователей. Так что работать надо с основным материалом этой среды ― кодом.

В прошлом выпуске https://news.1rj.ru/str/pdigest/20 упоминался мостик между двумя мирами (компоненты в коде и дизайнерские инструменты), который будет одной из главных тем года. Так вот, Mark Dalgleish в деталях расписывает, как компания SEEK связала компоненты на React и шаблоны в Sketch (они собираются из живого гайдлайна) ― https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526. Внимательно следите за такими штуками и пробуйте сами ― это проще внедрить у себя, чем кажется.

Ну и просто несколько свежих рассказов о создании дизайн-систем:
― Marcin Treder описывает 6-дневный спринт по формализации дизайн-системы, который они использовали при систематизации интерфейса UX Pin ― https://medium.com/@marcintreder/the-minimum-viable-design-system-75ca1806848a. Правда, тут только про уровень визуального языка без множества важных деталей реализации в коде.
― Дизайн-система HubSpot Canvas ― https://canvas.hubspot.com/. Julie Nergararian рассказывает о том, как она создавалась ― https://product.hubspot.com/blog/how-to-gain-widespread-adoption-of-your-design-system.
― Nathan Curtis описывает три модели архитектуры команд поддержки дизайн-системы и самого технического решения ― https://medium.com/eightshapes-llc/design-systems-intermediaries-955ef18c9409.
― Cristiano Rastelli рассказывает о создании дизайн-системы сервиса знакомств Badoo ― https://badootech.badoo.com/from-zero-to-cosmos-part-1-2d080fe35bf2. В первой части про постановку проблемы и архитектуру.

В этом выпуске — свежие разборы интерфейсных паттернов, привычных и только формирующихся. Shankar Balasubramanian анализирует сравнительно новый паттерн «handlebars» (грубо говоря, «рукоятки»), который продвигают ориентированные на скрытые жесты интерфейсы — https://uxdesign.cc/handlebars-in-ui-design-4b36af67733b (например, их много в iPhone X). Он добавляет необходимый аффорданс, от отсутствия которого долгое время страдали экспериментальные тач-интерфейсы.

Толковый чеклист для проектирования попапов от Naema Baskanderi — https://heydesigner.com/blog/best-practices-modals-overlays-dialog-windows/. Похожий чеклист, но для диалогов подтверждения составил Jakob Nielsen — https://www.nngroup.com/articles/confirmation-dialog/. Сильно сэкономит время на описании принципов вашей дизайн-системы.

Виталий Фридман разбирает примеры и предлагает толковый чеклист для проектирования конфигураторов техники и других товаров в интернет-магазинах — https://www.smashingmagazine.com/2018/02/designing-a-perfect-responsive-configurator/. Как обычно, звиздиллион примеров.

Christian Holst из Baymard Institute даёт советы интернет-магазинам по правильному моменту в процессе оформления заказа, когда стоит просить у пользователя зарегистрироваться — https://baymard.com/blog/delayed-account-creation. Напомню про их предыдущую сотню статей на тему — https://www.facebook.com/groups/pdigest/permalink/971984132865143/.

Jeff Sauro провёл сравнительное тестирование нескольких американских сайтов для доставки цветов — https://measuringu.com/flower-ux/. Есть в том числе значения NPS (очень низкие, кстати).

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

Найдена утерянная статья Kent Sullivan 1996 года, в которой он рассказывает о работе над интерфейсом Windows 95 — https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/. Это ценнейший материал, который показывает, насколько передовым был подход был на тот момент — итеративная работа, упор на юзабилити-тестирование и многие другие методы и практики, которые кажутся обыденными сейчас, но использовались единичными компаниями 25 лет назад. Очень интересно читать о том, как, например, трудно было приучить людей к привычному сейчас двойному щелчку мыши. Windows 95 — один из важнейших интерфейсов в истории, сделавших такую сложную ранее вещь как компьютер доступной самому массовому пользователю, в том числе благодаря миссии «компьютер в каждый дом». Перевод — https://habrahabr.ru/post/348728/.

Gibson Biddle (вице-президент по продукту в Netflix с 2005 по 2010 год) рассказал о работе над брендом — https://medium.com/emerging-tech-insights/branding-for-builders-19e103ef3f1d. Описана толковая модель его определения от позиционирования к конкретным ценностям, а также поэтапная эволюция самого продукта — естественно, через традиционные для компании эксперименты. Вряд ли это что-то сильно новое для специалистов по теме, но связка бренда с интерфейсом и цифровой брендинг в целом — одна из самых важных тем последних лет, когда всё больше интернет-компаний становятся зрелыми как бизнес и пытаются работать с пользователем на всех уровнях. Здесь хороший примеров крайне мало и такой подробный кейс на вес золота.

Мощнейший обзор того, как меняется роль и задачи дизайна в последние десятилетия от Hugh Dubberly — http://www.dubberly.com/articles/connecting-things.html. Особенно ценно то, что свидетельства этой эволюции ссылаются на ключевые книги и статьи, так что можно проследить её самостоятельно.

Рассказ о перепроектировании поликлиник в Кирове с учётом принципов проектирования услуг и бережливого производства — https://varlamov.ru/2763128.html. Интересные факты о том, как анализировали поведение пациентов и работу врачей.

В конце 2016 года издательство Two Waves Books выпустило книгу Dave Gray «Liminal Thinking» ― http://liminalthinking.com/. UXmatters публикует отрывок из неё о формировании убеждений ― https://www.uxmatters.com/mt/archives/2018/02/liminal-thinking.php ― хорошо поданные для дизайнеров особенности психологии пользователей.

Сегодня — подборка статей на тему дизайн-менеджмента, мой конёк:

Мощнейший пример стратегического мышления при обновлении продукта для корпоративных пользователей от Burcu S. Bakioglu, Ben Basilan и JonDelina ‘JD’ Buckley из ADP Innovation Center — https://www.uxmatters.com/mt/archives/2018/02/measuring-the-roi-for-ux-in-an-enterprise-organization-part-1.php. Они выстроили отличный понятный подход для выделения интерфейсных метрик, которые завязаны на ключевые показатели бизнеса, а затем — анализа ключевых пользовательских задач и их сравнительной оценки, чтобы можно было отслеживать улучшения в течение длительного времени. Редко встретишь такой осмысленный и целенаправленный подход с минимумом воды.

Heather Phillips вместе с Designer Fund запустили опросник для дизайн-команд, помогающий определить уровень их зрелости — https://designerfund.com/levelup/. Неплохой шаблон, хотя он скорее про дизайн-менеджмент и очень абстрактно затрагивает саму продуктовую работу.

Tim Dixon из Nomensa рассказывает о подходе Digital Impact Framework (DIF), который позволяет связать конкретные задачи и результаты при работе над продуктом с долгосрочными целями — https://www.uxmatters.com/mt/archives/2018/02/measuring-the-value-of-ux.php. У него четыре точки приложения усилий: экономические, социальные, процессные и инновационные.

Как устроены известные дизайн-команды:
— Facebook: Courtney Kaplan о том, как устроены дизайн-команды и какова роль дизайн-менеджера в них — https://medium.com/elegant-tools/more-design-problems-more-designers-and-more-need-for-design-ops-1416fd031ee1.
— Booking: Kelly van der Veen рассказывает о структуре и взаимодействии продуктовых команд в компании, а также агрегации пользовательских инсайтов с помощью сервиса NomNom — https://blog.nomnom.it/despite-being-one-of-the-largest-e-commerce-travel-companies-in-the-world-it-has-more-than-15-000-893237bbc1b. А Anna Efimenko — о задачах, которые решают пользовательские исследования в компании — https://booking.design/informed-by-data-driven-by-empathy-an-introduction-to-user-experience-research-at-booking-com-45a0b68445cd.
— Альфа-Банк: Мария Гончарова о лучшем понимании пользователей у продуктовых команд с помощью показа мини-фильмов на базе проведённых исследований — https://habrahabr.ru/company/alfa/blog/349612/.

Дизайн-менеджер IBM Sandra Tipton даёт советы дизайнерам по планированию большого количества встреч — https://medium.com/design-ibm/meetings-vs-making-36ab8fa2403. Как выделить важные и второстепенные, как сокращать их в зависимости от целей и вовлечённости.

Автор книги «Sprint» про дизайн-спринты Jake Knapp даёт пачку советов их фасилитатору — https://sprintstories.com/23-facilitation-tips-for-design-sprints-34d876aa5317.

#designmanagement

Собрал дайджест продуктового дизайна за февраль — http://www.jvetrau.com/digest-2018-feb/ на основе материалов группы https://www.facebook.com/groups/pdigest/.

Я продолжаю переезд на новую тему оформления и редактор Сетка (https://setka.io/ru/) от Look at Media, поэтому возможны косяки в старых материалах — за пару месяцев починится. Этот выпуск тоже экспериментальный по подаче, но уже лучше освоился с редактором и пробую более интересные приёмы вёрстки.

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

#digest

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

Начну с анонса: на следующей неделе буду участвовать в экспериментальном формате онлайн-интенсива Design Line — https://goo.gl/1bj2Fr. С 26 по 31 марта каждый вечер в 19:00 и 21:00 будут 10 лекций от сильных дизайнеров из AIC, Creative People, RedMadRobot, Red Collar, Fantasy Interactive и других компаний. А после этого — разбор работ из портфолио слушателей (а ещё со спикерами можно будет пообщаться в Телеграме).

Я буду рассказывать о нашей дизайн-системе Paradigm — http://design.mail.ru/paradigm/. Мы готовим её большое обновление этой весной под новую архитектуру. Хотя мы не успеваем выкатить эти изменения до интенсива, я расскажу о них словами и покажу скриншоты того, что скоро появится на сайте. Купить билет можно на сайте https://goo.gl/1bj2Fr (промо-код на скидку 10%: speak3r).

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

Nathan Curtis описывает подходы к объединению разных дизайн-систем, которые могли развиваться в компании параллельно ― https://medium.com/eightshapes-llc/consolidating-design-systems-6bb7ce72f393. Это часто случается, если в организации много продуктов разной степени зрелости, а их команды не связаны между собой.

Ken Skistimas из GE примеряет подходы классических брендов к унификации дизайна продуктов для современных дизайн-систем ― https://medium.com/ge-design/balancing-flexibility-and-consistency-in-design-systems-c24cd0a9da16. Насколько они должны давать свободу дизайнерам?

Dominic Nguyen описывает примерную архитектуру процесса тестирования и выкатки на продукты обновлений дизайн-системы ― https://blog.hichroma.com/why-design-systems-are-a-single-point-of-failure-ec9d30c107c2.

Dani Nordin использует модель изменений John Kotter для этапов внедрения дизайн-системы ― http://uxpamagazine.org/the-politics-of-design-systems/. Детали процесса достаточно тривиальные, но способ организации мыслей хороший.

Осталось только отучиться называть дизайн-системой UI Kit в Sketch и рынок станет зрелым.

#designsystems

Создавать карты и диаграммы для интерфейсов всегда было проблемой ― либо нужен отдельный инструмент, который нишевый и не всегда удобный. Либо приходится делать их руками там, где обычно рисуются макеты, а это не сильно лучше. Кажется, ситуация начинает выправляться ― в прошлом году появились Flowmapp и Wireflow. И, судя по тому что было с инструментами для создания макетов, анимации и интерактивных прототипов, жди большого всплеска. Дождались:

― Whimsical: Ещё один инструмент для совместной работы над диаграммами и другими способами описать логику интерфейса ― https://whimsical.co/. Как создавалась его панель инструментов ― https://whimsical.co/design/how-we-designed-whimsical-for-speed/.
― Overflow: Инструмент позволяет создавать карты переходов для интерфейса ― https://overflow.io/. Можно записаться в очередь на бета-версию. Анонс и рассказ о том, как он работает ― https://blog.prototypr.io/meet-overflow-9b2d926b6093.

Среди более привычных инструментов тоже горячие новости:

― Sketch: Версия 49 ― https://blog.sketchapp.com/prototyping-libraries-on-sketch-cloud-and-an-official-ios-ui-kit-in-sketch-49-bf090c70796c. Экраны можно собирать в интерактивные прототипы (https://blog.sketchapp.com/an-in-depth-look-at-prototyping-in-sketch-942394341f3c), что теперь абсолютный стандарт на рынке ― обраточка InVision за заход на территорию инструментов создания макетов, которая сильно подкосит необходимость в нём (Alexander Handley неплохо подметил это ― https://medium.com/sketch-app-sources/design-tool-choices-2018-a3e6a8ce87c6). После спокойного исправления багов между 2017 и 2018 все ждали, в какую сторону будет двигаться Sketch и это очень сильная заявка. Помимо этого теперь можно хранить библиотеки в официальном облаке, добавлен полноценный шаблон для iOS, а поиск и замена цветов стала мощнее (https://medium.com/design-prototype/sketch-49-find-and-replace-colors-everywhere-dc8db465026d).
― Adobe XD: Мартовское обновление ― https://theblog.adobe.com/march-2018-update-adobe-xd/. Открытие макетов Photoshop и Sketch, доработки по символам и стилям.
― Figma: Добавлена анимация переходов для прототипов ― https://blog.figma.com/figma-prototyping-now-with-transitions-197f817ae7a8 и улучшена история версий ― https://blog.figma.com/now-you-can-name-and-annotate-your-figma-version-history-250aa1b5caf5, появилась тёмная тема интерфейса ― https://www.papertiger.com/figma-dark-ui-plugin. Thomas Lowry подробно разбирает возможности компонентов ― https://blog.figma.com/component-architecture-in-figma-f16ae9cc4481.
― Supernova Studio: Инструмент вышел из беты ― https://blog.prototypr.io/introducing-supernova-studio-35335de5044c.
― Subform: Сравнение подходов к адаптивности в макетах в инструменте и аналогах на рынке ― https://medium.com/subform/dynamic-layout-at-design-time-91d3bbda64e3.
― Zeplin: Поддержка прототипов в Sketch 49 ― https://blog.zeplin.io/flows-in-zeplin-round-one-c56550f23f0f. Пока на примитивном уровне (можно перейти к следующему), но дальше появятся полноценные информационные карты.

Неугомонный Meng To продолжает окучивать нишу за нишей и теперь он запустил большой каталог инструментов дизайна ― https://designcode.io/learn. Можно ещё раз заценить, как много хорошего делается для нас с вами.

#tools

Николай Иванов из AIC запустил на прошлой неделе Телеграм-канал, в котором делает короткие интервью с отечественными и зарубежными дизайнерами — https://news.1rj.ru/str/designdialog. Я успел на начало вечеринки — https://news.1rj.ru/str/designdialog/14 и https://news.1rj.ru/str/designdialog/15, всего есть четыре штуки:

— Денис Ломов из Red Collar — https://news.1rj.ru/str/designdialog/8 и https://news.1rj.ru/str/designdialog/9
— Денис Невожай из Essential — https://news.1rj.ru/str/designdialog/11
— Сергей Гуров из Redmadrobot — https://news.1rj.ru/str/designdialog/17 и https://news.1rj.ru/str/designdialog/18

Полный список выпусков — https://news.1rj.ru/str/designdialog/19. Интервью у нас в отрасли выходит маловато, так что должно быть интересно.

InVision давно публикуют интервью с руководителями дизайн-команд о том, как они устроены. Они сделали следующий шаг и запустили проект, пытающийся сравнить и просуммировать опыт дизайн-менеджмента ― https://www.invisionapp.com/enterprise/design-genome. На старте есть материалов о Netflix, Slack, Shopify, Pinterest и Capital One. Наверняка это связано с недавней инициативой Design Leadership Forum — https://www.invisionapp.com/design-leadership-forum — они отлично взаимоопыляют друг друга.

Тема развития силы и влияния дизайн-команд в продуктовых компаниях становится всё более активной в последние годы. Есть уйма способов сделать хорошо, поэтому важно изучать опыт разных организаций — наверняка у вас свои особенности и чужая рубашка не налезет. Daniel Rosenberg как раз описал интересную концепцию ограничений рынка и бизнес-модели, технологий, финансов и самой организации, которые влияют на UX-стратегию ― http://interactions.acm.org/archive/view/march-april-2018/the-business-of-ux-strategy. Вот ещё парочка реальных историй:
— 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.
— Глава дизайна Airbnb Alex Schleifer рассказывает о том, как работает дизайн-команда и как компания повышает доверие пользователей ― https://www.movidiam.com/blog/1022/airbnb-alex-schleifer--building-trust. А ещё у них самая большая дизайн-команда в мире — они плотно работают с владельцами жилья, так что те вносят огромный вклад в общий UX — https://airbnb.design/designing-airbnb-for-everyone/.

Как и во многих других быстро развивающихся областях профессиональных знаний, в дизайн-менеджменте хватает синонимов — DesignOps, UX-стратегия и т.п. Выступавший на одноимённой конференции DesignOps Summit Dave Malouf из Digital Ocean описывает три подхода к организации DesignOps, в зависимости от структуры компании и её текущих задач ― https://medium.com/amplify-design/the-different-lenses-of-design-operations-c29086cf907f. Кстати, на днях у него вышла ещё одна статья о трёх уровня ответственности дизайн-менеджера ― tradecraft (профессиональные навыки), stagecraft (режиссура процесса) и statecraft (участие в развитии компании в целом) ― https://medium.com/amplify-design/player-coach-mngr-exec-operator-29d8cc52f926. Одному человеку крайне сложно совмещать их, поэтому он разбирает типичные проблемы в попытках всё-таки сделать это.

Напомню, что в этом году будет уже пять конференций по дизайн-менеджменту цифровых продуктов — LX Conference, UXSTRAT, DesignOps Summit, Leading Design и Enterprise UX (обзор прошлогодней ― https://www.uxmatters.com/mt/archives/2018/03/conference-review-enterprise-ux-2017-part-1.php). Я собираюсь на DesignOps Summit или Leading Design (смотря как срастётся) — возможно, пересечёмся.

#designmanagement

Под конец прошлой недели Figma шумно анонсировала открытый API, который делает из неё платформу, а не просто инструмент ― https://blog.figma.com/introducing-figmas-platform-ee681bf861e7. Получился ортогональный ответ на систему плагинов в Sketch и любом другом десктопном инструменте.

Если переход с Photoshop на Sketch давал огромнейший прирост к скорости и комфортности работы, то замена Sketch на другой современный инструмент уже не так однозначна для большой команды (если только вашей главной задачей не является быть на пике трендов любой ценой). Плюсы, конечно, есть ― например, у дизайнеров на Windows (которых, если что, на порядок больше) появился выбор. Но их не так много, чтобы бросить всё и снова потратить полгода-год на перестройку процессов, шаблонов и т.п.

Одна из главных задач, которую решают дизайн-команды продуктов ― как повысить качество дизайна «на живом» без постоянных войн с косяками реализации. Есть «серебряная пуля» ― дизайн-системы с компонентами на технологическом уровне. Но и тут костыль ― дизайнерские шаблоны и компоненты в коде живут в разных мирах, их нужно обновлять параллельно и руками. Airbnb и несколько других энтузиастов показали в прошлом году, как можно экспортировать компоненты в шаблоны Sketch, но это всё равно костыль, требующий настройки кучи скриптов и сервисов (https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526).

У Figma другая история ― она уже работает в вебе, родной среде компонентных дизайн-систем. И хотя «компоненты» в инструменте пока далеки от того, что понимается под этим в технологических фреймворках типа React, связка между ними через API выглядит гораздо проще. Команда Figma уже попробовала экспорт макетов в React ― https://www.fastcodesign.com/90165051/as-design-and-engineering-blur-figma-wants-to-be-their-platform, а вездесущие Airbnb когда-то успели прикрутить свою дизайн-систему ― https://airbnb.design/the-evolution-of-tools/. Есть и другие эксперименты по связке живого продукта и Figma ― https://twitter.com/benjennin_gs/status/977087807100395521/video/1, GitHub научились выдавать иконки в продукт ― https://github.com/primer/octicons.

Пока это всё ранние эксперименты, которые ничего не гарантируют, и я скорее расписываю свои влажные фантазии на тему будущего, которое не обязательно случится. Тем более, что придётся решить ещё уйму проблем, в том числе с нормальными переменными ― сейчас их нет ни в одном инструменте; единые цвета, шрифты и отступы на совести дизайнера, экспортировать их тоже нельзя (хотя Design Systems Manager от InVision идёт в правильную сторону и выдаёт кое-какие переменные во всех возможных форматах). Но если вы слышали про концепцию подрывных (disruptive) инноваций, то с анонсом платформы Figma начинает выглядеть именно так.

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

#tools

Сайты UXmatters и A List Apart имеют хорошую привычку публиковать отрывки из свежих книг по дизайну интерфейсов — можно и про саму книжку узнать, и полезность оценить. Держите прибавление на полку:

— Kevin Hoffman «Meeting Design: For Managers, Makers, and Everyone» — https://rosenfeldmedia.com/books/meeting-design/ (Rosenfeld Media). Глава 2 — http://alistapart.com/article/meeting-design.
— Peter Morville «Planning for Everything ― The Design of Paths and Goals» ― https://www.amazon.com/dp/0692059954/ (Semantic Studios). Глава 2 — https://www.uxmatters.com/mt/archives/2018/03/planning-for-everything-the-design-of-paths-and-goals.php.
— Erica Hall «Conversational Design» — https://abookapart.com/products/conversational-design (A Book Apart). Глава 1 — http://alistapart.com/article/conversational-design.
— Luke Hay «Researching UX: Analytics» — https://www.sitepoint.com/premium/books/researching-ux-analytics (SitePoint). Глава 6 — https://www.uxmatters.com/mt/archives/2018/03/researching-ux-analytics.php.

Вы вряд ли поверите, но помимо сотен статей я успеваю читать ещё и книжки (идеально для поезда, самолёта или ленивого отпуска). Как заядлый спискомен, веду хронологию в сервисе Goodreads — https://www.goodreads.com/jvetrau. По оценкам можно посмотреть на рекомендации по профессиональной литературе — https://www.goodreads.com/review/list/1196619-yury-vetrov?order=d&shelf=read&sort=rating. А в виш-лист накидываю весь свежак и просто добротную классику, до которой ещё не добрался — https://www.goodreads.com/review/list/1196619-yury-vetrov?shelf=to-read. Возможно, это ответит на ваш вопрос «что читать дизайнеру интерфейсов».

#books

Собрал дайджест продуктового дизайна за март — http://jvetrau.com/digest-2018-mar/ на основе материалов группы https://www.facebook.com/groups/pdigest/.

Я продолжаю переезд на новую тему оформления и редактор Сетка (https://setka.io/ru/) от Look at Media, поэтому возможны косяки в старых материалах — за пару месяцев починится. Этот выпуск тоже экспериментальный по подаче, но уже лучше освоился с редактором и пробую более интересные приёмы вёрстки.

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

Во вторник вышел свежий дайджест продуктового дизайна — http://jvetrau.com/digest-2018-mar/. Если вы до него не добрались (или закопались в обилии ссылок), вот парочка самых крепких материалов оттуда на выходные:

Новый отчёт John Maeda о состоянии дизайна в цифровых продуктах — https://www.slideshare.net/johnmaeda/design-in-tech-report-2018/. В нём всё ещё хватает интересных наблюдений за тем, как меняются компании и рынок в целом, но с прошлого года фокус смещается на продвижение его собственных концепций (включая спорную «computational design»). Это всё ещё отражает направление движения рынка, но прорывных открытий, как было в первых двух выпусках, всё меньше.

Michael Flarup решил потроллить дизайн-сообщество и сделать современное прочтение скеоморфного дизайна календаря для iPhone X ― https://blog.prototypr.io/bringing-back-skeuomorphic-design-d211cc1c22d2. Правда, возможно он говорил об этом серьёзно... Тем более, что возвращение бесполезного декора может закончиться именно этим.

А вот ещё пара свежих статей, которые попадут в апрельский:

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

Рассказ о редизайне Reddit, который не менялся с 2008 года ― https://www.wired.com/story/reddit-redesign/. В такой ситуации опасно делать резкие шаги ― важно начать процесс обновления, а после этого сделать его непрерывным. Официальный анонс ― https://www.reddit.com/r/announcements/comments/891stx/starting_today_more_people_will_have_access_to/ (выкатываться он будет постепенно). На очереди Craigslist.

Со следующей недели пойдут традиционные тематические срезы новенького.

#links

Альфа-Банк оформил свою дизайн-систему в отдельный сайт ― http://design.alfabank.ru/ (до этого была просто библиотека на GitHub). Есть как компоненты в коде, так и описание принципов дизайна, а также шаблоны в Sketch ― один из лучших примеров на нашем рынке, да ещё и удачно сопровождённый их новым стилем иллюстраций. Обновили страницу компании в клубе отечественных создателей дизайн-систем ― http://designsystemsclub.ru/companies/alfabank.html.

А вот другие толковые примеры реализации, где есть что подсмотреть для ваших задач:

Yesenia Perez-Cruz из Vox Media рассказывает о подходе команды к развитию дизайн-системы — https://www.lukew.com/ff/entry.asp?1989 — они ориентируются в первую очередь на сценарии использования, а не просто паттерны.

Глава дизайн-системы Microsoft Fluent Joey Pitt рассказывает о принципах работы её команды ― https://medium.com/microsoft-design/design-system-fundamentals-3ff6a4c98c43. Как строится цикл обновлений, как они завязаны на версии Windows.

Серия статей Nathan Curtis о том, как описывать компоненты в дизайн-системах ― https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015. Получается исчерпывающее руководство, которое работает и как инструкция для начинающих, так и неплохой чеклист для уже имеющих дизайн-системы.

Дизайн-система компании Pluralsight ― http://design-system.pluralsight.com/. Одно из самых толковых описаний принципов анимации ― http://design-system.pluralsight.com/core/motion/ ― шкала скорости с разбивкой по ситуациям применения.

Rob Weychert рассказывает о своём подходе к работе с цветом с помощью простого набора переменных и модели HSL ― http://v6.robweychert.com/blog/2018/02/v6-color/. Хороший параметрический способ управлять палитрой. Его же рассказ об использовании типографической шкалы для дизайн-системы ― http://v6.robweychert.com/blog/2017/11/v6-typography-proportions/.

Что-то из этого вышло в недавнем дайджесте, что-то совсем свежее. Не забудьте подписаться на рассылку клуба ― http://eepurl.com/deKCzL. Скоро там будет полезный анонс, который вы больше нигде не найдёте.

#designsystems

Если вы ещё не читаете Jeff Sauro, то самое время начать — он лучше всего пишет об измерении дизайна. В блоге его компании Measuring U (https://measuringu.com/) регулярно выходят отличнейшие статьи на тему методов пользовательских исследований, детальнейшие разборы особенностей расчётов метрик (с историческими выкладками), появляется куча ценной статистики по известным компаниям на рынке. А ещё он автор нескольких крепких книжек на эту тему. Из свежего (или выходившего в последние месяцы):

— Как измерить отношение пользователей к бренду — https://measuringu.com/brand-affinity-sentiment/. Он приводит пример оценки для пары десятков известных компаний.

— Существующие исследования на тему того, обнаруживают ли менее опытные пользователи больше проблем в интерфейсах ― https://measuringu.com/novice-expert-issues/. Если кратко, то да.

— Пользовательское исследование крупнейших соц.сетей на тему доверия к ним и удобства работы в целом ― https://measuringu.com/social-media-ux/. Пользователи относятся к ним критично.

— Насколько важно сопровождать интерфейсные опросники несколькими вопросами, чтобы результаты были более достоверными ― https://measuringu.com/single-multi-items/. Как обычно, зависит от задачи ― где-то одного вопроса вполне достаточно. Да и у опросников на несколько вопросов есть свои проблемы.

— Важность всегда помнить о целях пользовательского исследования, чтобы не потеряться в деталях по ходу его проведения — https://measuringu.com/research-grid/. Он предлагает формат записи целей исследования и основных гипотез, который можно отслеживать по ходу работ. И сводная памятка — https://measuringu.com/effective-research/ — как сделать пользовательские исследования более эффективными.

P.S. Возможно, в ближайшие недели будут проблемы с доступом к этому каналу. Его выпуски можно также читать во ВКонтакте — https://vk.com/pdigest.

#metrics

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

Adobe XD: Апрельское обновление ― https://theblog.adobe.com/april-2018-update-adobe-xd/. Улучшение поиска по макетам и другие доработки.

Framer: Появилась работа с 3D-объектами и их анимация ― https://blog.framer.com/introducing-framer-form-288fcb162ca2. Это востребованный визуальный стиль, который делает продукты бодрее.

Sketch: Stackswell, ещё один плагин для адаптивных макетов в Sketch ― https://stackswell.io/. Правда, пример Anima AutoLayout показывает, что это очень нестабильные решения, которые оставляют много мусора за собой. Анонс ― https://medium.com/sketch-app-sources/bringing-css-smarts-to-sketch-c183e8cd1dc9.

Контроль версий для дизайнеров: Обновились Abstract (https://blog.goabstract.com/abstract-0-70-full-speed-ahead-79e2636fb2b5) и Plant (https://blog.prototypr.io/the-all-new-plugin-from-plant-d26fc0bcb049).

Студия Icons8 продолжает эксперименты с просмотрщиками макетов в Sketch — новый онлайн-сервис Sketch the Ripper позволяет разобрать их — http://sketch.the.ripper.graphics/. Чуть раньше они выпустили инструмент Lunacy для дизайнеров интерфейсов на Windows, который умеет работать с макетами Sketch ― https://icons8.com/lunacy.

Solis: Приложение для Mac облегчает вёрстку адаптивных сайтов — https://solisapp.com/. Гибкий и мгновенный предпросмотр даже для изменений в файлах препроцессоров.

Paste: Инструмент для создания презентаций от FiftyThree, создателей Paper — https://fiftythree.com/paste. Недавно в нём появилась возможность вставлять макеты в устройства, есть уйма вариаций.

InVision: Muzli собрали примеры интересных интерактивных прототипов, сделанных на InVision Studio — https://medium.muz.li/made-with-studio-1-823945cf1e56. И немного истории создания InVision и их стратегии проникновения в компании клиентов от Fast Co Design — https://www.fastcodesign.com/90162865/how-clark-valberg-accidentally-discovered-the-weakness-in-adobes-empire.

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

#tools

Мы строим свою дизайн-систему Paradigm с 2012 года. Но такого лютого взрыва интереса к теме с уймой новых примеров и публикаций, как в последние пару лет, ещё не было. В прошлом году наконец-то вышла книга Brad Frost «Atomic Design» и про дизайн-системы говорят вообще все. Правда, большинство статей — бесконечное пережёвывание теории модульного дизайна, про практику внедрения кроме Nathan Curtis почти никто не пишет. Кроме того, хотя заслуга Брэда в популяризации идеи модульного дизайна неоценима, но и сам подход, и метафора «атомарности» / «молекулярности» существовали до него (Nathan Curtis пишет, что еще Dell в середине 90х делал компонентную систему с такой же терминологией, а в современный обиход «atomic design» ввёл Jeremy Keith в районе 2011 года).

Мне было интересно разобраться в первоисточниках, поэтому в прошлом году я засел за чтение всего, что выходило на тему паттернов, компонентов и модульности (эта статья развивает прошлогоднюю заметку — https://www.facebook.com/notes/%D1%8E%D1%80%D0%B8%D0%B9-%D0%B2%D0%B5%D1%82%D1%80%D0%BE%D0%B2/%D0%BA%D0%BD%D0%B8%D0%B3%D0%B8-%D0%BE-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0%D1%85/10155204887092229/). Идеальной книги нет, но часть из них показывает очень правильные точки зрения:

1. Кристофер Александер — Язык шаблонов. Города. Здания. Строительство (https://www.artlebedev.ru/izdal/yazyk-shablonov/) (1977)
Хотя её полезность для практической работы дизайнера интерфейсов не особо велика, точка зрения, с которой она написана — безумно интересна. Это три уровня «масштаба» (считай, сама по себе модульность) и, самое главное — глубина социальных, экономических, психологических и политических обоснований, которая стоит за каждым шаблоном. Последнее напрочь потерялось в современных библиотеках паттернов. В книге 1090 страниц и я несколько лет ждал удобного случая, чтобы взяться за неё, но ни разу не прогадал.

2. Nathan Curtis — Modular Web Design (http://www.peachpit.com/store/modular-web-design-creating-reusable-components-for-9780321601353) (2009)
Все основные идеи модульных дизайн-систем описаны ещё там, очень и очень здравое понимание роли единого подхода к интерфейсам на всех этапах продуктовой работы. Но она, чёрт возьми, построена вокруг процесса создания wireframes! Поэтому нужно сильно абстрагироваться от конкретных применений идеи.

3. Anna Debenham — A Pocket Guide to Front-End Style Guides (https://www.goodreads.com/book/show/18885161-a-pocket-guide-to-front-end-style-guides) (2013)
Это совсем небольшая обзорная книга, её главная ценность — она первой описала эти идеи для веба в более-менее структурированном виде. Правда, второе издание (http://www.maban.co.uk/projects/front-end-style-guides/) просто слегка обновило тексты и примеры, не дав никакой новой ценности — в таком виде оно сейчас бесполезно.

4. Brad Frost — Atomic Design (http://atomicdesign.bradfrost.com/) (2017)
Лучший обзор того, что сейчас представляет из себя модульный дизайн. Очень хорошо описана польза от внедрения дизайн-системы на всех уровнях, есть примеры и в целом здравые мысли на тему. Хотя она чересчур теоретична, не хватает самого мяса про подводные камни реального процесса работы. Кроме того, там только вскользь затронута самая главная тема — как построить правильную компонентную систему, которая обновляется по всей линейке продуктов, а не просто набор CSS-стилей.

5. InVision — Design Systems Handbook (https://www.designbetter.co/design-systems-handbook) (2017)
Онлайн-методичка в рамках инициативы Design Better (https://www.designbetter.co/). Самая актуальная и практически полезная — есть и про менеджмент процесса, и про технологическое решение, и про базовые вещи, и про будущее с алгоритмическим дизайном. Не всегда хватает глубины раскрытия тем, но в остальном — огонь.

#designsystems #books