Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге
Юрий Ветров об интерфейсах
Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге

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

  • 15 ноября 2021

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

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

Исследование: Отношение к продуктовым дизайн-командам в России

Четвёртый год я провожу исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные? С прошлого года результаты стали открытыми (результаты за 2020, 2019 и 2018).

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

Интенсив «Паттерны дизайн-менеджмента» для Smashing Magazine

В начале декабря делаю эксперимент — интенсив по дизайн-менеджменту для Smashing Magazine. Это 5-дневная версия моего курса и книги «Паттерны дизайн-менеджмента» — по 2,5 часа вечером с 1 по 15 декабря. Много теории и практики теперь и на английском языке.

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

Building a multi-select component

Adam Argyle показывает, как сделать адаптивный список с множественным выбором, органично работающий на компьютерах и сенсорных устройствах.

Tracking designs using watermarks

Riya Chakravarty показывает простой способ напомнить коллегам о том, что вы показываете сырую версию дизайна — водяные знаки на макетах.

Devices that require no user training scale well

Creative Navy сделали обзор методов, помогающих упростить первое использование интерфейсов физических устройств (и не только).

Buttons vs. Links

Eric Eggert подсвечивает проблемы в accessibility, если в интерфейсе кнопки и ссылки используются друг вместо друга.

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

Material Design 3

На осенней конференции Android Developer Summit опубликовали много материалов по работе с Material Design 3 (на I/O его называли Material You). Помимо заметного изменения стилистики, в анонсе есть неплохой обзор важных частей гайдлайнов:

Темы оформления с динамическим цветом — самая заметная часть Android 12. Причём можно создавать и более сложные темы. Команда выпустила отличный плагин для Figma, помогающий создавать их.

Теперь всё построено на дизайн-токенах.

Работа с гибкими экранами описана ещё лучше.

Доступен мощный UI Kit для Figma.

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

“Dark Mode” vs “Inverted”

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

Designing something new with the Atlassian Design System

Deborah Lindberg рассказывает о регулярных упражнения дизайнеров Atlassian, когда они пробуют создать на дизайн-системе компании известные продукты на рынке. Это позволяет проверить её масштабируемость и отловить потенциальные проблемы.

Four Principles for the Future of Design

Jennifer Bost и Anna Gregory рассказывают о новых принципах дизайна Microsoft. Они дают пару советов на тему внедрения принципов в рабочие практики.

ЦФТ Elephas

Дизайн-система отечественной компании Центр Финансовых Технологий.

Nord Design System

Дизайн-система компании Nord Health.

Fluent Design

Sunmin Chung и Rachel Romano бегло рассказали, как Windows 11 и Office обновились под новые гайдлайны.

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

Hocus :focus

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

Accessibility Maze

Браузерная игра, в которой наглядно показывают принципы accessibility.

Respecting Users’ Motion Preferences

Michelle Barker разбирает способы уменьшить объём анимации в вебе для людей с ограниченными возможностями.

Информационная архитектура, концептуальное проектирование, контент-стратегия

How to Handle Category Outliers in Your IA

Page Laubheimer из Nielsen/Norman Group показывает способы организации товаров в интернет-магазинах, которые не укладываются в основные категории.

Design Stories and Truth

Советы Owen Schoppe по моделированию и описанию видению будущего взаимодействия с продуктом. Это где-то рядом со спекулятивным дизайном, но в контексте интерфейса.

Storyteller Tactics — A Card Deck of Story Recipes by Charles Burdett

Набор карт-подсказок для сторителлинга от Charles Burdett.

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

Figma

Из беты вышли сразу две мощные возможности: ветки в версиях и интерактивные компоненты.

Также анонсировали тарифы FigJam, а создание плагинов и виджетов доступно для всех.

Плагины

  • Auto Layout Grids: Совмещает плюсы работы компоновочной сетки и auto layout.
  • Simple Sort: Помогает рассортировать варианты компонентов.

Шаблоны

  • Chad Bergman: Описание добавок в дизайн-систему от дизайнеров компании.
  • Организационная структура в FigJam.

Статьи

  • Microsoft Teams: Структура дизайн-системы. Они постарались максимально отзеркалировать структуру компонентов в коде.
  • Gusto: Пример обучающих видео для дизайнеров компании.

