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

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

  • 17 февраля 2022

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

Лучшие продуктовые дизайн-команды в России: 2021

Зимой запустил исследование отношения к продуктовым дизайн-командам в России. Наконец-то собрал результаты. Участвовало 1427 человек. Вот, например, топ-10 по вопросу «Оффер какой компании вы бы приняли»:

  1. Яндекс
  2. Тинькофф
  3. Miro
  4. Альфа-Банк
  5. Сбер
  6. Aviasales
  7. Райффайзен
  8. Mail.ru Group / VK
  9. Ozon
  10. Avito

Теперь у каждой команды в каталоге есть динамика рейтинга — как их оценивали в разные годы. Карточки компаний будут развиваться. Результаты за 2020, 2019 и 2018 годы.

Сайт книги и курса «Паттерны дизайн-менеджмента»

Запустил обновлённый сайт всей одноимённой инициативы — это ещё и:

  • Серия мини-конференций
  • Каталог и исследования продуктовых дизайн-команд
  • Инструменты (обновлённая статья про карту компетенций с шаблонами в Google Sheets и Vectorly)

В прошлом году сделал огромный рывок, чтобы полностью перезаписать курс на русском и сделать пилот на английском, закончить все материалы для книги (редакционная вычитка и пара сотен диаграмм), ну и объединить всё это единой стилистикой и сводным сайтом. Наконец-то готово почти всё (жду первый свёрстанный вариант книги от издательства).

Я ещё отвешаю пару тонн нижайших поклонов за курс и книгу. Но пока поблагодарю за дизайн Колю Иванова — его концепция визуального стиля стала основой для всего. И агентство Pragmatica Жени Ярового — они сделали титаническую работу, связав общим дизайном сайт, курс, книгу, презентации и все остальные материалы. Я давний фанат Webflow и первую версию сайта собирал сам пару лет назад, но ребята подняли его на новый уровень.

Курс «Паттерны дизайн-менеджмента»

1 марта стартует седьмой поток моего курса о дизайн-менеджменте цифровых продуктов на Bang Bang Education.

На первых шести отучились 400 дизайн-директоров, дизайн-менеджеров, арт-директоров, ведущих дизайнеров, креативных директоров из многих отечественных (и нескольких международных) компаний: 1C, ABBYY, AIC, Альфа-Банк, Apalon, App in the Air, Arrival, Aviasales, Avito, Badoo, BBC, БКС, ВТБ, Chatfuel, Газпром, Delivery Club, Детский мир, Dodo Pizza, ДОМ.РФ, EPAM, Foodplex, inDriver, Kaspi, Klarna, Комитет, Красцветмет, Леруа Мерлен, Литрес, Луч, MacPaw, Mail.ru Group, ManyChat, М.Видео, Microsoft, Miro, Модульбанк, МТС, Okko, OneTwoTrip, Opera, Открытие, Ozon, PayPal, ПИК, ПСБ, QIWI, Qlean, Райффайзенбанк, Rambler Group, РБК, Readdle, Redmadrobot, Reg.ru, Росбанк, Россельхозбанк, Ростелеком, S7, Сбербанк, Ситимобил, Столото, Selectel, SEMrush, Skyeng, Tele2, Тинькофф, TomTom, Точка, Учи.ру, Уралхим, ЦИАН, Voximplant, Wargaming, Wrike, X5, Яндекс и многих других.

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

Получился огромный массив знаний из 37 уроков на 10 часов — 32 паттерна и 5 обзорных уроков, а также несколько инструментов-приложений к ним (помогут подниматься по уровням зрелости). Курс идёт 4 месяца. Помимо видео-лекций есть домашние задания и вебинары после каждого блока. Я постепенно добавляю шаблоны для домашних заданий, которые здорово структурируют мысли. Проверяю всё сам.

Самые вовлечённые студенты внедряли улучшения в дизайн-командах по ходу курса, так что к окончанию получили осязаемый выхлоп 🙂

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

Badge UI design exploration — Tips & tricks, usability, and use cases review

Роман Камушкен описывает виды беджей в интерфейсе и ситуации для их использования.

Online Grocery UX — 5 High-Level UX Takeaways from 1,100 Hours of Testing Leading Grocery Websites

Baymard Institute провели большое исследование интерфейсов американских сайтов доставки продуктов. Edward Scott описывает основные проблемы. Одна из заметных — выбор замены товаров, которые недоступны.

SaaS UX Benchmark — 5 Pitfalls to Avoid

