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

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

  • 9 июля 2023

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

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

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

How to Adapt Long-Page Designs for Better Scanning

Советы Christopher Butler показывает пример перестройки длинной промо-страницы в более читабельный формат. И выделяет ключевые правила такого переосмысления.

Create Powerful Prototypes To Test and Fine-Tune Your Designs

Kosuke Shiraishi из Indeed напоминает про роль прототипов в проверке продуктовых решений. В статье есть ещё одна классификация глубины их проработки и общие советы по применению.

Bottom Sheets — Definition and UX Guidelines

Page Laubheimer из Nielsen/Norman Group разбирает особенности использования «шторок» в мобильных интерфейсах. Статья полезная, но с оговоркой про спорную рекомендацию всегда использовать явную иконку «крестика» для закрытия — не нужно переизобретать системные элементы операционных систем.

The Password Game

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

Skeleton Screens 101

Короткая шпаргалка по «скелетным» экранам загрузки от Samhita Tankala из Nielsen/Norman Group.

Federal Trade Commission Proposes Rule Provision Making it Easier for Consumers to “Click to Cancel” Recurring Subscriptions and Memberships

Федеральная Торговая Комиссия США обсуждает требование для подписочных сервисов, чтобы пользователи могли отписаться от них простым способом.

UX and NPS Benchmarks of Theme Park Websites (2023)

MeasuringU опубликовали новое сравнительное исследование сайтов парков развлечений. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.

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

WWDC 2023

5-7 июня прошла ежегодная WWDC, выставка новых операционок Apple. Лёгкое дежавю из такого же поста прошлого года: как и месяц назад в Android 14, интерфейсных обновлений особо нет, в основном развитие самой оболочки и ключевых приложений. Зато количество мемов про очки Vision Pro перебило всю новостную повестку. Если выделять какие-то вещи, то вот что:

visionOS

Очки виртуально-дополненной реальности Vision Pro работают на новой ветке операционных систем. Она относительно преемственна остальным — те же иконки приложений, аналогичные стандартные компоновки типа браузера и компоненты типа вкладок. Сами приложения могут иметь одно или несколько окон, глубину в 3D и своё пространство.

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

Управление жестами (без специального контроллера), голосом и взглядом. Также авторизация по зрачку, включая Apple Pay. И отслеживание движений головы.

3D-камеры для картирования окружающей среды.

Кое что по созданию приложений для visionOS уже можно почитать и посмотреть:

  • Human Interface Guidelines
  • Принципы дизайна интерфейсов (ещё) и их подробный разбор
  • Много скриншотов из эмулятора
  • Ранняя документация для разработчиков
  • Andy Matuschak: Подробный обзор интерфейсной парадигмы и основных решений. Он когда-то работал в Apple и в целом экспериментировал с этим направлением.
  • Официальные шаблоны для Figma и Sketch
  • Видео выступлений
  • Интервью с первыми попробовавшими компаниями
  • Особенности создания сайтов для Safari
  • Kamil Kołodziejczyk: Перекладывает свой опыт дизайна интерфейсов для очков дополненной реальности TiltFive с помощью Microsoft Maquette

Коммерческая успешность под большим вопросом — только большие проекты типа Microsoft HoloLens, Google Glass / Cardboard / Daydream, Magic Leap или Meta остались нишевыми B2B-шными, а то и вовсе похоронили миллиарды инвестиций, не считая десятков менее известных. Сами сценарии и модель использования — пока что скорее «монитор побольше» с теми же приложениями. Но в плане мультиплатформенной дизайн-системы пример очень интересный. Профессия точно обогатится интересным опытом и наработками в этом плане.

iOS 17

Появился режим стенда с крупным ландшафтным представлением приложений:

В библиотеке иконок SF Symbols появилась анимация.

Виджеты стали интерактивными — например, можно включать приборы умного дома или выполнять задачи из напоминалок:

Интересные стилистические приёмы:

Всплывающее меню приложений для iMessage

Отслеживание ментального
здоровья

Настраиваемый экран звонка для конкретных контактов:

Airdrop позволяет передавать данные и контакты при прикосновении устройств:

Предлагает дописать текст по нажатию на пробел в духе Gmail.

Упрощается подключение к гостиничным телевизорам через AirPlay с помощью QR-кода:

Live Speech сможет говорить вашим голосом, если немного потренировать его.

Немного полезных материалов и видео для дизайнеров:

  • Официальные шаблоны iOS 17 и iPadOS 17 для Figma от Apple. Они наконец-то пришли в сообщество.
  • Live activities.
  • Единый подход к обучению в приложении TipKit.
  • Быстрый вход в разделы приложения через поиск в spotlight.