Cleanup.pictures

Простой онлайн-инструмент позволяет моментально убрать объект с фотографии. Просто выделяете его и он сам отрисовывает всё.

Mesh Gradient Editor

Генератор mesh-градиентов в браузере. Их можно настраивать.

Adobe MAX 2021

Ежегодная мега-конференция Adobe MAX 2021 прошла 26-28 октября в онлайне. Было несколько крупных и мелких анонсов:

Photoshop и Illustrator в браузере

Уже могут работать в браузере. Пока с базовыми возможностями, но их будут развивать. Есть также гостевой доступ с просмотром и комментированием макетов.

Creative Cloud Canvas

Аналог Miro.

Creative Cloud Spaces

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

XD

Подзатих, новостей в последнее время мало. Появилась связка с Lottie, проигрывание видео и публикация на Behance.

Lorem.space

Сайт даёт картинки для макетов — обложки фильмов, карточки товаров и т.п. Их можно получить по простой ссылке.

UXPin

Обзор функции Merge от Matthew Talebi.

Spectrum

Генератор цветовых палитр, которые можно быстро применить к любой части макета, включая иллюстрации и картинки. Плагин для Figma.

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

How to Build a compelling UX Research Roadmap

Советы Nora Pekker из IBM по составлению roadmap UX-исследований в продукте или команде.

How Many Participants for a UX Interview?

Maria Rosala из Nielsen/Norman Group даёт ориентиры по выборке респондентов для пользовательских интервью. Она описывает разные ситуации, которые влияют на размер.

Context Methods: Study Guide

Nielsen/Norman Group сделали структурированную подборку своих статей о методах полевых и контекстных исследований.

Remote Usability Testing: Study Guide

Nielsen/Norman Group сделали структурированную подборку своих статей об удалённом юзабилити-тестировании.

How to Sell UX Research with Two Simple Questions

Sophia V. Prater описывает процесс дизайна и исследований ORCA (Objects, Relationships, CTAs, Attributes) в рамках концепции Object-Oriented UX.

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

Checkboxland — Render anything as HTML checkboxes

Безумный эксперимент Bryan Braun, в котором он делает картинки из чекбоксов, а потом анимирует их. Как и зачем сделал его. Другой энтузиаст Andrew Healey сделал Doom.

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

  • Atropos: JavaScript-библиотека для эффектов параллакса при наведении курсора.
  • Как Facebook меняет радиус скругления в зависимости от разрешения экрана.
  • Более мягкая и органичная тень в интерфейсе через совмещение двух источников освещения: прямого и рассеянного.

Метрики и ROI

Three Ways to Measure a User’s Prior Experience

Jeff Sauro и Jim Lewis показывают, как измерить прошлый опыт работы пользователя с продуктом. Это комбинация срока использования, частоты и процента востребованных ключевых функций.

Evolution of the UX-Lite

Jim Lewis и Jeff Sauro рассказывают о предыстории появления их интерфейсной метрики UX-Lite. Как появились SUS, TAM и UMUX-Lite повлияли на неё.

How to Estimate SUS Using the UX-Lite

Jim Lewis и Jeff Sauro показывают, как предсказывать значения метрики SUS на основе их новой метрики UX-Lite, которая сильно проще.

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

How to Write a Mission Statement for a UX Team — A Case Study in Design Operations

Kate Kaplan из Nielsen/Norman Group описывает формат воркшопа по описанию миссии дизайн-команды.

Driving User Centricity — Remotely Building an Experience Vision

Liz Blanchard рассказывает о работе над видением будущего для интерфейсов RedHat. Формат описания и воркшопы, на которых его генерировали.

UX-Maturity Stage 3: Emergent

Kate Kaplan описывает третий уровень зрелости дизайна в фреймворке Nielsen/Norman Group.

How we’re creating an outcome led culture (and why it matters)

Ben Brewer из сети британских магазинов Sainsbury’s рассказывает о подходе к продуктовой работе, ориентированном на конкретный выхлоп.

Designing a remote UX mentorship program

Sharon Moorhouse рассказывает об удалённой менторской программе в Shopify. Как запустили её и как она устроена.

Кейсы