Baymard Institute провели большое пользовательское исследование профессиональных облачных сервисов. Sally Collins приводит основные проблемы.

Traditional and Hybrid Category Pages

Kate Moran из Nielsen/Norman Group приводит примеры полезных и бесполезных страниц категорий товаров в интернет-магазинах.

User Onboarding: Principles and Guidelines

Памятка по процессу встречи нового пользователя от Cibin KS.

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

Rationalise it! 5 steps to introduce a new component to the design system

Андрей Сундиев описывает процесс добавления нового компонента в дизайн-систему Beamery.

Structuring your Storybook

Советы по организации живого гайдлайна в Storybook от Varun Vachhar.

Open Props — Sub-atomic styles

Фреймворк для токенов в дизайн-системах.

Design integrations for Storybook

Обзор инструментов дизайна, которые работают в связке со Storybook.

Design systems are flawed. What we can do about it with 3 facts

José Torre из Shopify размышляет на тему гибкости и роли дизайн-систем.

NextUI — Beautiful, fast and modern React UI Library

Фреймворк для дизайн-систем на React.

Wanda Design System

Дизайн-система сервиса Wonderflow.

D2Design System

Дизайн-система компании Bank Soft System. Шаблоны в Figma.

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

Katie Swindler — Life and Death Design

Rosenfeld Media выпустили книгу Katie Swindler «Life and Death Design». Она посвящена ситуациям на грани жизни и смерти, а также технологиям и интерфейсам, которые помогают в них. Выдержка из главы 1.

Why designers should remove “Hooked” from their reading list

Rubens Cantuni критикует известную книгу Nir Eyal «Hooked». Она использует психологию пользователей во вред для создания зависимостей не хуже табачной или игровой.

Autonomy, Relatedness, and Competence in UX Design

Tanner Kohler из Nielsen/Norman Group описывает три базовых потребности пользователей: автономность, родство и компетентность. Он показывает, как интерфейсы могут учитывать их.

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

Service Design: Study Guide

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

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

Figma

Готовят бету версии для iPad.

Конференция Figma Config 2022 пройдёт 10-11 мая в интернете. Можно подать свою презентацию в программу.

Плагины

  • Storybook: Готовят официальный плагин, который позволит связать компоненты в коде и дизайне.

Шаблоны

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

Статьи

  • Саша Нагорная: Композиционные компоненты. Они позволяют сильно сократить количество вариантов в дизайн-системе.

Adobe XD

Общие обновления интерфейса.

Tails

Конструктор сайтов на базе фреймворка Tailwind.

Framer Sites

Framer запустили конструктор сайтов. Планируют конкурировать с Webflow по степени гибкости и управляемости.

Minimator

Создание иллюстраций из простых линий в браузере.

CSS Gradient Generator

Генератор градиентов на CSS в разных цветовых моделях. Как он устроен.

Sketch

Просмотр компонентов в браузере и другие обновления.

CSS Polka Dot Generator

Генератор фонов в горошек в браузере.

CSS Layout Generator

Генератор сеток на CSS.

Animated Backgrounds

Коллекция анимированных фонов на CSS и JavaScript.

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

ResearchOps: Study Guide

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

Как улучшать продукт методом Fake Door

Александр Ревенок из Semrush делится опытом продуктовых экспериментов через метод «фальшивых дверей». Это функции, которые ещё не реализованы, но по интересу пользователей к которым можно предположить их востребованность.

Measuring Tech Savviness

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

Choosing Chart Types: Consider Context

Kate Moran из Nielsen/Norman Group даёт советы по выбору диаграмм для представления отчётов о пользовательских исследованиях и данных аналитики.

Completion Times and Preference for Sliders vs. Numeric Scales

Jim Lewis и Jeff Sauro изучили разницу между опросниками в виде шкалы из радио-кнопок и ползунка. Подтвердилось, что радио-кнопки проще и быстрее.

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

Uisual — Free Landing Page Templates for Startups

Коллекция простых шаблонов структуры промо-сайтов с кодом на HTML и CSS.

Vizzu

Каталог скриптов для простой визуализации данных на JavaScript.

Modern Fluid Typography Using CSS Clamp

Adrian Bece показывает, как реализовать гибкую адаптивную типографику с помощью CSS-функции clamp.

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

  • Реализация «глиноморфизма» на CSS.
  • Эффект плавной смены цветов на фоне при прокрутке. Ещё один подход.
  • Коллекция экспериментов, реализующих сетку Мондриана на CSS.
  • Как создавать эффектную анимацию движущихся частиц на JavaScript.
  • Эффектные анимированные фоны с 3D-текстурами на JavaScript.

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

