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

1. Bill Chung провёл пользовательское исследование схематичных экранов загрузки, которые популяризировал в своё время Facebook — https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a. Они помогают, если показывают загрузку поэтапно и снижают неопределённость ожидания, а не просто служат в качестве заглушек. Автор даёт советы по правильной анимации для них.

2. Kate Moran и Kim Flaherty из Nielsen/Norman Group показывают причины возникновения технологических мифов и то, как они влияют на использование продуктов — https://www.nngroup.com/articles/technology-myths/.

3. Alexander Handley описывает уровни детализации wireframes и сценариев — https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a.

4. Относительно толковый разбор особенностей дизайна интерфейсов в блокчейне — https://medium.com/@jmer.ux/blockchain-ux-design-challenges-principles-and-heuristics-903f8e0aa370. Большинство статей на тему страдают отсутствием конкретики, здесь хотя бы неплохой обзор ключевых нюансов.

5. Marli Mesibov из Mad*Pow даёт советы по дизайну интерфейсов, которые помогают в поддержании ментального здоровья пользователей — https://www.smashingmagazine.com/2018/10/designing-experiences-improving-mental-health/.

6. Alita Joyce из Nielsen/Norman Group описывает принципы хороших микро-взаимодействий в интерфейсе — https://www.nngroup.com/articles/microinteractions/.

7. Edward Scott говорит о проблемах горизонтальных вкладок на странице товара — https://baymard.com/blog/avoid-horizontal-tabs. Они помогают разделить масштабное описание на части, но пользователи теряют их. От него же о правильном поле ввода срока окончания действия карты — https://baymard.com/blog/how-to-format-expiration-date-fields.

На следующей неделе выйдет традиционный ежемесячный дайджест — осталось шлифануть черновик и он у вас на экранах. Хороших выходных!

#patterns

Собрал дайджест продуктового дизайна за октябрь 2018 ― https://jvetrau.com/digest-2018-oct/. Спасибо Александру Орлову (https://www.behance.net/0rlov) за новый визуальный стиль — до конца года он обкатается и станет органичнее.

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

Попал на относительно свежую конференцию по дизайн-менеджменту цифровых продуктов DesignOps Summit (проходит второй год) ― https://rosenfeldmedia.com/designopssummit2018/designops-summit-program/. В 2017 выбрал Clarity по дизайн-системам.

У меня сложное отношение к баззворду ― https://uxdesign.cc/designops-or-ux-strategy-or-design-management-or-design-leadership-b579c1070f18 (на русском ― https://jvetrau.com/designops-definition/). С одной стороны, все практики, методы и инструменты дизайн-менеджмента, о которых говорят под соусом DesignOps, повторяют то, о чём и так говорили последние лет 6 под другими марками (у меня вышла пачка статей и книга в работе ― https://www.desops.co/). С другой ― за эти годы стало окончательно понятно, что дизайн критически важен для успеха компаний на высококонкурентных рынках, а значит сильно выросли внутренние команды. А с их ростом встал вопрос об эффективности такого табора дизайнеров (причём они зачастую разбросаны по компании) и спрос на дизайн-менеджеров растёт последние пару лет. Ну а поскольку рост прогнозируется ещё больший, нужно ориентироваться под предсказуемое масштабирование дизайн-команд без просадки по качеству результата.

Оказалось очень годно ― одна из самых полезных конференций, на которых бывал. Мощно, что смогли набрать столько узкоспециализированного контента на два дня ― почти все выступления были либо добротными, либо крутыми (всего несколько пустышек). Уже есть презентации ― https://www.slideshare.net/RosenfeldMedia и отчёт от Natalie Hanson ― https://nataliehanson.com/tag/dops18/. Организаторы обещают выложить видео (подписывайтесь на канал Rosenfeld Media ― https://www.youtube.com/playlist?list=PLS-xE0iEIwRlghxQPJC5RXLE1tXNpoJ-E).

Мне больше всего зашли эти:

1. Leisa Reichelt (Atlassian) ― https://nataliehanson.com/2018/11/07/dops18-01-operating-in-context/. Здорово о том, как структура и методы работы дизайн-команды зависят от головной компании. Презентация ― https://www.slideshare.net/RosenfeldMedia/operating-in-context-leisa-reichelt-at-designops-summit-2018.

2. Brennan Hartich (Intuit) ― https://nataliehanson.com/2018/11/07/dops18-02-designops-new-function/. Очень простая и понятная метрика оценки продуктивности дизайн-команды ― сколько времени дизайнер тратит непосредственно на дизайн. Она облегчает инвестиции в дизайн-менеджмент. Презентация ― https://www.slideshare.net/RosenfeldMedia/communicating-and-establishing-designops-as-a-new-function-brennan-hartich-at-designops-summit-2018.

3. Chris Moses (athenahealth) ― https://nataliehanson.com/2018/11/07/dops18-03-stretching-definition/. Крутейший подход к формированию и разбору дизайн-долга. Презентация ― https://www.slideshare.net/RosenfeldMedia/stretching-the-definition-of-designops-chris-moses-at-designops-summit-2018.

4. Алёна Югина (Shopify) ― https://nataliehanson.com/2018/11/07/dops18-07-systems-at-scale/. Системный подход к инсайт-системе.

