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

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

  • 5 августа 2020

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

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

Experience is in the details: analyzing the UX of streaming services

Joseph Mueller проанализировал интерфейс мобильного видео-плеера Netflix, Hulu и YouTube. Самые интересные решения у Hulu — они здорово понимают контекст использования.

5 Ways to Integrate Accessible Design into Fast-paced Projects

Caterina Falleni и Mike Shebanek дают серию советов по поддержке accessibility.

10 design principles for delightful CLIs

Michael Benton и Natalie Johnson из Atlassian рассказывают о запуске продукта Forge и дают советы по проектированию интерфейса командной строки.

Look Who’s Talking

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

User Onboarding: Is HEY Email Worth It?

Разбор процесса встречи нового пользователя в почтовом клиенте Hey от сайта Growth Design.

The Secure UX Curriculum

Caroline Sinders и Natalie Cadranel собрали чеклист по учёту безопасности и приватности пользователей в интерфейсе и методах работы. Сам чеклист.

Designing Mobile Tables

Советы Steven Hoober по адаптации таблиц для мобильных.

The Love-at-First-Sight Gaze Pattern on Search-Results Pages

Feifei Liu из Nielsen/Norman Group рассказывает о паттерне «любовь с первого взгляда» в результатах поиска — пользователь выбирает первый результат.

Privacy Policies and Terms of Use — 5 Common Mistakes

Therese Fessenden из Nielsen/Norman Group разбирает лучшие практики для представления сложных и трудночитаемых правил использования сервисов.

Inspired Design Decisions With Emmett McBain — Art Direction As Social Equity

Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе. В одиннадцатом выпуске разбирает работы Emmett McBain.

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

Toolabs DSM Plugin for Figma

Плагин Toolabs для Figma позволяет управлять токенами дизайн-системы: цвета, шрифты, отступы, анимация, графика и многое другое. Можно переключать темы оформления, есть состояния компонентов. Анонс.

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

A Complete Guide to Dark Mode on the Web

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

Лучшая в мире переключалка (в правом верхнем углу).

Taming Chaos: Our Design System Governance at Scale

Henry Daggett из Societe Generale рассказывает о модели консулов для развития дизайн-системы. Это 4 человека из разных команд, которые регулярно ротируются. Процесс добавления нового компонента в таком формате: как любой участник сообщества в компании может сделать это.

Adobe Spectrum React Libraries

Adobe опубликовали фреймворк на React для своей дизайн-системы Spectrum.

Storybook Controls

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

How To Use Styled-Components In React

Базовая инструкция Adebiyi Adedotun Lukman по использованию стилизованных компонентов на React.

iOS 14

  • Шаблоны для iOS 14 и iPadOS 14 от Joey Banks.

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

Caterina Falleni — Accessible by Design

Книга Caterina Falleni «Accessible by Design» выйдет в начале 2021 года.

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

How to Run a Journey-Mapping Workshop — A Step-by-Step Guide

Пошаговая методичка Kate Kaplan из Nielsen/Norman Group по проведению рабочих сессий для создания Customer Journey Map. Сбор вводных, текущее состояние продукта и видение будущего.

Service Blueprinting — A Digital Template for Remote Teams

Sarah Gibbons из Nielsen/Norman Group предлагает шаблон для Service Blueprint, который поможет оптимизировать работу компании во всех точках взаимодействия с клиентом. Сам шаблон.

Редач — первый подкаст для UX-писателей на русском

Отечественный подкаст для UX-писателей. Связанный Телеграм-канал.

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

Бета Sketch 68

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

Adobe XD

Июльское обновление. Оптимизация интерфейса.

Теперь IBM будет активно предлагать клиентам Creative Cloud и Adobe XD в частности — возможно, его доля подрастёт.

Squircley

Простой инструмент для генерации аккуратных квадрокругов в SVG.

Figma Config Europe

17 сентября пройдёт вторая титульная конференция Figma по дизайну в онлайне.

https://videos.ctfassets.net/dpzkes1ia5rl/jno7HMHJFraAj5hkqXDKO/0a1c9f344c7ede8f7f839ece425ea314/config-logo.mp4

Плагины

  • Breakpoints: создает адаптивный дизайн (макет продолжает работать и без плагина). Статья-инструкция.

Шаблоны

  • Templatery: презентации в Figma.

Статьи

  • Kevin Kwok подробно анализирует причины успеха Figma. Инструмент быстро становится платформой и использует сетевые эффекты по полной.
  • Советы по использованию Figma в серии простых видео.

3D Hands gestures

