company_banner

Дайджест продуктового дизайна, январь 2020

    Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-декабрь 2019.

    Дайджест продуктового дизайна, январь 2020

    Паттерны и лучшие практики


    Choosing the right UI component for communication with your users

    Adam Shriki разложил паттерны для уведомления пользователя по степени комфорта для пользователя. От push-уведомлений и попапов, которые вырывают из текущего потока, до более нейтральных всплывающих подсказок.



    The Role of Animation and Motion in UX

    Page Laubheimer из Nielsen/Norman Group описывает роль анимации в интерфейсах. Список достаточно стандартный, но язык описания более профессиональный.

    Evidence-based design heuristics for idea generation

    77 эвристик для проектирования и оценки промышленного дизайна.

    Videos as Instructional Content — User Behaviors and UX Guidelines

    Aurora Harley из Nielsen/Norman Group даёт советы по организации и размещению видео-инструкций на сайтах.

    Тексты в Яндекс.Драйве

    Михаил Озорнин собрал коллекцию интерфейсных текстов Яндекс.Драйва, очень человечных.

    Тёмные паттерны

    Кажется, нашлась управа на властелинов тёмных паттернов из Booking. Еврокомиссия заставила их уменьшить количество моргающих уведомлений и психологических трюков.

    Baymard Institute



    Дизайн-системы и гайдлайны


    EightShapes @components

    Nathan Curtis собрал вместе все свои статьи о дизайн-системах. Он самый толковый автор по теме, так что это лучше любой книги. Они с EightShapes также оживили одноимённый Твиттер.



    Тёмная тема оформления


    DarkModeDesign — Best Resources for Designing and Building Dark Mode Apps and Websites

    Сайт собирает материалы по дизайну тёмной темы оформления. Официальные руководства и выступления Apple и Google, статьи компаний. Дополнил свою статью недостающими.



    The Ultimate Guide on Designing a Dark Theme for your Android app

    Подробнейший разбор особенностей создания тёмной темы в Material Design от Chethan KVS. Он проходится по всем основным аспектам подготовки цветов, состояний элементов, иллюстраций и т.п.

    Google Dark Mode app roundup — Everything available so far

    Мощный обзор всех приложений Google на Android с тёмной темой оформления.

    Building Dark Mode on Desktop

    Kyle Stetz из Slack рассказывает о внедрении тёмной темы. Они сделали это через токены.

    Implementing Dark Mode in iOS 13

    Tim Johnsen из Instagram рассказывает о поддержке тёмной темы оформления в iOS-версии приложения.

    Turn the lights off — designing for dark mode

    Советы по созданию тёмной темы оформления от Briandito Priambodo на основе опыта внедрения в приложении Wego.

    Building Dark Mode into a Complex Web App

    Andrew Childs из Clubhouse рассказывает о внедрении тёмной темы оформления. Они сделали забавный инструмент для сокращения количества цветов, обязательный этап перехода на дизайн-систему.

    Building Dark Mode on Desktop

    Kyle Stetz из Slack рассказывает о внедрении тёмной темы. Они сделали это через токены.

    Implementing Dark Mode in iOS 13

    Tim Johnsen из Instagram рассказывает о поддержке тёмной темы оформления в iOS-версии приложения.

    Turn the lights off — designing for dark mode

    Советы по созданию тёмной темы оформления от Briandito Priambodo на основе опыта внедрения в приложении Wego.

    Building Dark Mode into a Complex Web App

    Andrew Childs из Clubhouse рассказывает о внедрении тёмной темы оформления. Они сделали забавный инструмент для сокращения количества цветов, обязательный этап перехода на дизайн-систему.

    Design System Checklist

    Подробный чеклист по внедрению дизайн-системы. Визуальный язык и токены, компоненты, инструменты, управление проектом.



    Windows 10X

    Microsoft готовит альтернативный интерфейс Windows 10X для новых вроде двухэкранного Surface Neo. Он будет поддерживать обычные приложения Windows, но оболочка имеет упрощённый вид.



    Defining Design System Contributions

    Nathan Curtis из EightShapes описывает форматы взаимодействия команды дизайн-системы и продуктовых команд, которые предлагают свои решения и изменения. Толково и подробно разложены многие нюансы процесса. Продолжение.



    Smashing Podcast Episode 7 With Amy Hupe — What Is A Government Design System?

    Подкаст с Amy Hupe, работавшей над контентом и документацией для дизайн-системы Gov.uk.



    Material Design

    Обновили гайдлайны по плотности интерфейса. Она позволяет адаптировать его для разных задач и сред (например, увеличить для веба). Сами гайдлайны и онлайн-инструмент для примерки.



    SLDS + VS Code = Win!

    Плагин к Visual Studio Code от SalesForce позволяет подсвечивать параметры из их дизайн-системы.

    Понимание пользователя


    Just-Right Personas — How to Choose the Scope of Your Personas

    Kim Flaherty из Nielsen/Norman Group говорит о двух типах персонажей — широкого и узкого спектра. Первые описывают компанию в целом, вторые — отдельные продукты.



    Netflix thinks ‘Fortnite’ is a bigger threat than HBO

    Шикарный пример правильного понимания Jobs to Be Done от главы Netflix Reed Hastings. Он считает главной угрозой не канал HBO, а игру Fortnite в борьбе за свободное время пользователей.

    How Information-Seeking Behavior Has Changed in 22 Years

    Nielsen/Norman Group повторили исследование Xerox PARC 1997 года о том, как пользователи ищут информацию в интернете. Feifei Liu рассказывает об основных выводах.


    Новые инструменты дизайна интерфейсов


    Sketch 62 и Inspector

    Улучшение smart layout (минимальная и максимальная ширина). И, наконец-то, бета-версия аналога Zeplin.



    Adobe XD

    Январское обновление. Также добавили авто-layout. Читайте также интервью с Talin Wadsworth из команды об истории создания инструмента и планах на будущее. Он также рассказывает о рабочем процессе и команде.

    Adobe Creative Cloud

    MS Office 365 может подключить библиотеки Creative Cloud для импорта стилей и ресурсов.

    Play — The new tool for creating better mobile apps

    Совершенно дикая штука — инструмент дизайна мобильных приложений на самом телефоне. Ребята сотворили совершеннейшую чуму (пусть и вызывающую вопросы по продуктивности такой работы дизайнера). В феврале появится бета для iPhone, позже обещают iPad и Android-телефоны. Предыстория создания от авторов.



    Figma: Плагины


    • Bravo Studio App: Подключает реальные данные и генерирует нативный код для Android и iOS на основе прототипов.
    • Smooth Shadow: Аккуратные тени с помощью кривых easing.
    • Design Lint: Линтинг для макетов. Находит элементы без привязанных стилей.
    • Text Prettier: Типограф для причёсывания текста.


    EscherSketch

    Браузерный инструмент позволяет делать паттерны из симметричных фигур и наглядно видеть их в повторяющемся полотне.

    BG Painter

    Генератор модных фонов (например, «жидкий металл»).

    Mosaica Studio

    Новый инструмент для создания каскадной (stagger) анимации. Прототипировать и создавать подобную анимацию вручную через кейфреймы трудозатратно, здесь же вместо работы с кодом предлагается WYSIWYG.



    Adalo

    Ещё один конструктор мобильных приложений, делающий нативную сборку на основе прототипа. Android, iOS и веб.

    WebStudio

    Ещё один конструктор сайтов в браузере.

    Flow Lines

    Генератор абстрактных паттернов из линий.



    Fronty

    Сервис конвертирует картинку в HTML. Эффектно, но непонятно зачем — макет сайта и так сделан в каком-либо инструменте с разбивкой по слоям, а генераторов оттуда и так хватает.

    Super Sphere

    Генератор контурных сфер с анимацией.

    Scribbbles

    Бесплатная коллекция клякс и абстрактных паттернов для промо-сайтов.



    Calcolor

    Интересный генератор цветовых палитр, который позволяет копать смежные в разные стороны.

    Gradienta

    Генератор градиентов и интересных наложений слоёв в браузере с экспортом в CSS.

    Pixelworm

    Занятный сервис, который позволяет сравнить макет в Sketch и реализацию в мобильном приложении.



    Clai

    Инструмент позволяет сделать подачу макета на устройстве, которое в свою очередь можно вертеть с анимацией.

    Trace

    Ещё один убиратор фона с фотографий.

    Social Sizes

    Большая коллекция шаблонов для всех соцмедиа с актуальными размерами.



    Nototo

    Дичайший сервис заметок в виде карты виртуального мира.



    Пользовательские исследования и тестирование


    The critical connection between support and UX design

    Clara Petit из Shopify перешла из поддержки пользователей в UX. Она показывает на своём опыте пересечение и потенциальное взаимодействие между этими двумя ролями.



    The User Researcher’s Guide to GDPR

    Подробнейшая памятка по учёту GDPR при проведении пользовательских исследований от Carrie Boyd из сервиса User Interviews. Закон накладывает много ограничений.



    How to Get More Out of A/B Testing Than a Win or Loss

    Leigh Lyman из Lucid Software рассказывает о подходе компании к анализу проведённых ранее A/B-тестов. Как они хранят выводы и возвращаются к ним для поиска паттернов в поведении пользователей.

    Should All Scale Points Be Labeled? + Comparing Fully vs. Partially Labeled Five- and Seven-Point Scales

    Jeff Sauro и Jim Lewis изучили вопрос «нужны ли подписи ко всем элементам шкалы опроса». Предыдущие исследования на тему чёткого доказательства не дают, многое зависит от контекста опроса (способ, частота, подача).

    Co-creation в пользовательских исследованиях

    Евгения Наумова из СКБ Контур рассказывает об опыте проведения пользовательских исследований, где продуктовая команда делает концепты интерфейсов вместе с респондентами.



    Ethical Maturity in User Research

    Maria Rosala из Nielsen/Norman Group даёт чеклист этической зрелости при проведении пользовательских исследований. Всё больше компаний, где дизайнеры и менеджеры продуктов самостоятельно общаются с пользователями, но не всегда умеют делать это.



    Важные моменты при создании юзабилити-лаборатории

    Чеклист по организации помещения для UX-лаборатория от Дмитрия Himi.



    Building an Integrated Qualitative and Quantitative User Research Capability

    Jared Spool приводит интересный пример исследования Intuit при запуске новой функциональности в их продукте Quickbooks. Реально полезную функцию в интерфейсе не использовали, потому что эту задачу решали вообще в почтовом клиенте.

    Визуальное программирование и дизайн в браузере


    Progressive Web Apps in 2020

    Мощный разбор текущего состояния Progressive Web Apps от Maximiliano Firtman. Внедрение, поддержка платформ и т.п. (даже про тёмную тему и гибкие экраны).

    Новые скрипты



    Типографика в вебе

    Florens Verschelde разбирает историю появления типичного базового размера шрифта на сайтах. Как она менялась от самых первых устройств и наследия печатного мира.

    Работа с цветом в вебе

    Kilian Valkhof показывает, как использовать easing для градиентов и теней в вебе с помощью CSS (точнее, не совсем чистого CSS).

    Метрики и ROI


    Designing for Retention & Growth

    Chloe Cathcart из HubSpot описывает потенциальную помощь дизайнера в увеличении retention. Она разобрала процесс «залипания» пользователя на 4 составляющих.



    Three Branches of Standardized UX Measurement

    Jeff Sauro и Jim Lewis составили полный список стандартных методов оценки UX. Они развивались по трём веткам с 1980х годов.



    Дизайн-менеджмент и DesignOps


    How To Empower Design Teams By Measuring Value

    Dave Cunningham из Co-op предлагает модель DIET (Design Impact Evaluation Tactic) для оценки потенциального успеха проекта. Она оценивает доработанную версию double diamond по нескольким вопросам. Чеклист на отдельном сайте и в виде таблицы.



    The Many Meanings of Design-Led

    Jon G. Temple и Patrick Commarford из IBM описывают 4 способа взаимодействия дизайнера в agile-команде. От этого зависит влияние на дизайн-решения и вообще формат их принятия.



    The business of UX management

    Фреймворк дизайн-менеджмента от Daniel Rosenberg. Он, как и я, использует идею паттернов для структурирования лучших практик и методов. Хотя фокусируется на общих для менеджеров вообще.



    Organizational Design Canvas / Канвас организационного моделирования

    Шаблон организационного моделирования от Wonderfull. Он позволяет оптимизировать сервисные процедуры, команду, процессы и инфраструктуру для улучшения по всей customer journey map.



    The Grit: Yury Vetrov, ex-Design Director at Mail.ru Group

    Прошлым летом к нам на Mail.ru Design Conf приезжал Matouš Roskovec из Avocode. А потом я сгонял в Прагу и пообщался с ним. Из этого выросло годное интервью для их серии The Grit. От истории прихода в дизайн и карьерного пути до практик дизайн-менеджмента и профессиональных хобби. Писал ответы с неделю, зато получилось очень подробно. Общались между работами, так что текст про этот период.

    The Possibilities of “And” — Prioritizing Usability Alongside Feature Growth

    Libby Maurer из HubSpot рассказывает о том, как компания балансирует между ростом и улучшением существующей функциональности. Хорошие принципы дизайн-команды, а также детали про работу с дизайн-долгом.



    How we’re building a high-trust distributed culture

    Matt Hryhorsky из команды роста Shopify описал практики совместной работы и координации для распределённой команды. Отличная цельная памятка.



    Shifting Our Team Goals to be UX Outcomes

    Jared Spool описывает свой подход к стратегии дизайн-команды на год через выхлоп и его визуализацию.

    Командное взаимодействие


    Дизайн-марафон — Эффективный тимбилдинг, который помогает находить прорывные решения

    Дизайнеры Redmadrobot рассказывают о формате хакатонов по дизайну, которые они проводят для клиентов. Вторая часть с опытом Альфа-Банка, Сбербанка, Miro, Wargaming и Mail.ru Group.

    Методологии, процедуры, стандарты


    Design’s Unsexy Middle Bits

    Christina Wodtke описывает своё видение современного дизайн-процесса. Правда, она зачем-то привязывается к диаграмме дизайн-мышления, устраивая терминологический переполох.

    Triple Loop Product Lifecycle. Learn, Build, Measure and Maturity Levels

    Фарид Сабитов предлагает свою версию lean-модели создания продуктов. Она разбита на три подцикла.

    Кейсы


    An exclusive look at how Google designed its Stadia game controller

    Обзор процесса работы над джойстиком игровой приставки Google Stadia.

    How adopting a UX mindset changed the Shopify Help Center

    Robert Mousseau из Shopify рассказывает об улучшении интерфейса раздела помощи. Какие исследования они проводили и как описывали персонажей и Jobs to Be Done.

    Битва за доли процента — как Альфа-Банк растит конверсию своего сайта

    Обзор подходов Альфа-Банка к оптимизации работы сайта.

    wikiHow’s Art Is Made By a Global Network of Freelancers, Primarily in the Philippines

    Рассказ про уматнейший стиль иллюстраций сайта с инструкциями wikiHow, которые стали культовым мемом. Как устроен дизайн-процесс, выдающий миллионы картинок.

    История


    The Apple Archive

    Неофициальный архив маркетинговых материалов Apple.

    Тренды


    CES 2020 и новые интерфейсы

    Выставка прорывного и уматного хайтека CES 2020 прошла 7-10 января в Лас-Вегасе. На ней традиционно обкатывают новые технологии для массовых продуктов, потом наперегонки заявляют «у нас тоже есть концепт применения этой штуки», а потом переключаются на что-то новое. Выбрал интересные устройства и направления, которые касаются дизайнеров интерфейсов: гибкие экраны (второе пришествие), умные колонки и голосовые помощники, авто, носимые устройства, умный дом и просто интересные технологии.



    Five key colors for 2020

    Цветовые тренды 2020 года от Coloro.



    Статистика рынка в 2019Q3


    Алгоритмический дизайн


    NVIDIA’s AI can put your pet’s smile on a random animal

    NVIDIA теперь меняет эмоции не только на фото людей, но и животных.

    Does Artificial Intelligence Mean Data Visualization is Dead?

    Интереснейшее обсуждение роли и будущего визуализации данных в эпоху искусственного интеллекта от IBM. Нужен ли вообще спидометр в машине с автопилотом?



    25,000 AI Photos

    Ещё одна крупная галерея реалистичных лиц, сгенерированных алгоритмами. Причём это не просто лица, а целые позы в классическом для фотостоков виде.



    Sketch2Code

    Экспериментальный сервис Microsoft делает из бумажного наброска интерфейса прототип в коде.



    Голосовые интерфейсы


    Встречаем Яндекс.Станцию Мини. Большая история маленького устройства

    Тимур Гаскаров рассказывает о создании умной колонки Яндекс.Станция Мини с точки зрения железа и интерфейса.

    Speculative Identities — Exploring the Frontiers of Visual Identity…

    Сайт анализирует айдентику в фантатических фильмах и комиксах. Они достаточно подробно разбирают вымышленные бренды Blade Runner, Terminator, Back to the Future, Alien, Robocop, Total Recall и других.




    Автомобильные интерфейсы

    Появился эмулятор для разработчиков под Android Automotive OS.

    Digital Wellbeing

    Экспериментальные приложения Google, которые мотивируют пользоваться телефоном реже.

    Craigslist only took 11 years to make its own iOS app

    Ещё один повод стебать Craigslist с дизайном интерфейса из альтернативной вселенной. Они впервые запустили мобильное приложение.

    Vertically Works

    Занятный концепт «вертикального интернета» для корейского языка (хотя и не особо практичный). История проекта от авторов.

    Для общего и профессионального развития


    image

    Daniel Rosenberg — UX Magic

    Interaction Design Foundation выпустили книгу Daniel Rosenberg «UX Magic» о семантическом методе проектирования взаимодействия.

    Люди и компании в отрасли


    FWD[1]: ONY / Брендинг цифровых продуктов

    В прошлом году мы с Митей Осадчуком взяли интервью у студии ONY, одной из лучших отечественных компаний в цифровом брендинге. Макс Орлов, Сергей Лавриненко и Андрей Потапов рассказали о своём подходе, процессе создания и поддержки айдентики, метриках и трендах. А также показали офис агентства. Спасибо Антону Резнику и команде Mediaproduction Mail.ru за шикарную работу по съёмке и монтажу.



    Clayton Christensen dies at 67 after lifetime of business, spiritual influence

    Умер Clayton Christensen, автор концепции «дилеммы инноватора» о подрывных инновациях Он также один из ключевых людей в развитии Jobs to Be Done и тесно работал с гением менеджмента Andy Grove в Intel. Хотя он не всегда угадывал движение технологий, он внёс один из самых мощных вкладов в работу как менеджеров продуктов, так и дизайнеров интерфейсов. Некролог от его хорошего друга Michael B. Horn.



    Материалы конференций


    UX & Design Events in 2020

    Каталог конференций по дизайну на 2020 год.

    All Design Conferences — A place to find UX, Tech, and Creative Events Around the World

    Ещё один каталог конференций по дизайну.



    Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.
    Райффайзенбанк
    Развеиваем мифы об IT в банках

    Комментарии 1

      0
      Design Lint: Линтинг для макетов. Находит элементы без привязанных стилей.
      В этом плагине я кое что не понимаю.
      Решил прогнать все макеты через него. Потому что выскакивают иногда цвета или шрифты не из библиотеки.

      Так вот в чем проблема. У многих элементов есть радиус закругления. Но радиус не относится к стилям. И теперь у меня по 150 ошибок на странице. Приходится их игнорировать. Или все таки закругление можно как-то «закомпонентить»?

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

      Самое читаемое