Методов пользовательских исследований больше, чем инструментов дизайна интерфейсов (а они на свет лезут). Ловите пачку свежих историй их практического применения и чутка теоретической подпитки:
1. Kie Watanabe из HubSpot даёт советы по донесению результатов пользовательских исследований до продуктовой команды и принимающих решения — https://medium.com/hubspot-product/3-ways-to-make-your-research-better-today-fa85d3ecbaa8. Толковый системный взгляд.
2. Dave Malouf размышляет на тему оценки зрелости пользовательских исследований в компании — https://medium.com/amplify-design/measuring-your-research-operations-maturity-6bebcefa141b.
3. Памятка по проведению интервью с пользователями от Kara Pernice из Nielsen/Norman Group — https://www.nngroup.com/articles/user-interviews/. Достаточно подробно для обзора.
4. Отличный пример описания Jobs to Be Done на основе типичных жизненных ситуаций учителя — https://jtbd.info/four-jobs-teachers-are-trying-to-get-done-547de487a8dc. В другой статье Alan Klement рассказывает, почему концепция «прогресса» — ключевая в методе Jobs to Be Done — https://jtbd.info/progress-the-core-of-jobs-to-be-done-34db4c7e72f2.
5. Nielsen/Norman Group провели опрос среди своих читателей на тему методов количественных исследований, которые они используют — https://www.nngroup.com/articles/quant-research-practice/. Выборка ограниченная, но результаты всё равно интересные.
6. Christina Wodtke неплохо описывает разные подходы к сравнительному анализу конкурентов перед началом работы над продуктом — http://eleganthack.com/comparative-research-done-right/.
7. Издательство O’Reilly выпустило книгу David Farkas и Brad Nunnally «UX Research» в конце 2016 года — https://www.safaribooksonline.com/library/view/ux-research/9781491951286/. Они публикуют главу 7 из неё, посвящённую поиску респондентов для пользовательских исследований ― https://www.oreilly.com/ideas/how-to-recruit-for-user-research.
Часть была в сентябрьском дайджесте, но вы же наверняка добрались только до середины :) А я всё никак не мог вписать выпуск про исследования в график мини-обзоров.
#research
1. Kie Watanabe из HubSpot даёт советы по донесению результатов пользовательских исследований до продуктовой команды и принимающих решения — https://medium.com/hubspot-product/3-ways-to-make-your-research-better-today-fa85d3ecbaa8. Толковый системный взгляд.
2. Dave Malouf размышляет на тему оценки зрелости пользовательских исследований в компании — https://medium.com/amplify-design/measuring-your-research-operations-maturity-6bebcefa141b.
3. Памятка по проведению интервью с пользователями от Kara Pernice из Nielsen/Norman Group — https://www.nngroup.com/articles/user-interviews/. Достаточно подробно для обзора.
4. Отличный пример описания Jobs to Be Done на основе типичных жизненных ситуаций учителя — https://jtbd.info/four-jobs-teachers-are-trying-to-get-done-547de487a8dc. В другой статье Alan Klement рассказывает, почему концепция «прогресса» — ключевая в методе Jobs to Be Done — https://jtbd.info/progress-the-core-of-jobs-to-be-done-34db4c7e72f2.
5. Nielsen/Norman Group провели опрос среди своих читателей на тему методов количественных исследований, которые они используют — https://www.nngroup.com/articles/quant-research-practice/. Выборка ограниченная, но результаты всё равно интересные.
6. Christina Wodtke неплохо описывает разные подходы к сравнительному анализу конкурентов перед началом работы над продуктом — http://eleganthack.com/comparative-research-done-right/.
7. Издательство O’Reilly выпустило книгу David Farkas и Brad Nunnally «UX Research» в конце 2016 года — https://www.safaribooksonline.com/library/view/ux-research/9781491951286/. Они публикуют главу 7 из неё, посвящённую поиску респондентов для пользовательских исследований ― https://www.oreilly.com/ideas/how-to-recruit-for-user-research.
Часть была в сентябрьском дайджесте, но вы же наверняка добрались только до середины :) А я всё никак не мог вписать выпуск про исследования в график мини-обзоров.
#research
Medium
Measuring your Research Operations Maturity
Recently I was asked how I measure the maturity of a Research Operations (ResOps) practice in any organization. To be honest, before being…
5 ноября я поучаствую в сессии вопросов и ответов от онлайн-интенсива Design Line — http://bit.ly/2y22FQY. У нас уйма событий, про которые есть что рассказать:
— Запуск первого этапа ребрендинга Mail.Ru (и что будет после него) — https://www.facebook.com/jvetrau/posts/10156024283003250
— Вторая версия нашей UX-стратегии aka DesignOps (на подходе статья и презентация)
— Чо как с нашей дизайн-системой Paradigm (новая архитектура)
— Как работает карта компетенций для развития продуктовых дизайнеров (работает с конца прошлого года)
— Как выиграть в Russian Design Cup 2018 (запуск с минуты на минуту)
— Что ждать от Mail Design Conference + Dribbble Meetup 2019 (будет бомба, как всегда)
В составе также Creative People, ONY, Red Collar, Agima, Высшая Школа Брендинга и другие. Всего 10 лекций и 2 мастер-класса, плюс разбор ваших работ в онлайне и ответы на (почти) любые вопросы.
За неделю с 5 по 11 ноября организаторы Design Line обещают прокачать вас в брендинге, веб-дизайне и дизайне интерфейсов в целом, типографике. Ждут графических и веб-дизайнеров, арт-директоров и фрилансеров, независимо от профессионального уровня.
Подробности и покупка билета — http://bit.ly/2EsAelI (1 900 ₽, после 29 октября дороже).
— Запуск первого этапа ребрендинга Mail.Ru (и что будет после него) — https://www.facebook.com/jvetrau/posts/10156024283003250
— Вторая версия нашей UX-стратегии aka DesignOps (на подходе статья и презентация)
— Чо как с нашей дизайн-системой Paradigm (новая архитектура)
— Как работает карта компетенций для развития продуктовых дизайнеров (работает с конца прошлого года)
— Как выиграть в Russian Design Cup 2018 (запуск с минуты на минуту)
— Что ждать от Mail Design Conference + Dribbble Meetup 2019 (будет бомба, как всегда)
В составе также Creative People, ONY, Red Collar, Agima, Высшая Школа Брендинга и другие. Всего 10 лекций и 2 мастер-класса, плюс разбор ваших работ в онлайне и ответы на (почти) любые вопросы.
За неделю с 5 по 11 ноября организаторы Design Line обещают прокачать вас в брендинге, веб-дизайне и дизайне интерфейсов в целом, типографике. Ждут графических и веб-дизайнеров, арт-директоров и фрилансеров, независимо от профессионального уровня.
Подробности и покупка билета — http://bit.ly/2EsAelI (1 900 ₽, после 29 октября дороже).
intensive.dsgnline.ru
Design Line Boost
CreativePeople и Humbleteam прокачают тебя как сотрудника своих агентств. 5 заданий от крупных компаний уже ждут тебя.
Ежегодная монстрическая презентация новых продуктов и экспериментов Adobe MAX 2018 прошла с 15 по 17 октября в Лос Анджелесе — https://max.adobe.com/sessions/max-online/. Как всегда, карьерный самосвал обновок:
Adobe XD: Октябрьское обновление вышло очень плотным, это крупнейший рывок инструмента — https://theblog.adobe.com/october-2018-release-of-adobe-xd-at-max/. Самое крутое — можно прототипировать голосовые интерфейсы (https://theblog.adobe.com/introducing-voice-prototyping-in-adobe-xd/); прототип слушает команды и отвечает голосом (купили сервис Sayspring в прошлом году — https://www.subtraction.com/2018/10/15/designing-and-prototyping-with-voice-in-adobe-xd/). Фигасе! Вдобавок — UI Kit для Amazon Alexa (https://adobe.ly/xdvoiceuikit).
Появились первые плагины. Помимо базовых типа Zeplin и дежурных вроде Slack и Jira есть трушные дизайнерские — Overflow, ProtoPie, UI Faces, Rename It.
Ещё одна интересная штука — автоанимация, когда инструмент сам простраивает переход между двумя артбордами со сменой состояний элементов.
Связанные символы могут обновляться в макетах, которые используют их, при изменении оригинала. Также можно открывать файлы Adobe Illustrator и экспортировать в After Effects.
Photoshop: Обещанная полноценная версия для iPad подтвердилась — https://theblog.adobe.com/adobe-photoshop-aero-gemini-dimension-photoshop-cc/ и https://www.adobe.com/creativecloud/photoshop-ecosystem.html. Можно работать с PSD-файлами в адаптированном интерфейсе. Доступна будет в следующем году.
Основная версия тоже обновилась — https://helpx.adobe.com/photoshop/using/whats-new.html и https://theblog.adobe.com/adobe-photoshop-aero-gemini-dimension-photoshop-cc/. Много новых возможностей, улучшений старых и оптимизации интерфейса (например, наконец-то есть математические формулы при задании размеров).
Adobe Fonts (https://fonts.adobe.com/): TypeKit наконец-то переименовали (https://theblog.adobe.com/typekit-is-adobe-fonts/). И сняли много ограничений — можно синхронизировать на компьютер хоть все 14 000 шрифтов, нет разницы между использованием на компьютере и в вебе, убрали лимиты по просмотрам и доменам в вебе.
[продолжение в https://t.me/pdigest/119]
#tools #adobe #events
Adobe XD: Октябрьское обновление вышло очень плотным, это крупнейший рывок инструмента — https://theblog.adobe.com/october-2018-release-of-adobe-xd-at-max/. Самое крутое — можно прототипировать голосовые интерфейсы (https://theblog.adobe.com/introducing-voice-prototyping-in-adobe-xd/); прототип слушает команды и отвечает голосом (купили сервис Sayspring в прошлом году — https://www.subtraction.com/2018/10/15/designing-and-prototyping-with-voice-in-adobe-xd/). Фигасе! Вдобавок — UI Kit для Amazon Alexa (https://adobe.ly/xdvoiceuikit).
Появились первые плагины. Помимо базовых типа Zeplin и дежурных вроде Slack и Jira есть трушные дизайнерские — Overflow, ProtoPie, UI Faces, Rename It.
Ещё одна интересная штука — автоанимация, когда инструмент сам простраивает переход между двумя артбордами со сменой состояний элементов.
Связанные символы могут обновляться в макетах, которые используют их, при изменении оригинала. Также можно открывать файлы Adobe Illustrator и экспортировать в After Effects.
Photoshop: Обещанная полноценная версия для iPad подтвердилась — https://theblog.adobe.com/adobe-photoshop-aero-gemini-dimension-photoshop-cc/ и https://www.adobe.com/creativecloud/photoshop-ecosystem.html. Можно работать с PSD-файлами в адаптированном интерфейсе. Доступна будет в следующем году.
Основная версия тоже обновилась — https://helpx.adobe.com/photoshop/using/whats-new.html и https://theblog.adobe.com/adobe-photoshop-aero-gemini-dimension-photoshop-cc/. Много новых возможностей, улучшений старых и оптимизации интерфейса (например, наконец-то есть математические формулы при задании размеров).
Adobe Fonts (https://fonts.adobe.com/): TypeKit наконец-то переименовали (https://theblog.adobe.com/typekit-is-adobe-fonts/). И сняли много ограничений — можно синхронизировать на компьютер хоть все 14 000 шрифтов, нет разницы между использованием на компьютере и в вебе, убрали лимиты по просмотрам и доменам в вебе.
[продолжение в https://t.me/pdigest/119]
#tools #adobe #events
[начало в https://t.me/pdigest/118]
Другие инструменты, про которые рассказывали на Adobe MAX 2018:
— After Effects с пачкой приятных возможностей (https://helpx.adobe.com/after-effects/using/whats-new.html).
— Illustrator с кучей улучшений интерфейса и работы с объектами (https://helpx.adobe.com/illustrator/using/whats-new.html).
— InDesign облегчает перекомпоновку при изменении размеров страницы и автоматом подбирает правильную обрезку изображений (https://helpx.adobe.com/indesign/using/whats-new.html).
— Project Aero для рисования в дополненной реальности (https://www.adobe.com/products/projectaero.html).
— Project Gemini, инструмент для рисования на iPad (https://www.adobe.com/creativecloud/drawing-painting.html).
— Character Animator CC прикрутил наработки из эффектных прошлогодних демок с быстрым наложением иллюстративных стилей на персонажей (https://theblog.adobe.com/introducing-characterizer-and-more-game-changing-innovation-in-character-animator-cc/).
— Dimension 2.0 для использования 3D-объектов в двухмерных изображениях (https://theblog.adobe.com/adobe-photoshop-aero-gemini-dimension-photoshop-cc/).
— Premiere CC сфокусировался на видеоблогерах (https://www.engadget.com/2018/10/15/adobe-premiere-rush-cc-photoshop-ipad/). Одна из новых демок Adobe Sensei показывает потенциальное развитие — https://www.engadget.com/2018/10/16/adobes-smooth-operator-intelligent-cropping/ — автоматическая обрезка ландшафтного видео для stories.
Обновления уже прилетели через Creative Cloud. Все видео выступлений — https://www.behance.net/live/replays.
Хотя многие с удивлённым мизинчиком поправят монокль, глядя с высоты своих Фигм и Скетчей, Adobe — важная компания на рынке, так что какие-то из их продуктов вы наверняка используете. Грешновато профессионалу не интересоваться тем, что происходит с инструментами дизайна, ведь Adobe делает безумное количество прорывных штуковин.
#tools #adobe #events
Другие инструменты, про которые рассказывали на Adobe MAX 2018:
— After Effects с пачкой приятных возможностей (https://helpx.adobe.com/after-effects/using/whats-new.html).
— Illustrator с кучей улучшений интерфейса и работы с объектами (https://helpx.adobe.com/illustrator/using/whats-new.html).
— InDesign облегчает перекомпоновку при изменении размеров страницы и автоматом подбирает правильную обрезку изображений (https://helpx.adobe.com/indesign/using/whats-new.html).
— Project Aero для рисования в дополненной реальности (https://www.adobe.com/products/projectaero.html).
— Project Gemini, инструмент для рисования на iPad (https://www.adobe.com/creativecloud/drawing-painting.html).
— Character Animator CC прикрутил наработки из эффектных прошлогодних демок с быстрым наложением иллюстративных стилей на персонажей (https://theblog.adobe.com/introducing-characterizer-and-more-game-changing-innovation-in-character-animator-cc/).
— Dimension 2.0 для использования 3D-объектов в двухмерных изображениях (https://theblog.adobe.com/adobe-photoshop-aero-gemini-dimension-photoshop-cc/).
— Premiere CC сфокусировался на видеоблогерах (https://www.engadget.com/2018/10/15/adobe-premiere-rush-cc-photoshop-ipad/). Одна из новых демок Adobe Sensei показывает потенциальное развитие — https://www.engadget.com/2018/10/16/adobes-smooth-operator-intelligent-cropping/ — автоматическая обрезка ландшафтного видео для stories.
Обновления уже прилетели через Creative Cloud. Все видео выступлений — https://www.behance.net/live/replays.
Хотя многие с удивлённым мизинчиком поправят монокль, глядя с высоты своих Фигм и Скетчей, Adobe — важная компания на рынке, так что какие-то из их продуктов вы наверняка используете. Грешновато профессионалу не интересоваться тем, что происходит с инструментами дизайна, ведь Adobe делает безумное количество прорывных штуковин.
#tools #adobe #events
Telegram
Дайджест продуктового дизайна
Ежегодная монстрическая презентация новых продуктов и экспериментов Adobe MAX 2018 прошла с 15 по 17 октября в Лос Анджелесе — https://max.adobe.com/sessions/max-online/. Как всегда, карьерный самосвал обновок:
Adobe XD: Октябрьское обновление вышло очень…
Adobe XD: Октябрьское обновление вышло очень…
Если вы не успеваете прочитать все статьи из дайджеста, то у меня плохие новости ― выходят ещё и книжки. Многие не верят, что я читаю все статьи, которыми делюсь (а зря). Но буду честен ― до всех книг добраться нет шансов (хотя штук 15-20 в год выходит). Вот пара-тройка свежих:
1. A Book Apart: Scott Kubie «Writing for Designers» о текстах в интерфейсах — https://abookapart.com/products/writing-for-designers. Они публикуют выдержку из неё ― https://alistapart.com/article/writing-for-designers-excerpt.
2. MIT Press: Kat Holmes «Mismatch» об инклюзивном дизайне (она руководит этой инициативой в Microsoft) — https://mitpress.mit.edu/books/mismatch. Выдержка из неё ― https://www.fastcompany.com/90243282/the-no-1-thing-youre-getting-wrong-about-inclusive-design.
3. Smashing Magazine: Adam Silver «Form Design Patterns» о приёмах дизайна форм — https://www.smashingmagazine.com/printed-books/form-design-patterns/. Автор разбирает множество типовых примеров. Они публикуют отрывок из неё, посвящённый формам регистрации — https://www.smashingmagazine.com/2018/10/form-design-patterns-excerpt-a-registration-form/.
4. A Book Apart: Tim Brown «Flexible Typesetting» от главного типографа Adobe — https://abookapart.com/products/flexible-typesetting.
5. Выдержка из главы 6 книги Matej Latin «Rhythm in Web Typography», посвящённая ритму в веб-типографике — https://betterwebtype.com/rhythm-in-web-typography. Сама книга вышла в прошлом году в онлайн-версии — https://betterwebtype.com/web-typography-book.
Основной поток анонсов был летом — https://t.me/pdigest/68, но дело Гутенберга живёт и свежие издания появляются.
#books
1. A Book Apart: Scott Kubie «Writing for Designers» о текстах в интерфейсах — https://abookapart.com/products/writing-for-designers. Они публикуют выдержку из неё ― https://alistapart.com/article/writing-for-designers-excerpt.
2. MIT Press: Kat Holmes «Mismatch» об инклюзивном дизайне (она руководит этой инициативой в Microsoft) — https://mitpress.mit.edu/books/mismatch. Выдержка из неё ― https://www.fastcompany.com/90243282/the-no-1-thing-youre-getting-wrong-about-inclusive-design.
3. Smashing Magazine: Adam Silver «Form Design Patterns» о приёмах дизайна форм — https://www.smashingmagazine.com/printed-books/form-design-patterns/. Автор разбирает множество типовых примеров. Они публикуют отрывок из неё, посвящённый формам регистрации — https://www.smashingmagazine.com/2018/10/form-design-patterns-excerpt-a-registration-form/.
4. A Book Apart: Tim Brown «Flexible Typesetting» от главного типографа Adobe — https://abookapart.com/products/flexible-typesetting.
5. Выдержка из главы 6 книги Matej Latin «Rhythm in Web Typography», посвящённая ритму в веб-типографике — https://betterwebtype.com/rhythm-in-web-typography. Сама книга вышла в прошлом году в онлайн-версии — https://betterwebtype.com/web-typography-book.
Основной поток анонсов был летом — https://t.me/pdigest/68, но дело Гутенберга живёт и свежие издания появляются.
#books
A Book Apart
Writing for Designers by Scott Kubie
Whether you’re just starting out or looking to hone your skills, don’t struggle with writing—get the writing done.
Создатели канала http://t.me/uxidesign/ регулярно делают переводы статей о дизайне интерфейсов. Они выходят примерно раз в неделю. Я, конечно, за то, чтобы все учили язык и читали оригиналы, но всех не переделаешь :)
Проскакивают новости и подборки, обзоры конференций (например, Design Matters — https://t.me/uxidesign/366) и анонсы курсов, а на прошлой неделе разыгрывали годовую подписку на Adobe Creative Cloud. Но всё-таки главная крутость канала — переводы. Подписывайтесь на @uxidesign, например.
Проскакивают новости и подборки, обзоры конференций (например, Design Matters — https://t.me/uxidesign/366) и анонсы курсов, а на прошлой неделе разыгрывали годовую подписку на Adobe Creative Cloud. Но всё-таки главная крутость канала — переводы. Подписывайтесь на @uxidesign, например.
Telegram
UI/UX Designer
English channel: @ux_news
Наш сайт: design-glory.com
Вакансии: @jobs_designglory
сотрудничество: @glorymlory
Наш сайт: design-glory.com
Вакансии: @jobs_designglory
сотрудничество: @glorymlory
Новых инструментов дизайна выходит столько, что такими темпами придётся сфокусировать дайджест только на них. Вот вам свежая поставка:
Ratio (https://useratio.com/): Экспериментальный инструмент дизайна от Florian Schulz. В своей крутейшей сопроводительной статье он рассказывает о его принципах работы ― https://medium.com/@getflourish/designing-with-ratio-dcc656d5385d. Ratio основан на токенах и использует их в достаточно передовом виде (например, может подключать их из стороннего инструмента).
Interplay (https://interplayapp.com/): Экспериментальный онлайн-инструмент дизайна интерфейсов, который также обещает связку с реальными компонентами дизайн-системы на React, Angular и Vue.
Modulz: Colm Tuite начал сбор денег на свой фреймворк для создания дизайн-систем, о котором писал несколько раз в дайджесте — https://www.kickstarter.com/projects/stephenhaney/modulzthe-next-step-in-visual-coding. Денег дали.
Sympli Versions (https://versions.sympli.io/): Система версионирования макетов и шаблонов для дизайнеров от Sympli. Её анонсировали в прошлом году, теперь она доступна для всех.
Principle 5 (http://principleformac.com/posts/principle-five.html): Вышло обновление, хотя и лёгонькое. Можно импортировать макеты из Figma, есть тёмная тема оформления.
Overframe (https://overframe.xyz/): Простой инструмент для Mac позволяет вставить интерактивный прототип в рамку телефона и получить видео для промо-сайта.
Famous (https://famous.co/): Инструмент обещает экспорт макетов Sketch, Adobe XD и Photoshop в работающие Progressive Web Apps.
Figma: Появился мощная функция для работы с группой повторяющихся объектов, когда их можно изменять одновременно — https://blog.figma.com/introducing-smart-selection-51f6ca7a817b.
Читайте также инструкцию по работе с API для начинающих от Daniel Hollick из TIDAL — https://medium.com/@danhollick/a-designers-guide-to-the-figma-api-64f2785969d8. Пошаговое подключение к макетам и их разбор.
UXPin: В прототипах появились общие переменные, которые можно использовать на разных шагах (например, введённое в форму имя пользователя) — https://www.uxpin.com/studio/blog/variables-and-conditional-interactions-for-interactive-prototyping/.
FramerX: Lachezar Petkov разобрал нюансы работы с инструментом — https://www.smashingmagazine.com/2018/10/new-framer-x-initial-impressions/.
Webflow: Добавили инструмент работы с CSS Grid — https://webflow.com/grid.
UX Feedback (https://uxfeedback.ru/): Сервис позволяет опросить пользователей сайта. На входе — оценка через смайлики (по шкале из 5), есть возможность задать дополнительные вопросы.
Purple (https://www.purple.pm/): Сервис помогает хранить проектную документацию по дизайну — от входящих требований и сценариев использования в самых разных вариациях до макетов и других наглядных результатов работы.
Drafta (https://drafta.co/): Ещё один сервис для хранения макетов в команде. Правда, не особо полезный ― просто галерея без спецификаций и даже описания.
Sensitive (https://sensive.co/): Ещё один сервис версионирования макетов.
Prototypr запустили хронологию обновлений инструментов дизайна — https://www.prototypr.io/time-machine/ — сейчас есть архив за последний год.
Уф, подержите моё пиво — пошёл делать следующую подборку инструментов.
#tools
Ratio (https://useratio.com/): Экспериментальный инструмент дизайна от Florian Schulz. В своей крутейшей сопроводительной статье он рассказывает о его принципах работы ― https://medium.com/@getflourish/designing-with-ratio-dcc656d5385d. Ratio основан на токенах и использует их в достаточно передовом виде (например, может подключать их из стороннего инструмента).
Interplay (https://interplayapp.com/): Экспериментальный онлайн-инструмент дизайна интерфейсов, который также обещает связку с реальными компонентами дизайн-системы на React, Angular и Vue.
Modulz: Colm Tuite начал сбор денег на свой фреймворк для создания дизайн-систем, о котором писал несколько раз в дайджесте — https://www.kickstarter.com/projects/stephenhaney/modulzthe-next-step-in-visual-coding. Денег дали.
Sympli Versions (https://versions.sympli.io/): Система версионирования макетов и шаблонов для дизайнеров от Sympli. Её анонсировали в прошлом году, теперь она доступна для всех.
Principle 5 (http://principleformac.com/posts/principle-five.html): Вышло обновление, хотя и лёгонькое. Можно импортировать макеты из Figma, есть тёмная тема оформления.
Overframe (https://overframe.xyz/): Простой инструмент для Mac позволяет вставить интерактивный прототип в рамку телефона и получить видео для промо-сайта.
Famous (https://famous.co/): Инструмент обещает экспорт макетов Sketch, Adobe XD и Photoshop в работающие Progressive Web Apps.
Figma: Появился мощная функция для работы с группой повторяющихся объектов, когда их можно изменять одновременно — https://blog.figma.com/introducing-smart-selection-51f6ca7a817b.
Читайте также инструкцию по работе с API для начинающих от Daniel Hollick из TIDAL — https://medium.com/@danhollick/a-designers-guide-to-the-figma-api-64f2785969d8. Пошаговое подключение к макетам и их разбор.
UXPin: В прототипах появились общие переменные, которые можно использовать на разных шагах (например, введённое в форму имя пользователя) — https://www.uxpin.com/studio/blog/variables-and-conditional-interactions-for-interactive-prototyping/.
FramerX: Lachezar Petkov разобрал нюансы работы с инструментом — https://www.smashingmagazine.com/2018/10/new-framer-x-initial-impressions/.
Webflow: Добавили инструмент работы с CSS Grid — https://webflow.com/grid.
UX Feedback (https://uxfeedback.ru/): Сервис позволяет опросить пользователей сайта. На входе — оценка через смайлики (по шкале из 5), есть возможность задать дополнительные вопросы.
Purple (https://www.purple.pm/): Сервис помогает хранить проектную документацию по дизайну — от входящих требований и сценариев использования в самых разных вариациях до макетов и других наглядных результатов работы.
Drafta (https://drafta.co/): Ещё один сервис для хранения макетов в команде. Правда, не особо полезный ― просто галерея без спецификаций и даже описания.
Sensitive (https://sensive.co/): Ещё один сервис версионирования макетов.
Prototypr запустили хронологию обновлений инструментов дизайна — https://www.prototypr.io/time-machine/ — сейчас есть архив за последний год.
Уф, подержите моё пиво — пошёл делать следующую подборку инструментов.
#tools
Medium
Designing with Ratio
With Ratio, I’m turning my knowledge about design, writing CSS and design systems into a series of tools for designers and developers.
Иллюстрации стали обязательной частью айдентики цифровых продуктов ― они есть в каждом первом сервисе. Ещё бы ― в хорошем интерфейсе всё занято полезными вещами и особо нет мест для выражения бренда, разве что лого, цветовая палитра, пиктограммы и характерные паттерны. Так что иллюстрации ― простой и экспрессивный способ сделать бодрее и более узнаваемо. Особо продвинутые проявляют единство коммуникации в текстах и анимации, но этого сложнее добиться. Так что неудивительно, что половина Дрибббла забита безинтерфейсными картинками.
Вот пачка историй известных компаний, которые нашли себя:
Airbnb: Рассказ Jennifer Hom — https://airbnb.design/your-face-here/. Её интервью Wired на эту же тему ― https://www.wired.com/story/jennifer-hom-illustrations-airbnb/.
Adobe: Рассказ Emma Zhang — https://medium.com/@emmazhang_7383/designing-adobes-brand-illustration-style-3c982ded31f6.
Mail.Ru: Рассказ Евгения Долгова ― https://www.youtube.com/watch?v=uHAL-fV-SHk&list=PLzqQCeTtpSBozWJzUGnTTSU-11RE9Gau6. Презентация ― https://www.slideshare.net/EugenDolgov/illustrations-63067904.
Shopify: Рассказ Meg Robichaud о работе над серией иллюстраций для нулевых состояний интерфейса — https://ux.shopify.com/empty-states-more-like-you-have-no-idea-how-much-work-goes-into-those-states-amirite-e0102f58b64e. Очень интересный подход, где иллюстрация передаёт нужное настроение в текущем сценарии — успех, неудача, нейтральное сообщение. У неё много топовых статей на тему. Разница между иллюстрациями для продукта и маркетинга — https://medium.com/shopify-ux/product-vs-marketing-illustration-7ac474dfe2ed. Роли и задачи продуктовой иллюстрации — https://ux.shopify.com/product-illustration-for-people-who-dont-know-anything-about-product-illustration-3f43d7b2ec06. Нюансы работы с командой иллюстраторов в продуктовой команде — https://ux.shopify.com/7-truths-of-running-an-illustration-team-2d44fb8fcf7e.
Лаборатория Касперского: Рассказ студии Мыслеформа — https://designpub.ru/%D0%BA%D0%B0%D0%BA-%D0%BC%D1%8B-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%B0%D1%82%D1%8B%D0%B2%D0%B0%D0%BB%D0%B8-%D1%81%D1%82%D0%B8%D0%BB%D1%8C-%D0%BA%D0%BE%D1%80%D0%BF%D0%BE%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B9-%D0%B8%D0%BB%D0%BB%D1%8E%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%B8-%D0%BB%D0%B0%D0%B1%D0%BE%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8%D0%B8-%D0%BA%D0%B0%D1%81%D0%BF%D0%B5%D1%80%D1%81%D0%BA%D0%BE%D0%B3%D0%BE-c8b32b3f1c7b.
Creative Market: Рассказ Ryan Weaver — https://medium.com/@ryantheweave/crafting-a-new-illustration-style-for-creative-market-412acba2e673. Bronwyn Gruet о модульности с коллекцией типовых объектов — https://medium.com/building-creative-market/scaling-our-illustration-system-with-object-libraries-dd3ebe7318e7. Daniella Valerio о принципах цветовой палитры — https://medium.com/building-creative-market/a-color-exercise-for-our-brands-illustration-db39af44f081.
Wordpress: Рассказ Alice Lee — http://byalicelee.com/wordpress/.
Dropbox: Ещё до того, как ребята ударились в чересчур абстрактное искусство, Michael Jeter во всех подробностях расписывал историю развития стиля — https://medium.com/dropbox-design/illustrating-a-more-human-brand-part-1-e1cfe3c28d9. Как и какие задачи решал каждый из подходов на конкретных этапах жизненного цикла компании. Вторая часть про рождение следующего подхода — https://medium.com/dropbox-design/illustrating-a-more-human-brand-part-2-d2e9494cc8a3.
Ryan Putnam даёт советы по унификации иллюстраций — https://medium.com/putnam-studio/illustration-identities-are-our-thing-c9f136e46510.
[продолжение в https://t.me/pdigest/124]
#illustrations #designsystems
Вот пачка историй известных компаний, которые нашли себя:
Airbnb: Рассказ Jennifer Hom — https://airbnb.design/your-face-here/. Её интервью Wired на эту же тему ― https://www.wired.com/story/jennifer-hom-illustrations-airbnb/.
Adobe: Рассказ Emma Zhang — https://medium.com/@emmazhang_7383/designing-adobes-brand-illustration-style-3c982ded31f6.
Mail.Ru: Рассказ Евгения Долгова ― https://www.youtube.com/watch?v=uHAL-fV-SHk&list=PLzqQCeTtpSBozWJzUGnTTSU-11RE9Gau6. Презентация ― https://www.slideshare.net/EugenDolgov/illustrations-63067904.
Shopify: Рассказ Meg Robichaud о работе над серией иллюстраций для нулевых состояний интерфейса — https://ux.shopify.com/empty-states-more-like-you-have-no-idea-how-much-work-goes-into-those-states-amirite-e0102f58b64e. Очень интересный подход, где иллюстрация передаёт нужное настроение в текущем сценарии — успех, неудача, нейтральное сообщение. У неё много топовых статей на тему. Разница между иллюстрациями для продукта и маркетинга — https://medium.com/shopify-ux/product-vs-marketing-illustration-7ac474dfe2ed. Роли и задачи продуктовой иллюстрации — https://ux.shopify.com/product-illustration-for-people-who-dont-know-anything-about-product-illustration-3f43d7b2ec06. Нюансы работы с командой иллюстраторов в продуктовой команде — https://ux.shopify.com/7-truths-of-running-an-illustration-team-2d44fb8fcf7e.
Лаборатория Касперского: Рассказ студии Мыслеформа — https://designpub.ru/%D0%BA%D0%B0%D0%BA-%D0%BC%D1%8B-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%B0%D1%82%D1%8B%D0%B2%D0%B0%D0%BB%D0%B8-%D1%81%D1%82%D0%B8%D0%BB%D1%8C-%D0%BA%D0%BE%D1%80%D0%BF%D0%BE%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B9-%D0%B8%D0%BB%D0%BB%D1%8E%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%B8-%D0%BB%D0%B0%D0%B1%D0%BE%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8%D0%B8-%D0%BA%D0%B0%D1%81%D0%BF%D0%B5%D1%80%D1%81%D0%BA%D0%BE%D0%B3%D0%BE-c8b32b3f1c7b.
Creative Market: Рассказ Ryan Weaver — https://medium.com/@ryantheweave/crafting-a-new-illustration-style-for-creative-market-412acba2e673. Bronwyn Gruet о модульности с коллекцией типовых объектов — https://medium.com/building-creative-market/scaling-our-illustration-system-with-object-libraries-dd3ebe7318e7. Daniella Valerio о принципах цветовой палитры — https://medium.com/building-creative-market/a-color-exercise-for-our-brands-illustration-db39af44f081.
Wordpress: Рассказ Alice Lee — http://byalicelee.com/wordpress/.
Dropbox: Ещё до того, как ребята ударились в чересчур абстрактное искусство, Michael Jeter во всех подробностях расписывал историю развития стиля — https://medium.com/dropbox-design/illustrating-a-more-human-brand-part-1-e1cfe3c28d9. Как и какие задачи решал каждый из подходов на конкретных этапах жизненного цикла компании. Вторая часть про рождение следующего подхода — https://medium.com/dropbox-design/illustrating-a-more-human-brand-part-2-d2e9494cc8a3.
Ryan Putnam даёт советы по унификации иллюстраций — https://medium.com/putnam-studio/illustration-identities-are-our-thing-c9f136e46510.
[продолжение в https://t.me/pdigest/124]
#illustrations #designsystems
Airbnb.Design
Your Face Here
Creating illustration guidelines for a more inclusive visual identity
[вторая часть]
На нашей конференции Mail Design Conference / Dribbble Meetup выступает много иллюстраторов. Ловите плейлист с видео их рассказов — https://www.youtube.com/playlist?list=PLzqQCeTtpSBreAQlv8ZX6zm_GgxnqtHS5 (на подходе ещё парочка с G8).
Тренды в продуктовых иллюстрациях рождаются по несколько штук в год, так что многих дизайнеров бросает из стороны в сторону. Выбор непростой — если ты придерживаешься единого подхода несколько лет ради единства бренда, то можешь подустать от него или посчитать не самым горячим. Если кидаешься на всё новое — ты модный, но в твоём продукте такой же расколбас, как если бы использовали сорок стилей кнопок.
При этом в наше нелёгкое время мета-модернизма не существует одного главного тренда — параллельно востребованы сразу несколько стилей. Много человечных персонажей в духе Slack (хит прошлого года), изометрия (лезет изо всех щелей благодаря простоте исполнения, даже бесплатная библиотека объектов есть — https://isometriclove.com/), отсылки к 50-60м (приятная дурашливость), лёгкий объём через фронтальную диметрическую проекцию (что там у вас было по черчению?) и совсем спорный арт-хаус от Dropbox и Mailchimp (вспоминаем вечную дискуссию о разнице между дизайном и искусством). А сейчас вот всё больше запросов на 3D в духе хайпового Pitch. Конечно, лучше искать уникальный подход, но это доступно не всем.
У меня в рукаве, как всегда, есть подборочка на тему в Пинтересте — https://www.pinterest.ru/jvetrau/product-illustrations/. Ну и попробуйте сказать, что сейчас самое трендовое? :) Оставлю вас в этом подвешенном состоянии.
#illustrations #designsystems
На нашей конференции Mail Design Conference / Dribbble Meetup выступает много иллюстраторов. Ловите плейлист с видео их рассказов — https://www.youtube.com/playlist?list=PLzqQCeTtpSBreAQlv8ZX6zm_GgxnqtHS5 (на подходе ещё парочка с G8).
Тренды в продуктовых иллюстрациях рождаются по несколько штук в год, так что многих дизайнеров бросает из стороны в сторону. Выбор непростой — если ты придерживаешься единого подхода несколько лет ради единства бренда, то можешь подустать от него или посчитать не самым горячим. Если кидаешься на всё новое — ты модный, но в твоём продукте такой же расколбас, как если бы использовали сорок стилей кнопок.
При этом в наше нелёгкое время мета-модернизма не существует одного главного тренда — параллельно востребованы сразу несколько стилей. Много человечных персонажей в духе Slack (хит прошлого года), изометрия (лезет изо всех щелей благодаря простоте исполнения, даже бесплатная библиотека объектов есть — https://isometriclove.com/), отсылки к 50-60м (приятная дурашливость), лёгкий объём через фронтальную диметрическую проекцию (что там у вас было по черчению?) и совсем спорный арт-хаус от Dropbox и Mailchimp (вспоминаем вечную дискуссию о разнице между дизайном и искусством). А сейчас вот всё больше запросов на 3D в духе хайпового Pitch. Конечно, лучше искать уникальный подход, но это доступно не всем.
У меня в рукаве, как всегда, есть подборочка на тему в Пинтересте — https://www.pinterest.ru/jvetrau/product-illustrations/. Ну и попробуйте сказать, что сейчас самое трендовое? :) Оставлю вас в этом подвешенном состоянии.
#illustrations #designsystems
Октябрьский дайджест уже собран в черновике и в нём накопилось кой-чего свежего про дизайн-системы:
5 часть серии статей Nathan Curtis о релизном цикле дизайн-систем говорит о взаимозависимостях между компонентами и другими слоями модульности — https://medium.com/eightshapes-llc/dealing-with-dependencies-inside-design-systems-aa6ce2cf7bc3.
Толковая статья Jerlyn Jareunpoon-Phillips из Clearleft о внедрении дизайн-систем на практике — https://clearleft.com/posts/designing-design-systems. Полезные нюансы процесса общения с продуктовой командой или клиентом.
Rambler обновили сайт своей дизайн-системы Ratio — https://ui-kit.rambler.ru/.
Josh Clark тоже пишет о том, что промежуточные проектные артефакты зачастую бесполезны и лучше сфокусироваться на развитии дизайн-системы даже на ранних этапах продуктовой работы — https://bigmedium.com/ideas/only-one-deliverable-matters.html.
Дизайн-команда Lyft сделала мощный генератор цветовых палитр для своей дизайн-системы, который обеспечивает гибкость, но при этом алгоритмическую предсказуемость и поддержку достаточного контраста — https://www.colorbox.io/. Kevyn Arnott рассказывает о том, как она создавалась — https://design.lyft.com/re-approaching-color-9e604ba22c88.
Tyler Miller показывает, как можно сделать тёмную тему оформления интерфейса и описать её переменные — https://uxdesign.cc/systemizing-color-for-change-9dde4d0018e4.
Кажется, после гипер-мощного всплеска всеобщего интереса к дизайн-системам в 2015-2017 годах они становятся обычным делом и поток публикаций становится таким же обыденным. В нашу коллекцию отечественных дизайн-систем давно ничего не добавлялось — http://designsystemsclub.ru/. Видимо, все переключились на перекрашивание в DesignOps.
#designsystems
5 часть серии статей Nathan Curtis о релизном цикле дизайн-систем говорит о взаимозависимостях между компонентами и другими слоями модульности — https://medium.com/eightshapes-llc/dealing-with-dependencies-inside-design-systems-aa6ce2cf7bc3.
Толковая статья Jerlyn Jareunpoon-Phillips из Clearleft о внедрении дизайн-систем на практике — https://clearleft.com/posts/designing-design-systems. Полезные нюансы процесса общения с продуктовой командой или клиентом.
Rambler обновили сайт своей дизайн-системы Ratio — https://ui-kit.rambler.ru/.
Josh Clark тоже пишет о том, что промежуточные проектные артефакты зачастую бесполезны и лучше сфокусироваться на развитии дизайн-системы даже на ранних этапах продуктовой работы — https://bigmedium.com/ideas/only-one-deliverable-matters.html.
Дизайн-команда Lyft сделала мощный генератор цветовых палитр для своей дизайн-системы, который обеспечивает гибкость, но при этом алгоритмическую предсказуемость и поддержку достаточного контраста — https://www.colorbox.io/. Kevyn Arnott рассказывает о том, как она создавалась — https://design.lyft.com/re-approaching-color-9e604ba22c88.
Tyler Miller показывает, как можно сделать тёмную тему оформления интерфейса и описать её переменные — https://uxdesign.cc/systemizing-color-for-change-9dde4d0018e4.
Кажется, после гипер-мощного всплеска всеобщего интереса к дизайн-системам в 2015-2017 годах они становятся обычным делом и поток публикаций становится таким же обыденным. В нашу коллекцию отечественных дизайн-систем давно ничего не добавлялось — http://designsystemsclub.ru/. Видимо, все переключились на перекрашивание в DesignOps.
#designsystems
Medium
Dealing with Dependencies Inside Design Systems
Decomposing Features to Master Change Up the Chain
Пока дайджест пробивал 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
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
Medium
Everything you need to know about skeleton screens
How do we know that skeleton screens actually work?
Собрал дайджест продуктового дизайна за октябрь 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
Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX
Юрий Ветров об интерфейсах
Дайджест продуктового дизайна, октябрь 2018
Унифицированные иллюстрации в цифровых продуктах, причины возникновения технологических мифов, конференция Adobe MAX 2018, новые инструменты дизайна и свежие книги, полезные интерфейсные паттерны и другие публикации о продуктовом дизайне за октябрь 2018.
Попал на относительно свежую конференцию по дизайн-менеджменту цифровых продуктов 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://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
DesignOps Summit 2018
DesignOps Summit Program 2018 | November 7-9, 2018 New York City
DesignOps Summit Program of Workshops: November 9, 2018, New York. Choose a one-day workshop to attend - register now for a DesignOps workshop.
[начало в 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
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
Telegram
Дайджест продуктового дизайна
Попал на относительно свежую конференцию по дизайн-менеджменту цифровых продуктов DesignOps Summit (проходит второй год) ― https://rosenfeldmedia.com/designopssummit2018/designops-summit-program/. В 2017 выбрал Clarity по дизайн-системам.
У меня сложное…
У меня сложное…
Понимание ценности дизайна для бизнеса помогает обеим сторонам. Дизайн начинает говорить с ним на одном языке и добивается заметных результатов быстрее и с меньшим сопротивлением. Бизнес получает сильный инструмент рыночной дифференциации в борьбе за клиентов и реже теряет их, ведь привлекать их недёшево. Само собой, эти две стороны регулярно пытаются посчитать взаимоопыление.
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
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
Mckinsey
McKinsey Design Index
[начало в 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
Так и кому верить? На самом деле правы все индексы. На конкурентном 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
Telegram
Дайджест продуктового дизайна
Понимание ценности дизайна для бизнеса помогает обеим сторонам. Дизайн начинает говорить с ним на одном языке и добивается заметных результатов быстрее и с меньшим сопротивлением. Бизнес получает сильный инструмент рыночной дифференциации в борьбе за клиентов…
Новые инструменты дизайна копились-копились, да выплеснулись в четырнадцатый мини-выпуск дайджеста:
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
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
Designer News
Welcome to InVision Studio 1.0! – Designer News
Hey Early Access Users! Let's check for updates in InVision Studio. Built November 9, 2018 2:31 PM EST WHAT'S NEW IN INVISION STUDIO 1.0.1 ⬇️ Downl...
Долг бывает карточный, технический, организационный и интерфейсный. За первый можно пострадать лично и физически, за остальные ― отхватить проблем как продуктовая компания. Дизайн-долг ― это намеренно или неумышленно накопленные проблемы с юзабилити, решение которых откладывается до будущих версий. В итоге страдают пользователи, а они хоть и терпеливые, со временем соскакивают и не возвращаются.
Есть несколько примеров системного подхода:
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
Есть несколько примеров системного подхода:
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
Nielsen Norman Group
UX Debt: How to Identify, Prioritize, and Resolve
Like technical debt, user-experience debt piles up over time and, if left unaddressed, will lead to compounding user problems and costly, time-consuming cleanup efforts. Agile solutions for prioritizing and resolving UX-debt issues can be adapted to other…
Голосовые помощники показывают крутой рост — на конец года прогнозируют 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. 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
Medium
Voice User Interfaces (VUI) — The Ultimate Designer’s Guide
The fundamentals that empower us to converse with our devices
В этом выпуске охапка соломки из годных интерфейсных паттернов и лучших практик, чтобы подстелить её и не упасть плашмя на грабли, по которым уже прошлась армия дизайнеров до вас. Как делать нормально, чтобы нормально было:
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
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
Medium
Building the perfect splash screen
In the first part of our series on “App Designer’s Toolkit”, Duncan Campbell, creative director at Gorilla Arm turns his attention to the…
На недавней конференции 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
Самый крутой, конечно же, 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