Иллюстрации рук в 3D. Есть шаблоны для всех популярных инструментов дизайна.

Zero Divs

Экспериментальный простой инструмент дизайна, выдающий CSS-код без вложенных <div>.

Plasmic — The visual UI builder for React

Визуальный редактор компонентов на React. Можно импортировать их готовый код и подкрутить или наоборот — превратить в код макеты из Sketch и Figma. Анонс от авторов.

Uicard — A Pocket Friendly Wireframing Ruler by Jan Haaland

Металлический шаблон для скетчей мобильных интерфейсов. Как его делали.

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

72% of participants are ready to go back to face-to-face research

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

Converting Rating Scales to 0–100 Points

Jim Lewis и Jeff Sauro показывают, как конвертировать любую шкалу опроса типа SUS в значение от 0 до 100. Оно, как правило, проще для общения внутри продуктовой команды.

Turning Complex Data into Compelling Stories — A 5-Step Process

Rachel Krause из Nielsen/Norman Group предлагает формат отчёта о пользовательском исследовании, который продуктовая команда сможет прочитать и понять.

Яндекс Взгляд + Яндекс Толока — Простой и быстрый способ провести UX-тестирование

Яндекс Взгляд сделал интерфейс для быстрого удалённого юзабилити-тестирования простых прототипов на аудитории Яндекс Толоки. Дёшево (999 ₽) и быстро, но к аудитории Толоки всегда были вопросы.

Are Sliders Better than Numbered Scales?

Jim Lewis и Jeff Sauro изучили вопрос: можно ли использовать ползунки вместо набора радиокнопок в стандартизированных опросах от 1 до N. Это не смертельно, но не даёт сильного улучшения данных и сложнее для пользователей.

Are Star Ratings Better Than Numbered Scales?

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

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

Modern CSS Techniques To Improve Legibility

Обзор приёмов CSS для улучшения читабельности текстов в вебе от Edoardo Cavazza. Иерархия размеров, высота и длина строки, цветовой контраст.

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

  • Эффектная анимация наведения курсора.

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

The Growing Practice of IBM DesignOps

Дизайн-менеджеры IBM рассказывают о своих зонах ответственности. На чём они фокусируются и как измеряют успех.

Justin Dauer — Creative Culture: Human-Centered Interaction, Design, & Inspiration

Вышло второе издание книги Justin Dauer «Creative Culture» о формировании креативной культуры в компании. Выдержка из главы 5.

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

Collaborative design research

Matthew Ström активно вовлекает недизайнеров в обсуждение дизайна. Ему нужен был способ сделать их комментарии конструктивными и он использует опросник в виде нескольких шкал: каким прилагательным лучше описать макет.

Кейсы

The Future Vision of Microsoft 365

Jason Friedman из MS Office рассказывает о новом интерфейсе на базе Fluent Design.

Redesigning Babylon’s appointment booking system — A UX case study

Georgia Kent-Braham из Babylon Health рассказывает о редизайне сценария записи к врачу. Они проанализировали реальные обращения и грамотно разделили поток на разных специалистов.

Bringing the Spotify Heart to Life

Дизайнеры Spotify рассказывают, как применили принципы анимации для работы над иконкой добавления в избранное.

Content hierarchy in action

Gillian Massel из Shopify показывает хороший пример работы интерфейсного копирайтера. Как она улучшила форму запроса информации так, чтобы показать пользу, а не просто задачу.

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

Ребрендинг навигационного сервиса Waze от Pentagram

Сохранили дурашливый характер персонажа и превратили его в маскота, поддержав в компоновках сайта.

Тренды

Designing for a changing world

Дизайн-команда Airbnb рассказывает, как изменялся интерфейс, продукт и работа команды в целом во время пандемии.

Статистика рынка: II квартал 2020

11,2%

рост продаж компьютеров в мире

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

Generative Design is Doomed to Fail

Некролог генеративному дизайну от Daniel Davis на примере пром.дизайна и архитектуры. Он очень точно и жёстко описывает причины, по которым эта идея не взлетела ещё в 80х, не взлетает сейчас и вряд ли взлетит в будущем. Daniel приводит утрированный пример с генератором писем электронной почты, что звучит абсурдной идеей. Но результат мало чем отличается от генеративного дизайна.

  1. Алгоритмы написаны под очень узкие задачи и их нужно каждый раз переписывать заново.
  2. Количество сгенерированных вариантов не приводит к качеству.
  3. Вдумчиво выбирать из множества вариантов на деле сложно.
  4. Невозможно измерить качество результата, чтобы отфильтровать лучшее.
  5. Это примитивизация реального процесса работы дизайнера.
  6. Нет примеров универсальных инструментов в других отраслях.