Победители Apple Design Awards этого года.

iPadOS 17

Виджеты на экране блокировки.

Можно реагировать с помощью жестов на звонках FaceTime:

watchOS 10

Редизайн ключевых приложений.

Прокручиваемая стопка виджетов:

macOS Sonoma

Общие виджеты с iPhone:

Любые приложения для созвонов могут накладывать вырезанную фигуру говорящего на презентацию:

Можно поделиться любым файлом прямо в любое приложение для созвонов — хорошее соответствие стандарту удалённой работы:

Традиционно всё это появится у массового пользователя в сентябре. Но бета-версия будет доступна в июле.

Modern CSS For Dynamic Component-Based Architecture

Stephanie Eckles собрала все современные приёмы CSS для описания компонентов и дизайн-систем в целом.

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

WCAG 2.2, quick and simplified

Mike Gower из IBM простым чеклистом разложил свежий стандарт accessibility WCAG.

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

Product IA is hard to talk about

Dan Brown рассуждает о сложностях описания информационной архитектуры продуктов, где интерфейс строится вокруг центрального объекта (например, календарь или документ).

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

Figma

На конференции Config 2023 анонсировали одни из самых масштабных и ценных обновлений инструмента.

Самое главное — переменные. Они позволяют сделать две вещи — токены (причём они стараются соответствовать черновику будущего стандарта W3C) и более сложную логику взаимодействия в прототипах. Lukas Oppermann подробнейшей разложил по полочкам системную работу с токенами. Как реализовать все аспекты, важные для дизайн-системы и связать её с компонентами в коде. Ну и рассказал про текущие возможности и ограничения бета-версии.

Инструменты для разработчиков стали полноценным отдельным режимом работы. Он показывает спецификации дизайна на более понятном языке для программистов и верстальщиков, имеет плагины к популярным планировщикам задач и средам разработки (например, Jira, GitHub, Linear, Storybook и VS Code). Правда, есть риск что теперь придётся платить деньги и за разработчиков, при том что до этого они могли смотреть спецификации бесплатно.

Figma купила нашумевший стартап Diagram, который запустил энтузиаст алгоритмического дизайна Jordan Singer с командой. Они делают простые и достаточно прагматичные решения, которые наверняка скоро попадут в Figma. В статье описаны несколько сценариев использования, которые уже помогут в повседневных задачах — например, автоматическая категоризация идей из брейнштормов (дико нудное дело).

В самом редакторе тоже добавлено много крутого: auto layout теперь может переносить объекты внутри контейнера на новую строку при недостатке ширины, освежили общий интерфейс учётных записей и просмотра проектов, предпросмотр шрифтов в списке их выбора.

Adobe XD

Alex Ivanovs заметил, что Adobe постепенно убирает возможность скачать инструмент. Явно о его закрытии не говорили, но после покупки Figma это было неизбежно.

Durves

Простой инструмент позволяет сделать что-то похожее на схематичную поверхность ландшафта.

Sketch 97

Переименование сразу множества слоёв, приложение Mirror для iPad и другие обновления интерфейса.

SVG Hub — Custom-color elements ready to paste into your project

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

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

Measuring Tech Savviness with Technical Activity Checklists

Jim Lewis и Jeff Sauro сравнивают несколько чеклистов для оценки компьютерной грамотности пользователей.

When and Why to Use a Click Test

Памятка MeasuringU по использованию метода тестирования интерфейсов с помощью «первого клика».

Heuristic Evaluations — How to Conduct

Памятка по проведению экспертной оценки от Kate Moran и Kelley Gordon из Nielsen/Norman Group. Они дают полезный шаблон, который основан на классических 10 эвристиках Нильсена.

How and Why to Include Users in UX Workshops

Matt Brown из Nielsen/Norman Group говорит о пользе приглашения пользователей на воркшопы. Он описывает несколько форматов таких сессий и даёт советы по их проведению.

How to Ensure Participant Fit and Credibility

Памятка по поиску и отбору респондентов для пользовательских исследований от User Interviews.

Tips for recruiting B2B UX research participants

Советы Mary Nolan по поиску респондентов для пользовательских исследований B2B-продуктов.

Testing the Future — A Guide to Testing AI Products with Users

Дмитрий Старков описывает методы пользовательского тестирования продуктов на базе алгоритмов.

How Teams Do Continuous Discovery Research Today, According to Research

User Interviews пообщались с несколькими продуктовыми командами и узнали, как они работают идеологии постоянно идущих пользовательских исследований.

