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

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

  • 4 ноября, 2020

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

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

Fintech Design Conf 2020

12 ноября мы проводим конференцию Fintech Design Conf 2020 в онлайне. Дизайн-команды современных банков и финансовых сервисов покажут, что интересного происходит в отрасли, и расскажут, куда движется индустрия. N26, Тинькофф Инвестиции, Альфа-Банк, Райффайзенбанк, Home Credit Bank, Сбер, Открытие Брокер, БКС, AIC и Контур поговорят о дизайн-системах, бренде, пользовательских исследованиях и других аспектах современной продуктовой работы.

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

SaaSFrame — Inspiration for SaaS Marketers & Product Designers

Коллекция маркетинговых паттернов: промо-сайты, промо-письма, публикации в блогах и целые цепочки встречи нового пользователя.

7 UX Best Practices for Livestream Chat

Советы по оптимизации интерфейса чата в онлайн-трансляциях от Ryan H. из Stream.

Fresh Eyes Audits — Your key to better UX design

Jen Enrique из Slack описывает свой метод экспертной оценки «аудит свежим взглядом».

The 5-pass reduction wireframing — A minimalist UX technique

Joseph Russell описывает свой подход к упрощению интерфейсов. Это итеративный процесс от быстрых набросков до серии упражнений по расчистке экранов и самого сценария.

The rise of the accessibility statement

Amy Ackerman анализирует заявления продуктовых компаний о поддержке accessibility. Это всё более востребованные принципы, которые они описывают на своих сайтах.

Always Use Thumbnails to Represent Additional Product Images (76% of Mobile Sites Don’t)

Kathryn Totz из Baymard рассказывает, почему важно использовать маленькие изображения дополнительных фотографий товара в интернет-магазинах, а не просто навигационные элементы.

Writing for global audiences

Susanna Zaraysky из Google даёт советы по упрощению интерфейсных текстов. Так они лучше подойдут для локализации.

Tap to Navigate. How to systematize interactive labels for maps

Linzi Berry из Lyft даёт рекомендации по дизайну индикаторов и объектов на картах.

State-Switch Controls — The Infamous Case of the “Mute” Button

Raluca Budiu из Nielsen/Norman Group разбирает одну из самых главных интерфейсных коллизий — единую кнопку, которая обозначает текущее состояние и одновременно меняет его.

Battle of the Challenger Banks: Can you block my Card?

Erenia N. Kontolatou из Scientia Consulting сравнивает процесс блокировки карты в европейских необанках.

The trouble with app release notes

Jack Horton из Shopify рассказывает о создании гайдлайнов сопроводительных текстов для обновлений в магазинах приложений.

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

Naming Tokens in Design Systems

Мощнейший разбор принципов именования токенов от Nathan Curtis. Все возможные варианты и подходы в одной статье.

Шаблоны iPhone 12

13 октября Apple презентовали iPhone 12. Michal Malewicz анализирует фрагментацию разрешений и плотностей экрана, которая усилилась в iOS с выходом всех возможных вариаций телефона. Даже высота статусной строки скачет между 44, 47 и 48 пикселями. Теперь это не сильно лучше зоопарка в Android.

Зато как всегда полно полезных шаблонов от сообщества:

  • iPhone 12 Pro для Figma, Photoshop и Sketch от lstore (ещё).
  • Все модели от lstore ($24).
  • iPhone 12 для Sketch и Photoshop от Дмитрия Коваленко. Отдельно синий и зелёный.
  • iPhone 12 и iPhone 12 Pro в руке для Sketch и Photoshop от Pierre Borodin.
  • iPhone 12 Pro для Photoshop от Anthony Boyd. Ещё один, второй и третий.
  • iPhone 12 Pro для After Effects в 3D от Majo Puterka.
  • iPhone 12 Pro для Photoshop от Faridul Haque.
  • iPhone всех версий (обычный, Mini, Pro, Pro Max) для Adobe XD, Figma, Photoshop и Sketch от Vijay Verma.
  • iPhone 12 и iPhone 12 Pro для Photoshop от Pixeden.
  • iPhone 12 Pro для Cinema 4D и Photoshop от Michael Martinho.
  • iPhone 12 Pro для Adobe XD от Max Rudberg.
  • iPhone 12 и iPhone 12 Pro для Photoshop от Asylab.
  • iPhone 12 Pro для Figma и Sketch от Przemyslaw Baraniak.

Шаблоны для iOS 14 уже были в прошлых выпусках. Но вот один масштабный для Adobe XD, Figma и Sketch от Great Simple Studio.

Absolutely FAB

Дизайнеры Google рассказывают о том, как появилась фирменная плавающая кнопка в Material Design. Она стала одним из самых ярких элементов интерфейса, усилившим этот внутренний бренд.