The State of UX Maturity — Data from Our Self-Assessment Quiz

?Kate Moran проанализировала оценку зрелости дизайна нескольких тысяч компаний по модели Nielsen/Norman Group. В прошлом году они выпустили инструмент самостоятельной оценки зрелости, которым воспользовались 5 371 человек. Основная часть находится на 3 и 4 уровне из 6, хотя это специфика выборки.

Designing the Designer Role

Adam Doti размышляет о развитии роли дизайнера за 10 лет в Salesforce. Мини-сайт с её описанием.

Design at Gusto — Keeping Collaboration and Customers at the Core

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

CX Centric Customer Centricity Assessment Tool

Модель зрелости CX от компании CX Centric.

Кейсы

Зачем умной колонке часы со стрелками и как объединить три устройства в одном

Как делали умную колонку с часами SberBox Time.

История

Why Are Hyperlinks Blue

Elise Blanchard продолжает изучать предысторию выбора синего цвета для ссылок в вебе. Она пообщалась с Ben Schneiderman и составила достаточно подробную хронологию событий.

Тренды

CES 2022

Ежегодная выставка технологических чудес и экспериментов CES 2022 в этом году прошла 5-7 января в Лас-Вегасе и интернете. Обычно здесь показывают кучу прорывной крутячки. Правда, из-за дефицита чипов многие крупные компании пропустили участие даже в онлайне. Но кой-чо занятное было.

Последние годы было много разной интересной дичи с гибкими экранами. Но не в этот раз — разве что 17″ планшет от ASUS с кучей степеней свободы. Ну и ещё один эксперимент со вторым экраном у клавиатуры ноутбука у Lenovo.

Компьютерная техника

Стандарт Evo PCs от Intel будет продвигать гибкие экраны и интеграцию Windows с iPhone.

Google будет улучшать интеграцию Windows и Android.

Лютый концепт рабочей станции от Razer.

Чудеса гибкости в 55″ мониторе Samsung.

Атипичный почти квадратный монитор LG.

Домашний игровой сервер Alienware.

Умные очки

Новые кино-очки без телевизора Nxtwear Air.

Распознающие текст и лица очки MyEye Pro от OrCam помогают людям с проблемным зрением.

Носимые устройства

Био-сенсоры Abbott.

Razer всё-таки сделали свою киберпанковскую маску с усилителем голоса. Это было непросто.

Авто

BMW с кузовом изменяемого цвета.

Концепт-кар Cadillac с огромным экраном.

Amazon будет встраивать свои экраны на базе Fire TV в машины. Например, огромный для задних сидений BMW.

ТВ

Пульт Samsung заряжается от радиоволн.

Samsung позволит смотреть и покупать NFT через телик. Ну и встроит игровой стриминг Stadia и GeForce Now.

Куча изогнутых концепций от LG.

Проектор Samsung с автофокусом и подстройкой.

Умный дом

Весы Withings как швейцарский нож.

Кран Moen с управлением жестами.

Много ванно-банных приблуд от Kohler.

Домашний робот-помощник Labrador “Retriever”.

И экспериментальные зубные щётки Oral-B и Y-Brush.

Разная разорвишка

Массажёр для тех, кто много играет.

Окрашиватель волос L’Oréal.

Принтер для временных цветных татуировок Prinker M.

Умная гитара Samsung.

Мышка/флешка XPG.

Не знаю, будет ли с такими показателями весенняя Mobile World Congress, но, мало ли.

The five Levels of Hype

Johannes Klingebiel описывает 5 видов технологического хайпа, когда желаемое выдают за действительное.

The tech industry’s accessibility report card for 2021

Обзор новых технологий в устройствах и операционных системах крупнейших технологических компаний, которые поддерживают accessibility.

Spatial Web Browsing

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

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

The Future of Behavioral Science in Business: Part 1

Интересная модель развития профессиональных ролей и специализаций от Florent Buisson.

Designer Slack Communities

Каталог дизайн-сообществ в Slack.

Questions to ask when interviewing for a design job

Michael McWatters предлагает набор вопросов для дизайнера на собеседовании, которые стоит задать руководителю дизайна.

The Art of Storytelling for Case Studies

Советы Ingrid Elias из Indeed по структуре описания проекта в портфолио.

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

The role of delight and difference in UX at Shopify

Цитаты CEO Shopify о важности дизайна и его роли в компании.

Подпишитесь на дайджест в 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.