Does Thinking Aloud Uncover More Usability Issues?

Jeff Sauro и Jim Lewis продолжают изучать метод юзабилити-тестирования, когда респондент проговаривает проблемы вслух. Так респонденты находят больше проблем, хотя они не проверяли реальность этих проблем.

The Power of Desk Research in User Research

Sue Duris из Condens описывает метод кабинетных исследований и ситуации, в которых он полезен.

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

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

  • Автоматическая подсветка одного из элементов страницы при прокрутке на CSS.
  • Как стилизовать элементы на CSS в зависимости от их расположения на экране или в конкретном блоке.

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

An Error Messages Scoring Rubric

Tim Neusesser и Evan Sunwall из Nielsen/Norman Group предлагают чеклист для оценки качества отработки ошибок в интерфейсе. Это измеримый подход, к которому идёт шаблон в Excel.

Creating impact with Research Ops — Leveraging the power of communities

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

How to measure UX research impact — A multi-level framework

Karin den Bouwmeester предлагает свой фреймворк для оценки выхлопа от пользовательских исследований в компании. Она делит их на влияние на бизнес и UX в целом, а также организацию и самих специалистов по исследованиям.

How Research Operations impacts organizational culture

Советы Rohan Irvine по выстраиванию ResearchOps в компании. Он делится опытом удачных и проблемных ситуаций из компаний, где внедрял эти подходы.

No Handoff — We can stop throwing our work over the fence

Shamsi Brinn предлагает концепцию «no handoff» (без передачи проектных артефактов от дизайнера разработчикам). Это процесс, в котором нет явного перехода между этапами, а постоянная совместная работа.

Storm vs. calm leadership tactics

Советы Design Dept. для дизайн-менеджеров в ситуациях экономического кризиса, когда компании колбасит.

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

The workshop and facilitator de-coded

Jenny Hsiao Sanchez из IBM описывает памятку для фасилитатора рабочих сессий. Как понять, что всё идёт хорошо.

Кейсы

Behind The Curtains Of Wikipedia Redesign

Alex Hollender и Jon Robson рассказывают о редизайне Wikipedia в формате интервью.

Designing the latest generation of Uber Navigation — Maps built for ridesharing

Dylan Babbs рассказывает о редизайне навигации в Uber. Они делали много интерактивных прототипов разного уровня сложности и активно тестировали их.

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

Pinterest Motion Design System

Язык анимации Pinterest от американского агентства DIA.

OpenAI

Айдентика горячей OpenAI от французско-американского агентства Area17 (больше деталей).

TheFork

Ребрендинг сервиса бронирования ресторанов TheFork от британского агентства Design Studio.

InVision

Обновление айдентики InVision от британского агентства Ensemble.

Askly

Айдентика сервиса Askly для общения с пользователями сайта от эстонского агентства Tabasco.

Unmind

Ребрендинг сервиса Unmind для ментального здоровья сотрудников компаний от американского агентства Ragged Edge

Nike Design System

Антипример для Nike от агентства Instrument. Это яркий бренд с простейшими характерными базовыми приёмами, но для него сделали максимально бесхребетную и унылую дизайн-систему.

Тренды

2023 Logo Trend Report

Тренды в логотипах 2023 года от LogoLounge.

The Best in Packaging From 2023 — Dieline Awards Winners Revealed

Тренды в упаковке 2023 года от Dieline.

BentoGrids

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

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

Framer AI — Generate and publish your site with AI in seconds

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

Toyota Research Institute Unveils New Generative AI Technique for Vehicle Design

Toyota экспериментирует с алгоритмическим дизайном для работы над машинами. Это один из самых разумных процессов — дизайнер делает первый набросок стиля, дальше алгоритм предлагает несколько вариантов его оптимизации (например, для лучшей аэродинамики). Дизайнер выбирает одно из предложений и дорабатывает его.

AI: First New UI Paradigm in 60 Years

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

Adobe Express — Free Online Photo & Design Tool

Adobe запустили новый простой инструмент дизайна Express для несложных макетов и видео. Он умеет генерировать изображения и шрифты с помощью Firefly, готовит макет под разные размеры.

The future of Illustrator is here — Hue will never be the same

Adobe добавили в Illustrator экспериментальную функцию Generative Recolor. Она меняет цвета на сложных иллюстрациях с помощью их движка алгоритмического дизайна Firefly.

ClipDrop Uncrop

Простой сервис позволяет дорисовать то, что было за границами изображения (примерно как Generative Fill у Photoshop).

9 *Human* Challenges with Using AI Co-Pilots