[продолжение в https://t.me/pdigest/130]

#designmanagement #designops #conference #events

[начало в https://t.me/pdigest/129]

5. Jason Mesut ― https://nataliehanson.com/2018/11/08/dops18-10-shaping-designers-teams/. Карта компетенций продуктового дизайнера на базе его недавней статьи. Презентация ― https://www.slideshare.net/RosenfeldMedia/shaping-designers-and-design-teams-jason-mesut-at-designops-summit-2018.

6. Courney Kaplan (Facebook) ― https://nataliehanson.com/2018/11/08/dops18-13-next-level/. Про опыт Design Program Management (популярный термин на конференции) и стремительный рост дизайн-команды (с 2 до 300 дизайнеров за 5 лет). Презентация ― https://www.slideshare.net/RosenfeldMedia/taking-it-to-the-next-level-career-paths-in-designops-courtney-kaplan-at-designops-summit-2018.

7. Maria Skaaden (Bekk) ― https://nataliehanson.com/2018/11/08/dops18-16-continuous-design/. Единственный кейс, но очень толковый. Презентация ― https://www.slideshare.net/RosenfeldMedia/continuous-design-one-eye-on-the-horizon-and-the-other-on-the-next-wave-maria-skaaden-at-designops-summit-2018/.

8. Doug Powell (IBM) ― https://nataliehanson.com/2018/11/09/dops18-18-design-at-scale/. Как управлять 1800 дизайнерами и измерять успешность дизайн-организации. Презентация ― https://www.slideshare.net/RosenfeldMedia/operating-in-context-doug-powell-at-designops-summit-2018.

Также попал на мастер-класс Peter Merholz и Kristin Skinner на базе их книги «Org Design for Design Orgs». Не очень согласен с тем, что они топят только за одну организационную модель, но было интересно понять их аргументацию. Мы изначально используем такой подход (централизованная команда с подгруппами, где дизайнеры привязаны к конкретным продуктам, частично находятся в продукте), но всё объективно движется в сторону модели Spotify. В любом случае занятно, как вообще проходит мастер-класс по дизайн-менеджменту ― меня периодически просят провести, но я не очень понимал в каком формате.

Недавно в Москве проходил DesignOps Meetup, где я рассказывал о нашем подходе к системному развитию дизайна. В нём есть все пункты из тех, что рассказывались на конференции. Но я увидел много интересных деталей и нюансов по их внедрению, так что получится сделать быстрее и лучше.

Я уже побывал на 3 из 5 конференций по дизайн-менеджменту ― MXConference, UXSTRAT и DesignOps Summit. В следующем году доберусь до Leading Design. Лучшими пока что были DesignOps Summit и MXConference (сейчас называется LXConference) ― всячески рекомендую.

#designmanagement #designops #conference #events

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

McKinsey предложили свой индекс влияния дизайна на бизнес McKinsey Design Index ― https://www.mckinseydesignindex.com/. Они провели опрос 300 публичных компаний и сопоставили их финансовые показатели с успехами в продуктах. В результате выделили критерии интеграции дизайна, которые отличают самые самые успешные компании. Сопроводительная статья ― https://www.mckinsey.com/business-functions/mckinsey-design/our-insights/the-business-value-of-design (перевод ― https://vc.ru/design/50722-cennost-dizayna-dlya-biznesa-tezisy-doklada-mckinsey и PDF-версия ― https://www.mckinsey.com/~/media/McKinsey/Business%20Functions/McKinsey%20Design/Our%20insights/The%20business%20value%20of%20design/The-business-value-of-design-vF.ashx).

Подход не новый:

1. Больше всего шумел Design Management Institute с аналогичным индексом Design Value Index (http://www.dmi.org/?DesignValue). Он показывает капитализацию компаний, инвестирующих в дизайн — в 2015 году он вырос на 211% сильнее фондового индекса S&P 500. По сути McKinsey сделали кальку с него.

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. Отчёт Design Counsil о вкладе дизайна в британскую экономику в 2015 году — http://www.designcouncil.org.uk/resources/report/design-economy-report. Очень интересные и приятные цифры — она принесла £71,7 млрд валовой добавленной стоимости (7,2% от общей цифры по стране). Если не считать, что они просто включили в эту цифру вообще весь результат компании с хорошим дизайном, не только долю дизайна.

4. А вот похожее исследование для Финляндии —  http://issuu.com/anttipitkanen/docs/droi_measurabledesign_2012_issuu_en/1.

На самом деле нет? Bloomberg сопоставили American Customer Satisfaction Index и рыночную динамику 190 ведущих компаний — всё наоборот — http://www.bloomberg.com/news/articles/2013-12-17/proof-that-it-pays-to-be-americas-most-hated-companies.

[продолжение в https://t.me/pdigest/132]

#designmanagement #metrics #roi

[начало в https://t.me/pdigest/131]

Так и кому верить? На самом деле правы все индексы. На конкурентном B2C-рынке качество продукта и обслуживания очень важны для успеха на рынке. Но если продажи мало зависят от мнения конечного пользователя (монопольные отрасли, государственные сервисы, корпоративное ПО с централизованными закупками), работают другие закономерности. Кроме того, вложения в качество продукта нацелены на долгосрочную перспективу, они не покажут быстрого результата. Поэтому недостаточно ссылаться на успех других компаний — их бизнес может работать по другим принципам.

Успех продукта — это в первую очередь грамотная продуктовая стратегия. В современном мире B2C она, как правило, включает в себя хороший дизайн. Его сложно выделить в общем вкладе правильной стратегии с упором на ценность для пользователя, чётко выстроенного процесса доставки результата на рынок, искусной дистрибьюции и множества других активностей.

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

Интерес McKinsey понятен ― они участвовали в гонке по скупке дизайн-студий (приобрели Lunar и Veryday), а теперь запустили собственный консалтинг McKinsey Design ― https://qz.com/work/1439341/mckinsey-opens-its-own-design-consultancy/. Отчёт ― одна из их первых иницатив, которая рекламирует их экспертизу. На конференциях полно спикеров от них (частенько льют консультансткую воду). Грех жаловаться на помощь в раскрутке дизайна, но нужно трезво оценивать пользу.

Среди подобных исследований самое толковое провела Leah Buley в 2015 году для Forrester Research ― http://www.tandemseven.com/wp-content/uploads/2015/03/How_To_Modernize_User_Exp.pdf. Она опросила 23 компании, чтобы узнать, как устроены их дизайн-команды. В результате у неё получилось выделить набор характеристик внутренней организации и вовлечённости в продуктовую работу, которые присущи наиболее сильным с точки зрения дизайна компаниям. Она подробно рассказывала о выводах на Interaction15 ― https://vimeo.com/121037431, а в 2016 году провела повторный опрос (уже после ухода из Forrester) ― http://www.creativebloq.com/features/the-state-of-ux-in-2016.

Выводы о внутреннем устройстве дизайна в хороших компаниях ― наверное, самая ценная часть таких отчётов (у меня, как всегда, есть статеечка в кассу ― https://jvetrau.com/uxstrategy-6/). Вторая польза ― попытка разобраться в ROI (недавний выпуск на тему ― https://t.me/pdigest/100). Верить ли индексам дизайна, в которых среди лидеров записан SAP ― вопрос дискуссионный.

#designmanagement #metrics #roi

Новые инструменты дизайна копились-копились, да выплеснулись в четырнадцатый мини-выпуск дайджеста:

InVision Studio: Вышла версия 1.0 — https://www.designernews.co/stories/98647-welcome-to-invision-studio-10. Общие библиотеки компонентов, улучшение интерфейса и производительности. UI Kit для iOS (https://s3.amazonaws.com/www-assets.invisionapp.com/iOS+UI+Kit.studio.zip) и Android (https://s3.amazonaws.com/www-assets.invisionapp.com/Material+Design+UI+Kit.studio.zip).

Bondlayer (https://www.bondlayer.com/): Новый инструмент дизайна и разработки. Можно получить код для веба или Android/iOS (и даже опубликовать в магазинах приложений).

Drawkit (https://www.drawkit.io/): Шаблоны иллюстраций в духе Slack.

Figma: Dylan Field сделал обзор основных обновлений за год ― https://www.figma.com/blog/figma-year-in-review-2018/. Скорость развития инструмента, конечно, фантастическая. Читайте также советы по эффективной работе с инструментом от Tom Johnson ― https://blog.prototypr.io/figma-tips-and-tricks-1c07ec13b696.

Sketch: Плагин Timelapse (https://timelapsesketch.com/) позволяет записать скринкаст работы над макетом. Anima управляет отступами вложенных символов — https://medium.com/sketch-app-sources/padding-with-nested-symbols-in-sketch-with-anima-eec9ac2194ec. VK Data позволяет вставлять различные данные из профиля ВКонтакте: аватарки друзей, сообществ, обложки видео — https://github.com/VKCOM/vkdata-sketchplugin.

Adobe XD: Памятка по дизайну интерфейсов в Adobe XD от Telmo Subirá Rodríguez ― https://medium.com/drill/learning-the-basics-of-adobe-xd-in-one-hour-3537f3ac02a3.

Atomic: Инструмент закрывается — https://atomic.io/prototyping. Команда планирует заняться более общим инструментом для продуктовой разработки.

Framer: Получили ещё $24 млн инвестиций в серии Б — https://techcrunch.com/2018/11/12/framer-series-b/.

Cleverstack (https://cleverstack.com/): Сервис помогает проводить брейнштормы в онлайне — записывать идеи и голосовать за них, чтобы выбрать наиболее годные.

Leeflets (https://leeflets.com/): Ура! Ещё один конструктор одностраничников.

Grid Studio (https://grid.studio/): Стоп. Ещё один!

Palx (https://palx.jxnblk.com/): Генератор цветовых палитр. Вы ему основной цвет, он вам ― вспомогательные.

Meta Tags (https://metatags.io/): Сервис помогает быстро примерить мета-теги сайта и то, как ссылка отображается в Google, Facebook, Twitter, LinkedIn, Pinterest и Slack.

Squoosh (https://squoosh.app/): Сервис для оптимизации изображений от Google.

Avocode: Теперь тоже показывают связку экранов, загруженных как прототип — https://avocode.com/prototyping.

Думаю, до конца года ещё увидим пачку обновлений.

#tools

Долг бывает карточный, технический, организационный и интерфейсный. За первый можно пострадать лично и физически, за остальные ― отхватить проблем как продуктовая компания. Дизайн-долг ― это намеренно или неумышленно накопленные проблемы с юзабилити, решение которых откладывается до будущих версий. В итоге страдают пользователи, а они хоть и терпеливые, со временем соскакивают и не возвращаются.

Есть несколько примеров системного подхода:

1. Anna Kaley из Nielsen/Norman Group показывает, как разбирать интерфейсный долг ― https://www.nngroup.com/articles/ux-debt/. Вводная достаточно общая, а вот про внесение проблем в продуктовый план написано хорошо.

2. Очень толковый кейс переработки крупной линейки продуктов ― http://uxpamagazine.org/ux-debt-in-the-enterprise/. К статье прилагается калькулятор в Excel.

3. Подход Athena Health ― https://medium.com/athenahealth-design/creating-a-sustainable-strategy-for-tackling-product-wide-ux-debt-5542c6b028bd. О нём рассказывали и на DesignOps Summit ― https://www.slideshare.net/RosenfeldMedia/stretching-the-definition-of-designops-chris-moses-at-designops-summit-2018. Толковый системный метод, как и всё, о чём пишет команда.

4. Подход Salesforce ― https://medium.com/iq-design/how-to-effectively-address-the-usability-debt-within-your-product-6b8693e6e853. Годный метод приоритезации.

5. Dave Rau из Optimizely описывает формат «дня полировки» для исправления проблем в продукте ― https://medium.com/design-optimizely/pay-down-design-debt-with-polish-day-867eb59dd83d. Команда выделяет день на исправление багов и оценивает список найденных проблем так, чтобы закрыть наиболее критичные.

6. Nicole Rusan рассказывает о близком понятии концептуального долга ― https://medium.com/all-things-product-management/conceptual-debt-is-worse-than-technical-debt-5b65a910fd46. Это когда основы интерфейса были заложены неправильно и что с потом этим делать.

Узнал об идее из статей Andrew Wright ― http://nform.com/ideas/user-experience-debt/ и Jim Kalbach ― https://experiencinginformation.com/2014/05/03/ux-debt-borrowing-from-your-users/. На случай, если интересна предыстория.

В своей серии статей о дизайн-менеджменте я описывал и интерфейсный, и организационный долг ― https://jvetrau.com/uxstrategy-6/. Мы постепенно выстраиваем работу с ним в компании ― это поможет сделать следующий рывок в качестве продуктов. Начинали с простейшего ― экспертно прошлись по продуктам и поставили задачи в Jira на все найденные проблемы. На следующий год большие планы по систематизации процесса ― интегральная метрика юзабилити с учётом долга, регулярное обновление списка из разных источников, предсказуемый разбор.

#designmanagement #designops #uxdebt

Голосовые помощники показывают крутой рост — на конец года прогнозируют 75 миллионов проданных устройств по миру (подробная статистика ниже). Китай скоро обгонит США, да и в России намечается горячая пора — к Яндексу и Google добавится Mail.Ru Group.

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

1. Ben Sauer собрал для Clearleft коллекцию принципов дизайна голосовых интерфейсов от разных компаний — https://voiceprinciples.com/. В дополнение к ним — книги, статьи и общие мысли.

2. Годная памятка по проектированию голосовых интерфейсов от Justin Baker из Intuit — https://medium.muz.li/voice-user-interfaces-vui-the-ultimate-designers-guide-8756cb2578a1. Выбор типа устройства, сценарии и контексты использования, технологические ограничения и ключевые моменты взаимодействия.

3. Советы по прототипированию голосовых интерфейсов от Cathy Pearl из Google, Cassidy Williams из Amazon, Susse Sønderby Jense из Adobe XD, Ben Sauer из Clearleft — https://theblog.adobe.com/how-to-voice-ui-prototyping-delight-users/.

4. Aimylogic: Онлайн-конструктор чат-ботов и навыков для голосовых помощников Google Assistant и Яндекс Алиса — https://aimylogic.com/.

5. Adobe XD: Демо возможностей прототипирования голосовых интерфейсов — https://www.subtraction.com/2018/10/24/demoing-voice-live-at-adobe-max-2018/.

А вот как их используют на самом деле. Лучшие исследования делают Nielsen/Norman Group, вот свежие:

— Изучили ожидания пользователей от идеального умного помощника и сопоставили их с существующими продуктами по нескольким критериям — https://www.nngroup.com/articles/intelligent-assistant-user-needs/. Крайне интересная пища для выбора направлений развития.

— Интересный парадокс — хотя пользователи описывают множество проблем в работе с ними, в целом они зачастую довольны — https://www.nngroup.com/articles/intelligent-assistants-poor-usability-high-adoption/. Одна из главных причин — пользователи сами ограничили круг сценариев использования, в которых умные помощники предсказуемы.

— Перевод самой первой части — https://medium.com/usethics-doc/intellegent-assistants-have-poor-usability-52b3dd443ed1.

LoupVentures сравнили качество ответов Alexa, Cortana, Google Assistant и Siri по 800 запросам — https://loupventures.com/annual-digital-assistant-iq-test-siri-google-assistant-alexa-cortana/. Если с пониманием самой фразы проблем не было, то с выдачей подходящего ответа всё сильно хуже.

Собрал также много свежей статистики рынка и парочку интересных новостей, но в формат Телеграма это уже не влезает — https://vk.com/@pdigest-voiceui-03. Пользуйтесь на здоровье.

#voiceui

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

1. Duncan Campbell из Gorilla Arm разбирает лучшие практики экранов-заставок при запуске приложений ― https://uxdesign.cc/building-the-perfect-splash-screen-46e080395f06. Толковые советы для разных ситуаций, позволяющие уменьшить реальное или воспринимаемое ожидание загрузки.

2. Дихотомия между юзабилити и безопасностью ― одна из самых старых в профессии, причём зачастую проигрывает либо одно, либо другое. Serena Chen описывает пути, которые помогут найти баланс ― https://increment.com/security/design-for-security/ ― как сделать наиболее безопасный вариант самым удобным, чтобы по нему хотелось пойти.

3. Raluca Budiu рассказывает о пользовательском исследовании ботов от Nielsen/Norman Group ― https://www.nngroup.com/articles/chatbots/. Отличное описание типовых сценариев и частых проблем.

4. Судя по всему, тёмные темы оформления станут хитом следующего года. Andy Clarke показывает, как поддержать её на сайте через media queries ― https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode.

5. Толковый ресурс по оптимизации интерфейсов для людей с нарушениями восприятия цвета (300 миллионов человек в мире) ― https://wearecolorblind.com/. Кейсы, статьи, инструменты.

6. Yuxuan (Tammy) Zhou из Nielsen/Norman Group описывает принципы использования полей ввода с пошаговым увеличением значений ― https://www.nngroup.com/articles/input-steppers/.

7. Page Laubheimer из Nielsen/Norman Group описывает несколько способов сохранения товаров в интернет-магазине на будущее и помогает выбрать оптимальный ― https://www.nngroup.com/articles/wishlist-or-cart/.

8. Советы по созданию годных страниц ошибки 404 от Shelby Rogers ― https://www.smashingmagazine.com/2018/11/the-101-course-on-crafting-404-pages/.

9. Советы Alita Joyce из Nielsen/Norman Group по грамотной работе с уведомлениями на мобильных ― https://www.nngroup.com/articles/push-notification/. Как правильно настроить их частоту и момент отправки.

Гарантия улучшения ваших интерфейсов на 146% (не является лекарственным средством).

#patterns

На недавней конференции Adobe MAX 2018 традиционно показали уйму крутых демок инструментов алгоритмического дизайна на базе инициативы Adobe Sensei — https://blogs.adobe.com/creative/what-you-missed-from-sneaks-at-max-2018/. Компьютеры грозятся стать ещё полезнее и снять ещё больше рутины.

Самый крутой, конечно же, Project Fontphoria ― https://www.youtube.com/watch?v=eTK7bmTM7mU. Он создаёт полноценный шрифт на базе нескольких символов на картинке, а потом может подставить их на реальный объект в дополненной реальности. Чёртова магия!

Fastmask позволяет выделить объект на видео по маске и следить за ним по всему ролику ― https://www.youtube.com/watch?v=GPVx4Tg9EZ0. Например, подложить текст за движущимся человеком.

Good Bones помогает быстро задать скелет персонажа в иллюстрации, чтобы упростить его анимацию ― https://www.youtube.com/watch?v=9OFtpPD8TYU.

Brush Bounty предлагает анимированные параметрические кисти для иллюстраций ― https://www.youtube.com/watch?v=Q9GUnQvkQOc.

Smooth Operator автоматически обрезает ландшафтное видео для stories ― https://www.youtube.com/watch?v=MImphmT5dy8.

Fantastic Fold упрощает дизайн сложной упаковки, которую непросто представить на статической раскладке ― https://www.youtube.com/watch?v=-llAe4fsJ-A.

Moving Stills делает фотографии объёмными, примерно как недавние 3D-фото в Facebook ― https://www.youtube.com/watch?v=dM-lX9c3Pqw.

Пополнил свою коллекцию за счёт них ― http://algorithms.design/. А вот ещё несколько обновок для неё:

1. Fred O'Brien описывает текущее состояние конструкторов сайтов, использующих алгоритмический дизайн ― https://www.websitebuilderexpert.com/artificial-intelligence-and-the-future-of-web-design/. Он пообщался с создателями многих из них или процитировал их мнения на тему.

2. Adam Cutler, Milena Pribić и Lawrence Humphrey из IBM подготовили свод этических правил для создателей интерфейсов и продуктов в целом с искусственным интеллектом ― https://www.ibm.com/watson/assets/duo/pdf/everydayethics.pdf. Анонс от авторов ― https://medium.com/design-ibm/everyday-ethics-for-artificial-intelligence-75e173a9d8e8.

3. Экспериментальный генератор реалистичных фотографий лиц от Shaobo Guan ― https://blog.insightdatascience.com/generating-custom-photo-realistic-faces-using-ai-d170b1b59255. Можно выбирать пол, возраст, расу и другие детали.

4. Китайское новостное агентство Xinhua запустило двух алгоритмических ведущих ― https://www.engadget.com/2018/11/08/chinese-news-agency-ai-anchors/. Их голос, выражение лица и движение губ синтезируются.

5. Эксперимент MIT воссоздаёт картины с помощью 3D-печати ― https://www.engadget.com/2018/11/29/mit-ai-recreates-paintings/.

Подпишитесь на рассылку новостей алгоритмического дизайна — http://eepurl.com/cKUguj. Так вы будете готовы к восстанию машин :)

#ai #algorithms

Собрал дайджест продуктового дизайна за ноябрь 2018 ― https://jvetrau.com/digest-2018-nov/. Спасибо Александру Орлову (https://www.behance.net/0rlov) за новый визуальный стиль — до конца года он обкатается и станет органичнее.

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

#digest

Единый стиль иллюстраций для Slack, который появился в 2017 году ― безоговорочный хит, который активно воспроизводит половина компаний. Он позволяет в игривой форме совместить человечность (люди отображены целиком и в сюжетах) и показать ключевые метафоры продукта (объекты и части интерфейса). Ну и просто типичный тренд, за которым все побежали, сцепившись паровозиком ― есть и другие стилистики, которые решают эти задачи.

Alice Lee, которая пустила волну по заказу Slack, рассказала о работе над проектом ― https://www.byalicelee.com/slack. Стартовый мудборд, промежуточные вариации, библиотека типовых объектов и большая галерея результатов ― дельно и подробно.

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

Humaaans (https://www.humaaans.com/) и Drawkit (https://www.drawkit.io/): Дёшево повторяем стиль Slack.

Isometriclove (https://isometriclove.com/): Собираем изометрию по шаблону на раз-два.

Конечно, получить стоковый результат можно было и на Shutterstock или Getty Images, они давно заполонили интернеты. Новое поколение конструкторов хотя бы даёт целостность подхода — легче собрать свой сюжет из готовых объектов.

Но если вы хотите выразить свой бренд в иллюстрациях, а не просто поставить сюжетную заглушку ― нужно искать свой язык. В статье Alice есть небольшая затравка на тему. Ну и в прошлом выпуске мини-дайджеста было много примеров: https://t.me/pdigest/123 и https://t.me/pdigest/124.

Само собой, полезно изучать тренды: Creative Bloq как раз выпустили обзор — https://www.creativebloq.com/features/5-huge-illustration-trends-for-2019. Удачи в поисках себя!

#illustrations #designsystems

Создатели инструментов дизайна делают последний рывок перед новогодне-рождественским затишьем и выпускают несколько новых экспериментальных инструментов и обновлений к существующим:

Uizard (https://uizard.io/): Превращает наброски интерфейсов на бумаге в достаточно аккуратные макеты Sketch. Давно следил за альфа- и бета-версиями, отличное применение идеи Airbnb для широкого круга дизайнеров.

Yotako (https://www.yotako.io/): Позволяет получить код для веба и нативных приложений Android и iOS из макетов Sketch, Adobe XD, Photoshop и Balsamiq (на подходе Figma).

VisBug (https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc): Плагин для Chrome позволяет менять вёрстку страницы в ещё более наглядном виде, чем встроенный Code Inspector. Памятка по работе с ним от Adam Argyle — https://medium.com/google-design/visbug-101-d2636120f8d7. И обзор похожих плагинов — https://css-tricks.com/devtools-for-designers/.

Montage (https://www.trymontage.com/): Делает упор на большую библиотеку компонентов, которые можно скачать и изменить под себя.

Hadron: Добавили отдельный набор возможностей для разработчиков, так что они могут работать вместе с дизайнером над одним проектом ― https://blog.prototypr.io/a-design-tool-that-is-also-a-developer-tool-introducing-profiles-in-hadron-c04537d159a8.

Iterate: Тарас Бризицкий делает свой инструмент для проектирования интерфейсов на iPad ― https://medium.com/@tbrizitsky/wireframing-on-ipad-done-right-iterate-beta-is-now-available-512b7ddd7279. Недавно появилась бета-версия ― https://testflight.apple.com/join/QCrT1I4Z. Более ранний анонс с описанием изначальной идеи ― https://blog.prototypr.io/https-medium-com-tbrizitsky-iterate-the-ux-designers-digital-sketchbook-6955cc74be57.

UI Constructor (https://www.uiconstructor.com/): Ещё один визуальный конструктор сайтов на базе Bootstrap. Позволяет собрать страницу из типовых блоков и оформить её.

Flare (https://www.2dimensions.com/about-flare): Новый инструмент для иллюстраций и их последующей анимации. Анонс от авторов ― https://medium.com/2dimensions/flare-launch-d524067d34d8.

Moca (https://serfo.com/p/wireframe/): Максимально простой онлайн-сервис для проектирования интерфейсов.

Adobe XD: Graeme Fulton сделал обзор возможностей прототипирования голосовых интерфейсов — https://blog.prototypr.io/voice-first-screen-second-designing-for-voice-in-adobe-xd-1a9e5efdca15. Всё это обёрнуто в шикарнейший обзор самого рынка и особенностей общения с голосовыми помощниками. Демо с Adobe MAX — https://www.subtraction.com/2018/10/24/demoing-voice-live-at-adobe-max-2018/.

Figma: Упрощённая возможность работы с диалогами и всплывающими слоями в прототипах (https://www.figma.com/blog/introducing-overlays-taking-prototyping-to-the-next-layer/) и экспорт в PDF (https://www.figma.com/blog/our-path-to-creating-the-highest-quality-pdf-exporter/) ― теперь можно делать и презентации.

Sketch: Плагины: Felipe (https://www.arielverber.com/felipe/) позволяет превращать примитивные фигуры в символы Sketch. Анонс от автора ― https://uxdesign.cc/intention-based-design-e58a4575ebbe.

InVision Studio: Коллекция обучающих материалов от Matt D. Smith ― https://switchtostudio.com/.

Readymag: Анонсировали бета-версию разбивки длинных страниц на секции ― https://readymag.com/readymag/newsletter/. Это упростит изменение контента в середине (не придётся двигать и перепроверять то что ниже).

Phase: Команда показывает, как упростится прототипирование за счёт встроенных состояний компонентов — https://blog.prototypr.io/conditional-logic-in-phase-if-else-made-visual-12dbd0178e61.

Ура, вам больше не придётся тестировать новую штуку, шансов у которой на рынке немного! Кажется, это последний рывок в этом году ― движуха начнётся с середины января.

#tools

Fjord выпустили свой ежегодный обзор трендов ― https://trends.fjordnet.com/. Они, как всегда, скорее общетехнологические, чем дизайнерские. Летом я был в гостях в их лондонском офисе и Esther Duran рассказала о работе над отчётом ― https://jvetrau.com/fla-2018/. Они собирают мнения 1000 сотрудников и 85 клиентов на 5 континентах, чтобы найти инсайты и выделить из них паттерны по самым разным областям (общество, политика, профессиональные отрасли). В итоге выделяют около 70 трендов, 10 из которых публикуют наружу.

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

1. Pantone объявил цвет 2019 года — https://www.pantone.com/color-intelligence/color-of-the-year/color-of-the-year-2019 — коралловый. Уже пошли шутки на тему типичного дня на Dribbble в следующем году — https://vk.com/wall-51016572_1091839?z=photo-51016572_456359491%2Falbum-51016572_00%2Frev.

2. Milo Themes как всегда делают лучшие и самые насыщенные обзоры — https://www.behance.net/gallery/71481981/2019-Design-Trends-Guide.

3. UX Collective ― https://trends.uxdesign.cc/2019. Они делают упор на профессиональную жизнь, а не конкретные технологические или визуальные направления.

4. Webflow ― https://webflow.com/blog/20-web-design-trends-for-2019. Начало достаточно стандартное, но отмечено много действительно свежих вещей.

5. Shutterstock о цветах — https://www.creativebloq.com/news/shutterstock-reveals-2019s-trending-colours.

6. Depositphotos о фотографиях — https://ru.depositphotos.com/trends2019.

7. Creative Bloq об иллюстрациях — https://www.creativebloq.com/features/5-huge-illustration-trends-for-2019.

Таких подборок начиная с осени вышла не одна сотня, но эти лучше всего показывают, куда двигаться в 2019 году. Удачи в дифференциации ваших брендов (и собирании лайков на Dribbble).

P.S. Ради интереса можно сравнить с тем, что обещали на 2018 — https://t.me/pdigest/10.

#trends

Основной хайп по дизайн-системам сходит на нет и начинается лучший этап в жизни любой технологии ― крутые внедрения, решающие реальные проблемы. Внедрения с компонентами в коде в современном понимании «что такое хорошо» были давно, ещё в 2012-2013 годах.

За последние год-полтора идея приросла крепкими примерами в двух ключевых местах ― токены и интеграция с инструментами дизайна:

1. Мощный рассказ Benjamin Martin из TeleTracking о том, как их дизайн-система собирает компоненты и шаблоны в Sketch из токенов ― https://medium.com/teletracking-design/mosaic-design-system-living-solution-d5df4a752e9b. В статье отличная диаграмма последовательности сборки с упоминанием всех нужных инструментов.

2. Cristiano Rastelli из Badoo рассказывает о том, как токены используются в их дизайн-системе Cosmos ― https://medium.com/@didoo/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa. Они базируются на фреймворке Style Dictionary ― https://amzn.github.io/style-dictionary/. Презентация автора, Danny Banks из Amazon — https://dbanksdesign.github.io/style-dictionary-presentation/. Ещё немного про токены:

― Токены дизайн-системы Firefox Proton ― https://github.com/FirefoxUX/design-tokens.

― Простой фреймворк для создания дизайн-систем с использованием токенов ― https://github.com/mrmartineau/design-system-utils.

3. В другой статье Cristiano Rastelli из пишет об экспорте иконок из Sketch ― https://medium.com/@didoo/generating-multi-brand-multi-platform-icons-with-sketch-and-a-node-js-script-part1-82f438c7e16c. У компании несколько продуктов, так что подход поддерживает тематизацию. Часть 2 ― https://medium.com/@didoo/generating-multi-brand-multi-platform-icons-with-sketch-and-a-node-js-script-part2-8d02e8bb915a.

4. Судя по всему, тёмные темы оформления станут хитом следующего года ― https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode. Andy Clarke показывает, как поддержать её на сайте через media queries.

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

А если вы ещё на более ранних стадиях внедрения, то спецом для вас Brad Frost, Dan Mall и Josh Clark подготовили серию образовательных видео по работе над дизайн-системами для InVision ― https://www.invisionapp.com/design-system-manager/expert-advice. Анонс ― https://bigmedium.com/ideas/design-systems-mastering-design-at-scale-video.html. Удачи в систематизации себя и продуктов!

#designsystems #tokens

Завтра день рождения Боярского, а пару недель назад исполнилось 50 лет с самой важной технологической презентации в истории и истории интерфейсов в целом ― http://www.computerhistory.org/atchm/net-50-did-engelbart-s-mother-of-all-demos-launch-the-connected-world/. 9 декабря Douglas Engelbart устроил «The Mother of All Demos», где показал основы современных компьютеров как рабоче-домашних инструментов и интерфейсов ― https://en.wikipedia.org/wiki/The_Mother_of_All_Demos.

Система называлась NLS (oN-Line System). В ней родилась или была усовершенствована целая пачка будущих критических технологий: мышь, графический пользовательский интерфейс, гипертекст, растровая графика, средства совместной работы, видео-конференции, электронная почта, текстовый редактор с совместной работой и прообраз интернета.

Идеи развили в Xerox PARC, следующем бесконечном источнике современных компьютерных технологий ― от GUI и лазерных принтеров до объектно-ориентированного программирования и электронной бумаги. Сначала в Xerox Alto (1973, http://en.wikipedia.org/wiki/Xerox_Alto) с метафой рабочего стола, WYSIWYG- и графическим редактором и сетевыми играми. А в 1981 году Xerox Star (http://en.wikipedia.org/wiki/Xerox_Star) стал первым крупным коммерческим продуктом, собравшим вместе массу инноваций, которые являются основой современных компьютеров ― оконный GUI с парадигмой WIMP, папки документов, локальную сеть и файловые серверы, лазерную печать, чекбоксы и радио-кнопки. Правда, продажи не пошли ― это было дорого и медленно.

Дальше уже их наработки нубы приписывают Apple, у которым потом это всё «украл» Microsoft. Они и правда подали в суд на Microsoft в 1989 году за копирование концепции оконного интерфейса. Xerox сразу подключился к процессу, обвинив в том же Apple ― воровали в первую очередь у Xerox Star. В итоге суд отклонил иск Xerox за истечением срока давности, а Apple не смогла доказать кражу. При этом компьютер в каждый дом принёс Microsoft.

Сам Энгельбарт, как и многие другие, вдохновлялся концепцией Memex Ванневара Буша (https://en.wikipedia.org/wiki/Vannevar_Bush) ― система хранения знаний и работы с ними (оригинальная статья 1945 года ― https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/). По сути ― прообраз персонального компьютера на основе микрофильмов как расширение возможностей человека. А если копнуть ещё дальше, то можно найти концепцию Mundaneum Paul Otlet 1934 года, предвосхитившую Memex ― https://www.theatlantic.com/technology/archive/2014/05/in-search-of-the-proto-memex/371385/. Кстати, первый графический CAD-интерфейс Дуглас увидел в Sketchpad от Ivan Sutherland (http://en.wikipedia.org/wiki/Sketchpad) в 1963 году…

В общем, технологическая археология ― захватывающий жанр. Но определить абсолютно первого и чистого автора идеи обычно сложновато ― всё очень переплетено и развивалось параллельно. Хотя «The Mother of All Demos» всё-таки один из редких примеров действительно чистого прорыва и если я и буду когда-нибудь набивать татуху, то с пасхалкой оттуда.

Полная запись презентации на полтора часа ― https://www.youtube.com/watch?v=yJDv-zdhzMY. Посмотрите на праздниках сразу после «Крепкого орешка» ― видеть прогноз свершившегося будущего не менее захватывающе.

#history

Саша Куценко и Гаврил Перов из петербургской студии Aidem делают Pinterest с доставкой в Телеграм. В их канале Now How выходит годная лента свежих сайтов от крепких агентств и дизайнеров — https://t.me/nowhow. Хороший способ мониторить тренды и расширять арсенал модных визуальных решений.

Если в Chrome есть плагины типа Muzli (https://chrome.google.com/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc) и Panda (https://usepanda.com/), которые дают порцию свежести при каждом открытии новой вкладки, то в Телеграме можно подписаться на @nowhow и повышать насмотренность при переходе между чатиками с мемасами.

Я давно хотел делать сводный обзор ключевых событий года в декабре и вот первый заход для Кода Дурова — https://kod.ru/trendy-v-dizayne-na-2019-god/. У каждого заголовка есть тег — по нему найдёте все выпуски по теме:

Прогнозы на 2019 #trends
Самые толковые обзоры трендов 2019 года в дизайне, технологиях и профессии в целом выпустили Fjord, Pantone, Milo Themes, UX Collective, Webflow, Shutterstock, Depositphotos и Creative Bloq — https://t.me/pdigest/142. Ради интереса можно сравнить с тем, что обещали на 2018 — https://t.me/pdigest/10.

DesignOps #designops
Баззворд описывает дизайн-менеджмент цифровых продуктов (https://jvetrau.com/designops-definition/). Он переупаковывает уже известные подходы, но ставит очень грамотный фокус — развивать дизайн-процессы, инструменты, методы и практики под масштабирование. Т.е. так, чтобы ими мог легко воспользоваться любой дизайнер в компании. Это то, что отличает его от остальных. Приставку «Ops» добавляли в этом году ко всему, что движется — ResearchOps, Design Systems Ops и т.п.

Голосовые интерфейсы #voiceui
Будущее у голосовых интерфейсов получше, чем у покрывающихся пылью ботов. Продажи устройств бодро растут, а основные платформы стремительно обзаводятся партнёрствами и интеграциями во всё, что подключено к электричеству и интернету. К концу года прогнозируют 100 миллионов устройств.

Продуктовая иллюстрация #illustrations
Иллюстрации стали обязательной частью айдентики цифровых продуктов ― они есть в каждом первом сервисе. Ещё бы ― в хорошем интерфейсе всё занято полезными вещами и особо нет мест для выражения бренда, разве что лого, цветовая палитра, пиктограммы и характерные паттерны.

Алгоритмический дизайн #algorithms
Давно интересуюсь темой (https://algorithms.design/) — это инструменты, которые помогут упростить построение интерфейса, подготовку графики и контента, а также персонализацию продукта.

Гибкие экраны
Samsung показал концепт телефона — https://www.engadget.com/2018/11/07/samsung-foldable-phone-infinity-flex-display/ (весной выйдет коммерческая модель). Android поддержит эту возможность в ближайшее время — https://www.engadget.com/2018/11/07/android-will-natively-support-foldable-phones/. Похоже, наконец-то начнётся интересная движуха в мобильных интерфейсах, где всё стало слишком предсказуемо. А вот что делали Apple и Google:
— Material Design: https://t.me/pdigest/53 + https://t.me/pdigest/54
— iOS 12: https://t.me/pdigest/63
— Шаблоны iPhone Xs, Xs Max, Xr: https://t.me/pdigest/104
 
Новые инструменты дизайна #tools
Последние три-четыре года движуха на рынке инструментов дизайна стала настолько заметной, что про неё написал даже Bloomberg, который обычно витает в облаках мега-корпораций — https://t.me/pdigest/28. Это видно и по деньгам: в InVision вложили уже $235 млн, Figma — $42,9 млн, Framer — $35 млн, Marvel — $8 млн, Zeplin — $1,2 млн. Есть и покупки, но пока частично удачные — InVision свою экосистему укрепляет, а Гугл сгноил Pixate и Form.

Дизайн-системы #designsystems
Как лучший способ унифицировать линейку продуктов и упростить работу по запуску новой функциональности, дизайн-системы активно на слуху последние годы (http://designsystemsclub.ru/). За последние год-полтора идея приросла крепкими примерами в двух ключевых местах ― токены и интеграция с инструментами дизайна (https://t.me/pdigest/125).

Это далеко не всё, что было в 2018 году: появлялись новые интерфейсные паттерны (#patterns) и книги (#books). Обсуждали дизайн-мышление (https://t.me/pdigest/59 + https://t.me/pdigest/60) и дизайн-спринты (https://t.me/pdigest/108). Отмечали 20 лет одного из лучших агентств Nielsen/Norman Group (https://t.me/pdigest/94) и 50-летие The Mother of All Demos (https://t.me/pdigest/144), где показали основы современных персональных компьютеров. Список можно продолжать долго.

Сейчас всё готовится стихнуть перед новогодними и рождественскими праздниками. Но уже в первые недели января пройдёт выставка CES 2019 (отчёт о прошлой — https://t.me/pdigest/16), где наверняка покажут уйму интереснейших вещей.

#digest #overview

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

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

#digest