Reimagining Design Systems at Spotify

Gerrit Kaiser, Marina Posniak и Shaun Bent рассказывают об истории развития дизайн-систем в Spotify и текущем подходе Encore.

Responsive Grid Design — Ultimate Guide

Неплохая памятка по сеткам и их адаптивности от Nitish Khagwal.

The good line-height

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

Measuring the Value of Design Systems

Maya Hampton из REI рассуждает о ценности дизайн-систем. Хотя итоговый список не нов, сами рассуждения о сложности оценки годные.

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

Emulate vision deficiencies in DevTools

Chrome научился эмулировать режим нарушения цветового восприятия.

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

Drills and Milkshakes — Say Yes to the Mess

Jim Kalbach объясняет обложку своей книги о Jobs to Be Done: на ней и трубочка для молочного коктейля (отсылка к концепции Clayton Christensen), и сверло дрели (концепция Theodore Levitt). Это две школы мысли — работа как прогресс и как процесс. Они работают на разных уровнях.

Stephen Anderson & Karl Fast — Figure It Out

Rosenfeld Media выпустили книгиу Stephen Anderson & Karl Fast «Figure It Out» о концептуальном проектировании. A List Apart публикуют выдержку из главы 8. UXmatters — выдержку из главы 11.

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

Adobe MAX 2020

В этом году титульная презентация новых продуктов и экспериментов Adobe MAX 2020 прошла с 20 по 22 октября в интернете. Килотонна полезных выступлений от создателей инструментов и просто дизайнеров. Вот что там анонсировали:

XD

Октябрьское обновление. Появилась совместная работа над макетом, 3D-трансформация элементов, общая работа над дизайн-системой через библиотеки Creative Cloud, вложенные компоненты и их состояния, интеграция с Visual Studio Code. Они также создали формат DSP (Design Systems Package) для стандартного описания дизайн-систем.

Бонус: как проектировали новые библиотеки компонентов и стилей.

Photoshop

Замена неба на фото с цветокоррекцией окружения. Нейросетевые фильтры на базе платформы Sensei: перенос стиля, расцветка чёрно-белых фото, увеличение элементов маленького изображения с улучшением качества, туман, мощные трансформации портрета (поменять эмоцию, возраст, поворот головы, очистить недочёты). Улучшенное распознавание шрифтов. Развиваются контенто-зависимый выбор части изображения, обтравки и заливки.

Illustrator

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

Illustrator для iPad

Доступен для всех. Как его делали.

InDesign

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

Fresco для iPhone

Инструмент для иллюстраторов теперь и на телефоне. В основной версии также много улучшений.

After Effects

Доработанный режим работы с 3D.

Aero 2.0

Бета-версия инструмента для дизайна в дополненной реальности.

Creative Cloud

Можно вести стриминг работы над макетом или обсуждать их командой в Photoshop, Illustrator и Fresco. Поддержка большего количества документов: видео, модели и т.п. Версионирование в Photoshop.

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

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

Компания тоже транслирует посыл, что инструменты убирают рутину, освобождая время для креатива. Я много раз отмечал, что Adobe — главная компания, которая внедряет идеи алгоритмического дизайна на практике. И делает вчерашнюю магию привычным повседневным инструментом.

Figma

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

Плагины

  • Eve Tabler: Основа для таблицы с нужным количеством строк и столбцов. Данные можно импортировать из Google Sheets.
  • Экспорт макетов в код на Vue.js. Памятка по использованию.

Anima 4

Плагин для Adobe XD, Figma и Sketch научился генерировать код на React. Больше интерактива в прототипах, быстрое сравнение кода и дизайна, обсуждение с командой.

Framer

Памятка Nefe Emadamerho-Atori по работе с анимационной библиотекой Framer Motion.

Sketch 69

Переменные для цветов, обновлённый просмотрщик компонентов и другие обновления интерфейса.

Coded Mails

Пачка шаблонов адаптивных писем рассылки.

SVG Favicon Maker

Простой генератор favicon для браузера в SVG.

Cavalry

Новый инструмент 2D анимации. Интересен прежде всего за счёт процедурной графики и возможности работы с реальными данными.

Justinmind 9

Вышла новая версия старого инструмента. Со временем он стал полноценным редактором интерфейсов, хотя начинал как сервис для прототипирования.

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

Scaling research at Dropbox

Шикарнейший рассказ Christopher Nash о демократизации пользовательских исследований в Dropbox. Как они обучают и вовлекают дизайнеров и менеджеров продуктов, освобождая время профессиональным исследователям для стратегических проектов.

Зачем Авито «облачные» UX-исследователи и как с ними работать

Михаил Правдин из Авито рассказывает о новой модели работы с UX-исследователями, которую внедряет компания. Это множество фрилансеров, готовых быстро подхватить проект.