The story of Slack Clips — Prototyping the path to audio and video messages

Anna Niess, Pedro Carmo и Johnny Rodgers рассказывают о проектировании и поэтапном запуске новой функции Slack коротких аудио- и видео-клипов. Они прошли много итераций и показывают, как менялось взаимодействие пользователей.

Брендинг цифровых продуктов

A 10-step approach to inclusive branding, using the BBC as an example

Gareth Ford Williams рассказывает о комплексной задаче оптимизации брендинга для accessibility в рамках недавней эволюции BBC. Он вызвал много насмешек (мол, увеличили расстояние между квадратиками за десятки миллионов фунтов), но это был целенаправленный тюнинг всех аспектов для облегчения восприятия.

Meta

Новый бренд материнской компании Facebook от внутренней студии Creative X.

Building a brand identity for the world’s largest community

Новая айдентика Facebook от внутренней студии Creative X.

Working for Exposure. A new visual identity for a visual storytelling company

Ребрендинг сервиса для создания мини-сайтов Exposure от американского агентства Smith & Diction.

VK

Ребрендинг Mail.ru Group в VK от британской Saffron Branding и внутренней команды.

Kion

Новая айдентика облачного сервиса Kion от американского агентства Focus Lab.

Heyday

Новая айдентика productivity-сервиса Heyday от американского агентства Order.

Тренды

Behold, the Book Blob

R.E. Hawley анализирует занятный тренд в дизайне книг — массу однообразных обложек, состоящих из абстрактных цветных пятен.

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

Artflow

Генератор аватаров по словесному описанию с помощью алгоритмического дизайна. Можно смешать разных персонажей и жанры.

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

Ryan Rumsey — Business Thinking for Designers

Перевод на русский онлайн-книги Ryan Rumsey «Business Thinking for Designers» от InVision.

Marvel Character or Font? Quiz

Уматный тест, в котором нужно угадать по названию: это шрифт или персонаж из вселенной Marvel?

We Analyzed 425,909 Favicons

Группа энтузиастов проанализировала 425 909 фавиконок из интернета. Популярные форматы, размеры, цвета и всё такое.

How to build a better product using Object-Oriented UX: Part Two

Nikki Davis из Athena Health описывает принципы объектно-ориентированного подхода к проектированию интерфейсов.

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

Inside Designing Microsoft Teams

Блог дизайн-команды Microsoft Teams.

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

Юрий Ветров

Директор по бренду и дизайну Muse Group, ранее — Райффайзен Банка и Mail.ru Group. Я руковожу несколькими командами, которые отвечают за дизайн бренда и интерфейсов. Веду блог и курс о дизайн-менеджменте, делаю дайджесты, со-организовывал Fintech Design Conf, Mail Design Conf и московский Dribbble Meetup, Russian Design Cup, читаю лекции в Британке, курирую курс Future London Academy в Лондоне, публикуюсь на Smashing Magazine, UXmatters и UX Collective. Подробнее обо мне.

Другие статьи по теме
Дайджест продуктового дизайна, февраль 2023
View Post
  • Дайджест

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

  • Юрий Ветров
  • 10 марта 2023
Дайджест продуктового дизайна, январь 2023
View Post
  • Дайджест

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

  • Юрий Ветров
  • 19 февраля 2023
View Post
  • Дайджест

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

  • Юрий Ветров
  • 22 января 2023
Дайджест продуктового дизайна, ноябрь 2022
View Post
  • Дайджест

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

  • Юрий Ветров
  • 9 декабря 2022
Дайджест продуктового дизайна, октябрь 2022
View Post
  • Дайджест

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

  • Юрий Ветров
  • 16 ноября 2022
Дайджест продуктового дизайна, сентябрь 2022
View Post
  • Дайджест

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

  • Юрий Ветров
  • 16 октября 2022
Дайджест продуктового дизайна, август 2022
View Post
  • Дайджест

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

  • Юрий Ветров
  • 1 сентября 2022
Дайджест продуктового дизайна, июль 2022
View Post
  • Дайджест

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

  • Юрий Ветров
  • 8 августа 2022

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Юрий Ветров об интерфейсах
Дизайн-менеджмент цифровых продуктов, © 2007-2018

Input your search keywords and press Enter.