GPT-3 Design Hype — GPT3 Figma, plus more Design and UX examples

Обзор экспериментов в алгоритмическом дизайне на базе модели машинного обучения GPT-3 (часть инициативы OpenAI). Она позволяет генерировать части интерфейса или, скажем, цветовую палитру на основе текстового описания.

GPT-3 (what, why, how), Figma designing for you

Jordan Singer сделал экспериментальный плагин для Figma, который генерирует интерфейс с помощью модели машинного обучения GPT-3. Вы описываете результат словами, он переводит это в JSON с разметкой элементов.

This changes everything. ?

With GPT-3, I built a Figma plugin to design for you.

I call it "Designer" pic.twitter.com/OzW1sKNLEC

— Jordan Singer (@jsngr) July 18, 2020

Похожий пример, позволяющий создать промо-страницу:

I built a UI creator in Figma using @OpenAI's GPT3.

Define your UI component in simple English, and GPT3 + @figmadesign will create full blown mockup for you. With accurate text, images and logos.

Very impressed with GPT3! It is absolutely incredible⚡️

How it works? Read on… pic.twitter.com/ryqO48VDPc

— Dhvanil (@dhvanilp) July 24, 2020

Debuild — Build web apps lightning fast

Экспериментальный сервис, который генерирует интерфейс и код на React на основе текстового описания. Он использует модель машинного обучения GPT-3.

I just built a *functioning* React app by describing what I wanted to GPT-3.

I'm still in awe. pic.twitter.com/UUKSYz2NJO

— Sharif Shameem (@sharifshameem) July 17, 2020

Генератор цветовых палитр на GPT-3:

GPT-3 generated these color scales, given some existing scales and a hue name (or emoji⁉️) as a prompt. Let that sink in. https://t.co/XeLQDz795V pic.twitter.com/1uumvK7hgb

— Harley Turan (@hturan) July 12, 2020

Using Metrics to Generate and Quantify UX Design

Owen Schoppe из Salesforce описывает критерии, по которым их движок алгоритмического дизайна Einstein анализирует интерфейс: группировка, заметность, узнаваемые визуальные коды.

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

UX Writing Worldwide Report, 2020

Небольшое исследование текущего состояния профессии UX-писателя на основе опроса 110 человек и интервью 6 экспертов. Суть роли, профиль специалиста, проф.сообщества.

47 Key Lessons for UI & UX Designers

Danny Sapio собрал вместе свою коллекцию статей для начинающих дизайнеров. Перевод.

The Guide to Design

Серия обзорных статей о профессии дизайнера интерфейсов от UX Collective. Описаниие базовых понятий и рекомендации книг, статей и видео.

That Portfolio Book

Целая книга с советами по созданию хорошего портфолио от Lyft, Clya, Dan Petty и других.

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

Babylon Health — Experience Design

Блог дизайн-команды Babylon Health, занимающейся медициной.

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

Future London Academy: UX & Product Design Week 2020

На следующей неделе стартует курс по продуктовому дизайну, который я курирую. В этом году классический формат в Лондоне невозможен, поэтому будем ходить по сильным продуктовым дизайн-командам и агенствам в онлайне. Программу, как всегда, готовили с любовью:

  • Carolyn Chmielewski (Spotify). Как построить команду UX-исследований от всеми любимого музыкального сервиса.
  • Clara Gaggero Westaway (Special Projects). Прорывные концепции интерфейсов на стыке физического и цифрового мира от агентства, которое делает их для топовых компаний.
  • Katie Wishlade (Clearleft). Проектирование услуг от мастодонтов британского UX.
  • James Greenfield (Koto). Связь бренда с интерфейсом от одной из самых свежих и бойких компаний на рынке.
  • Dan Makoski (Lloyds). Дизайн-лидерство от одного из самых сильных и харизматичных специалистов на британском рынке.

Хотя в этом году расширить годную программу туром по лучшим бургерным и старейшим пабам не удастся, в онлайн-формате цена стала доступнее — £399. Каждый вечер начинается мастер-класс или лекция, после которой идёт общение со спикером, а после — нетворкинг.

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

Другие статьи по теме
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
Дайджест продуктового дизайна, июнь 2022
View Post
  • Дайджест

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

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

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

  • Юрий Ветров
  • 12 июня 2022
1 comment
  1. Уведомление: Веб-дизайн Шебеко week 22 | Николай Шебеко

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

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

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

Input your search keywords and press Enter.