Condens — Supercharge your UX research analysis

Сервис для организации базы знаний и инсайтов из пользовательских исследований. Статья от со-основателя.

Research Repositories for Tracking UX Research and Growing Your ResearchOps

Kara Pernice из Nielsen/Norman Group даёт советы по созданию базы знаний и инсайтов из пользовательских исследований.

Recruiting Backup Participants (aka “Floaters”) in User Research

Kara Pernice из Nielsen/Norman Group описывает разные подходы подстраховки на случай, если респондент в UX-исследовании не пришёл.

Revisiting the Evidence for the Left-Side Bias in Rating Scales

Jim Lewis и Jeff Sauro разбираются: есть ли у пользователей склонность выбирать варианты ответа слева в шкале опроса? Практически нет.

Можно ли использовать эмоции как метрику?

Вадим Шлячков анализирует научные исследования на тему исследования эмоций пользователя. В реальности оценивать их сложно.

“Speed dating” с пользователями

Ольга Ржанова рассказывает о регулярном дне общения с пользователями в Яндекс.Маркете. Исследователи раз в неделю приводят несколько респондентов, а дизайнеры показывают им прототипы своих решений.

Remote UX Research: Advantages and Disadvantages, Part 2

Jim Ross разбирает минусы удалённых пользовательских исследований.

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

CSS Variables 101

Подробная памятка Ahmad Shadeed по переменным в CSS, самой простой реализации токенов в дизайн-системах.

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

  •  Коллекция 3D-трансформаций на CSS.
  • Коллекция фоновых паттернов на чистом CSS.

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

Skill Mapping — A Digital Template for Remote Teams

Простой шаблон карты компетенций в виде лепестковой диаграммы от Nielsen/Norman Group. Шаблон.

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

Как работать распределённым дизайн-командам

Продолжаю пополнять коллекцию материалов.

12+ Icebreakers to kick off your next zoom meeting

Jeff Gothelf собрал 12 упражнений-разминок для удалённых рабочих сессий.

Design Shopping — Get A Faster Client Buy-In Through A Guided Design Showcase

Kelly Schummer рассказывает о «дизайн-шопинге» — формате рабочих сессий, в которых анализируются сайты конкурентов.

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

Medium

Ребрендинг Medium от агентства Collins. Кажется, это кандидат на главный провал года — сделана маркетинговая коммуникация, а не цифровой продукт (страницы о компании выглядят круто, но пользователи проводят время не там). Подробнее от заказчика. Вся работа мастера веб-типографики Marcin Wichary исковеркана.

Тренды

My chatbot is dead — Why yours should probably be too

Adrian Zumbrunnen закрыл свой эксперимент личного сайта в виде чат-бота. В 2017 году он стал одной из верхних точек хайпа вокруг темы, которая оказалась сильно перегретой.

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

Adobe MAX 2020

На недавней конференции Adobe MAX 2020 традиционно показали пачку экспериментов с Adobe Sensei. Правда, в этот раз было жиденько — видимо, Adobe тоже видят, что тема алгоритмического дизайна затухает.

2D Plus

Помощь в создании двухмерных иллюстраций, на которых присутствует глубина и перспектива. Позволяет автоматически расставить объекты по удалённости, добавить освещение и тени.

Comic Blast

Автоматизация создания простых комиксов. Делает сетку сцен и фразы героев на основе текстового сценария, помогает в оформлении. Правда, в комментариях к видео профессиональные художники комиксов разнесли концепт, как Танос — половину вселенной.

Typographic Brushes

Моментально создаёт шрифт на основе нескольких штрихов кистью в Adobe Fresco.

Sharp Shot

Улучшает резкость кадров в видео.

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

UI Coach — UI Design Challenge Generator

Генератор упражнений для дизайнеров. Например, быстро нарисовать определённое приложение в такой-то стилистике.

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

DesignOps Summit 2020

Конференция DesignOps Summit прошла 21-23 октября в онлайне. Обзор выступлений от Jose Coronado. Вторая и третья части. В этом году она посвящена устойчивости команд и дизайнеров в условиях полной удалёнки, так что темы презентаций достаточно общие.

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

Юрий Ветров

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

Подписаться на рассылку

Вы будете получать свежий дайджест раз в месяц

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

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

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

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

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

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

  • 12 октября, 2020
View Post

Унифицированные иллюстрации

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

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

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

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

  • 5 августа, 2020
Дайджест продуктового дизайна, июнь 2020
View Post

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

  • 6 июля, 2020
Дайджест продуктового дизайна, май 2020
View Post

Дайджест продуктового дизайна, май 2020 (№100)

  • 9 июня, 2020

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Подписаться на рассылку

Вы будете получать свежий дайджест раз в месяц

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

Input your search keywords and press Enter.