Единый стиль иллюстраций для 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://news.1rj.ru/str/pdigest/123 и https://news.1rj.ru/str/pdigest/124.
Само собой, полезно изучать тренды: Creative Bloq как раз выпустили обзор — https://www.creativebloq.com/features/5-huge-illustration-trends-for-2019. Удачи в поисках себя!
#illustrations #designsystems
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://news.1rj.ru/str/pdigest/123 и https://news.1rj.ru/str/pdigest/124.
Само собой, полезно изучать тренды: Creative Bloq как раз выпустили обзор — https://www.creativebloq.com/features/5-huge-illustration-trends-for-2019. Удачи в поисках себя!
#illustrations #designsystems
Byalicelee
Creating an illustration voice and system for Slack
👍1
Создатели инструментов дизайна делают последний рывок перед новогодне-рождественским затишьем и выпускают несколько новых экспериментальных инструментов и обновлений к существующим:
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
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
uizard.io
UI Design Made Easy, Powered By AI | Uizard
UI design for apps, websites, and desktop software in minutes. If you can use Google Slides or PowerPoint, you can use Uizard!
👍1
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://news.1rj.ru/str/pdigest/10.
#trends
А вот ещё пачка визуально-профессиональных направлений, которые горячи в последний год-два или будут пылать в ближайшее время:
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://news.1rj.ru/str/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-noscript-part1-82f438c7e16c. У компании несколько продуктов, так что подход поддерживает тематизацию. Часть 2 ― https://medium.com/@didoo/generating-multi-brand-multi-platform-icons-with-sketch-and-a-node-js-noscript-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
За последние год-полтора идея приросла крепкими примерами в двух ключевых местах ― токены и интеграция с инструментами дизайна:
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-noscript-part1-82f438c7e16c. У компании несколько продуктов, так что подход поддерживает тематизацию. Часть 2 ― https://medium.com/@didoo/generating-multi-brand-multi-platform-icons-with-sketch-and-a-node-js-noscript-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
Medium
Efficient Consistency with the Mosaic Design System
Taming Complex Enterprise Product Design
Завтра день рождения Боярского, а пару недель назад исполнилось 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
Система называлась 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://news.1rj.ru/str/nowhow. Хороший способ мониторить тренды и расширять арсенал модных визуальных решений.
Если в Chrome есть плагины типа Muzli (https://chrome.google.com/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc) и Panda (https://usepanda.com/), которые дают порцию свежести при каждом открытии новой вкладки, то в Телеграме можно подписаться на @nowhow и повышать насмотренность при переходе между чатиками с мемасами.
Если в Chrome есть плагины типа Muzli (https://chrome.google.com/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc) и Panda (https://usepanda.com/), которые дают порцию свежести при каждом открытии новой вкладки, то в Телеграме можно подписаться на @nowhow и повышать насмотренность при переходе между чатиками с мемасами.
Telegram
Now How Channel
Сайты с хорошим дизайном со всего света 🤟 Since 2016
Сотрудничество: @design_manager_bot
Регистрация в РКН: https://www.gosuslugi.ru/snet/679bcf1cb34cfc6080d9a142
Сотрудничество: @design_manager_bot
Регистрация в РКН: https://www.gosuslugi.ru/snet/679bcf1cb34cfc6080d9a142
Я давно хотел делать сводный обзор ключевых событий года в декабре и вот первый заход для Кода Дурова — https://kod.ru/trendy-v-dizayne-na-2019-god/. У каждого заголовка есть тег — по нему найдёте все выпуски по теме:
Прогнозы на 2019 #trends
Самые толковые обзоры трендов 2019 года в дизайне, технологиях и профессии в целом выпустили Fjord, Pantone, Milo Themes, UX Collective, Webflow, Shutterstock, Depositphotos и Creative Bloq — https://news.1rj.ru/str/pdigest/142. Ради интереса можно сравнить с тем, что обещали на 2018 — https://news.1rj.ru/str/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://news.1rj.ru/str/pdigest/53 + https://news.1rj.ru/str/pdigest/54
— iOS 12: https://news.1rj.ru/str/pdigest/63
— Шаблоны iPhone Xs, Xs Max, Xr: https://news.1rj.ru/str/pdigest/104
Новые инструменты дизайна #tools
Последние три-четыре года движуха на рынке инструментов дизайна стала настолько заметной, что про неё написал даже Bloomberg, который обычно витает в облаках мега-корпораций — https://news.1rj.ru/str/pdigest/28. Это видно и по деньгам: в InVision вложили уже $235 млн, Figma — $42,9 млн, Framer — $35 млн, Marvel — $8 млн, Zeplin — $1,2 млн. Есть и покупки, но пока частично удачные — InVision свою экосистему укрепляет, а Гугл сгноил Pixate и Form.
Дизайн-системы #designsystems
Как лучший способ унифицировать линейку продуктов и упростить работу по запуску новой функциональности, дизайн-системы активно на слуху последние годы (http://designsystemsclub.ru/). За последние год-полтора идея приросла крепкими примерами в двух ключевых местах ― токены и интеграция с инструментами дизайна (https://news.1rj.ru/str/pdigest/125).
Это далеко не всё, что было в 2018 году: появлялись новые интерфейсные паттерны (#patterns) и книги (#books). Обсуждали дизайн-мышление (https://news.1rj.ru/str/pdigest/59 + https://news.1rj.ru/str/pdigest/60) и дизайн-спринты (https://news.1rj.ru/str/pdigest/108). Отмечали 20 лет одного из лучших агентств Nielsen/Norman Group (https://news.1rj.ru/str/pdigest/94) и 50-летие The Mother of All Demos (https://news.1rj.ru/str/pdigest/144), где показали основы современных персональных компьютеров. Список можно продолжать долго.
Сейчас всё готовится стихнуть перед новогодними и рождественскими праздниками. Но уже в первые недели января пройдёт выставка CES 2019 (отчёт о прошлой — https://news.1rj.ru/str/pdigest/16), где наверняка покажут уйму интереснейших вещей.
#digest #overview
Прогнозы на 2019 #trends
Самые толковые обзоры трендов 2019 года в дизайне, технологиях и профессии в целом выпустили Fjord, Pantone, Milo Themes, UX Collective, Webflow, Shutterstock, Depositphotos и Creative Bloq — https://news.1rj.ru/str/pdigest/142. Ради интереса можно сравнить с тем, что обещали на 2018 — https://news.1rj.ru/str/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://news.1rj.ru/str/pdigest/53 + https://news.1rj.ru/str/pdigest/54
— iOS 12: https://news.1rj.ru/str/pdigest/63
— Шаблоны iPhone Xs, Xs Max, Xr: https://news.1rj.ru/str/pdigest/104
Новые инструменты дизайна #tools
Последние три-четыре года движуха на рынке инструментов дизайна стала настолько заметной, что про неё написал даже Bloomberg, который обычно витает в облаках мега-корпораций — https://news.1rj.ru/str/pdigest/28. Это видно и по деньгам: в InVision вложили уже $235 млн, Figma — $42,9 млн, Framer — $35 млн, Marvel — $8 млн, Zeplin — $1,2 млн. Есть и покупки, но пока частично удачные — InVision свою экосистему укрепляет, а Гугл сгноил Pixate и Form.
Дизайн-системы #designsystems
Как лучший способ унифицировать линейку продуктов и упростить работу по запуску новой функциональности, дизайн-системы активно на слуху последние годы (http://designsystemsclub.ru/). За последние год-полтора идея приросла крепкими примерами в двух ключевых местах ― токены и интеграция с инструментами дизайна (https://news.1rj.ru/str/pdigest/125).
Это далеко не всё, что было в 2018 году: появлялись новые интерфейсные паттерны (#patterns) и книги (#books). Обсуждали дизайн-мышление (https://news.1rj.ru/str/pdigest/59 + https://news.1rj.ru/str/pdigest/60) и дизайн-спринты (https://news.1rj.ru/str/pdigest/108). Отмечали 20 лет одного из лучших агентств Nielsen/Norman Group (https://news.1rj.ru/str/pdigest/94) и 50-летие The Mother of All Demos (https://news.1rj.ru/str/pdigest/144), где показали основы современных персональных компьютеров. Список можно продолжать долго.
Сейчас всё готовится стихнуть перед новогодними и рождественскими праздниками. Но уже в первые недели января пройдёт выставка CES 2019 (отчёт о прошлой — https://news.1rj.ru/str/pdigest/16), где наверняка покажут уйму интереснейших вещей.
#digest #overview
Код Дурова
Тренды в дизайне на 2019 год
Всем привет, я Юрий Ветров, дизайн-директор в Mail.Ru. Каждый месяц с 2009 года я читаю пару сотен статей по дизайну интерфейсов. Самое интересное попадает в регулярный дайджест продуктового дизайна ― его читают около 40 000 человек на Хабре, vc.ru и других…
Собрал дайджест продуктового дизайна за декабрь 2018 ― https://jvetrau.com/digest-2018-dec/.
Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX
#digest
Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX
#digest
Юрий Ветров об интерфейсах
Дайджест продуктового дизайна, декабрь 2018
Тренды 2019 года, гайдлайны по motion-дизайну и текстам для промо-сайтов, 50 лет демо Дугласа Энгельбарта, новые инструменты дизайна и ещё сотня свежих штук про дизайн интерфейсов.
Ежегодная выставка технической крутоты и дичи CES 2019 прошла 8-11 января в Лас-Вегасе — https://www.ces.tech/. Как обычно, показали много чумовых и чумных вещей. Самое интересное, касающееся интерфейсов:
Голосовые интерфейсы
Рынок ищет следующую большую вещь и, кажись, наконец-то нащупал её. Хвалились цифрами: Amazon поставил 100 млн устройств с Alexa (https://www.engadget.com/2019/01/06/amazon-100-million-alexa-devices-sold/), а Google Assistant стоит аж на 1 млрд (правда, в основном смартфонов, где его необязательно используют — https://www.engadget.com/2019/01/07/google-assistant-1-billion-devices/).
И показали тонну интеграций во всё, что может быть установлено дома: душ (https://www.engadget.com/2019/01/06/u-by-moen-google/), туалет (https://www.engadget.com/2019/01/07/kohler-alexa-enabled-sensate-faucet/), зеркало (https://www.engadget.com/2019/01/07/simplehuman-made-a-mirror-with-google-assistant-built-in/), выключатель (https://www.theverge.com/circuitbreaker/2019/1/7/18171690/tp-link-kasa-smart-wifi-light-switch-voice-assistant), велик (https://www.engadget.com/2019/01/09/cybic-amazon-alexa-electric-bicycle/), клавишные (https://www.engadget.com/2019/01/07/roland-go-piano-alexa-built-in/), мышка (https://www.engadget.com/2019/01/08/razer-chroma-alexa-support/). Адекватность под вопросом, но идея дешёвого добавления голосового ассистента в существующие гаджеты — например, подставка для планшета (https://www.engadget.com/2019/01/08/lenovo-smart-tab-hands-on/), расширители для ТВ (https://www.theverge.com/circuitbreaker/2019/1/7/18171949/jbl-link-bar-android-tv-release-date-price-features-ces-2019) или гаджеты для прикуривателей в машинах (https://www.theverge.com/circuitbreaker/2019/1/8/18168678/anker-roav-bolt-car-charger-google-assistant-jbl-link-drive-hands-free-ces-2019) — действительно полезный способ повысить распространение голосовых помощников.
Google тут догоняет Amazon (https://www.theverge.com/2019/1/10/18175524/google-assistant-devices-ces-2019-tvs-soundbars-smart-speakers-kitchen-bathroom-cars), который показал многое из этого ещё в прошлом году — они анонсировали свою платформу (https://www.theverge.com/2019/1/8/18172082/google-assistant-connect-vs-alexa-interpreter-mode-maps-features-devices-ces-2019).
Гибкие экраны
Royole отобрали у Samsung звание первого коммерческого продукта — https://www.engadget.com/2019/01/07/royole-flexpai-hands-on/. А накануне выставки утек прототип 3-панельного телефона вроде как от Xiaomi — https://www.engadget.com/2019/01/03/xiaomi-three-panel-foldable-phone/. Ну и LG ещё раз показали свой сворачиваемый телевизор — https://www.engadget.com/2019/01/07/LG-OLED-TV-R-rollable/.
Умный дом
Выставка про бытовую технику, так что этого добра выше крыши:
— Проекция интерфейса на деревянную панель (https://www.engadget.com/2019/01/06/mui-wooden-smart-display/).
— Плиты, которые анализируют блюдо и помогают в готовке (https://www.engadget.com/2019/01/07/whirlpool-connected-hub-wall-oven/ и https://www.engadget.com/2019/01/08/whirlpool-smart-countertop-oven/)
— Снова умные зеркала (https://www.engadget.com/2019/01/07/careos-artemis-smart-mirror/).
— Снова холодильники с тачскрином (https://www.engadget.com/2019/01/07/samsung-updates-family-hub-smart-fridge-new-ui/).
[продолжение в https://news.1rj.ru/str/pdigest/150]
#ces #trends #events
Голосовые интерфейсы
Рынок ищет следующую большую вещь и, кажись, наконец-то нащупал её. Хвалились цифрами: Amazon поставил 100 млн устройств с Alexa (https://www.engadget.com/2019/01/06/amazon-100-million-alexa-devices-sold/), а Google Assistant стоит аж на 1 млрд (правда, в основном смартфонов, где его необязательно используют — https://www.engadget.com/2019/01/07/google-assistant-1-billion-devices/).
И показали тонну интеграций во всё, что может быть установлено дома: душ (https://www.engadget.com/2019/01/06/u-by-moen-google/), туалет (https://www.engadget.com/2019/01/07/kohler-alexa-enabled-sensate-faucet/), зеркало (https://www.engadget.com/2019/01/07/simplehuman-made-a-mirror-with-google-assistant-built-in/), выключатель (https://www.theverge.com/circuitbreaker/2019/1/7/18171690/tp-link-kasa-smart-wifi-light-switch-voice-assistant), велик (https://www.engadget.com/2019/01/09/cybic-amazon-alexa-electric-bicycle/), клавишные (https://www.engadget.com/2019/01/07/roland-go-piano-alexa-built-in/), мышка (https://www.engadget.com/2019/01/08/razer-chroma-alexa-support/). Адекватность под вопросом, но идея дешёвого добавления голосового ассистента в существующие гаджеты — например, подставка для планшета (https://www.engadget.com/2019/01/08/lenovo-smart-tab-hands-on/), расширители для ТВ (https://www.theverge.com/circuitbreaker/2019/1/7/18171949/jbl-link-bar-android-tv-release-date-price-features-ces-2019) или гаджеты для прикуривателей в машинах (https://www.theverge.com/circuitbreaker/2019/1/8/18168678/anker-roav-bolt-car-charger-google-assistant-jbl-link-drive-hands-free-ces-2019) — действительно полезный способ повысить распространение голосовых помощников.
Google тут догоняет Amazon (https://www.theverge.com/2019/1/10/18175524/google-assistant-devices-ces-2019-tvs-soundbars-smart-speakers-kitchen-bathroom-cars), который показал многое из этого ещё в прошлом году — они анонсировали свою платформу (https://www.theverge.com/2019/1/8/18172082/google-assistant-connect-vs-alexa-interpreter-mode-maps-features-devices-ces-2019).
Гибкие экраны
Royole отобрали у Samsung звание первого коммерческого продукта — https://www.engadget.com/2019/01/07/royole-flexpai-hands-on/. А накануне выставки утек прототип 3-панельного телефона вроде как от Xiaomi — https://www.engadget.com/2019/01/03/xiaomi-three-panel-foldable-phone/. Ну и LG ещё раз показали свой сворачиваемый телевизор — https://www.engadget.com/2019/01/07/LG-OLED-TV-R-rollable/.
Умный дом
Выставка про бытовую технику, так что этого добра выше крыши:
— Проекция интерфейса на деревянную панель (https://www.engadget.com/2019/01/06/mui-wooden-smart-display/).
— Плиты, которые анализируют блюдо и помогают в готовке (https://www.engadget.com/2019/01/07/whirlpool-connected-hub-wall-oven/ и https://www.engadget.com/2019/01/08/whirlpool-smart-countertop-oven/)
— Снова умные зеркала (https://www.engadget.com/2019/01/07/careos-artemis-smart-mirror/).
— Снова холодильники с тачскрином (https://www.engadget.com/2019/01/07/samsung-updates-family-hub-smart-fridge-new-ui/).
[продолжение в https://news.1rj.ru/str/pdigest/150]
#ces #trends #events
www.ces.tech
CES - The Most Powerful Tech Event in the World
CES® is the most powerful tech event in the world — the proving ground for breakthrough technologies and global innovators. Owned and produced by the Consumer Technology Association (CTA)®, CES is the only trade show that showcases the entire tech landscape…
❤1
[начало в https://news.1rj.ru/str/pdigest/149]
Автомобильные интерфейсы
Производители боятся отстать от жизни. Они не просто давно на выставке, Mercedes представил новое поколение CLA вместо традиционного автошоу (https://www.engadget.com/2019/01/08/mercedes-benz-cla-coupe-unveil/). Управление жестами и голосом из коробки в обычной модели, а не концепте. Из другого — имитация прозрачности прицепа (https://www.engadget.com/2019/01/07/valeo-xtravue-camera-makes-trailer-disappear/), сенсоры в рамке для номера (https://www.engadget.com/2019/01/09/fensens-ces-2019/) и много автопилотов (https://www.engadget.com/2019/01/08/nvidia-drive-autopilot/). Из маразма — весёлая виртуальная реальность для пассажиров вместо унылого реального мира (https://www.engadget.com/2019/01/07/audi-backseat-vr-disney-marvel/).
Умные часы и носимые устройства
Уже никого не вдохновляют, анонсов мало. Интересные разве что часы Matrix, которые заряжаются от солнца и тепла тела (https://www.theverge.com/2019/1/6/18170731/matrix-powerwatch-2-wearable-body-heat-solar-power-never-charge-color-screen-specs-features-price). И умный пластырь от L'Oreal (https://www.theverge.com/2019/1/6/18168205/loreal-my-skin-track-ph-sensor-measure-wearable-skincare-ces-2019).
Виртуальная и дополненная реальность
Постепенное развитие без прорывов. Отслеживание взгляда у HTC (https://www.engadget.com/2019/01/08/htc-vive-pro-eye-hands-on-gaze-tracking-ces-2019/) и трансляции в Фейсбук (https://www.engadget.com/2019/01/09/oculus-rift-facebook-live-streaming/), компактная версия Hololens и Magic Leap (https://www.engadget.com/2019/01/08/nreal-light-mixed-reality-glasses-sunglasses-hands-on/).
Телевизоры и мониторы
Разрешения подскочили аж до 8K (https://www.engadget.com/2019/01/07/samsung-q900-8k-tvs/), а технология Dolby позволяет обходиться без динамиков — экран работает за них (https://www.engadget.com/2019/01/07/lg-display-88-inch-8k-oled-dolby-atmos-no-speakers/). Компактный монитор работает через USB-C без подключения к розетке (https://www.theverge.com/circuitbreaker/2019/1/8/18174745/lapscreen-usb-c-monitor-thin-portable-power-ces-2019).
Много говорят о 5G, который поможет построить настоящий интернет вещей (https://www.engadget.com/2019/01/08/verizon-disney-the-new-york-times-5g/). Показывают объёмное видео (https://www.engadget.com/2019/01/08/intel-studios-volumetric-grease/). Продолжают впаривать гаджеты для запахов (https://www.theverge.com/2019/1/7/18171432/moodo-artiris-parfum-pod-connected-scent-ces-2019). Модно оформляют квантовые компьютеры (https://www.engadget.com/2019/01/08/ibm-q-system-one-quantum-computer/). Опять пытаются сделать клавиатуру с кнопками-экранами (https://www.engadget.com/2019/01/07/nemeio-eink-keyboard-customize-any-language/).
В общем, где-то быстрее, выше, сильнее, где-то — тупой и ещё тупее. Эти два стула хорошо показывает криповое видение будущего от LG — https://www.engadget.com/2019/01/08/lg-ai-concept-video-future-vision/. Без комментариев, как говорят новостники.
Я подобрал те анонсы, что так или иначе касаются интерфейсов — есть неплохой шанс поработать над ними. Что из этого взлетит, а что останется бесполезной грудой пластика — увидим через год (вот что было в прошлом — https://news.1rj.ru/str/pdigest/16). Следующий CES пройдёт 7-10 января 2020 года — https://www.ces.tech/.
#ces #trends #events
Автомобильные интерфейсы
Производители боятся отстать от жизни. Они не просто давно на выставке, Mercedes представил новое поколение CLA вместо традиционного автошоу (https://www.engadget.com/2019/01/08/mercedes-benz-cla-coupe-unveil/). Управление жестами и голосом из коробки в обычной модели, а не концепте. Из другого — имитация прозрачности прицепа (https://www.engadget.com/2019/01/07/valeo-xtravue-camera-makes-trailer-disappear/), сенсоры в рамке для номера (https://www.engadget.com/2019/01/09/fensens-ces-2019/) и много автопилотов (https://www.engadget.com/2019/01/08/nvidia-drive-autopilot/). Из маразма — весёлая виртуальная реальность для пассажиров вместо унылого реального мира (https://www.engadget.com/2019/01/07/audi-backseat-vr-disney-marvel/).
Умные часы и носимые устройства
Уже никого не вдохновляют, анонсов мало. Интересные разве что часы Matrix, которые заряжаются от солнца и тепла тела (https://www.theverge.com/2019/1/6/18170731/matrix-powerwatch-2-wearable-body-heat-solar-power-never-charge-color-screen-specs-features-price). И умный пластырь от L'Oreal (https://www.theverge.com/2019/1/6/18168205/loreal-my-skin-track-ph-sensor-measure-wearable-skincare-ces-2019).
Виртуальная и дополненная реальность
Постепенное развитие без прорывов. Отслеживание взгляда у HTC (https://www.engadget.com/2019/01/08/htc-vive-pro-eye-hands-on-gaze-tracking-ces-2019/) и трансляции в Фейсбук (https://www.engadget.com/2019/01/09/oculus-rift-facebook-live-streaming/), компактная версия Hololens и Magic Leap (https://www.engadget.com/2019/01/08/nreal-light-mixed-reality-glasses-sunglasses-hands-on/).
Телевизоры и мониторы
Разрешения подскочили аж до 8K (https://www.engadget.com/2019/01/07/samsung-q900-8k-tvs/), а технология Dolby позволяет обходиться без динамиков — экран работает за них (https://www.engadget.com/2019/01/07/lg-display-88-inch-8k-oled-dolby-atmos-no-speakers/). Компактный монитор работает через USB-C без подключения к розетке (https://www.theverge.com/circuitbreaker/2019/1/8/18174745/lapscreen-usb-c-monitor-thin-portable-power-ces-2019).
Много говорят о 5G, который поможет построить настоящий интернет вещей (https://www.engadget.com/2019/01/08/verizon-disney-the-new-york-times-5g/). Показывают объёмное видео (https://www.engadget.com/2019/01/08/intel-studios-volumetric-grease/). Продолжают впаривать гаджеты для запахов (https://www.theverge.com/2019/1/7/18171432/moodo-artiris-parfum-pod-connected-scent-ces-2019). Модно оформляют квантовые компьютеры (https://www.engadget.com/2019/01/08/ibm-q-system-one-quantum-computer/). Опять пытаются сделать клавиатуру с кнопками-экранами (https://www.engadget.com/2019/01/07/nemeio-eink-keyboard-customize-any-language/).
В общем, где-то быстрее, выше, сильнее, где-то — тупой и ещё тупее. Эти два стула хорошо показывает криповое видение будущего от LG — https://www.engadget.com/2019/01/08/lg-ai-concept-video-future-vision/. Без комментариев, как говорят новостники.
Я подобрал те анонсы, что так или иначе касаются интерфейсов — есть неплохой шанс поработать над ними. Что из этого взлетит, а что останется бесполезной грудой пластика — увидим через год (вот что было в прошлом — https://news.1rj.ru/str/pdigest/16). Следующий CES пройдёт 7-10 января 2020 года — https://www.ces.tech/.
#ces #trends #events
Telegram
Дайджест продуктового дизайна
Ежегодная выставка технической крутоты и дичи CES 2019 прошла 8-11 января в Лас-Вегасе — https://www.ces.tech/. Как обычно, показали много чумовых и чумных вещей. Самое интересное, касающееся интерфейсов:
Голосовые интерфейсы
Рынок ищет следующую большую…
Голосовые интерфейсы
Рынок ищет следующую большую…
Дизайн-команды в продуктовых компаниях стремительно растут, а значит нужно думать об их внутреннем здоровье. Одна из главных забот — обеспечить понятную схему профессионального роста, чтобы дизайнерам было интересно и они чувствовали, что могут стать сильнее.
Кадровики давно используют карты навыков и умений (карты компетенций), которые помогают подсветить сильные и слабые стороны сотрудника, а потом целенаправленно качать их. Инструмент не новый, но дизайнеры прочухали про него только несколько лет назад. К сожалению, как и с многими другими методами — на деле используют немногие. А зря.
Jonny Burch собрал коллекцию карт компетенций для дизайнеров и разработчиков от разных компаний — http://www.progression.fyi/. Именно дизайнерских, конечно, маловато, но есть примеры от Basecamp, Buzzfeed, Coryndon Luxmoore, Lyst, Ope, Peter Merholz (самая толковая, хотя там нет hard skills), Zendesk. Устроены они просто: есть перечень навыков, у каждого даётся оценка уровня владения.
Мы используем этот инструмент с 2016 года — https://jvetrau.com/uxstrategy-4. Сначала я заполнял его руками сам, а в позапрошлом году запустили отдельный инструмент в интранете. Как это работает:
1. Дизайнер и дизайн-менеджер оценивают текущие навыки. Получаем отчёт о сильных и слабых сторонах.
2. На отдельной встрече оценка калибруется — расхождения возникают либо из-за плохого описания навыка, либо из-за плохой информированности дизайн-менеджера о прошлом опыте.
3. Там же выбираем 4-7 навыков, которые дизайнер хочет качать — это добровольный выбор, к чему больше лежит душа. Навык становится одной из целей на год, у него есть чёткий todo из теории (книги, курсы и т.п.) и практики (реальные задачи из продуктового плана).
4. На регулярных встречах 1:1 берём кусок из todo и смотрим прогресс, решаем возникающие проблемы.
Говорят, что серебряных пуль нет, но карта компетенций — всё-таки одна из редких. В этом году мы серьёзно доработаем инструмент (появится чеклист для каждого уровня каждого навыка, сами они разделятся на общечеловеческие, профессиональные и лидерские) и опубликуем наработки наружу.
На только что возникший у вас вопрос «какой готовый инструмент взять» простого ответа нет. Большинство использует сервисы для оценки 360 (например, студия Made by Many взяла Coach Amp 360 — https://www.uxmatters.com/mt/archives/2018/07/review-ux-and-digital-design-week-2017.php). Мы адаптировали аналогичное внутреннее решение для игровиков. Макс Бабич запустил отечественный сервис Cloveri — https://cloveri.com/. Кстати, Jonny Burch делает специализированный инструмент — https://progressionpack.com/.
А вот ещё парочка свежих примеров:
— Figma: https://www.figma.com/blog/how-we-built-the-figma-design-team/. Шаблон для карточек-профилей дизайнеров — https://www.figma.com/file/Dt8aRANBGlPQULz2S8ofE8F9/Team-Trading-Cards?node-id=0%3A1.
— Facebook: https://medium.com/elegant-tools/designing-a-better-career-path-for-designers-872b0aa50b5b. Одна из версий в компании.
— Jason Mesut: https://medium.com/shapingdesign. Серия статей о его карте.
По всем примерам видно, что есть два популярных формата — простая таблица и визуально эффектная лепестковая диаграмма. Второй, конечно, круто работает как постер на стене, но он чересчур поверхностный и ломается при хорошей детализации навыков (например, сложно качать абстрактно «проектирование интерфейсов», а вот улучшать работу с инфоархитектурой — вполне). Мы взяли простую табличку, чего и вам советую — сможете увидеть детальную картину по команде, а не жаловаться потом, что серебряных пуль нет.
P.S. Кстати, подробнее про карту компетенций я буду рассказывать на курсе о о дизайн-менеджменте цифровых продуктов на Bang Bang Education — https://bangbangeducation.ru/course/dmpatterns (стартует 26 февраля).
#designmanagement #teams #designops
Кадровики давно используют карты навыков и умений (карты компетенций), которые помогают подсветить сильные и слабые стороны сотрудника, а потом целенаправленно качать их. Инструмент не новый, но дизайнеры прочухали про него только несколько лет назад. К сожалению, как и с многими другими методами — на деле используют немногие. А зря.
Jonny Burch собрал коллекцию карт компетенций для дизайнеров и разработчиков от разных компаний — http://www.progression.fyi/. Именно дизайнерских, конечно, маловато, но есть примеры от Basecamp, Buzzfeed, Coryndon Luxmoore, Lyst, Ope, Peter Merholz (самая толковая, хотя там нет hard skills), Zendesk. Устроены они просто: есть перечень навыков, у каждого даётся оценка уровня владения.
Мы используем этот инструмент с 2016 года — https://jvetrau.com/uxstrategy-4. Сначала я заполнял его руками сам, а в позапрошлом году запустили отдельный инструмент в интранете. Как это работает:
1. Дизайнер и дизайн-менеджер оценивают текущие навыки. Получаем отчёт о сильных и слабых сторонах.
2. На отдельной встрече оценка калибруется — расхождения возникают либо из-за плохого описания навыка, либо из-за плохой информированности дизайн-менеджера о прошлом опыте.
3. Там же выбираем 4-7 навыков, которые дизайнер хочет качать — это добровольный выбор, к чему больше лежит душа. Навык становится одной из целей на год, у него есть чёткий todo из теории (книги, курсы и т.п.) и практики (реальные задачи из продуктового плана).
4. На регулярных встречах 1:1 берём кусок из todo и смотрим прогресс, решаем возникающие проблемы.
Говорят, что серебряных пуль нет, но карта компетенций — всё-таки одна из редких. В этом году мы серьёзно доработаем инструмент (появится чеклист для каждого уровня каждого навыка, сами они разделятся на общечеловеческие, профессиональные и лидерские) и опубликуем наработки наружу.
На только что возникший у вас вопрос «какой готовый инструмент взять» простого ответа нет. Большинство использует сервисы для оценки 360 (например, студия Made by Many взяла Coach Amp 360 — https://www.uxmatters.com/mt/archives/2018/07/review-ux-and-digital-design-week-2017.php). Мы адаптировали аналогичное внутреннее решение для игровиков. Макс Бабич запустил отечественный сервис Cloveri — https://cloveri.com/. Кстати, Jonny Burch делает специализированный инструмент — https://progressionpack.com/.
А вот ещё парочка свежих примеров:
— Figma: https://www.figma.com/blog/how-we-built-the-figma-design-team/. Шаблон для карточек-профилей дизайнеров — https://www.figma.com/file/Dt8aRANBGlPQULz2S8ofE8F9/Team-Trading-Cards?node-id=0%3A1.
— Facebook: https://medium.com/elegant-tools/designing-a-better-career-path-for-designers-872b0aa50b5b. Одна из версий в компании.
— Jason Mesut: https://medium.com/shapingdesign. Серия статей о его карте.
По всем примерам видно, что есть два популярных формата — простая таблица и визуально эффектная лепестковая диаграмма. Второй, конечно, круто работает как постер на стене, но он чересчур поверхностный и ломается при хорошей детализации навыков (например, сложно качать абстрактно «проектирование интерфейсов», а вот улучшать работу с инфоархитектурой — вполне). Мы взяли простую табличку, чего и вам советую — сможете увидеть детальную картину по команде, а не жаловаться потом, что серебряных пуль нет.
P.S. Кстати, подробнее про карту компетенций я буду рассказывать на курсе о о дизайн-менеджменте цифровых продуктов на Bang Bang Education — https://bangbangeducation.ru/course/dmpatterns (стартует 26 февраля).
#designmanagement #teams #designops
progression.fyi
A collection of open source frameworks for helping designers and engineers to grow at work
Запустился неплохой каталог конференций по дизайну на 2019 год — https://design-conferences-2019.com/. Сейчас там 117 событий по всему миру.
Продвинутые пользователи ПК давно знают про Find UX Events (https://www.finduxevents.com/) — лучший источник и базу знаний по дизайн-мероприятиям, где есть данные на пару лет вперёд. Их подборка — https://www.finduxevents.com/ux-conferences-2019/. К сожалению, погиб смертью храбрых ещё один толковый каталог, http://lanyrd.com/.
Долгое время подборки на основе таких каталогов делали Smashing Magazine, но в последнее время перестали. Знамя перехватили UX Collective — https://uxdesign.cc/the-best-ux-design-conferences-2019-events-bcd7b28f722d.
Судя по всему, списки конференций буду запускаться ещё не раз. Например, совсем недавно открылся https://designconf.site/. Не самый полный, но до кучи. Таблица, из которой они берут данные ― https://docs.google.com/spreadsheets/d/1jMa4aOuq2eahfPfhBttGZNS0PIm1CS39zyJUS3KLieY/edit#gid=912669276.
А ещё в 2019 году исполняется 100 лет легендарной школе Bauhaus, одной из основополагателей современного дизайна. Официальный сайт юбилея собрал все события и материалы на тему ― https://www.bauhaus100.com/.
Я побывал на приличном количестве отечественных и международных конференций, фестивалей, мастер-классов и митапов за последние годы. Сделал для себя вывод, что есть два типа контента и посещать их стоит под задачу:
— Общетематические конференции. Это в первую очередь про вдохновение, ведь сложно ожидать целенаправленной прокачки каких-то навыков от контента про всё сразу. Вы получите неплохой срез того, о чём сейчас говорят в профессии, и заряд бодрости, чтобы не отставать от трендов. В этом плане мне понравились Amuse (Будапешт), UXLx (Лиссабон) и OFFF (Барселона). Занятной была Google SPAN (Лондон). Из отечественных хорошо работают Дизайн-выходные (разные города) и наша Mail.ru Design Conference × Dribbble Meetup (Москва). Давно хочу попасть на Awwwards Conference и Interaction.
— Узкоспециализированные. Дизайн-менеджмент, дизайн-системы, брендинг, типографика и т.п. Это крутой способ прокачать конкретный навык и углубить знания в теме. Здесь хорошо зашли MXConference / LXConference (Сан-Франциско) и DesignOps Summit (Нью-Йорк) по дизайн-менеджменту, Серебро набора (Москва) по типографике. Где-то на стыке между двумя форматами Future London Academy (Лондон). Сильное разочарование — Clarity (Сан-Франциско) якобы по дизайн-системам. В этом году попаду на Brand New (США) по брендингу и Leading Design (Лондон) по дизайн-менеджменту.
Поэтому на вопрос «какую конференцию посоветуешь» я часто отвечаю: смотря что вы хотите узнать. Свой подход я описал выше.
Отдельно отмечу, что критически важно активно слушать и задавать вопросы. Многие ожидают, что просто приехав в красивый зал с шикарными спикерами на них автоматом прольются лучи познания. Нифига, ребята — на конференциях важно внимательно слушать, конспектировать и задавать вопросы выступающим. Иначе вы просто весело подбухнёте и привезёте сувениров, а потом будете гундосить, мол, не удивили.
#events
Продвинутые пользователи ПК давно знают про Find UX Events (https://www.finduxevents.com/) — лучший источник и базу знаний по дизайн-мероприятиям, где есть данные на пару лет вперёд. Их подборка — https://www.finduxevents.com/ux-conferences-2019/. К сожалению, погиб смертью храбрых ещё один толковый каталог, http://lanyrd.com/.
Долгое время подборки на основе таких каталогов делали Smashing Magazine, но в последнее время перестали. Знамя перехватили UX Collective — https://uxdesign.cc/the-best-ux-design-conferences-2019-events-bcd7b28f722d.
Судя по всему, списки конференций буду запускаться ещё не раз. Например, совсем недавно открылся https://designconf.site/. Не самый полный, но до кучи. Таблица, из которой они берут данные ― https://docs.google.com/spreadsheets/d/1jMa4aOuq2eahfPfhBttGZNS0PIm1CS39zyJUS3KLieY/edit#gid=912669276.
А ещё в 2019 году исполняется 100 лет легендарной школе Bauhaus, одной из основополагателей современного дизайна. Официальный сайт юбилея собрал все события и материалы на тему ― https://www.bauhaus100.com/.
Я побывал на приличном количестве отечественных и международных конференций, фестивалей, мастер-классов и митапов за последние годы. Сделал для себя вывод, что есть два типа контента и посещать их стоит под задачу:
— Общетематические конференции. Это в первую очередь про вдохновение, ведь сложно ожидать целенаправленной прокачки каких-то навыков от контента про всё сразу. Вы получите неплохой срез того, о чём сейчас говорят в профессии, и заряд бодрости, чтобы не отставать от трендов. В этом плане мне понравились Amuse (Будапешт), UXLx (Лиссабон) и OFFF (Барселона). Занятной была Google SPAN (Лондон). Из отечественных хорошо работают Дизайн-выходные (разные города) и наша Mail.ru Design Conference × Dribbble Meetup (Москва). Давно хочу попасть на Awwwards Conference и Interaction.
— Узкоспециализированные. Дизайн-менеджмент, дизайн-системы, брендинг, типографика и т.п. Это крутой способ прокачать конкретный навык и углубить знания в теме. Здесь хорошо зашли MXConference / LXConference (Сан-Франциско) и DesignOps Summit (Нью-Йорк) по дизайн-менеджменту, Серебро набора (Москва) по типографике. Где-то на стыке между двумя форматами Future London Academy (Лондон). Сильное разочарование — Clarity (Сан-Франциско) якобы по дизайн-системам. В этом году попаду на Brand New (США) по брендингу и Leading Design (Лондон) по дизайн-менеджменту.
Поэтому на вопрос «какую конференцию посоветуешь» я часто отвечаю: смотря что вы хотите узнать. Свой подход я описал выше.
Отдельно отмечу, что критически важно активно слушать и задавать вопросы. Многие ожидают, что просто приехав в красивый зал с шикарными спикерами на них автоматом прольются лучи познания. Нифига, ребята — на конференциях важно внимательно слушать, конспектировать и задавать вопросы выступающим. Иначе вы просто весело подбухнёте и привезёте сувениров, а потом будете гундосить, мол, не удивили.
#events
Вы, наверное, уже заметили, что я давно дружу с ребятами из https://news.1rj.ru/str/psd_eu. Пару раз участвовал в их онлайн-интенсивах Design Line (http://intensive.dsgnline.ru/), где выступает много сильных отечественных дизайнеров в развёрнутом полуторачасовом формате. Мы постоянно обмениваемся опытом по ведению Телеграма.
Они давно ведут канал @psd_eu об отечественном дизайне, фестивалях, адекватных заказчиках, полезных рабочих сервисах и инструментах. В последнее время пошла серия содержательных интервью, выходят статьи, обзоры работ лучших студий — полезно следить за ними, чтобы оставаться профессионально свежими.
Они давно ведут канал @psd_eu об отечественном дизайне, фестивалях, адекватных заказчиках, полезных рабочих сервисах и инструментах. В последнее время пошла серия содержательных интервью, выходят статьи, обзоры работ лучших студий — полезно следить за ними, чтобы оставаться профессионально свежими.
Telegram
PSD | Дизайн-пространство
Пишем просто, понятно и по делу обо всём околодизайнерском 🔥
Сайт: https://dsgners.ru
По поводу рекламы и сотрудничества: @design_manager_bot
Заявление № 4896031048
Сайт: https://dsgners.ru
По поводу рекламы и сотрудничества: @design_manager_bot
Заявление № 4896031048
Год только начался, а список новых инструментов дизайна и свежих обновлений уже распирает размер одного поста. Завалило не хуже чем знатной метелью по зиме. Ну, попробую не расплескать:
Design Camera: Приложение для Mac позволяет вставить в макет устройство и на лету повернуть его в 3D нужным образом.
Sketch 53 (бета): Обещают более точные настройки изменяемых свойств символов и более удобный интерфейс их замены. Обзор. Плагины:
— MakeUI: Конструктор UI Kit для Sketch. Можно выбрать основные параметры элементов интерфейса (цвета, радиус скругления и т.п.), на выходе получите библиотеку символов.
— Pointbreak: Позволяет делать адаптивные макеты.
Draftium: Занятный новый онлайн-инструмент прототипирования. Выбираете промо-сайт из шаблона, меняете тексты и смотрите на устройстве.
Studio 2.0: Вышла вторая версия инструмента. Теперь это не просто прототипирование, а цельный инструмент дизайна с возможностью экспортировать код и опубликовать сайт. Совместная работа прилагается.
Adobe XD: Декабрьское обновление. Облачное хранение макетов и намёк на совместную работу как в Figma. Также обещают версионирование и организацию грамотной библиотеки компонентов для команды.
Shane Williams сделал пачку простых и наглядных примеров использования новой возможности авто-анимации в Adobe XD. Какие состояния экранов нужны для каждого из прототипов.
Figma: Как прототипировать интерфейсы дополненной реальности в связке с инструментом Torch.
Weblium: Ещё один конструктор промо-сайтов. Подаётся как основанный на ИИ, но, видимо, имеются в виду совсем простые вещи. Из интересного ― гибкое применение тем оформления (можно отдельно и цельно менять цветовую палитру, шрифтовой набор и вид элементов управления).
Tilda: Обзор новых возможностей, запущенных в 2018 году.
Readymag: Запустили галерею примеров удачно сделанных сайтов, показывающих возможности платформы.
Webflow: Коллекция шаблонов и других вспомогательных ресурсов.
remove.bg: Онлайн-сервис убирает фон с фотографии.
Nolt: Сервис для работы с базой знаний инсайтов. Агрегирует обратную связь из разных источников и помогает сформировать продуктовый план на их основе.
User Interviews: Сервис помогает хранить базу респондентов для пользовательских исследований и находить новых.
Marvel: Шаблоны для рабочих сессий дизайн-мышления.
Illustrations.design: И ещё один сервис стоковых иллюстраций, которые можно настраивать под свою ситуацию. На сдачу дают ещё и шаблоны самих промо-сайтов.
Flare: Команда показывает, что можно сделать с помощью инструмента.
Palette: Достаточно гибкий и интересный генератор цветовых палитр. Свежий подход относительно тысяч других решений на тему, которые запускаются каждые полчаса.
В 2019 будет жарко — ключевые инструменты сделали мощные ставки в прошлом году. Figma несётся с космической скоростью и каждый второй уже изменяет Скетчу с ней. Adobe XD поднялись над собой и закрыли кучу брешей, мешавших им восприниматься серьёзно. Sketch как текущий дефолтный выбор должен сделать рывок, чтобы не проиграть наседающим на пятки. Рыба карась — игра началась.
#tools
Design Camera: Приложение для Mac позволяет вставить в макет устройство и на лету повернуть его в 3D нужным образом.
Sketch 53 (бета): Обещают более точные настройки изменяемых свойств символов и более удобный интерфейс их замены. Обзор. Плагины:
— MakeUI: Конструктор UI Kit для Sketch. Можно выбрать основные параметры элементов интерфейса (цвета, радиус скругления и т.п.), на выходе получите библиотеку символов.
— Pointbreak: Позволяет делать адаптивные макеты.
Draftium: Занятный новый онлайн-инструмент прототипирования. Выбираете промо-сайт из шаблона, меняете тексты и смотрите на устройстве.
Studio 2.0: Вышла вторая версия инструмента. Теперь это не просто прототипирование, а цельный инструмент дизайна с возможностью экспортировать код и опубликовать сайт. Совместная работа прилагается.
Adobe XD: Декабрьское обновление. Облачное хранение макетов и намёк на совместную работу как в Figma. Также обещают версионирование и организацию грамотной библиотеки компонентов для команды.
Shane Williams сделал пачку простых и наглядных примеров использования новой возможности авто-анимации в Adobe XD. Какие состояния экранов нужны для каждого из прототипов.
Figma: Как прототипировать интерфейсы дополненной реальности в связке с инструментом Torch.
Weblium: Ещё один конструктор промо-сайтов. Подаётся как основанный на ИИ, но, видимо, имеются в виду совсем простые вещи. Из интересного ― гибкое применение тем оформления (можно отдельно и цельно менять цветовую палитру, шрифтовой набор и вид элементов управления).
Tilda: Обзор новых возможностей, запущенных в 2018 году.
Readymag: Запустили галерею примеров удачно сделанных сайтов, показывающих возможности платформы.
Webflow: Коллекция шаблонов и других вспомогательных ресурсов.
remove.bg: Онлайн-сервис убирает фон с фотографии.
Nolt: Сервис для работы с базой знаний инсайтов. Агрегирует обратную связь из разных источников и помогает сформировать продуктовый план на их основе.
User Interviews: Сервис помогает хранить базу респондентов для пользовательских исследований и находить новых.
Marvel: Шаблоны для рабочих сессий дизайн-мышления.
Illustrations.design: И ещё один сервис стоковых иллюстраций, которые можно настраивать под свою ситуацию. На сдачу дают ещё и шаблоны самих промо-сайтов.
Flare: Команда показывает, что можно сделать с помощью инструмента.
Palette: Достаточно гибкий и интересный генератор цветовых палитр. Свежий подход относительно тысяч других решений на тему, которые запускаются каждые полчаса.
В 2019 будет жарко — ключевые инструменты сделали мощные ставки в прошлом году. Figma несётся с космической скоростью и каждый второй уже изменяет Скетчу с ней. Adobe XD поднялись над собой и закрыли кучу брешей, мешавших им восприниматься серьёзно. Sketch как текущий дефолтный выбор должен сделать рывок, чтобы не проиграть наседающим на пятки. Рыба карась — игра началась.
#tools
rotato.app
Mockup Generator & Animator 3D | Rotato
Level up with 100% custom, crisp, unlocked & unlimited iPhone, Android from 1,000,000 angles. 4K. Download free for any Mac.
А вот и свежий выпуск магазина на диване готовых решений. Наберите короткий номер @pdigest, чтобы получить подборку новых интерфейсных паттернов:
1. Коллекция примеров интерфейсных звуков известных сервисов. На старте есть Skype, Slack, Facebook, Apple, Whatsapp и другие.
2. Google выложили методички с лучшими практиками, где разобрали многие известные бренды:
― Мобильные интернет-магазины
― Путешествия
― Финансы
― Недвижимость
― Новостные и контентные сайты
― Промо-сайты
3, Компания Growth Rock исследовала 40 крупнейших американских интернет-магазинов и выделила ключевые паттерны оформления заказа в их мобильных версиях. Они проводили некие A/B-тесты на прототипах, что выглядит сомнительно. Но как чеклист — годно.
4. Библиотека паттернов мобильных приложений. Каждый пример можно получить в коде.
5. Коллекция интерфейсных паттернов с фокусом на психологический комфорт пользователей. Пока только наполняется, но заход интересный.
6. Raluca Budiu из Nielsen/Norman Group разбирает паттерны хороших чатов поддержки. Плюсы, минусы, подводные камни.
7. Гайдлайны по доступности интерфейсов для пользователей с ограниченными возможностями от Сбербанка. Толковый подробный чеклист.
8. Addy Osmani разбирает этапы загрузки страницы сайта и выделяет критические точки, в которых пользователь ожидает увидеть не только основной контент, но и работающие инструменты взаимодействия. Он приводит выкладки влияния этих этапов на конверсию.
9. Команда Codea показывает интересный пример меню в iOS для профессиональных инструментов ― оно ближе к десктопным продуктам. Часть 2.
10. Katie Sherwin и Jakob Nielsen продолжают рассказ о новом исследовании Nielsen/Norman Group особенностей использования интерфейсов детьми разного возраста. В этой статье приводят разницу восприятия типовых интерфейсных паттернов.
12. Colin Eagan показывает, как можно проектировать сервисы, предполагающие персонализацию.
12. Raluca Budiu из Nielsen/Norman Group исследовала, как пользователи реагируют на рекомендательные системы. Зачастую непонятно, почему сервис выдаёт именно этот контент. В другой статье разбирают проблемы рекомендательных систем, которые загоняют пользователя в «пузырь» одинакового контента.
13. Chris Ashton попробовал использовать программу для чтения контента сайта вслух. Проблем у известных сервисов выше крыши.
Тут выше крыши идей для ваших интерфейсов, так что не упустите шанс ― сделайте их лучше и шелковистее уже сейчас.
#patterns
1. Коллекция примеров интерфейсных звуков известных сервисов. На старте есть Skype, Slack, Facebook, Apple, Whatsapp и другие.
2. Google выложили методички с лучшими практиками, где разобрали многие известные бренды:
― Мобильные интернет-магазины
― Путешествия
― Финансы
― Недвижимость
― Новостные и контентные сайты
― Промо-сайты
3, Компания Growth Rock исследовала 40 крупнейших американских интернет-магазинов и выделила ключевые паттерны оформления заказа в их мобильных версиях. Они проводили некие A/B-тесты на прототипах, что выглядит сомнительно. Но как чеклист — годно.
4. Библиотека паттернов мобильных приложений. Каждый пример можно получить в коде.
5. Коллекция интерфейсных паттернов с фокусом на психологический комфорт пользователей. Пока только наполняется, но заход интересный.
6. Raluca Budiu из Nielsen/Norman Group разбирает паттерны хороших чатов поддержки. Плюсы, минусы, подводные камни.
7. Гайдлайны по доступности интерфейсов для пользователей с ограниченными возможностями от Сбербанка. Толковый подробный чеклист.
8. Addy Osmani разбирает этапы загрузки страницы сайта и выделяет критические точки, в которых пользователь ожидает увидеть не только основной контент, но и работающие инструменты взаимодействия. Он приводит выкладки влияния этих этапов на конверсию.
9. Команда Codea показывает интересный пример меню в iOS для профессиональных инструментов ― оно ближе к десктопным продуктам. Часть 2.
10. Katie Sherwin и Jakob Nielsen продолжают рассказ о новом исследовании Nielsen/Norman Group особенностей использования интерфейсов детьми разного возраста. В этой статье приводят разницу восприятия типовых интерфейсных паттернов.
12. Colin Eagan показывает, как можно проектировать сервисы, предполагающие персонализацию.
12. Raluca Budiu из Nielsen/Norman Group исследовала, как пользователи реагируют на рекомендательные системы. Зачастую непонятно, почему сервис выдаёт именно этот контент. В другой статье разбирают проблемы рекомендательных систем, которые загоняют пользователя в «пузырь» одинакового контента.
13. Chris Ashton попробовал использовать программу для чтения контента сайта вслух. Проблем у известных сервисов выше крыши.
Тут выше крыши идей для ваших интерфейсов, так что не упустите шанс ― сделайте их лучше и шелковистее уже сейчас.
#patterns
InVision предложили свою модель зрелости дизайна. Это 5 стадий взросления дизайн-команды ― от исполнителя до визионера. В дополнение к модели они опросили 2000 дизайнеров и попытались понять, как отличается зрелость в разных странах, отраслях и типах компаний.
Получился неплохой фреймворк, где карта развития команды представлена в виде лепестковой диаграммы ― это повторяет идею карты компетенций дизайнера, показывая текущее состояние и точки роста.
Я давно собираю модели зрелости в рамках своей серии статей о паттернах дизайн-менеджмента. Серию начал в 2013 году со своей модели, вокруг которой дальше провязал конкретные методы и практики. Она сочетает в себе два подхода:
― «лестница», по которой дизайн-команда поднимается вверх по мере взросления;
― «луковица», где каждый слой можно развивать самостоятельно.
Большинство моделей зрелости используют первый подход, «лестницу»:
1998: Jonathan Earthy (http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/usability-maturity-model[1].pdf). У неё бесчисленное количество вариаций от самых разных авторов.
2006: Rosa Wu и Jess McMullin
2006: Jakob Nielsen
2007: Danish Design Centre
2008: Forrester
Более удачные варианты «лестницы» предлагают фреймворк с описанием действий на каждом шаге:
2004: HFI
2013: HIMSS
2014: Keikendo
2015: Macadamian
2015: Nomensa
2015: Infosys
2015: DMI
2018: Richard Banfield
Фреймворки/чек-листы:
2012: Milan Guenther
2016: Forrester
Совмещение «лестницы» и «луковицы»:
2017: Natalie Hanson
«Луковица»:
2009: Sabine Junginger
2017: David Service
Пирамида:
2012: Stefan Klocek
Лепестковая диаграмма:
2018: Gebruiker Centraal
Если собирать все вариации на основе популярных подходов, то за 20 лет наберётся с полсотни моделей зрелости (собираю всё это добро в Pinterest). Зачем так много? Если откинуть задачу продажи консультантами своих услуг, то многообразие организаций и их реальных ситуаций не позволяет создать одну универсальную. Даже если цели системного улучшения дизайна у компаний похожи, особенности орг.структуры и процессов, а также наследие создают уникальную ситуацию, где у каждого будет свой путь.
Более полная версия статьи с картинками.
Кстати, про модели зрелости я рассказываю на курсе о дизайн-менеджменте цифровых продуктов на Bang Bang Education. Места в первом потоке раскуплены, но второй уже объявлен — стартует 14 октября.
#designmanagement #designops #maturity
Получился неплохой фреймворк, где карта развития команды представлена в виде лепестковой диаграммы ― это повторяет идею карты компетенций дизайнера, показывая текущее состояние и точки роста.
Я давно собираю модели зрелости в рамках своей серии статей о паттернах дизайн-менеджмента. Серию начал в 2013 году со своей модели, вокруг которой дальше провязал конкретные методы и практики. Она сочетает в себе два подхода:
― «лестница», по которой дизайн-команда поднимается вверх по мере взросления;
― «луковица», где каждый слой можно развивать самостоятельно.
Большинство моделей зрелости используют первый подход, «лестницу»:
1998: Jonathan Earthy (http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/usability-maturity-model[1].pdf). У неё бесчисленное количество вариаций от самых разных авторов.
2006: Rosa Wu и Jess McMullin
2006: Jakob Nielsen
2007: Danish Design Centre
2008: Forrester
Более удачные варианты «лестницы» предлагают фреймворк с описанием действий на каждом шаге:
2004: HFI
2013: HIMSS
2014: Keikendo
2015: Macadamian
2015: Nomensa
2015: Infosys
2015: DMI
2018: Richard Banfield
Фреймворки/чек-листы:
2012: Milan Guenther
2016: Forrester
Совмещение «лестницы» и «луковицы»:
2017: Natalie Hanson
«Луковица»:
2009: Sabine Junginger
2017: David Service
Пирамида:
2012: Stefan Klocek
Лепестковая диаграмма:
2018: Gebruiker Centraal
Если собирать все вариации на основе популярных подходов, то за 20 лет наберётся с полсотни моделей зрелости (собираю всё это добро в Pinterest). Зачем так много? Если откинуть задачу продажи консультантами своих услуг, то многообразие организаций и их реальных ситуаций не позволяет создать одну универсальную. Даже если цели системного улучшения дизайна у компаний похожи, особенности орг.структуры и процессов, а также наследие создают уникальную ситуацию, где у каждого будет свой путь.
Более полная версия статьи с картинками.
Кстати, про модели зрелости я рассказываю на курсе о дизайн-менеджменте цифровых продуктов на Bang Bang Education. Места в первом потоке раскуплены, но второй уже объявлен — стартует 14 октября.
#designmanagement #designops #maturity
Miro
AI Innovation Workspace | Miro
Speed up product development from ideation to launch. Align teams, break tool silos, and ship what customers need in one AI-powered visual platform.
Собрал дайджест продуктового дизайна за январь 2019. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте
#digest
Напомню, что его можно получать разными способами:
— ВКонтакте
— Рассылка по почте
#digest
Юрий Ветров об интерфейсах
Дайджест продуктового дизайна, январь 2019
Конференции по дизайну в 2019 году, новые интерфейсы с CES 2019, карта компетенций продуктового дизайнера, модели зрелости дизайна, новые инструменты и ещё сотня свежих ссылок.
Пользовательские исследования становятся всё доступнее — и в плане методов (тонны методичек), и в плане инструментов (даже на русском), и в плане осознания важности (спасибо (без шуток) переупаковщикам под марками «дизайн-мышление» и «customer development»). А значит меньше компаний запускает продукты наудачу (шутка.jpeg). Но для тех, кто всё-таки осознал, подсобрал пачку свежих памяток и шпаргалок по базовым и не очень методам:
1. Крутой онлайн-учебник по проведению пользовательских исследований от сервиса User Interviews. Он описывает основы, разведочные методы и валидацию/тестирование, подбор респондентов, инструменты и построение исследовательских команд.
2. Erika Hall показывает разницу между вопросом самого пользовательского исследования и конкретным вопросом интервью с пользователем. Менеджеры продуктов и другие заказчики часто путают их и приходят с конкретным методом в голове, хотя правильно сформулированный вопрос исследования может потребовать вообще другого подхода.
3. Andrea Drugay из Dropbox рассказывает о формате регулярных быстрых сессий пользовательских исследований. Раз в две недели они приглашают несколько респондентов, которые общаются с продуктовыми командами в формате «быстрых свиданий».
4. Простой и мощный подход к выбору методов пользовательских исследований от David Travis из UserFocus. Он основан на классических матрицах 2x2 и предлагает 10 точек зрения на разные задачи.
5. Jared Spool критикует авторов книг о Jobs to Be Done за то, что они поверхностно рассказывают об исследовательской работе в ходе выявления потребностей пользователей. Из-за этого повторить успех красивых кейсов-примеров сложновато.
6. Kate Moran даёт советы по ситуациям, когда данные разных исследований интерфейса противоречат друг другу. Как правильно проверить данные, методы и вообще правильно действовать.
7. Paula Barraza делится советами по проведению быстрого итеративного пользовательского тестирования интерфейсов. Как проводить сессии, фиксировать результаты и общаться с командой.
8. Jim Ross разбирает типичные ошибки при планировании и проведении пользовательских исследований. Часть 2.
9. Jeff Sauro изучил, ради чего пользователи участвуют в бесплатных опросах и как их оценки отличаются от оплачиваемых.
Для тех, кто осознанность своей работы над продуктами прочувствовал давно тут найдётся много свежих мыслей. Если вы только пробуете воду мизинчиком — и для вас есть кое-чего по лёгкому погружению.
#research
1. Крутой онлайн-учебник по проведению пользовательских исследований от сервиса User Interviews. Он описывает основы, разведочные методы и валидацию/тестирование, подбор респондентов, инструменты и построение исследовательских команд.
2. Erika Hall показывает разницу между вопросом самого пользовательского исследования и конкретным вопросом интервью с пользователем. Менеджеры продуктов и другие заказчики часто путают их и приходят с конкретным методом в голове, хотя правильно сформулированный вопрос исследования может потребовать вообще другого подхода.
3. Andrea Drugay из Dropbox рассказывает о формате регулярных быстрых сессий пользовательских исследований. Раз в две недели они приглашают несколько респондентов, которые общаются с продуктовыми командами в формате «быстрых свиданий».
4. Простой и мощный подход к выбору методов пользовательских исследований от David Travis из UserFocus. Он основан на классических матрицах 2x2 и предлагает 10 точек зрения на разные задачи.
5. Jared Spool критикует авторов книг о Jobs to Be Done за то, что они поверхностно рассказывают об исследовательской работе в ходе выявления потребностей пользователей. Из-за этого повторить успех красивых кейсов-примеров сложновато.
6. Kate Moran даёт советы по ситуациям, когда данные разных исследований интерфейса противоречат друг другу. Как правильно проверить данные, методы и вообще правильно действовать.
7. Paula Barraza делится советами по проведению быстрого итеративного пользовательского тестирования интерфейсов. Как проводить сессии, фиксировать результаты и общаться с командой.
8. Jim Ross разбирает типичные ошибки при планировании и проведении пользовательских исследований. Часть 2.
9. Jeff Sauro изучил, ради чего пользователи участвуют в бесплатных опросах и как их оценки отличаются от оплачиваемых.
Для тех, кто осознанность своей работы над продуктами прочувствовал давно тут найдётся много свежих мыслей. Если вы только пробуете воду мизинчиком — и для вас есть кое-чего по лёгкому погружению.
#research
Userinterviews
UX Research Field Guide | User Interviews
An in-depth, beginner-friendly guide on how to conduct effective user research. Topics include: UX research plans, recruiting, methodology, and analysis.
Сборник лучших хитов про дизайн-менеджмент и командную работу по версии дайджеста продуктового дизайна, volume 10: январь-февраль 2019 [скачать бесплатно без смс]:
1. Обновил свою презентацию о подходе к долгосрочному планированию изменений в дизайне Mail.ru (с учётом плана на 2019). В начале прошлого года мы запустили свежую версию, с помощью которой системно улучшаем дизайн продуктов и внедряем новые методы работы. В основе — классическая пирамида стратегического планирования от видения и миссии до конкретных шагов на базе OKR (Objectives & Key Results).
2. Рассказы о работе других дизайн-команд:
— Лена Куликова о Райффайзен Банке;
— Саша Гришин о Badoo.
И относительно недавно появившиеся блоги:
— Spotify;
— Яндекс;
— Рамблер;
— Mail.ru.
3. Erin Woo рассказывает о формате недельных выездов дизайнеров мобильного MS Outlook. Коллеги из разных городов съезжаются вместе и решают проблемы пользователей, до которых давно хотелось добраться.
4. James Rotanson из Atlassian даёт советы по настройке Jira для дизайнеров. Он приводит пример работы собственной команды.
5. Советы по правильному взаимодействию интерфейсных писателей с менеджерами продуктов и дизайнерами от Gene Shannon из Shopify. Толковые мысли про формирование ожиданий и хороший пример матрицы RACI для учёта заинтересованных лиц.
6. Jenny Wen из команды Dropbox Paper даёт советы по взаимодействию дизайнеров и разработчиков. Как упростить коллегам жизнь и оптимизировать совместную работу.
7. Конференция по дизайн-менеджменту Design Leadership Summit 2018 прошла 29 сентября в Торонто. Опубликованы видео-записи выступлений.
8. Конференции по дизайн-системам поняли ограниченность темы и переметнулись на общие вопросы по управлению дизайн-командами. DSConf из Хельсинки теперь Joint Futures, а Design Systems London вот-вот объявят ребрендинг. Хайп DesignOps пожирает предыдущих хайпожоров.
Соляночка без какого-то единого посыла, как я люблю, но грамотно отфильтрованная для опытных и начинающих дизайн-менеджеров, арт-директоров и продуктологов. Сделаем продуктовый быт лучше!
#designmanagement #designops
1. Обновил свою презентацию о подходе к долгосрочному планированию изменений в дизайне Mail.ru (с учётом плана на 2019). В начале прошлого года мы запустили свежую версию, с помощью которой системно улучшаем дизайн продуктов и внедряем новые методы работы. В основе — классическая пирамида стратегического планирования от видения и миссии до конкретных шагов на базе OKR (Objectives & Key Results).
2. Рассказы о работе других дизайн-команд:
— Лена Куликова о Райффайзен Банке;
— Саша Гришин о Badoo.
И относительно недавно появившиеся блоги:
— Spotify;
— Яндекс;
— Рамблер;
— Mail.ru.
3. Erin Woo рассказывает о формате недельных выездов дизайнеров мобильного MS Outlook. Коллеги из разных городов съезжаются вместе и решают проблемы пользователей, до которых давно хотелось добраться.
4. James Rotanson из Atlassian даёт советы по настройке Jira для дизайнеров. Он приводит пример работы собственной команды.
5. Советы по правильному взаимодействию интерфейсных писателей с менеджерами продуктов и дизайнерами от Gene Shannon из Shopify. Толковые мысли про формирование ожиданий и хороший пример матрицы RACI для учёта заинтересованных лиц.
6. Jenny Wen из команды Dropbox Paper даёт советы по взаимодействию дизайнеров и разработчиков. Как упростить коллегам жизнь и оптимизировать совместную работу.
7. Конференция по дизайн-менеджменту Design Leadership Summit 2018 прошла 29 сентября в Торонто. Опубликованы видео-записи выступлений.
8. Конференции по дизайн-системам поняли ограниченность темы и переметнулись на общие вопросы по управлению дизайн-командами. DSConf из Хельсинки теперь Joint Futures, а Design Systems London вот-вот объявят ребрендинг. Хайп DesignOps пожирает предыдущих хайпожоров.
Соляночка без какого-то единого посыла, как я люблю, но грамотно отфильтрованная для опытных и начинающих дизайн-менеджеров, арт-директоров и продуктологов. Сделаем продуктовый быт лучше!
#designmanagement #designops
Speaker Deck
Внедрение UX-стратегии 2.1 или DesignOps
Для развития дизайна в компании мы используем долгосрочное планирование и в 2018 запустили свежую версию подхода. Я рассказал о том, как мы системно улу…
Рождаемость новых инструментов дизайна такая, что астрологи могут чилить ― им не нужно объявлять какие-то особенные недели. Год только раскачивается, а они уже шарашат вовсю:
UserBit: Интересный комбинированный онлайн-сервис для анализа пользователей и концептуального проектирования. Позволяет вести заметки с пользовательских исследований и записывать инсайты, описывать персонажей, делать карты сайта.
Window: Приложение для Android помогает проверить точность сборки экранов. По сути работает как Zeplin, показывая параметры элементов интерфейса. Анонс.
ScreenSpace: Онлайн-сервис (уже второй) позволяет вставить в макет устройство и на лету повернуть его в 3D нужным образом.
Adobe XD: Январское и февральское обновления. Развитие прототипирования голосовых интерфейсов, улучшение импорта из Photoshop и Illustrator, экспорт в AfterEffects, рост количества плагинов, доработки по ключевым функциям.
Color by Cloudflare Design: Генератор цветовых палитр с учётом пользователей с ограниченными возможностями.
Mockplus iDoc: Ещё один инструмент для передачи макетов разработчикам.
Figma: Получили ещё $40 млн инвестиций (суммарно в них вложили уже $82,9 млн). В ожидании новых рывков посмотрите бесплатные шаблоны и заранее подобранные шрифтовые комбинации.
Sketch: Плагины: Anima 3.0 собрали все свои плагины воедино с возможностью делать достаточно мощные интерактивные прототипы с вводом данных и микро-анимациями.
Screen Guru: Простой сервис для создания скриншотов сайтов — даёте ему ссылку, он на выходе — картинку в окне браузера.
Image Resizer: Онлайн-сервис готовит версию любого изображения в 50 форматах для соц.сетей и других типовых задач.
Tilda: Выпустили учебник по анимации, помогающий собирать более интересные проекты в инструменте.
wiARframe: Сервис для прототипирования в дополненной реальности. Работает в браузере, есть предпросмотр на телефонах и планшетах.
Stubborn Illustrations: Ещё одна библиотека иллюстраций с возможностью сборки конкретного сюжета для конкретной задачи. Судя по всему, в этом году их число дойдёт до сотни — такая модель распространения гораздо лучше стандартных стоков.
Mixed: Ещё один инструмент для совместной работы на «маркерной доске» в браузере в духе RealtimeBoard.
InVision Studio: Купили сервис для версионирования макетов Trunk для интеграции в инструмент. Читайте также учебник по работе с инструментом.
Кажется, следующий выпуск придётся делать уже на следующей неделе. А вы пока поковыряйте эту подборку.
#tools
UserBit: Интересный комбинированный онлайн-сервис для анализа пользователей и концептуального проектирования. Позволяет вести заметки с пользовательских исследований и записывать инсайты, описывать персонажей, делать карты сайта.
Window: Приложение для Android помогает проверить точность сборки экранов. По сути работает как Zeplin, показывая параметры элементов интерфейса. Анонс.
ScreenSpace: Онлайн-сервис (уже второй) позволяет вставить в макет устройство и на лету повернуть его в 3D нужным образом.
Adobe XD: Январское и февральское обновления. Развитие прототипирования голосовых интерфейсов, улучшение импорта из Photoshop и Illustrator, экспорт в AfterEffects, рост количества плагинов, доработки по ключевым функциям.
Color by Cloudflare Design: Генератор цветовых палитр с учётом пользователей с ограниченными возможностями.
Mockplus iDoc: Ещё один инструмент для передачи макетов разработчикам.
Figma: Получили ещё $40 млн инвестиций (суммарно в них вложили уже $82,9 млн). В ожидании новых рывков посмотрите бесплатные шаблоны и заранее подобранные шрифтовые комбинации.
Sketch: Плагины: Anima 3.0 собрали все свои плагины воедино с возможностью делать достаточно мощные интерактивные прототипы с вводом данных и микро-анимациями.
Screen Guru: Простой сервис для создания скриншотов сайтов — даёте ему ссылку, он на выходе — картинку в окне браузера.
Image Resizer: Онлайн-сервис готовит версию любого изображения в 50 форматах для соц.сетей и других типовых задач.
Tilda: Выпустили учебник по анимации, помогающий собирать более интересные проекты в инструменте.
wiARframe: Сервис для прототипирования в дополненной реальности. Работает в браузере, есть предпросмотр на телефонах и планшетах.
Stubborn Illustrations: Ещё одна библиотека иллюстраций с возможностью сборки конкретного сюжета для конкретной задачи. Судя по всему, в этом году их число дойдёт до сотни — такая модель распространения гораздо лучше стандартных стоков.
Mixed: Ещё один инструмент для совместной работы на «маркерной доске» в браузере в духе RealtimeBoard.
InVision Studio: Купили сервис для версионирования макетов Trunk для интеграции в инструмент. Читайте также учебник по работе с инструментом.
Кажется, следующий выпуск придётся делать уже на следующей неделе. А вы пока поковыряйте эту подборку.
#tools
UserBit
UX Repository and Tools for agencies & freelancers | UserBit
UX design and User research tools for agencies and freelancers
Когда говорят о внедрении дизайн-систем, как правило используют стандартный набор выхлопа для бизнеса:
1. Повысить скорость сборки макетов и продуктов;
2. Повысить качество продуктов;
3. Получить кумулятивный эффект от удачных продуктовых решений;
4. Упростить взаимодействие с другими командами;
5. Перейти от крупных редизайнов раз в несколько лет к постоянному поддержанию актуальности интерфейса.
Некоторые пробуют посчитать эти умозрительные выгоды в понятных метриках, чтобы просить дополнительные ресурсы на внедрение с цифрами в руках:
1. Cristiano Rastelli предложил подход к расчёту выхлопа на примере Cosmos от Badoo. Он сравнил изменения в коде до и после внедрения единых компонентов и увидел, что активность перетекла из обновлений мобильного сайта в доработки тех же элементов уже во фреймворке. Конечно, многие разработчики скептически относятся к измерениям чего-либо через количество коммитов, но идея интересная.
2. Bryn Rozzier провёл интереснейшие расчёты выхлопа для одного из клиентов. Он попытался перевести стандартные вещи вроде уменьшения трудозатрат, ускорения запусков и улучшения качества в деньги. Показана вся цепочка вычислений и формулы, так что можно применить к своим задачам. Лучший материал на тему ROI внедрения дизайн-систем.
3. Jeroen Ransijn рассказывает о создании дизайн-системы инструмента аналитики Segment. Она выросла из прототипа нового дизайна для конференции — необычный путь создания. Автор показывает толковый дашборд, отслеживающий внедрение дизайн-системы в продукте. Сайт дизайн-системы.
4. Варя Степанова рассказывает о пользовательских исследованиях продуктовых команд, использующих дизайн-систему финского телеком-оператора Elisa. Это помогает понять её проблемы и определить направления развития.
А вот просто немного толковых свежих материалов на тему:
1. Specify: Занятный инструмент для связки двух ключевых частей дизайн-системы — дизайнерских шаблонов в Sketch и компонентов в коде. На вид что-то в духе более мощного Zeplin — ключевые переменные визуального языка экспортируются в виде токенов, дальше они подключаются к компонентам в коде (обещают pull- и push-запросы к Git).
2. Дизайн-система отечественной компании БАРС Груп (дочка Ростех). Страница в клубе создателей отечественных дизайн-систем.
3. Nathan Curtis предлагает подход для описания архитектуры дизайн-систем. На какие ветки они делятся, какие бренды поддерживают, что именно реализовано и на каких продуктах.
4. В другой статье он описывает модель дизайн-системы для линейки продуктов, в которой они объединены в разные подгруппы. Как обновлять их на разных уровнях — от базовых компонентов для всех до специфичных для конкретных сервисов.
5. Ryan Cordell из Deliveroo показывает, как интерфейсные писатели интегрировали правила работы с текстами в дизайн-систему.
6. Alan B Smith показывает, как создавать компоненты с поддержкой разных тем оформления на базе фреймфорка Styled System.
7. Пара относительно свежих фреймворков:
— CodyHouse.
— Emotion.
— MDX.js.
С этим багажом ваши внедрения на поле унифицированного дизайна точно должны ускориться.
#designsystems
1. Повысить скорость сборки макетов и продуктов;
2. Повысить качество продуктов;
3. Получить кумулятивный эффект от удачных продуктовых решений;
4. Упростить взаимодействие с другими командами;
5. Перейти от крупных редизайнов раз в несколько лет к постоянному поддержанию актуальности интерфейса.
Некоторые пробуют посчитать эти умозрительные выгоды в понятных метриках, чтобы просить дополнительные ресурсы на внедрение с цифрами в руках:
1. Cristiano Rastelli предложил подход к расчёту выхлопа на примере Cosmos от Badoo. Он сравнил изменения в коде до и после внедрения единых компонентов и увидел, что активность перетекла из обновлений мобильного сайта в доработки тех же элементов уже во фреймворке. Конечно, многие разработчики скептически относятся к измерениям чего-либо через количество коммитов, но идея интересная.
2. Bryn Rozzier провёл интереснейшие расчёты выхлопа для одного из клиентов. Он попытался перевести стандартные вещи вроде уменьшения трудозатрат, ускорения запусков и улучшения качества в деньги. Показана вся цепочка вычислений и формулы, так что можно применить к своим задачам. Лучший материал на тему ROI внедрения дизайн-систем.
3. Jeroen Ransijn рассказывает о создании дизайн-системы инструмента аналитики Segment. Она выросла из прототипа нового дизайна для конференции — необычный путь создания. Автор показывает толковый дашборд, отслеживающий внедрение дизайн-системы в продукте. Сайт дизайн-системы.
4. Варя Степанова рассказывает о пользовательских исследованиях продуктовых команд, использующих дизайн-систему финского телеком-оператора Elisa. Это помогает понять её проблемы и определить направления развития.
А вот просто немного толковых свежих материалов на тему:
1. Specify: Занятный инструмент для связки двух ключевых частей дизайн-системы — дизайнерских шаблонов в Sketch и компонентов в коде. На вид что-то в духе более мощного Zeplin — ключевые переменные визуального языка экспортируются в виде токенов, дальше они подключаются к компонентам в коде (обещают pull- и push-запросы к Git).
2. Дизайн-система отечественной компании БАРС Груп (дочка Ростех). Страница в клубе создателей отечественных дизайн-систем.
3. Nathan Curtis предлагает подход для описания архитектуры дизайн-систем. На какие ветки они делятся, какие бренды поддерживают, что именно реализовано и на каких продуктах.
4. В другой статье он описывает модель дизайн-системы для линейки продуктов, в которой они объединены в разные подгруппы. Как обновлять их на разных уровнях — от базовых компонентов для всех до специфичных для конкретных сервисов.
5. Ryan Cordell из Deliveroo показывает, как интерфейсные писатели интегрировали правила работы с текстами в дизайн-систему.
6. Alan B Smith показывает, как создавать компоненты с поддержкой разных тем оформления на базе фреймфорка Styled System.
7. Пара относительно свежих фреймворков:
— CodyHouse.
— Emotion.
— MDX.js.
С этим багажом ваши внедрения на поле унифицированного дизайна точно должны ускориться.
#designsystems
Medium
Measuring the Impact of a Design System
Visualising the positive impact on the work of a team of UI engineers, by the adoption of a design system.
❤1