Stephen P Anderson разбирает проблемы генераторов текстов а-ля ChatGPT. Они способны создавать черновики, но многие забывают, что эти черновики нужно критически анализировать и доводить до ума.

Spline AI — 3D Design faster with AI

Инструмент Spline для 3D научился генерировать объекты по текстовому описанию и накладывать стиль по примеру.

Runway Gen-2

Инструмент генерирует короткие видео по текстовому описанию.

Illustroke — Vector illustrations from text prompts AI

Генератор векторных иллюстраций по текстовому запросу.

Language Model Sketchbook, or Why I Hate Chatbots

Maggie Appleton сделала несколько концептов интерфейса взаимодействия с чат-ботами на базе алгоритмического дизайна. Как они могут уточнять и дополнять текст.

MusicGen by Facebook

Генератор музыки по текстовому описанию от Meta. Обзор.

TikTok parent ByteDance launches music creation and audio editing app in closed beta in the US

TikTok запустили экспериментальное приложение Ripple, которое помогает пользователям генерировать и редактировать музыку. Можно напеть мотив и оно превратит его в заготовку песни.

TikTok’s new Script Generator tool uses AI to write ad scripts for you in seconds

TikTok добавил генератор сценариев для рекламных роликов.

Mercedes drivers can soon turn to ChatGPT for voice control

Mercedes добавит ChatGPT в свою автомобильную платформу MBUX. Он расширит возможности голосового помощника.

«Яндекс Маркет» добавил YandexGPT — нейросеть сможет создавать описания товаров

Яндекс Маркет будет генерировать описание товаров с помощью YandexGPT

ElevenLabs — Prime AI Text to Speech. Voice Cloning

Сервис клонирует ваш голос и может озвучить им любой текст.

Duolingo Max Uses OpenAI’s GPT-4 For New Learning Features

Duolingo встроили модель GPT-4 в продукт — пользователи смогут учиться в диалоге и получать дополнительные пояснения.

AI is sleepwalking us into surveillance

Arvind Sanjeev показывает, как закрытые личные данные утекают для обучения алгоритмов. Например, многие генераторы лиц как будто ненастоящих людей на самом деле берут настоящие фото и просто немного дорабатывают их.

Have I Been Trained?

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

How to make a QR code with Stable Diffusion

Как самому сделать иллюстративные QR-коды от nhciao, которые собраны с помощью Stable Diffusion и работают на самом деле. Оригинальный пост.

Finch и PlanFinder

Инструмент алгоритмического дизайна помогает делать наброски планов помещений.

Generative AI Takes Stereotypes and Bias From Bad to Worse

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

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

archives.design

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

Justin Dauer — In Fulfillment. The Designer’s Journey

Вышла книга Justin Dauer «In Fulfillment» о влиянии дизайнера на продукт, бизнес и мир в целом. Отрывок из главы 3.

Design Under Constraints — Challenges, Opportunities, And Practical Strategies

Paul Boag даёт советы дизайнерам о том, как снимать ограничения в своей работе. Они отличают дизайн от искусства, но не всегда высечены в камне.

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

Дизайн-студия Ростелекома

Сайт дизайн-команды Ростелекома.

Подпишитесь на дайджест в Телеграме ― там свежие ссылки появляются каждую неделю, а также в RSS, ВКонтакте или на vc.ru. Отдельный благодарчик команде Сетки за редактор. А ещё — командам Funky Branding за новую айдентику и Бюробукв за шрифт (они пока в бета-версии и будут докручиваться в течение года). Сто тыщ респектов Александру Орлову за прошлые два визуальных стиля.

Юрий Ветров

Директор по бренду и дизайну (ex-Muse Group (Ultimate Guitar, MuseScore, Audacity и другие), Райффайзен Банк и Mail.ru Group). Я руковожу командами, которые отвечают за дизайн, исследования и редактуру бренда и интерфейсов, а также дизайн-систему в коде. Автор книги и курса «Паттерны дизайн-менеджмента» и «Дайджеста продуктового дизайна». Со-организовывал Fintech Design Conf, Mail Design Conf и московский Dribbble Meetup, а также Russian Design Cup. Читал лекции в Британке, курировал курс Future London Academy в Лондоне. Мои публикации есть на Smashing Magazine, UXmatters и UX Collective. Подробнее обо мне.

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

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

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

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

  • Юрий Ветров
  • 17 апреля 2025
Дайджест продуктового дизайна, февраль 2025
View Post
  • Дайджест

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

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

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

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

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

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

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

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

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

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

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

  • Юрий Ветров
  • 16 октября 2024

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

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

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

Input your search keywords and press Enter.