Во вторник вышел свежий дайджест продуктового дизайна — http://jvetrau.com/digest-2018-mar/. Если вы до него не добрались (или закопались в обилии ссылок), вот парочка самых крепких материалов оттуда на выходные:
Новый отчёт John Maeda о состоянии дизайна в цифровых продуктах — https://www.slideshare.net/johnmaeda/design-in-tech-report-2018/. В нём всё ещё хватает интересных наблюдений за тем, как меняются компании и рынок в целом, но с прошлого года фокус смещается на продвижение его собственных концепций (включая спорную «computational design»). Это всё ещё отражает направление движения рынка, но прорывных открытий, как было в первых двух выпусках, всё меньше.
Michael Flarup решил потроллить дизайн-сообщество и сделать современное прочтение скеоморфного дизайна календаря для iPhone X ― https://blog.prototypr.io/bringing-back-skeuomorphic-design-d211cc1c22d2. Правда, возможно он говорил об этом серьёзно... Тем более, что возвращение бесполезного декора может закончиться именно этим.
А вот ещё пара свежих статей, которые попадут в апрельский:
Отличнейший здоровый взгляд Khoi Vinh на никак не умолкающую дискуссию о том, полезен ли для профессии лейбл «дизайн-мышление» или это пустой маркетинговый баззворд — https://www.subtraction.com/2018/04/02/in-defense-of-design-thinking-which-is-terrible/. Даже если кто-то использует его неправильно, это мощный инструмент для того, чтобы сделать дизайн более массовым явлением (пусть даже кто-то поначалу будет делать это неправильно). То же самое сейчас происходит с программированием — огромное количество курсов для детей и просто начинающих наверняка породит массу дрянного кода, но это решаемая проблема. Он также полемизирует с Natasha Jen из Pentagram, чьё одиозное выступление в прошлом году — чистейший кликбейт и непонимание роли дизайнера в современных продуктах и мире в целом.
Рассказ о редизайне Reddit, который не менялся с 2008 года ― https://www.wired.com/story/reddit-redesign/. В такой ситуации опасно делать резкие шаги ― важно начать процесс обновления, а после этого сделать его непрерывным. Официальный анонс ― https://www.reddit.com/r/announcements/comments/891stx/starting_today_more_people_will_have_access_to/ (выкатываться он будет постепенно). На очереди Craigslist.
Со следующей недели пойдут традиционные тематические срезы новенького.
#links
Новый отчёт John Maeda о состоянии дизайна в цифровых продуктах — https://www.slideshare.net/johnmaeda/design-in-tech-report-2018/. В нём всё ещё хватает интересных наблюдений за тем, как меняются компании и рынок в целом, но с прошлого года фокус смещается на продвижение его собственных концепций (включая спорную «computational design»). Это всё ещё отражает направление движения рынка, но прорывных открытий, как было в первых двух выпусках, всё меньше.
Michael Flarup решил потроллить дизайн-сообщество и сделать современное прочтение скеоморфного дизайна календаря для iPhone X ― https://blog.prototypr.io/bringing-back-skeuomorphic-design-d211cc1c22d2. Правда, возможно он говорил об этом серьёзно... Тем более, что возвращение бесполезного декора может закончиться именно этим.
А вот ещё пара свежих статей, которые попадут в апрельский:
Отличнейший здоровый взгляд Khoi Vinh на никак не умолкающую дискуссию о том, полезен ли для профессии лейбл «дизайн-мышление» или это пустой маркетинговый баззворд — https://www.subtraction.com/2018/04/02/in-defense-of-design-thinking-which-is-terrible/. Даже если кто-то использует его неправильно, это мощный инструмент для того, чтобы сделать дизайн более массовым явлением (пусть даже кто-то поначалу будет делать это неправильно). То же самое сейчас происходит с программированием — огромное количество курсов для детей и просто начинающих наверняка породит массу дрянного кода, но это решаемая проблема. Он также полемизирует с Natasha Jen из Pentagram, чьё одиозное выступление в прошлом году — чистейший кликбейт и непонимание роли дизайнера в современных продуктах и мире в целом.
Рассказ о редизайне Reddit, который не менялся с 2008 года ― https://www.wired.com/story/reddit-redesign/. В такой ситуации опасно делать резкие шаги ― важно начать процесс обновления, а после этого сделать его непрерывным. Официальный анонс ― https://www.reddit.com/r/announcements/comments/891stx/starting_today_more_people_will_have_access_to/ (выкатываться он будет постепенно). На очереди Craigslist.
Со следующей недели пойдут традиционные тематические срезы новенького.
#links
Юрий Ветров об интерфейсах
Дайджест продуктового дизайна, март 2018 - Юрий Ветров об интерфейсах
Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные…
Альфа-Банк оформил свою дизайн-систему в отдельный сайт ― http://design.alfabank.ru/ (до этого была просто библиотека на GitHub). Есть как компоненты в коде, так и описание принципов дизайна, а также шаблоны в Sketch ― один из лучших примеров на нашем рынке, да ещё и удачно сопровождённый их новым стилем иллюстраций. Обновили страницу компании в клубе отечественных создателей дизайн-систем ― http://designsystemsclub.ru/companies/alfabank.html.
А вот другие толковые примеры реализации, где есть что подсмотреть для ваших задач:
Yesenia Perez-Cruz из Vox Media рассказывает о подходе команды к развитию дизайн-системы — https://www.lukew.com/ff/entry.asp?1989 — они ориентируются в первую очередь на сценарии использования, а не просто паттерны.
Глава дизайн-системы Microsoft Fluent Joey Pitt рассказывает о принципах работы её команды ― https://medium.com/microsoft-design/design-system-fundamentals-3ff6a4c98c43. Как строится цикл обновлений, как они завязаны на версии Windows.
Серия статей Nathan Curtis о том, как описывать компоненты в дизайн-системах ― https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015. Получается исчерпывающее руководство, которое работает и как инструкция для начинающих, так и неплохой чеклист для уже имеющих дизайн-системы.
Дизайн-система компании Pluralsight ― http://design-system.pluralsight.com/. Одно из самых толковых описаний принципов анимации ― http://design-system.pluralsight.com/core/motion/ ― шкала скорости с разбивкой по ситуациям применения.
Rob Weychert рассказывает о своём подходе к работе с цветом с помощью простого набора переменных и модели HSL ― http://v6.robweychert.com/blog/2018/02/v6-color/. Хороший параметрический способ управлять палитрой. Его же рассказ об использовании типографической шкалы для дизайн-системы ― http://v6.robweychert.com/blog/2017/11/v6-typography-proportions/.
Что-то из этого вышло в недавнем дайджесте, что-то совсем свежее. Не забудьте подписаться на рассылку клуба ― http://eepurl.com/deKCzL. Скоро там будет полезный анонс, который вы больше нигде не найдёте.
#designsystems
А вот другие толковые примеры реализации, где есть что подсмотреть для ваших задач:
Yesenia Perez-Cruz из Vox Media рассказывает о подходе команды к развитию дизайн-системы — https://www.lukew.com/ff/entry.asp?1989 — они ориентируются в первую очередь на сценарии использования, а не просто паттерны.
Глава дизайн-системы Microsoft Fluent Joey Pitt рассказывает о принципах работы её команды ― https://medium.com/microsoft-design/design-system-fundamentals-3ff6a4c98c43. Как строится цикл обновлений, как они завязаны на версии Windows.
Серия статей Nathan Curtis о том, как описывать компоненты в дизайн-системах ― https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015. Получается исчерпывающее руководство, которое работает и как инструкция для начинающих, так и неплохой чеклист для уже имеющих дизайн-системы.
Дизайн-система компании Pluralsight ― http://design-system.pluralsight.com/. Одно из самых толковых описаний принципов анимации ― http://design-system.pluralsight.com/core/motion/ ― шкала скорости с разбивкой по ситуациям применения.
Rob Weychert рассказывает о своём подходе к работе с цветом с помощью простого набора переменных и модели HSL ― http://v6.robweychert.com/blog/2018/02/v6-color/. Хороший параметрический способ управлять палитрой. Его же рассказ об использовании типографической шкалы для дизайн-системы ― http://v6.robweychert.com/blog/2017/11/v6-typography-proportions/.
Что-то из этого вышло в недавнем дайджесте, что-то совсем свежее. Не забудьте подписаться на рассылку клуба ― http://eepurl.com/deKCzL. Скоро там будет полезный анонс, который вы больше нигде не найдёте.
#designsystems
alfabank.ru
Логотипы и брендинг
Полный спектр банковских услуг для физических и юридических лиц: кредитование, вклады и депозиты, ведение счетов. Тарифы. Онлайн-банкинг. Адреса отделений и банкоматов.
Если вы ещё не читаете Jeff Sauro, то самое время начать — он лучше всего пишет об измерении дизайна. В блоге его компании Measuring U (https://measuringu.com/) регулярно выходят отличнейшие статьи на тему методов пользовательских исследований, детальнейшие разборы особенностей расчётов метрик (с историческими выкладками), появляется куча ценной статистики по известным компаниям на рынке. А ещё он автор нескольких крепких книжек на эту тему. Из свежего (или выходившего в последние месяцы):
— Как измерить отношение пользователей к бренду — https://measuringu.com/brand-affinity-sentiment/. Он приводит пример оценки для пары десятков известных компаний.
— Существующие исследования на тему того, обнаруживают ли менее опытные пользователи больше проблем в интерфейсах ― https://measuringu.com/novice-expert-issues/. Если кратко, то да.
— Пользовательское исследование крупнейших соц.сетей на тему доверия к ним и удобства работы в целом ― https://measuringu.com/social-media-ux/. Пользователи относятся к ним критично.
— Насколько важно сопровождать интерфейсные опросники несколькими вопросами, чтобы результаты были более достоверными ― https://measuringu.com/single-multi-items/. Как обычно, зависит от задачи ― где-то одного вопроса вполне достаточно. Да и у опросников на несколько вопросов есть свои проблемы.
— Важность всегда помнить о целях пользовательского исследования, чтобы не потеряться в деталях по ходу его проведения — https://measuringu.com/research-grid/. Он предлагает формат записи целей исследования и основных гипотез, который можно отслеживать по ходу работ. И сводная памятка — https://measuringu.com/effective-research/ — как сделать пользовательские исследования более эффективными.
P.S. Возможно, в ближайшие недели будут проблемы с доступом к этому каналу. Его выпуски можно также читать во ВКонтакте — https://vk.com/pdigest.
#metrics
— Как измерить отношение пользователей к бренду — https://measuringu.com/brand-affinity-sentiment/. Он приводит пример оценки для пары десятков известных компаний.
— Существующие исследования на тему того, обнаруживают ли менее опытные пользователи больше проблем в интерфейсах ― https://measuringu.com/novice-expert-issues/. Если кратко, то да.
— Пользовательское исследование крупнейших соц.сетей на тему доверия к ним и удобства работы в целом ― https://measuringu.com/social-media-ux/. Пользователи относятся к ним критично.
— Насколько важно сопровождать интерфейсные опросники несколькими вопросами, чтобы результаты были более достоверными ― https://measuringu.com/single-multi-items/. Как обычно, зависит от задачи ― где-то одного вопроса вполне достаточно. Да и у опросников на несколько вопросов есть свои проблемы.
— Важность всегда помнить о целях пользовательского исследования, чтобы не потеряться в деталях по ходу его проведения — https://measuringu.com/research-grid/. Он предлагает формат записи целей исследования и основных гипотез, который можно отслеживать по ходу работ. И сводная памятка — https://measuringu.com/effective-research/ — как сделать пользовательские исследования более эффективными.
P.S. Возможно, в ближайшие недели будут проблемы с доступом к этому каналу. Его выпуски можно также читать во ВКонтакте — https://vk.com/pdigest.
#metrics
Громких запусков и обновлений инструментов для дизайнеров за последние недели не было, но какая-то движуха есть. Вот некоторые из них:
Adobe XD: Апрельское обновление ― https://theblog.adobe.com/april-2018-update-adobe-xd/. Улучшение поиска по макетам и другие доработки.
Framer: Появилась работа с 3D-объектами и их анимация ― https://blog.framer.com/introducing-framer-form-288fcb162ca2. Это востребованный визуальный стиль, который делает продукты бодрее.
Sketch: Stackswell, ещё один плагин для адаптивных макетов в Sketch ― https://stackswell.io/. Правда, пример Anima AutoLayout показывает, что это очень нестабильные решения, которые оставляют много мусора за собой. Анонс ― https://medium.com/sketch-app-sources/bringing-css-smarts-to-sketch-c183e8cd1dc9.
Контроль версий для дизайнеров: Обновились Abstract (https://blog.goabstract.com/abstract-0-70-full-speed-ahead-79e2636fb2b5) и Plant (https://blog.prototypr.io/the-all-new-plugin-from-plant-d26fc0bcb049).
Студия Icons8 продолжает эксперименты с просмотрщиками макетов в Sketch — новый онлайн-сервис Sketch the Ripper позволяет разобрать их — http://sketch.the.ripper.graphics/. Чуть раньше они выпустили инструмент Lunacy для дизайнеров интерфейсов на Windows, который умеет работать с макетами Sketch ― https://icons8.com/lunacy.
Solis: Приложение для Mac облегчает вёрстку адаптивных сайтов — https://solisapp.com/. Гибкий и мгновенный предпросмотр даже для изменений в файлах препроцессоров.
Paste: Инструмент для создания презентаций от FiftyThree, создателей Paper — https://fiftythree.com/paste. Недавно в нём появилась возможность вставлять макеты в устройства, есть уйма вариаций.
InVision: Muzli собрали примеры интересных интерактивных прототипов, сделанных на InVision Studio — https://medium.muz.li/made-with-studio-1-823945cf1e56. И немного истории создания InVision и их стратегии проникновения в компании клиентов от Fast Co Design — https://www.fastcodesign.com/90162865/how-clark-valberg-accidentally-discovered-the-weakness-in-adobes-empire.
Пока больше приятная рутина, но ждём горячих новостей.
#tools
Adobe XD: Апрельское обновление ― https://theblog.adobe.com/april-2018-update-adobe-xd/. Улучшение поиска по макетам и другие доработки.
Framer: Появилась работа с 3D-объектами и их анимация ― https://blog.framer.com/introducing-framer-form-288fcb162ca2. Это востребованный визуальный стиль, который делает продукты бодрее.
Sketch: Stackswell, ещё один плагин для адаптивных макетов в Sketch ― https://stackswell.io/. Правда, пример Anima AutoLayout показывает, что это очень нестабильные решения, которые оставляют много мусора за собой. Анонс ― https://medium.com/sketch-app-sources/bringing-css-smarts-to-sketch-c183e8cd1dc9.
Контроль версий для дизайнеров: Обновились Abstract (https://blog.goabstract.com/abstract-0-70-full-speed-ahead-79e2636fb2b5) и Plant (https://blog.prototypr.io/the-all-new-plugin-from-plant-d26fc0bcb049).
Студия Icons8 продолжает эксперименты с просмотрщиками макетов в Sketch — новый онлайн-сервис Sketch the Ripper позволяет разобрать их — http://sketch.the.ripper.graphics/. Чуть раньше они выпустили инструмент Lunacy для дизайнеров интерфейсов на Windows, который умеет работать с макетами Sketch ― https://icons8.com/lunacy.
Solis: Приложение для Mac облегчает вёрстку адаптивных сайтов — https://solisapp.com/. Гибкий и мгновенный предпросмотр даже для изменений в файлах препроцессоров.
Paste: Инструмент для создания презентаций от FiftyThree, создателей Paper — https://fiftythree.com/paste. Недавно в нём появилась возможность вставлять макеты в устройства, есть уйма вариаций.
InVision: Muzli собрали примеры интересных интерактивных прототипов, сделанных на InVision Studio — https://medium.muz.li/made-with-studio-1-823945cf1e56. И немного истории создания InVision и их стратегии проникновения в компании клиентов от Fast Co Design — https://www.fastcodesign.com/90162865/how-clark-valberg-accidentally-discovered-the-weakness-in-adobes-empire.
Пока больше приятная рутина, но ждём горячих новостей.
#tools
Мы строим свою дизайн-систему Paradigm с 2012 года. Но такого лютого взрыва интереса к теме с уймой новых примеров и публикаций, как в последние пару лет, ещё не было. В прошлом году наконец-то вышла книга Brad Frost «Atomic Design» и про дизайн-системы говорят вообще все. Правда, большинство статей — бесконечное пережёвывание теории модульного дизайна, про практику внедрения кроме Nathan Curtis почти никто не пишет. Кроме того, хотя заслуга Брэда в популяризации идеи модульного дизайна неоценима, но и сам подход, и метафора «атомарности» / «молекулярности» существовали до него (Nathan Curtis пишет, что еще Dell в середине 90х делал компонентную систему с такой же терминологией, а в современный обиход «atomic design» ввёл Jeremy Keith в районе 2011 года).
Мне было интересно разобраться в первоисточниках, поэтому в прошлом году я засел за чтение всего, что выходило на тему паттернов, компонентов и модульности (эта статья развивает прошлогоднюю заметку — https://www.facebook.com/notes/%D1%8E%D1%80%D0%B8%D0%B9-%D0%B2%D0%B5%D1%82%D1%80%D0%BE%D0%B2/%D0%BA%D0%BD%D0%B8%D0%B3%D0%B8-%D0%BE-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0%D1%85/10155204887092229/). Идеальной книги нет, но часть из них показывает очень правильные точки зрения:
1. Кристофер Александер — Язык шаблонов. Города. Здания. Строительство (https://www.artlebedev.ru/izdal/yazyk-shablonov/) (1977)
Хотя её полезность для практической работы дизайнера интерфейсов не особо велика, точка зрения, с которой она написана — безумно интересна. Это три уровня «масштаба» (считай, сама по себе модульность) и, самое главное — глубина социальных, экономических, психологических и политических обоснований, которая стоит за каждым шаблоном. Последнее напрочь потерялось в современных библиотеках паттернов. В книге 1090 страниц и я несколько лет ждал удобного случая, чтобы взяться за неё, но ни разу не прогадал.
2. Nathan Curtis — Modular Web Design (http://www.peachpit.com/store/modular-web-design-creating-reusable-components-for-9780321601353) (2009)
Все основные идеи модульных дизайн-систем описаны ещё там, очень и очень здравое понимание роли единого подхода к интерфейсам на всех этапах продуктовой работы. Но она, чёрт возьми, построена вокруг процесса создания wireframes! Поэтому нужно сильно абстрагироваться от конкретных применений идеи.
3. Anna Debenham — A Pocket Guide to Front-End Style Guides (https://www.goodreads.com/book/show/18885161-a-pocket-guide-to-front-end-style-guides) (2013)
Это совсем небольшая обзорная книга, её главная ценность — она первой описала эти идеи для веба в более-менее структурированном виде. Правда, второе издание (http://www.maban.co.uk/projects/front-end-style-guides/) просто слегка обновило тексты и примеры, не дав никакой новой ценности — в таком виде оно сейчас бесполезно.
4. Brad Frost — Atomic Design (http://atomicdesign.bradfrost.com/) (2017)
Лучший обзор того, что сейчас представляет из себя модульный дизайн. Очень хорошо описана польза от внедрения дизайн-системы на всех уровнях, есть примеры и в целом здравые мысли на тему. Хотя она чересчур теоретична, не хватает самого мяса про подводные камни реального процесса работы. Кроме того, там только вскользь затронута самая главная тема — как построить правильную компонентную систему, которая обновляется по всей линейке продуктов, а не просто набор CSS-стилей.
5. InVision — Design Systems Handbook (https://www.designbetter.co/design-systems-handbook) (2017)
Онлайн-методичка в рамках инициативы Design Better (https://www.designbetter.co/). Самая актуальная и практически полезная — есть и про менеджмент процесса, и про технологическое решение, и про базовые вещи, и про будущее с алгоритмическим дизайном. Не всегда хватает глубины раскрытия тем, но в остальном — огонь.
#designsystems #books
Мне было интересно разобраться в первоисточниках, поэтому в прошлом году я засел за чтение всего, что выходило на тему паттернов, компонентов и модульности (эта статья развивает прошлогоднюю заметку — https://www.facebook.com/notes/%D1%8E%D1%80%D0%B8%D0%B9-%D0%B2%D0%B5%D1%82%D1%80%D0%BE%D0%B2/%D0%BA%D0%BD%D0%B8%D0%B3%D0%B8-%D0%BE-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0%D1%85/10155204887092229/). Идеальной книги нет, но часть из них показывает очень правильные точки зрения:
1. Кристофер Александер — Язык шаблонов. Города. Здания. Строительство (https://www.artlebedev.ru/izdal/yazyk-shablonov/) (1977)
Хотя её полезность для практической работы дизайнера интерфейсов не особо велика, точка зрения, с которой она написана — безумно интересна. Это три уровня «масштаба» (считай, сама по себе модульность) и, самое главное — глубина социальных, экономических, психологических и политических обоснований, которая стоит за каждым шаблоном. Последнее напрочь потерялось в современных библиотеках паттернов. В книге 1090 страниц и я несколько лет ждал удобного случая, чтобы взяться за неё, но ни разу не прогадал.
2. Nathan Curtis — Modular Web Design (http://www.peachpit.com/store/modular-web-design-creating-reusable-components-for-9780321601353) (2009)
Все основные идеи модульных дизайн-систем описаны ещё там, очень и очень здравое понимание роли единого подхода к интерфейсам на всех этапах продуктовой работы. Но она, чёрт возьми, построена вокруг процесса создания wireframes! Поэтому нужно сильно абстрагироваться от конкретных применений идеи.
3. Anna Debenham — A Pocket Guide to Front-End Style Guides (https://www.goodreads.com/book/show/18885161-a-pocket-guide-to-front-end-style-guides) (2013)
Это совсем небольшая обзорная книга, её главная ценность — она первой описала эти идеи для веба в более-менее структурированном виде. Правда, второе издание (http://www.maban.co.uk/projects/front-end-style-guides/) просто слегка обновило тексты и примеры, не дав никакой новой ценности — в таком виде оно сейчас бесполезно.
4. Brad Frost — Atomic Design (http://atomicdesign.bradfrost.com/) (2017)
Лучший обзор того, что сейчас представляет из себя модульный дизайн. Очень хорошо описана польза от внедрения дизайн-системы на всех уровнях, есть примеры и в целом здравые мысли на тему. Хотя она чересчур теоретична, не хватает самого мяса про подводные камни реального процесса работы. Кроме того, там только вскользь затронута самая главная тема — как построить правильную компонентную систему, которая обновляется по всей линейке продуктов, а не просто набор CSS-стилей.
5. InVision — Design Systems Handbook (https://www.designbetter.co/design-systems-handbook) (2017)
Онлайн-методичка в рамках инициативы Design Better (https://www.designbetter.co/). Самая актуальная и практически полезная — есть и про менеджмент процесса, и про технологическое решение, и про базовые вещи, и про будущее с алгоритмическим дизайном. Не всегда хватает глубины раскрытия тем, но в остальном — огонь.
#designsystems #books
www.artlebedev.ru
Книга «Язык шаблонов» Кристофера Александера
[продолжение https://vk.com/@pdigest-designsystems-books]
Из свежего есть ещё Alla Kholmatova «Design Systems» (https://www.smashingmagazine.com/design-systems-book/) (2017) и электронные книги вроде UXPin «Creating a Design System: The 100-Point Process Checklist» (https://www.uxpin.com/studio/ebooks/create-design-system-guide-checklist/) (2017). В середине 2000х вышла пачка книг про интерфейсные паттерны от Jennifer Tidwell, Bill Scott, Theresa Neil, Erin Malone и других. Почитать любую из них полезно, но в целом они не очень актуальны — концепция современных дизайн-систем ушла далеко вперёд (кстати, Nathan Curtis описал своё понимание разницы между паттернами и компонентами (https://medium.com/eightshapes-llc/patterns-components-2ce778cbe4e8)). Классическая книга Erich Gamma «Design Patterns» (https://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612) (1994) про паттерны в программировании интересна своим подходом к структурированию, но в остальном нужно читать только с изыскательской точки зрения.
По ходу моего захода к прочтению всей предыстории дизайн-систем вышла пара статей с обзором всех книг и статей на тему в исторической перспективе. В целом я изначально угадал с набором, но добавил туда пачку статей и классических примеров. На титульной картинке — самая полная хронология от Erin Malone (http://www.emdezine.com/a-history-of-patterns-in-user-experience-design/), которая занималась легендарной библиотекой паттернов Yahoo! Пока не добрался разве что до Micah Godbolt «Frontend Architecture for Design Systems» (http://shop.oreilly.com/product/0636920040156.do) (2016).
Книг и статей много (ещё один список (http://styleguides.io/books.html)), но если вы не такой ботан как я — на сегодня достаточно прочитать только Atomic Design от Brad Frost (http://atomicdesign.bradfrost.com/) и Design Systems Handbook от InVision (https://www.designbetter.co/design-systems-handbook) в качестве теории и подписаться на Nathan Curtis (https://medium.com/@nathanacurtis) для практики. Ну и, если вы не устали от моих отсылок на сайт http://styleguides.io/, наконец-то прошерстить всё что там есть. В группе Дайджест продуктового дизайна (https://www.facebook.com/groups/pdigest/) есть ветка со свежими ссылками и статьями на тему (https://www.facebook.com/groups/pdigest/permalink/804624106267814/) — тоже отличный вариант следить за свежими вещами.
Термин «дизайн-система», как и многие другие ставшие внезапно популярными вещи, сейчас сильно девальвировался. Этим словом называют всё что угодно — от библиотеки стандартных элементов в Sketch и странички с нарезанными скриншотами до зрелой платформы, действительно работающей на базе распространяемых компонентов со вшитым дизайном. Мы изначально строили последнее, ведь главный источник правды это сам продукт и нужно озаботиться тем, чтобы как задумано работал именно он. На каждом этапе цепочки «гайдлайн → макет → вёрстка → реализация» теряются детали и генерируются баги, так что единственный путь системно улучшить продукты — сократить её до «гайдлайн = макет = вёрстка → реализация». Здесь явно не обойтись без технологического фреймворка.
Brad Frost тоже устал от того, что многие понимают под дизайн-системой шаблон в Sketch или другом инструменте дизайна ― http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/. Это мышление середины прошлого века, когда под этим словом понималась система визуальной идентификации бренда, к которой шла красивая печатная книжка (их активно переиздают последние годы). Но тогда речь шла о физических продуктах и объектах, которые стоят на полке в магазине (или сама сеть магазинов), а мы-то с вами работаем с цифровыми продуктами, где макет ничего не гарантирует и много раз меняется перед запуском на пользователей. Так что работать надо с основным материалом этой среды ― кодом.
#designsystems #books
Из свежего есть ещё Alla Kholmatova «Design Systems» (https://www.smashingmagazine.com/design-systems-book/) (2017) и электронные книги вроде UXPin «Creating a Design System: The 100-Point Process Checklist» (https://www.uxpin.com/studio/ebooks/create-design-system-guide-checklist/) (2017). В середине 2000х вышла пачка книг про интерфейсные паттерны от Jennifer Tidwell, Bill Scott, Theresa Neil, Erin Malone и других. Почитать любую из них полезно, но в целом они не очень актуальны — концепция современных дизайн-систем ушла далеко вперёд (кстати, Nathan Curtis описал своё понимание разницы между паттернами и компонентами (https://medium.com/eightshapes-llc/patterns-components-2ce778cbe4e8)). Классическая книга Erich Gamma «Design Patterns» (https://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612) (1994) про паттерны в программировании интересна своим подходом к структурированию, но в остальном нужно читать только с изыскательской точки зрения.
По ходу моего захода к прочтению всей предыстории дизайн-систем вышла пара статей с обзором всех книг и статей на тему в исторической перспективе. В целом я изначально угадал с набором, но добавил туда пачку статей и классических примеров. На титульной картинке — самая полная хронология от Erin Malone (http://www.emdezine.com/a-history-of-patterns-in-user-experience-design/), которая занималась легендарной библиотекой паттернов Yahoo! Пока не добрался разве что до Micah Godbolt «Frontend Architecture for Design Systems» (http://shop.oreilly.com/product/0636920040156.do) (2016).
Книг и статей много (ещё один список (http://styleguides.io/books.html)), но если вы не такой ботан как я — на сегодня достаточно прочитать только Atomic Design от Brad Frost (http://atomicdesign.bradfrost.com/) и Design Systems Handbook от InVision (https://www.designbetter.co/design-systems-handbook) в качестве теории и подписаться на Nathan Curtis (https://medium.com/@nathanacurtis) для практики. Ну и, если вы не устали от моих отсылок на сайт http://styleguides.io/, наконец-то прошерстить всё что там есть. В группе Дайджест продуктового дизайна (https://www.facebook.com/groups/pdigest/) есть ветка со свежими ссылками и статьями на тему (https://www.facebook.com/groups/pdigest/permalink/804624106267814/) — тоже отличный вариант следить за свежими вещами.
Термин «дизайн-система», как и многие другие ставшие внезапно популярными вещи, сейчас сильно девальвировался. Этим словом называют всё что угодно — от библиотеки стандартных элементов в Sketch и странички с нарезанными скриншотами до зрелой платформы, действительно работающей на базе распространяемых компонентов со вшитым дизайном. Мы изначально строили последнее, ведь главный источник правды это сам продукт и нужно озаботиться тем, чтобы как задумано работал именно он. На каждом этапе цепочки «гайдлайн → макет → вёрстка → реализация» теряются детали и генерируются баги, так что единственный путь системно улучшить продукты — сократить её до «гайдлайн = макет = вёрстка → реализация». Здесь явно не обойтись без технологического фреймворка.
Brad Frost тоже устал от того, что многие понимают под дизайн-системой шаблон в Sketch или другом инструменте дизайна ― http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/. Это мышление середины прошлого века, когда под этим словом понималась система визуальной идентификации бренда, к которой шла красивая печатная книжка (их активно переиздают последние годы). Но тогда речь шла о физических продуктах и объектах, которые стоят на полке в магазине (или сама сеть магазинов), а мы-то с вами работаем с цифровыми продуктами, где макет ничего не гарантирует и много раз меняется перед запуском на пользователей. Так что работать надо с основным материалом этой среды ― кодом.
#designsystems #books
VK
Книги о дизайн-системах
© Erin Malone
В шашлычном угаре долгих выходных лень не только читать какие-то там профессиональные статьи, но и писать про них. Но вот вам несколько свежих и интересных материалов о методах и практиках проектирования интерфейсов:
Margaret P и Doug Kim из Microsoft предложили фреймворк «Design Considerations», который помогает грамотно спроектировать уведомления и другие прерывания основной деятельности пользователя — https://medium.com/microsoft-design/how-to-design-interruptions-b93c0c667e6f. Отличный чек-лист и подход в целом.
Отличнейший кейс исследования по методике Jobs to Be Done для запуска сервиса Userlist от Claire Suellentrop — https://userlist.io/customer-research-process/. Неплохо пошагово рассказано о процессе исследования и сделанных выводах по функциональности и интерфейсу продукта.
В блоге компании Altexsoft пишут о разнице между терминами «универсальный дизайн», «инклюзивный дизайн» и accessibility — https://www.altexsoft.com/blog/uxdesign/reach-your-audience-with-accessible-and-inclusive-design/. В дополнение к этому идёт памятка по улучшению доступности интерфейсов для пользователей с ограниченными возможностями.
Свежий дайджест выйдет в понедельник — всё уже собрано, но жалко было отправлять его в пустоту офисов и домов, вы ведь наверняка где-нибудь отдыхаете :)
#methods #jtbd
Margaret P и Doug Kim из Microsoft предложили фреймворк «Design Considerations», который помогает грамотно спроектировать уведомления и другие прерывания основной деятельности пользователя — https://medium.com/microsoft-design/how-to-design-interruptions-b93c0c667e6f. Отличный чек-лист и подход в целом.
Отличнейший кейс исследования по методике Jobs to Be Done для запуска сервиса Userlist от Claire Suellentrop — https://userlist.io/customer-research-process/. Неплохо пошагово рассказано о процессе исследования и сделанных выводах по функциональности и интерфейсу продукта.
В блоге компании Altexsoft пишут о разнице между терминами «универсальный дизайн», «инклюзивный дизайн» и accessibility — https://www.altexsoft.com/blog/uxdesign/reach-your-audience-with-accessible-and-inclusive-design/. В дополнение к этому идёт памятка по улучшению доступности интерфейсов для пользователей с ограниченными возможностями.
Свежий дайджест выйдет в понедельник — всё уже собрано, но жалко было отправлять его в пустоту офисов и домов, вы ведь наверняка где-нибудь отдыхаете :)
#methods #jtbd
Medium
How to Design Interruptions
What my ADHD taught me about living in a world of notifications and how to better design them
Собрал дайджест продуктового дизайна за апрель — http://jvetrau.com/digest-2018-apr/ на основе материалов группы https://www.facebook.com/groups/pdigest/.
В этом месяце формату исполняется восемь лет — это один из самых старых дайджестов. Объём первого выпуска был в несколько раз меньше — https://jvetrau.com/digest-2010-apr/. Почти закончил переезд на новый формат подачи (осталось причесать тему оформления, из которой торчат костыльки), прокачиваю другие каналы чтения — к концу года вся картина должна сложиться в сильно переработанный подход.
Напомню, что дайджест можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX
#digest
В этом месяце формату исполняется восемь лет — это один из самых старых дайджестов. Объём первого выпуска был в несколько раз меньше — https://jvetrau.com/digest-2010-apr/. Почти закончил переезд на новый формат подачи (осталось причесать тему оформления, из которой торчат костыльки), прокачиваю другие каналы чтения — к концу года вся картина должна сложиться в сильно переработанный подход.
Напомню, что дайджест можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX
#digest
Юрий Ветров об интерфейсах
Дайджест продуктового дизайна, апрель 2018 - Юрий Ветров об интерфейсах
Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные…
Дайджест продуктового дизайна pinned «Собрал дайджест продуктового дизайна за апрель — http://jvetrau.com/digest-2018-apr/ на основе материалов группы https://www.facebook.com/groups/pdigest/. В этом месяце формату исполняется восемь лет — это один из самых старых дайджестов. Объём первого выпуска…»
Google показал обновлённую дизайн-систему Material Design 2.0 на конференции I/O — https://material.io/. Это серьёзное изменение визуального стиля и расширение инструментария, первые звоночки которого появились ещё в марте (https://www.theverge.com/2018/3/7/17092800/android-p-new-design-changes-features).
Визуально Android P продолжил сближение с iOS (различия между платформами стираются с обеих сторон):
1. Много скруглений, что сильно перекликается с iOS 10-11 (https://www.theverge.com/2018/3/7/17092800/android-p-new-design-changes-features). Возможно, это сделано с прицелом на безрамочные телефоны, которых становится всё больше — это лучше сочетается с их скруглёнными краями экрана.
2. Цвет настроения — белый (https://uxdesign.cc/previewing-material-design-2-0-ec0215f0588f). Больше нет яркой шапки приложения и серых подложек, сплошное белое пространство с минимумом акцентов. В каких-то приложениях Google встречается цветная нижняя панель (https://cdn-images-1.medium.com/max/2000/1*Tu6q1DcA1aGpUDKoVG4Yzw.png) и сама идея акцентных цветов не уходит из гайдлайнов (https://material.io/design/color/the-color-system.html) но тенденция явная (включая веб — https://www.engadget.com/2018/04/25/google-gmail-redesign/ и https://www.engadget.com/2018/05/10/google-drive-redesign/).
3. Навигация по операционке в духе iPhone X (https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/New-System-Navigation_03.gif). Паттерн «рукоятки» (https://uxdesign.cc/handlebars-in-ui-design-4b36af67733b?gi=aa27f4f2efcd) вместо кнопки «домой» с почти аналогичной механикой, отказ от отдельной кнопки списка приложений (также вызывается свайпом снизу), ну и ставшая официальной в последние годы нижняя панель навигации. Всё это помогает управлять современными телефонами, которые стали не только больше, но ещё и выше за счёт безрамочности. Кстати, в некоторых новых приложениях Google инструменты навигации почти везде внизу (https://www.androidpolice.com/2018/04/25/hands-google-tasks-another-beautiful-disjointed-way-get-things-done-google/). Осталось упростить кнопку «назад» (она уже пропала с домашнего экрана).
Можно назвать это вкусовщиной, но первая версия Material Design имела своё лицо и можно было говорить о характере бренда, выраженном в интерфейсе. Кто-то жаловался, что гайдлайны слишком жёсткие и делают приложения однояйцевыми. Но для многих компаний это был сильный ориентир — как можно создать ощущение единства продуктов без использования логотипа. Хотя поддерживать две платформы станет проще.
С другой стороны, теперь Material Design поддерживает более продвинутую тематизацию, чем просто замена цвета — https://material.io/design/material-theming/. Можно менять шрифтовую сетку, скругления элементов интерфейса (точнее, даже их форму — например, можно сделать диагональные скосы), иконки. К этому прилагается плагин для Sketch — https://material.io/tools/theme-editor/ (можно быстро примерить стиль на свой макет) и библиотека иконок — http://material.io/icons (в пяти стилях). Недавно обновлённые продукты Google также используют этот подход — https://material.io/articles/how-google-created-a-custom-material-theme.html (хотя их стиль как раз выхолощенный).
И самое главное — теперь это полноценная дизайн-система с компонентами в коде (https://material.io/develop), а не просто масштабные гайдлайны и шаблоны к ним с какими-то разрозненными примерами. Эти компоненты также поддерживают тематизацию, так что система выглядит целостной (сами компоненты начали появляться год назад). Новый сайт Material Design (https://material.io/) сделал фокус на две составляющие — дизайн и разработка — более явным. Они также запустили давно обещанный инструмент Gallery (https://material.io/tools/gallery/), аналог Zeplin и Wake. Но это как-то вяло на фоне обещаний, данных после покупки Pixate (основатель ушёл в Figma) и Form (Гугл подтверждает репутацию сгнаивателя купленных компаний).
#android #material
Визуально Android P продолжил сближение с iOS (различия между платформами стираются с обеих сторон):
1. Много скруглений, что сильно перекликается с iOS 10-11 (https://www.theverge.com/2018/3/7/17092800/android-p-new-design-changes-features). Возможно, это сделано с прицелом на безрамочные телефоны, которых становится всё больше — это лучше сочетается с их скруглёнными краями экрана.
2. Цвет настроения — белый (https://uxdesign.cc/previewing-material-design-2-0-ec0215f0588f). Больше нет яркой шапки приложения и серых подложек, сплошное белое пространство с минимумом акцентов. В каких-то приложениях Google встречается цветная нижняя панель (https://cdn-images-1.medium.com/max/2000/1*Tu6q1DcA1aGpUDKoVG4Yzw.png) и сама идея акцентных цветов не уходит из гайдлайнов (https://material.io/design/color/the-color-system.html) но тенденция явная (включая веб — https://www.engadget.com/2018/04/25/google-gmail-redesign/ и https://www.engadget.com/2018/05/10/google-drive-redesign/).
3. Навигация по операционке в духе iPhone X (https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/New-System-Navigation_03.gif). Паттерн «рукоятки» (https://uxdesign.cc/handlebars-in-ui-design-4b36af67733b?gi=aa27f4f2efcd) вместо кнопки «домой» с почти аналогичной механикой, отказ от отдельной кнопки списка приложений (также вызывается свайпом снизу), ну и ставшая официальной в последние годы нижняя панель навигации. Всё это помогает управлять современными телефонами, которые стали не только больше, но ещё и выше за счёт безрамочности. Кстати, в некоторых новых приложениях Google инструменты навигации почти везде внизу (https://www.androidpolice.com/2018/04/25/hands-google-tasks-another-beautiful-disjointed-way-get-things-done-google/). Осталось упростить кнопку «назад» (она уже пропала с домашнего экрана).
Можно назвать это вкусовщиной, но первая версия Material Design имела своё лицо и можно было говорить о характере бренда, выраженном в интерфейсе. Кто-то жаловался, что гайдлайны слишком жёсткие и делают приложения однояйцевыми. Но для многих компаний это был сильный ориентир — как можно создать ощущение единства продуктов без использования логотипа. Хотя поддерживать две платформы станет проще.
С другой стороны, теперь Material Design поддерживает более продвинутую тематизацию, чем просто замена цвета — https://material.io/design/material-theming/. Можно менять шрифтовую сетку, скругления элементов интерфейса (точнее, даже их форму — например, можно сделать диагональные скосы), иконки. К этому прилагается плагин для Sketch — https://material.io/tools/theme-editor/ (можно быстро примерить стиль на свой макет) и библиотека иконок — http://material.io/icons (в пяти стилях). Недавно обновлённые продукты Google также используют этот подход — https://material.io/articles/how-google-created-a-custom-material-theme.html (хотя их стиль как раз выхолощенный).
И самое главное — теперь это полноценная дизайн-система с компонентами в коде (https://material.io/develop), а не просто масштабные гайдлайны и шаблоны к ним с какими-то разрозненными примерами. Эти компоненты также поддерживают тематизацию, так что система выглядит целостной (сами компоненты начали появляться год назад). Новый сайт Material Design (https://material.io/) сделал фокус на две составляющие — дизайн и разработка — более явным. Они также запустили давно обещанный инструмент Gallery (https://material.io/tools/gallery/), аналог Zeplin и Wake. Но это как-то вяло на фоне обещаний, данных после покупки Pixate (основатель ушёл в Figma) и Form (Гугл подтверждает репутацию сгнаивателя купленных компаний).
#android #material
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
Из других интересных деталей анонса:
1. Четыре цвета логотипа как основа визуального языка (https://www.fastcodesign.com/90171295/google-just-remade-its-brand-again). Это хорошо получилось в Gmail для веба — иконка «+» и цвета индикаторов чётко наследуют идею.
2. Новый стиль иллюстраций Google (https://www.androidpolice.com/2018/04/25/hands-google-tasks-another-beautiful-disjointed-way-get-things-done-google/).
3. Похоже, для своих продуктов компания перейдёт на шрифт Google Sans — https://9to5google.com/2018/05/09/google-sans-vs-product-sans/.
4. Самоограничения на использование телефона и отдельных приложений (https://s.aolcdn.com/hss/storage/midas/26f53c50aaa835c66e937ab98714abbc/206359888/DigitalWellbeing_Blog.gif из https://www.engadget.com/2018/05/09/android-p-features-that-matter/ и https://www.engadget.com/2018/05/08/google-android-p-actions-slices-predictive-apps/). Пользователь сам задаёт их, после этого приложение становится чёрно-белым, мотивируя прерваться. В ночное время телефон полностью переходит в такой режим.
5. Проще настраивать частоту уведомлений (https://www.engadget.com/2018/05/09/android-p-features-that-matter/). Если пользователь несколько раз скрывает уведомление от приложения без прочтения, Android предложит скрыть его вообще. Наушники Pixel Buds могут зачитывать некоторые уведомления голосом (https://www.engadget.com/2018/05/09/google-pixel-buds-let-you-customize-which-apps-send-spoken-notif/).
6. Интеграция сторонних приложений в результаты поиска и контекстные меню в качестве Slices (https://s.aolcdn.com/hss/storage/midas/9a19c2df03d0e18c4dac34b7630ccfce/206359885/Slices_Blog.gif) и поиск по выделенному слову (https://o.aolcdn.com/images/dims?resize=980%2C640&quality=100&image_uri=https%3A%2F%2Fs.aolcdn.com%2Fhss%2Fstorage%2Fmidas%2F6c9302a32a0c5a3baf09628da8c5fbca%2F206360669%2F_MG_1041.jpg&client=cbc79c14efcebee57402&signature=e0c3469b7613c176e864832f38b65ad71d15ac59).
7. Google Assistant может сам позвонить и забронировать ресторан (https://www.engadget.com/2018/05/08/pretty-sure-googles-new-talking-ai-just-beat-the-turing-test/).
8. Мобильный Сhrome поддержит дополненную реальность (https://www.engadget.com/2018/05/09/google-augmented-reality-chrome/).
9. Экспериментальная камера Google Lens научилась делать больше (https://www.engadget.com/2018/05/09/google-lens-hands-real-world-copy-and-paste/) и станет частью стандартного приложения (https://www.engadget.com/2018/05/08/google-integrates-lens-camera-app/).
Бета-версию уже можно поставить на некоторые телефоны — http://android.com/beta. Финальная версия появится осенью. Засучиваем рукава, работы будет много.
#android #material
1. Четыре цвета логотипа как основа визуального языка (https://www.fastcodesign.com/90171295/google-just-remade-its-brand-again). Это хорошо получилось в Gmail для веба — иконка «+» и цвета индикаторов чётко наследуют идею.
2. Новый стиль иллюстраций Google (https://www.androidpolice.com/2018/04/25/hands-google-tasks-another-beautiful-disjointed-way-get-things-done-google/).
3. Похоже, для своих продуктов компания перейдёт на шрифт Google Sans — https://9to5google.com/2018/05/09/google-sans-vs-product-sans/.
4. Самоограничения на использование телефона и отдельных приложений (https://s.aolcdn.com/hss/storage/midas/26f53c50aaa835c66e937ab98714abbc/206359888/DigitalWellbeing_Blog.gif из https://www.engadget.com/2018/05/09/android-p-features-that-matter/ и https://www.engadget.com/2018/05/08/google-android-p-actions-slices-predictive-apps/). Пользователь сам задаёт их, после этого приложение становится чёрно-белым, мотивируя прерваться. В ночное время телефон полностью переходит в такой режим.
5. Проще настраивать частоту уведомлений (https://www.engadget.com/2018/05/09/android-p-features-that-matter/). Если пользователь несколько раз скрывает уведомление от приложения без прочтения, Android предложит скрыть его вообще. Наушники Pixel Buds могут зачитывать некоторые уведомления голосом (https://www.engadget.com/2018/05/09/google-pixel-buds-let-you-customize-which-apps-send-spoken-notif/).
6. Интеграция сторонних приложений в результаты поиска и контекстные меню в качестве Slices (https://s.aolcdn.com/hss/storage/midas/9a19c2df03d0e18c4dac34b7630ccfce/206359885/Slices_Blog.gif) и поиск по выделенному слову (https://o.aolcdn.com/images/dims?resize=980%2C640&quality=100&image_uri=https%3A%2F%2Fs.aolcdn.com%2Fhss%2Fstorage%2Fmidas%2F6c9302a32a0c5a3baf09628da8c5fbca%2F206360669%2F_MG_1041.jpg&client=cbc79c14efcebee57402&signature=e0c3469b7613c176e864832f38b65ad71d15ac59).
7. Google Assistant может сам позвонить и забронировать ресторан (https://www.engadget.com/2018/05/08/pretty-sure-googles-new-talking-ai-just-beat-the-turing-test/).
8. Мобильный Сhrome поддержит дополненную реальность (https://www.engadget.com/2018/05/09/google-augmented-reality-chrome/).
9. Экспериментальная камера Google Lens научилась делать больше (https://www.engadget.com/2018/05/09/google-lens-hands-real-world-copy-and-paste/) и станет частью стандартного приложения (https://www.engadget.com/2018/05/08/google-integrates-lens-camera-app/).
Бета-версию уже можно поставить на некоторые телефоны — http://android.com/beta. Финальная версия появится осенью. Засучиваем рукава, работы будет много.
#android #material
Fast Company
Google Just Remade Its Brand Again
Two years ago, Google gave us a new logo. Now, it’s turned that logo into an interface.
Сегодня вышла четвёртая рассылка свежих инструментов, экспериментов и исследований на тему алгоритмического дизайна — http://eepurl.com/cKUguj (сам сайт — http://algorithms.design/). Самый сок оттуда:
1. Rama Allen из The Mill размышляет на тему искусства во времена бума искусственного интеллекта — https://qz.com/1023493/ai-will-be-the-art-movement-of-the-21st-century/. Он также видит это как креативное партнёрство между человеком и компьютером, сравнивая с джазовой импровизацией.
2. Sougwen Chung создала робота, который рисует вместе с ней — https://vimeo.com/228868235. Очень яркий пример того, что значит концепция ко-дизайна с компьютером.
3. David Dao собрал примеры неэтичного и даже пугающего использования технологий искусственного интеллекта в цифровых продуктах — https://github.com/daviddao/awful-ai.
4. Tom White научился генерировать человекоподобные абстрактные иллюстрации с помощью алгоритма — он скармливает ему обучающую выборку, а затем подбирает относительно узнаваемое исполнение — https://medium.com/artists-and-machine-intelligence/perception-engines-8a46bc598d57. Проект сделан в рамках инициативы Google Artists and Machine Learning — https://ami.withgoogle.com/ (её блог — https://medium.com/artists-and-machine-intelligence).
5. Christian Noessel проанализировал примеры искусственного интеллекта в фантастических фильмах ― https://scifiinterfaces.com/2018/04/09/untold-ai/. Он разделил их на три категории продвинутости и опубликовал список ― https://docs.google.com/spreadsheets/d/1iLboZJ9zs2OjykYWfGOYMBYEkBruDxi1kErwKjb6aIQ/edit#gid=0.
В целом вокруг темы прошла первая волна придыханий и страхов о том, что кто-то заменит дизайнеров и пошли более взвешенные разговоры о том, как может работать коллаб человека и компьютера. Глядишь, и в инструментах дизайна начнут внедрять такие возможности компании помимо Adobe (которых пинают не всегда заслуженно).
Подписаться на рассылку — http://eepurl.com/cKUguj.
#ai #algorithms
1. Rama Allen из The Mill размышляет на тему искусства во времена бума искусственного интеллекта — https://qz.com/1023493/ai-will-be-the-art-movement-of-the-21st-century/. Он также видит это как креативное партнёрство между человеком и компьютером, сравнивая с джазовой импровизацией.
2. Sougwen Chung создала робота, который рисует вместе с ней — https://vimeo.com/228868235. Очень яркий пример того, что значит концепция ко-дизайна с компьютером.
3. David Dao собрал примеры неэтичного и даже пугающего использования технологий искусственного интеллекта в цифровых продуктах — https://github.com/daviddao/awful-ai.
4. Tom White научился генерировать человекоподобные абстрактные иллюстрации с помощью алгоритма — он скармливает ему обучающую выборку, а затем подбирает относительно узнаваемое исполнение — https://medium.com/artists-and-machine-intelligence/perception-engines-8a46bc598d57. Проект сделан в рамках инициативы Google Artists and Machine Learning — https://ami.withgoogle.com/ (её блог — https://medium.com/artists-and-machine-intelligence).
5. Christian Noessel проанализировал примеры искусственного интеллекта в фантастических фильмах ― https://scifiinterfaces.com/2018/04/09/untold-ai/. Он разделил их на три категории продвинутости и опубликовал список ― https://docs.google.com/spreadsheets/d/1iLboZJ9zs2OjykYWfGOYMBYEkBruDxi1kErwKjb6aIQ/edit#gid=0.
В целом вокруг темы прошла первая волна придыханий и страхов о том, что кто-то заменит дизайнеров и пошли более взвешенные разговоры о том, как может работать коллаб человека и компьютера. Глядишь, и в инструментах дизайна начнут внедрять такие возможности компании помимо Adobe (которых пинают не всегда заслуженно).
Подписаться на рассылку — http://eepurl.com/cKUguj.
#ai #algorithms
List-Manage
Algorithm-Driven Design
Algorithm-Driven Design Email Forms
Студия Олега Чулакова опубликовала свою дизайн-систему — https://design.chulakov.ru/. Пока она охватывает только сайт самого агентства, но здорово, когда они осознают их важность в клиентской работе и инвестируют в своё будущее — тот же Brad Frost начал atomic design как решение для клиентских проектов. Одной из первых в Рунете это сделала Мануфактура для клиентских сайтов — https://2015.codefest.ru/lecture/1018. Это хорошо показывает, что дизайн-системы по силам не только гигантским продуктовым компаниям, сейчас хватает инструментов для низкого старта.
Другие новости дизайн-систем:
1. Заработал сайт о дизайн-системах от Figma, который они анонсировали полгода назад — https://www.designsystems.com/stories/introducing-design-systems-dot-com/. В поддержку этого они провели серию митапов по миру — https://www.designsystems.com/stories/what-we-learned-from-hosting-eight-design-system-meetups/. Правда, пока это десяток не особо глубоких статей, так что на фоне общей движухи выглядит малополезным. Из относительно интересного разве что мнения за https://www.designsystems.com/stories/will-design-systems-replace-designers/ и против https://www.designsystems.com/stories/design-systems-will-not-replace-designers/ того, что дизайн-системы снижают потребность в дизайнерах.
Figma также выпустили свой конвертер макетов в код для React на GitHub — https://github.com/figma/figma-api-demo/tree/master/figma-to-react. Karl Jiang рассказывает, как это устроено и что он умеет — https://blog.figma.com/introducing-figma-to-react-d2d545cba3cc. Это важный шаг по связке инструментов дизайна и технологических фреймворков, но без связки с основной библиотекой компонентов это всё ещё игрушка, а это самая сложная задача.
Параллельно инструмент анонсировал разделение стилей на переменные — https://blog.figma.com/figma-styles-beta-a-new-way-to-apply-text-and-layer-attributes-1ecde1b0de74. Это один из важнейших шагов для того что бы связать дизайнерские шаблоны и компоненты в коде — сейчас большинство инструментов не имеет модульности для описания символов и компонентов. Ну а в другой статье Jon Rohan из GitHub рассказывает о том, как устроен экспорт библиотеки иконок из Figma в продукт с помощью нового API инструмента ― https://blog.github.com/2018-04-12-driving-changes-from-designs/. Такими темпами к концу года всё-таки придётся подумать о переезде со Скетча.
2. Brad Frost описывает принцип создания тем оформления в дизайн-системах по всем модным канонам ― токены, единая архитектура элементов интерфейса ― http://bradfrost.com/blog/post/creating-themeable-design-systems/.
3. Jeremy Wilken описывает новую систему версионирования дизайн-системы VMWare Clarity — https://medium.com/claritydesignsystem/updating-the-clarity-release-and-support-strategy-c1e37f7d5a0.
4. Дизайн-система компании Hudl — http://uniform.hudl.com/. Очень толковый пример с хорошей структурой и охватом принципов дизайна.
5. Онлайн-курс по работе с живыми гайдлайнами для компонентов дизайн-системы Storybook ― https://www.learnstorybook.com/.
#designsystems
Другие новости дизайн-систем:
1. Заработал сайт о дизайн-системах от Figma, который они анонсировали полгода назад — https://www.designsystems.com/stories/introducing-design-systems-dot-com/. В поддержку этого они провели серию митапов по миру — https://www.designsystems.com/stories/what-we-learned-from-hosting-eight-design-system-meetups/. Правда, пока это десяток не особо глубоких статей, так что на фоне общей движухи выглядит малополезным. Из относительно интересного разве что мнения за https://www.designsystems.com/stories/will-design-systems-replace-designers/ и против https://www.designsystems.com/stories/design-systems-will-not-replace-designers/ того, что дизайн-системы снижают потребность в дизайнерах.
Figma также выпустили свой конвертер макетов в код для React на GitHub — https://github.com/figma/figma-api-demo/tree/master/figma-to-react. Karl Jiang рассказывает, как это устроено и что он умеет — https://blog.figma.com/introducing-figma-to-react-d2d545cba3cc. Это важный шаг по связке инструментов дизайна и технологических фреймворков, но без связки с основной библиотекой компонентов это всё ещё игрушка, а это самая сложная задача.
Параллельно инструмент анонсировал разделение стилей на переменные — https://blog.figma.com/figma-styles-beta-a-new-way-to-apply-text-and-layer-attributes-1ecde1b0de74. Это один из важнейших шагов для того что бы связать дизайнерские шаблоны и компоненты в коде — сейчас большинство инструментов не имеет модульности для описания символов и компонентов. Ну а в другой статье Jon Rohan из GitHub рассказывает о том, как устроен экспорт библиотеки иконок из Figma в продукт с помощью нового API инструмента ― https://blog.github.com/2018-04-12-driving-changes-from-designs/. Такими темпами к концу года всё-таки придётся подумать о переезде со Скетча.
2. Brad Frost описывает принцип создания тем оформления в дизайн-системах по всем модным канонам ― токены, единая архитектура элементов интерфейса ― http://bradfrost.com/blog/post/creating-themeable-design-systems/.
3. Jeremy Wilken описывает новую систему версионирования дизайн-системы VMWare Clarity — https://medium.com/claritydesignsystem/updating-the-clarity-release-and-support-strategy-c1e37f7d5a0.
4. Дизайн-система компании Hudl — http://uniform.hudl.com/. Очень толковый пример с хорошей структурой и охватом принципов дизайна.
5. Онлайн-курс по работе с живыми гайдлайнами для компонентов дизайн-системы Storybook ― https://www.learnstorybook.com/.
#designsystems
Вот-вот начнутся выходные и если вы вдруг будете скучать дома или на даче, то вот вам подборка подборок, в которых можно потеряться, как в кроличьей норе:
1. Список конференций по дизайну и разработке — https://www.fieldtrips.io/.
2. Серия интервью с интерфейсными дизайнерами в игровой индустрии — https://medium.com/game-ux-interviews.
3. Шикарный список наград и премий по самым разным веткам дизайна — https://www.alistofawards.com/. Дизайнеры агентства Red Collar участвуют в жюри нескольких из них и рассказывают о механике их работы — https://vc.ru/37753-ustroystvo-konkursov-veb-dizayna-awwwards-cssda-fwa.
4. Коллекция тёмных паттернов, который развивает идеи Harry Brignull, главного евангелиста этой темы — https://darkpatterns.uxp2.com/. Он и сам говорит рекомендует этот сайт, поскольку не успевает обновлять свой.
5. Блог дизайн-команды Контур — https://medium.com/designkontur. В одной из свежих статей Александр Храмцов рассказывает о Sketch-шаблонах, которые использует дизайн-команда — https://medium.com/designkontur/%D1%81%D0%BA%D0%B5%D1%82%D1%87-%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B0-%D0%B4%D0%BB%D1%8F-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B-19a692ea959f.
У кого к понедельнику останется меньше десяти открытых вкладок в браузере — тот молодец :)
#links
1. Список конференций по дизайну и разработке — https://www.fieldtrips.io/.
2. Серия интервью с интерфейсными дизайнерами в игровой индустрии — https://medium.com/game-ux-interviews.
3. Шикарный список наград и премий по самым разным веткам дизайна — https://www.alistofawards.com/. Дизайнеры агентства Red Collar участвуют в жюри нескольких из них и рассказывают о механике их работы — https://vc.ru/37753-ustroystvo-konkursov-veb-dizayna-awwwards-cssda-fwa.
4. Коллекция тёмных паттернов, который развивает идеи Harry Brignull, главного евангелиста этой темы — https://darkpatterns.uxp2.com/. Он и сам говорит рекомендует этот сайт, поскольку не успевает обновлять свой.
5. Блог дизайн-команды Контур — https://medium.com/designkontur. В одной из свежих статей Александр Храмцов рассказывает о Sketch-шаблонах, которые использует дизайн-команда — https://medium.com/designkontur/%D1%81%D0%BA%D0%B5%D1%82%D1%87-%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B0-%D0%B4%D0%BB%D1%8F-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B-19a692ea959f.
У кого к понедельнику останется меньше десяти открытых вкладок в браузере — тот молодец :)
#links
Громких анонсов свежих претендентов на место Sketch пока не было, но движухи в инструментах дизайна хватает. Вот что я нашёл для вас:
Hadron (https://hadronapp.com/): новый инструмент на стыке дизайна и разработки веб-интерфейсов. Он позволяет наглядно набросать компоновку экрана, используя библиотеку компонентов из дизайн-системы в духе Framer. Анонс ― https://medium.com/@HadronApp/its-about-time-to-design-in-the-real-world-introducing-hadron-f17c460401f7.
Phase: первая версия будет сконцентрирована на создании динамики ― https://blog.prototypr.io/phase-v1-all-about-interactions-3860b57dbbf0. Во второй обещают достаточно сложную адаптивность ― https://blog.prototypr.io/layouts-in-phase-panta-rhei-2ef57ffc5442. Кстати, основатель инструмента Nick Budden выступит на Mail.Ru Design Conference 2018 — https://www.facebook.com/events/161273841218868/, так что можно будет послушать о планах из первых рук.
Adobe XD: майское обновление — https://theblog.adobe.com/may-2018-update-adobe-xd/. Появилась бесплатная версия (один публичный прототип), открыт инвестфонд на $10 млн. для создателей плагинов и расширений (https://theblog.adobe.com/investing-future-creativity-announcing-adobe-fund-design/), быстрая замена символов и массовая вставка из буфера, доработки импорта из Photoshop и Sketch.
LayoutIt (https://www.layoutit.com/build): Онлайн-инструмент позволяет быстро набросать сетку блоков для Bootstrap.
Visual Inspector (https://www.canvasflip.com/visual-inspector/): плагин для Chrome позволяет ковырять стиль сайтов в более наглядном виде, чем стандартный инспектор кода. Изменения можно обсуждать с коллегами.
Fuse: стал бесплатным и open source — https://blog.fusetools.com/announcing-fuse-open-free-ea289bbf32d0.
Spirit: вышла версия для Mac — https://spiritapp.io/.
Marvel: Maze помогает проводить юзабилити-тестирование на базе прототипов Marvel — https://maze.design/. Даёте пользователям специальную ссылку, на выходе много полезной аналитики вроде тепловых карт и времени выполнения задач.
Haiku: запустили галерею пользовательских проектов — https://share.haiku.ai/. Для чего и как это работает — https://www.haiku.ai/blog/kickstart-design-and-development-with-forks/.
Про движуху у Figma упомянул в предыдущем выпуске про дизайн-системы — https://t.me/pdigest/56. Делаем ставки, кого из перечисленных купит InVision в течение года :)
#tools
Hadron (https://hadronapp.com/): новый инструмент на стыке дизайна и разработки веб-интерфейсов. Он позволяет наглядно набросать компоновку экрана, используя библиотеку компонентов из дизайн-системы в духе Framer. Анонс ― https://medium.com/@HadronApp/its-about-time-to-design-in-the-real-world-introducing-hadron-f17c460401f7.
Phase: первая версия будет сконцентрирована на создании динамики ― https://blog.prototypr.io/phase-v1-all-about-interactions-3860b57dbbf0. Во второй обещают достаточно сложную адаптивность ― https://blog.prototypr.io/layouts-in-phase-panta-rhei-2ef57ffc5442. Кстати, основатель инструмента Nick Budden выступит на Mail.Ru Design Conference 2018 — https://www.facebook.com/events/161273841218868/, так что можно будет послушать о планах из первых рук.
Adobe XD: майское обновление — https://theblog.adobe.com/may-2018-update-adobe-xd/. Появилась бесплатная версия (один публичный прототип), открыт инвестфонд на $10 млн. для создателей плагинов и расширений (https://theblog.adobe.com/investing-future-creativity-announcing-adobe-fund-design/), быстрая замена символов и массовая вставка из буфера, доработки импорта из Photoshop и Sketch.
LayoutIt (https://www.layoutit.com/build): Онлайн-инструмент позволяет быстро набросать сетку блоков для Bootstrap.
Visual Inspector (https://www.canvasflip.com/visual-inspector/): плагин для Chrome позволяет ковырять стиль сайтов в более наглядном виде, чем стандартный инспектор кода. Изменения можно обсуждать с коллегами.
Fuse: стал бесплатным и open source — https://blog.fusetools.com/announcing-fuse-open-free-ea289bbf32d0.
Spirit: вышла версия для Mac — https://spiritapp.io/.
Marvel: Maze помогает проводить юзабилити-тестирование на базе прототипов Marvel — https://maze.design/. Даёте пользователям специальную ссылку, на выходе много полезной аналитики вроде тепловых карт и времени выполнения задач.
Haiku: запустили галерею пользовательских проектов — https://share.haiku.ai/. Для чего и как это работает — https://www.haiku.ai/blog/kickstart-design-and-development-with-forks/.
Про движуху у Figma упомянул в предыдущем выпуске про дизайн-системы — https://t.me/pdigest/56. Делаем ставки, кого из перечисленных купит InVision в течение года :)
#tools
Hadron
Hadron - A new era for design and development
Hadron is a unified platform for designers and developers who work together towards the same goal, moving ideas forward and learning from each other along the way.
Дискурс на тему «а не херню ли несут продавцы дизайн-мышления» пылает не первый год. Между двумя лагерями «это новый рок-н-ролл» и «тупо другое название для классического процесса» пытаются выжить те, кто смотрит на вещь более взвешенно. Я — с ними, так что давно собираю здравые публикации на тему (в смысле, ищу подтверждения своей точке зрения, как и все мы). Вот что писали на эту тему за последние года полтора известные дизайнеры:
Здоровая критика
1. Один из лучших материалов на тему здоровой критики дизайн-мышления — http://interactions.acm.org/archive/view/may-june-2018/the-divisiveness-of-design-thinking. Jon Kolko начинает с предыстории появления основных составляющих методологии, а после этого приводит мнения за и против того, что происходит вокруг этого баззворда сейчас. Получилась одна из самых взвешенных статей на тему с отличными выводами.
2. Отличнейший здоровый взгляд Khoi Vinh на никак не умолкающую дискуссию о том, полезен ли для профессии лейбл «дизайн-мышление» или это пустой маркетинговый баззворд — https://www.subtraction.com/2018/04/02/in-defense-of-design-thinking-which-is-terrible/. Даже если кто-то использует его неправильно, это мощный инструмент для того, чтобы сделать дизайн более массовым явлением (пусть даже кто-то поначалу будет делать это неправильно).
То же самое сейчас происходит с программированием — огромное количество курсов для детей и просто начинающих наверняка породит массу дрянного кода, но это решаемая проблема. Он также полемизирует с Natasha Jen из Pentagram, чьё одиозное выступление в прошлом году — чистейший кликбейт и непонимание роли дизайнера в современных продуктах и мире в целом.
3. Richard Banfield — ещё один дизайнер, которого утомил кликбейт Natasha Jen. Он разбирает её псевдо-критику (https://medium.com/fresh-tilled-soil/design-thinking-is-bs-is-bs-b5e5d2e71c4c).
4. Jared Spool пишет о том, что методологически в дизайн-мышлении нет ничего нового — это новое название для тех подходов, которые и так давно используются в дизайне интерфейсов — https://medium.com/ux-immersion-interactions/ssh-dont-tell-them-there-s-no-magic-in-design-thinking-b95f33867656. Но термин выстрелил, поскольку помог выделить те задачи дизайнеров, которые касаются понимания проблемы, а не только производства.
5. Как и многие опытные проектировщики интерфейсов, Christina Wodtke скептически относится к хайпу вокруг «дизайн-мышления» — во многом это просто добротный процесс проектирования, который существует давно — http://eleganthack.com/how-i-stopped-worrying-and-learned-to-love-design-thinking/. Но если смириться с тем, что люди из других профессий используют термин как попало, в нём есть несколько важных дополнений к стандартному процессу: ко-дизайн, «думание руками» и итеративное моделирование идеального результата.
6. Влад Головач писал на эту же тему — https://medium.com/kulturvolk/%D0%B0%D0%BF%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%BC%D1%8B%D1%88%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-fadeec04830b.
———
Едкая критика
1. Мощный лонг-рид Lee Vinsel с глубокой критикой дизайн-мышления — https://medium.com/@sts_news/design-thinking-is-kind-of-like-syphilis-its-contagious-and-rots-your-brains-842ed078af29. Он копает в сторону нездорового отношения к понятию «инновации» и абстрактному желанию «переизобрести что-нибудь» без попытки осознать, как эта вещь или явление работает и в чём именно его проблемы. Дизайн-мышление — отличный способ популяризации вдумчивого дизайн-процесса для недизайнеров; проблема в том, что зачастую всё заканчивается просто на уровне простого выплеска «креативной энергии».
#designthinking #discourse
Здоровая критика
1. Один из лучших материалов на тему здоровой критики дизайн-мышления — http://interactions.acm.org/archive/view/may-june-2018/the-divisiveness-of-design-thinking. Jon Kolko начинает с предыстории появления основных составляющих методологии, а после этого приводит мнения за и против того, что происходит вокруг этого баззворда сейчас. Получилась одна из самых взвешенных статей на тему с отличными выводами.
2. Отличнейший здоровый взгляд Khoi Vinh на никак не умолкающую дискуссию о том, полезен ли для профессии лейбл «дизайн-мышление» или это пустой маркетинговый баззворд — https://www.subtraction.com/2018/04/02/in-defense-of-design-thinking-which-is-terrible/. Даже если кто-то использует его неправильно, это мощный инструмент для того, чтобы сделать дизайн более массовым явлением (пусть даже кто-то поначалу будет делать это неправильно).
То же самое сейчас происходит с программированием — огромное количество курсов для детей и просто начинающих наверняка породит массу дрянного кода, но это решаемая проблема. Он также полемизирует с Natasha Jen из Pentagram, чьё одиозное выступление в прошлом году — чистейший кликбейт и непонимание роли дизайнера в современных продуктах и мире в целом.
3. Richard Banfield — ещё один дизайнер, которого утомил кликбейт Natasha Jen. Он разбирает её псевдо-критику (https://medium.com/fresh-tilled-soil/design-thinking-is-bs-is-bs-b5e5d2e71c4c).
4. Jared Spool пишет о том, что методологически в дизайн-мышлении нет ничего нового — это новое название для тех подходов, которые и так давно используются в дизайне интерфейсов — https://medium.com/ux-immersion-interactions/ssh-dont-tell-them-there-s-no-magic-in-design-thinking-b95f33867656. Но термин выстрелил, поскольку помог выделить те задачи дизайнеров, которые касаются понимания проблемы, а не только производства.
5. Как и многие опытные проектировщики интерфейсов, Christina Wodtke скептически относится к хайпу вокруг «дизайн-мышления» — во многом это просто добротный процесс проектирования, который существует давно — http://eleganthack.com/how-i-stopped-worrying-and-learned-to-love-design-thinking/. Но если смириться с тем, что люди из других профессий используют термин как попало, в нём есть несколько важных дополнений к стандартному процессу: ко-дизайн, «думание руками» и итеративное моделирование идеального результата.
6. Влад Головач писал на эту же тему — https://medium.com/kulturvolk/%D0%B0%D0%BF%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%BC%D1%8B%D1%88%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-fadeec04830b.
———
Едкая критика
1. Мощный лонг-рид Lee Vinsel с глубокой критикой дизайн-мышления — https://medium.com/@sts_news/design-thinking-is-kind-of-like-syphilis-its-contagious-and-rots-your-brains-842ed078af29. Он копает в сторону нездорового отношения к понятию «инновации» и абстрактному желанию «переизобрести что-нибудь» без попытки осознать, как эта вещь или явление работает и в чём именно его проблемы. Дизайн-мышление — отличный способ популяризации вдумчивого дизайн-процесса для недизайнеров; проблема в том, что зачастую всё заканчивается просто на уровне простого выплеска «креативной энергии».
#designthinking #discourse
interactions.acm.org
The divisiveness of design thinking | ACM Interactions
Design thinking is "kind of like syphilis," wrote Lee Vinsel of the Stevens Institute of Technology in a recent widely shared article [1]. Other popular critical...
История, ROI, проблемы внедрения и всё такое
1. Феерически крутое исследование корней дизайн-мышления от Jo Szczepanska — https://medium.com/@szczpanks/design-thinking-where-it-came-from-and-the-type-of-people-who-made-it-all-happen-dc3a05411e53. Она копает с середины 20го века от работ Buckminister Fuller и скандинавских практик кооперативного дизайна. Каждое десятилетие отмечено изменениями как самого метода, так и сфер его применения. Ключевые фигуры, книги, цитаты — просто золото!
2. Forrester провели по заказу IBM опрос-исследование экономического выхлопа от внедрения практик дизайн-мышления — https://www.ibm.com/design/thinking/static/media/Enterprise-Design-Thinking-Report.8ab1e9e1.pdf. Цифры радужные. Краткий обзор — https://medium.com/design-ibm/a-new-study-on-design-thinking-is-great-news-for-designers-593f71b40627
3. Martin Kupp, Jamie Anderson и Jörg Reckhenrich рассказывают о проблемах, с которыми сталкиваются классические организации при внедрении практик дизайн-мышления — http://sloanreview.mit.edu/article/why-design-thinking-in-business-needs-a-rethink/. Процессные и культурные особенности таких компаний противоречат многим установкам итеративной совместной работы, поэтому важно решить их, чтобы избежать провала.
4. Мини-статья Tim Brown из IDEO о том, что по мере распространения дизайн-мышления оно перестает быть конкурентным преимуществом для компаний — https://hbr.org/2015/08/when-everyone-is-doing-design-thinking-is-it-still-a-competitive-advantage. Видимо, поэтому они решили, что в профессии давненько не было новых баззвордов и в конце 2016го запустили руководство по циклическому дизайну — http://circulardesignguide.com/. Берём дизайн-мышление, устойчивое развитие, гибкие и lean-методики и — вуаля! — новый метод готов. Срочно обновляем профессиональные профили.
———
Меня, конечно, и самого бомбит от того, что привычный процесс проектирования называют маркетинговым баззвордом. Но если это помогает донести идеи и ценность хорошего дизайна до менеджеров и разработчиков — готов называть процесс как угодно. Характерно, что и поисковые запросы «design thinking» уделывают «UX» в разы — видно, что термин понятнее людям.
#designthinking #discourse
1. Феерически крутое исследование корней дизайн-мышления от Jo Szczepanska — https://medium.com/@szczpanks/design-thinking-where-it-came-from-and-the-type-of-people-who-made-it-all-happen-dc3a05411e53. Она копает с середины 20го века от работ Buckminister Fuller и скандинавских практик кооперативного дизайна. Каждое десятилетие отмечено изменениями как самого метода, так и сфер его применения. Ключевые фигуры, книги, цитаты — просто золото!
2. Forrester провели по заказу IBM опрос-исследование экономического выхлопа от внедрения практик дизайн-мышления — https://www.ibm.com/design/thinking/static/media/Enterprise-Design-Thinking-Report.8ab1e9e1.pdf. Цифры радужные. Краткий обзор — https://medium.com/design-ibm/a-new-study-on-design-thinking-is-great-news-for-designers-593f71b40627
3. Martin Kupp, Jamie Anderson и Jörg Reckhenrich рассказывают о проблемах, с которыми сталкиваются классические организации при внедрении практик дизайн-мышления — http://sloanreview.mit.edu/article/why-design-thinking-in-business-needs-a-rethink/. Процессные и культурные особенности таких компаний противоречат многим установкам итеративной совместной работы, поэтому важно решить их, чтобы избежать провала.
4. Мини-статья Tim Brown из IDEO о том, что по мере распространения дизайн-мышления оно перестает быть конкурентным преимуществом для компаний — https://hbr.org/2015/08/when-everyone-is-doing-design-thinking-is-it-still-a-competitive-advantage. Видимо, поэтому они решили, что в профессии давненько не было новых баззвордов и в конце 2016го запустили руководство по циклическому дизайну — http://circulardesignguide.com/. Берём дизайн-мышление, устойчивое развитие, гибкие и lean-методики и — вуаля! — новый метод готов. Срочно обновляем профессиональные профили.
———
Меня, конечно, и самого бомбит от того, что привычный процесс проектирования называют маркетинговым баззвордом. Но если это помогает донести идеи и ценность хорошего дизайна до менеджеров и разработчиков — готов называть процесс как угодно. Характерно, что и поисковые запросы «design thinking» уделывают «UX» в разы — видно, что термин понятнее людям.
#designthinking #discourse
Medium
Design thinking origin story plus some of the people who made it all happen
Recently design thinking has gained momentum in the business world but how exactly did it come about?
Массовые рассылки сервисов для соответствия требованиям европейского законодательства GDPR стали главным мемом конца мая. К сожалению, многие делали это крайне топорно, так что интернет приобрёл черты бюрократической конторы, где люди должны заполнять бесконечные и не очень понятные бланки. Сайт собрал самые убогие подходы к решению проблемы ― https://gdprhallofshame.com/. Ну и небольшая инструкция по тому, как учесть требования GDPR в дизайне ― https://uxdesign.cc/3-things-to-keep-in-mind-before-you-design-for-gdpr-92cc6b591fbc.
Другие, здоровые интерфейсные паттерны:
1. Один из новых интересных интерфейсных паттернов ― предугадывание движения курсора мыши к важному элементу на экране ― https://tympanus.net/codrops/2018/05/02/ideas-for-proximity-feedback-with-progressive-hover-effects/. Mary Lou показывает несколько примеров реализации ― это помогает экономить время и силы.
2. Дизайн-студия Creative Navy рассказывает о своём опыте проектирования POS-интерфейсов для кассиров. Хороший обзор особенностей использования и лучших практик ― https://medium.com/uxjournal/pos-ux-design-part-one-the-16-ux-factors-in-point-of-sale-b94661936eea. Часть 2 ― https://medium.com/uxjournal/the-design-principles-in-the-pos-system-pos-design-guide-part-2-57d1bcb30ac0.
3. John Ogata и JonDelina ‘JD’ Buckley сравнили обычные бумажные инструкции и более современные, с использованием дополненной реальности ― https://www.uxmatters.com/mt/archives/2018/05/measuring-usability-in-a-lean-assembly-environment.php. Это сценарий использования AR продвигает каждое новое поколение устройств и он действительно позволяет сократить количество ошибок и ускорить процесс.
4. Коллекция интерфейсных паттернов в виде видео-записей прохода по сценариям ― https://pageflows.com/.
5. Julie A. Kientz, Lisa Anthony и Alexis Hiniker делятся опытом проектирования интерфейсов для детей ― http://uxpamagazine.org/playful-interfaces/. Они дают неплохие практические советы по особенностям таких интерфейсов.
Feel free to check out my updated terms & conditions, как говорят в одних известных интернетах.
#patterns
Другие, здоровые интерфейсные паттерны:
1. Один из новых интересных интерфейсных паттернов ― предугадывание движения курсора мыши к важному элементу на экране ― https://tympanus.net/codrops/2018/05/02/ideas-for-proximity-feedback-with-progressive-hover-effects/. Mary Lou показывает несколько примеров реализации ― это помогает экономить время и силы.
2. Дизайн-студия Creative Navy рассказывает о своём опыте проектирования POS-интерфейсов для кассиров. Хороший обзор особенностей использования и лучших практик ― https://medium.com/uxjournal/pos-ux-design-part-one-the-16-ux-factors-in-point-of-sale-b94661936eea. Часть 2 ― https://medium.com/uxjournal/the-design-principles-in-the-pos-system-pos-design-guide-part-2-57d1bcb30ac0.
3. John Ogata и JonDelina ‘JD’ Buckley сравнили обычные бумажные инструкции и более современные, с использованием дополненной реальности ― https://www.uxmatters.com/mt/archives/2018/05/measuring-usability-in-a-lean-assembly-environment.php. Это сценарий использования AR продвигает каждое новое поколение устройств и он действительно позволяет сократить количество ошибок и ускорить процесс.
4. Коллекция интерфейсных паттернов в виде видео-записей прохода по сценариям ― https://pageflows.com/.
5. Julie A. Kientz, Lisa Anthony и Alexis Hiniker делятся опытом проектирования интерфейсов для детей ― http://uxpamagazine.org/playful-interfaces/. Они дают неплохие практические советы по особенностям таких интерфейсов.
Feel free to check out my updated terms & conditions, как говорят в одних известных интернетах.
#patterns
Business Hall of Shame
Business Hall of Shame | Shameful Business Growth Strategies That Wor
3 Keys to a Successful Product Launch A successful product launch relies on understanding your market, strategic planning, and amazing customer support. These three keys to success work well every single time. A product launch that works well for your audience…
Пяток свежих ссылок про дизайн-менеджмент на выходные, чтобы лучше понять вашу команду и организацию в целом:
1. Отличная статья Alastair Simpson о трёх стадиях роста дизайн-менеджера: первый опыт управления дизайнерами, управление другими дизайн-менеджерами и работа с целым портфелем продуктов — https://medium.com/designing-atlassian/learning-to-let-go-as-a-design-leader-part-1-4e7b92774db0. Он даёт советы по тому, как грамотно вести себя на каждом из них. Часть 2 ― https://medium.com/designing-atlassian/learning-to-let-go-as-a-designer-leader-part-2-5f6427d6f204.
2. Интервью с Eik Brandsgård из LEGO о внедрении практики дизайн-спринтов в компании ― https://uxplanet.org/how-lego-run-design-sprints-at-scale-47bf56b785f7. Они решили сделать революционные, а не эволюционные изменения и запустили одновременный процесс с десятками команд. Для этого пришлось приостановить всю работу на два месяца, но по его словам, результат того стоил.
3. Конференция Enterprise UX 2017 прошла 7-9 июня в Сан-Франциско, США. Обзор первого (https://www.uxmatters.com/mt/archives/2018/04/review-enterprise-ux-2017-part-2-conference-day-1-2.php) и второго дня (https://www.uxmatters.com/mt/archives/2018/05/review-enterprise-ux-2017-part-3-conference-day-2.php) выступлений от Pabini Gabriel-Petit.
4. Julian Shapiro даёт пачку советов владельцам дизайн-студий по грамотной организации работы над проектами и бизнеса в целом ― https://www.julian.com/blog/running-an-agency. Интересно, что его видение проектной работы похоже на работу продуктовых команд.
5. Dave Malouf описывает ценность дизайн-команды для компании по нескольким срезам ― https://medium.com/amplify-design/how-does-designops-increase-your-design-value-7c7ace84660f. Получился чеклист по организационным вопросам.
Кстати, черновик свежего дайджеста уже готов, так что всё это и ещё сотня-другая ссылок на подходе.
#designmanagement
1. Отличная статья Alastair Simpson о трёх стадиях роста дизайн-менеджера: первый опыт управления дизайнерами, управление другими дизайн-менеджерами и работа с целым портфелем продуктов — https://medium.com/designing-atlassian/learning-to-let-go-as-a-design-leader-part-1-4e7b92774db0. Он даёт советы по тому, как грамотно вести себя на каждом из них. Часть 2 ― https://medium.com/designing-atlassian/learning-to-let-go-as-a-designer-leader-part-2-5f6427d6f204.
2. Интервью с Eik Brandsgård из LEGO о внедрении практики дизайн-спринтов в компании ― https://uxplanet.org/how-lego-run-design-sprints-at-scale-47bf56b785f7. Они решили сделать революционные, а не эволюционные изменения и запустили одновременный процесс с десятками команд. Для этого пришлось приостановить всю работу на два месяца, но по его словам, результат того стоил.
3. Конференция Enterprise UX 2017 прошла 7-9 июня в Сан-Франциско, США. Обзор первого (https://www.uxmatters.com/mt/archives/2018/04/review-enterprise-ux-2017-part-2-conference-day-1-2.php) и второго дня (https://www.uxmatters.com/mt/archives/2018/05/review-enterprise-ux-2017-part-3-conference-day-2.php) выступлений от Pabini Gabriel-Petit.
4. Julian Shapiro даёт пачку советов владельцам дизайн-студий по грамотной организации работы над проектами и бизнеса в целом ― https://www.julian.com/blog/running-an-agency. Интересно, что его видение проектной работы похоже на работу продуктовых команд.
5. Dave Malouf описывает ценность дизайн-команды для компании по нескольким срезам ― https://medium.com/amplify-design/how-does-designops-increase-your-design-value-7c7ace84660f. Получился чеклист по организационным вопросам.
Кстати, черновик свежего дайджеста уже готов, так что всё это и ещё сотня-другая ссылок на подходе.
#designmanagement
Medium
Learning to let go as a design leader (Part 1)
An inflection point is defined as:
Вчера анонсировали iOS 12 — https://www.apple.com/ios/ios-12-preview/. С точки зрения интерфейса изменений немного, основной упор сделан на повышение производительности (iOS 11 была одной из самых сырых и глючных). Причём её можно будет поставить на те же устройства, что работали с прошлой версией — пул доступных устройств получается шире.
Неплохие обзоры обновления сделали The Verge — https://www.theverge.com/2018/6/4/17417730/apple-ios-12-iphone-update-best-features-wwdc-2018 и Engadget — https://www.engadget.com/2018/06/04/apple-ios-12-update-wwdc-2018/. Какие визуальные и интерфейсные нюансы можно отметить:
1. iOS-приложения можно будет портировать для MacOS — https://www.engadget.com/2018/06/04/apple-ios-apps-mac-cross-platform-sort-of/. Пока это сделано для некоторых приложений Apple, со следующего года станет доступно сторонним разработчикам. Но это не объединение платформ, о чём мечтают многие.
2. Уведомления от приложений складываются в стопки — https://cdn.vox-cdn.com/thumbor/m_Y8ggxPlX7nqaMl6dXJxKHTDRA=/1600x0/filters:no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/11476969/groupednotif.gif
и https://www.engadget.com/2018/06/04/ios-12-grouped-notifications/.
3. Apple Books (бывший iBooks) использует шрифт с засечками для заголовков — https://o.aolcdn.com/images/dims?resize=2000%2C2000%2Cshrink&image_uri=https%3A%2F%2Fs.blogcdn.com%2Fwww.engadget.com%2Fmedia%2F2018%2F06%2Fwwdc18-501.jpg&client=a1acac3e1b3290917d92&signature=36b48b85f9a0abf7890f06b46f3acf5ab0c7bd97 и https://www.engadget.com/2018/06/04/apple-books-replaces-ibooks-ios-12/. Палитра визуального языка становится ещё богаче.
4. Как и свежий Android, платформа будет помогать бороться с телефонной зависимостью — https://www.engadget.com/2018/06/04/ios-12-will-help-you-fight-your-phone-addiction/. Неплохой пример экрана с инфографикой оттуда — https://www.apple.com/ios/ios-12-preview/overview/screentime/image_large_2x.jpg.
5. Ещё один стиль кнопок в action sheets — https://www.apple.com/ios/ios-12-preview/overview/notifications/image2_large_2x.jpg.
6. Apple, Adobe и Pixar продвигают единый стандарт файла для описания дополненной реальности — https://www.engadget.com/2018/06/04/apple-pixar-adobe-standardized-ar-file-format/.
7. Shortcuts, своя версия IFTTT на базе купленного продукта Workflow — можно создавать собственные операции для Siri, которые затрагивают несколько действий в разных приложениях — https://www.theverge.com/2018/6/4/17414648/siri-update-new-features-apple-wwdc-2018.
8. Автоподстановка кодов подтверждения, которая поможет мобильным банкам.
9. Умельцы раскопали намёк на тёмную тему — https://developer.apple.com/documentation/uikit/uiuserinterfacestyle?changes=latest_minor. Она появится в новом MacOS, в iOS была в некоторых приложениях (например, будильник).
Короче, для дизайнеров новостей мало, получился скорее релиз про полировку и оптимизацию. Полный список изменений — https://www.apple.com/ios/ios-12-preview/features/. iOS 12 будет доступна в сентябре, но уже сейчас можно поставить бета-версию — https://beta.apple.com/sp/betaprogram/.
#ios #mobile
Неплохие обзоры обновления сделали The Verge — https://www.theverge.com/2018/6/4/17417730/apple-ios-12-iphone-update-best-features-wwdc-2018 и Engadget — https://www.engadget.com/2018/06/04/apple-ios-12-update-wwdc-2018/. Какие визуальные и интерфейсные нюансы можно отметить:
1. iOS-приложения можно будет портировать для MacOS — https://www.engadget.com/2018/06/04/apple-ios-apps-mac-cross-platform-sort-of/. Пока это сделано для некоторых приложений Apple, со следующего года станет доступно сторонним разработчикам. Но это не объединение платформ, о чём мечтают многие.
2. Уведомления от приложений складываются в стопки — https://cdn.vox-cdn.com/thumbor/m_Y8ggxPlX7nqaMl6dXJxKHTDRA=/1600x0/filters:no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/11476969/groupednotif.gif
и https://www.engadget.com/2018/06/04/ios-12-grouped-notifications/.
3. Apple Books (бывший iBooks) использует шрифт с засечками для заголовков — https://o.aolcdn.com/images/dims?resize=2000%2C2000%2Cshrink&image_uri=https%3A%2F%2Fs.blogcdn.com%2Fwww.engadget.com%2Fmedia%2F2018%2F06%2Fwwdc18-501.jpg&client=a1acac3e1b3290917d92&signature=36b48b85f9a0abf7890f06b46f3acf5ab0c7bd97 и https://www.engadget.com/2018/06/04/apple-books-replaces-ibooks-ios-12/. Палитра визуального языка становится ещё богаче.
4. Как и свежий Android, платформа будет помогать бороться с телефонной зависимостью — https://www.engadget.com/2018/06/04/ios-12-will-help-you-fight-your-phone-addiction/. Неплохой пример экрана с инфографикой оттуда — https://www.apple.com/ios/ios-12-preview/overview/screentime/image_large_2x.jpg.
5. Ещё один стиль кнопок в action sheets — https://www.apple.com/ios/ios-12-preview/overview/notifications/image2_large_2x.jpg.
6. Apple, Adobe и Pixar продвигают единый стандарт файла для описания дополненной реальности — https://www.engadget.com/2018/06/04/apple-pixar-adobe-standardized-ar-file-format/.
7. Shortcuts, своя версия IFTTT на базе купленного продукта Workflow — можно создавать собственные операции для Siri, которые затрагивают несколько действий в разных приложениях — https://www.theverge.com/2018/6/4/17414648/siri-update-new-features-apple-wwdc-2018.
8. Автоподстановка кодов подтверждения, которая поможет мобильным банкам.
9. Умельцы раскопали намёк на тёмную тему — https://developer.apple.com/documentation/uikit/uiuserinterfacestyle?changes=latest_minor. Она появится в новом MacOS, в iOS была в некоторых приложениях (например, будильник).
Короче, для дизайнеров новостей мало, получился скорее релиз про полировку и оптимизацию. Полный список изменений — https://www.apple.com/ios/ios-12-preview/features/. iOS 12 будет доступна в сентябре, но уже сейчас можно поставить бета-версию — https://beta.apple.com/sp/betaprogram/.
#ios #mobile
Apple
iOS 17
iOS 17 brings new features for more expressive communication, simplified sharing, and a new full-screen experience for your iPhone.
Собрал дайджест продуктового дизайна за май 2018 ― https://jvetrau.com/digest-2018-may/. Спасибо ребятам из Setka за редактор статей и помощь в работе с ним.
Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX
Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX
Юрий Ветров об интерфейсах
Дайджест продуктового дизайна, май 2018
Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы и исторические рассказы с 2009 года. В новом выпуске: Material 2.0 и Android P, стыдоба по GDPR, списки наград и конференций, голосовые интерфейсы, новые инструменты…