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

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

  • 13 сентября 2021

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

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

Fintech Design Conf 2021

Конференция от Райффайзенбанка пройдёт 30 сентября в онлайне. Дизайн-команды современных банков покажут, что интересного происходит в отрасли и расскажут, куда движется индустрия. Они расскажут про интересные запуски и покажут, как устроены дизайн-процессы. Состав: Klarna, Ак Барс, ВТБ, МТС Банк, Райффайзенбанк, Росбанк, Тинькофф, Angry × Хайс и ONY × Blanc. В прошлом году у нас получилось нащупать интересный формат для онлайна, который смотрели 15 000 человек. В этот раз хотим поднять планку и сделать трансляцию ещё более вовлекающей и визуально приятной. Конференция, как всегда, бесплатна и открыта для всех.

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

Frustrating Design Patterns: Disabled Buttons

Есть две школы: те, кто не блокирует кнопки в интерфейсе (потому что пользователь часто не понимает причины) и те, кто делает это (мол, это помогает избежать ошибок). Виталий Фридман наглядно разбирает, почему первый подход правильный.

10 Usability Heuristics Applied to Complex Applications

Kate Kaplan из Nielsen/Norman Group применяет интерфейсные эвристики Якоба Нильсена к профессиональным веб-интерфейсам. Она подсвечивает хорошие и плохие примеры.

The voice of the brand: 5 principles for great Marketing copy at Slack

Andrea Drugay из Slack рассказывает о создании и внедрении принципов хороших текстов для маркетинговой коммуникации.

Avatar UI design exploration

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

Grids

Наглядный справочник по сеткам в вебе от агентства Obys. Показывают, как они работают на примере своих проектов.

Adobe: The Psychology of User Offboarding

Сайт Growth Design подробно разбирает знакомую дизайнерам боль — отписку от Adobe Creative Cloud. И даёт немного советов по лечению интерфейса.

Design Solutions that Increase Access to Telehealth

Fabiola Einhorn из athenahealth приводит лучшие практики интерфейсов дистанционного медицинского обслуживания. Они основаны на её многолетней практике и многочисленных UX-исследованиях.

A UX case study on OpenSea

Peter Ramsey разбирает интерфейс продажи NFT в сервисе OpenSea. Много детских проблем, хотя при таком ажиотаже в теме многие напрягутся, чтобы решить их.

Quick tip: Reviewing a design for accessibility

Ещё один простой чеклист для проверки accessibility.

UX and Net Promoter Benchmarks of Mass Merchant Websites

Jim Lewis и Jeff Sauro делятся новым сравнительным исследованием американских интернет-магазинов. Они замеряют NPS, SUPR-Q и UMUX-Lite.

Accessibility in E-Commerce: Use ‘ALT’ Text to Communicate the Core Content of “Informational” Images (55% of Sites Don’t)

Alex Krzyminski из Baymard даёт советы по грамотному описанию сути изображений в HTML для интернет-магазинов.

E-Commerce Navigation UX: 13 Common Pitfalls & Best Practices

Sally Collins сделала обзор типичных ошибок при проектировании навигации в интернет-магазинах из свежего исследования Baymard. Многое повторяется из года в год, но в любом случае полезная напоминалка.

Stealing Game Animation Techniques to Engage Users

Eli Penner рассказывает об экспериментах с анимацией в вебе, которые он подсмотрел в играх.

Sentence Forms (not Mad Libs)

Adrian Roselli описывает проблемы с некогда хайповыми формами, встроенными в повествование.

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

Клуб отечественных дизайн-систем

Перезапустили сайт-коллекцию отечественных дизайн-систем. Первая версия здорово помогла подсветить наработки компаний на рынке, но со временем её стало сложно обновлять. В новой версии всё актуально и легко поддерживается — помимо старых знакомых (Альфа-Банк, БАРС Груп, Дизайн государственных систем, IVI, Контур, Mail.ru Group, Рамблер, Яндекс) наконец-то появились B2B Center, Вконтакте, Газпром Нефть, Райффайзенбанк, Ростелеком и Semrush. Кто-то выпал, ведь основное условие участия — компоненты на технологическом уровне, открытые для всех. Если мы почему-то не знаем о вашей дизайн-системе — присылайте её боту @DSClubbot в Телеграме, обязательно добавим.

Accessible Design Systems: Look Good While Doing Good

Chris LaChance рассказывает, как дизайн-система Pega Cosmos поддерживает accessibility из коробки.

Testing user flows. Verify that your UI works end-to-end

Varun Vachhar показывает, как тестировать целые пользовательские сценарии в дизайн-системе с помощью Storybook и Cypress.

Interaction Testing sneak peek

Storybook готовят к запуску возможность тестирования интерактивных компонентов.

Assembler CSS — Modern UI framework

Свежий CSS-фреймворк для создания компонентов и сайтов.

iOS 15

Jonas Downey анализирует новый интерфейс Safari в iOS 15, где адресная строка переехала вниз экрана и совмещена с основными элементами навигации. Как это влияет на пользовательский опыт и что можно было бы сделать лучше.

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

Eva PenzeyMoog — Design for Safety

A Book Apart выпустили книгу Eva PenzeyMoog «Design for Safety». Она посвящена созданию ощущения психологической безопасности для пользователей. Выдержка из главы 5.

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

Figma

Августовские обновления. Улучшение работы с дизайн-системами, плагины и виджеты в FigJam, плагины смогут обновлять прототипы на лету.

Запустили звонки внутри макета, а также сообщения чата внутри курсора.

Плагины

  • Variables: Плагин позволяет задать глобальные переменные (считай, токены) для самых разных видов стилей. Размеры, эффекты вроде размытия, тени и т.п.
  • Figmage: Публичная ссылка в виде картинки на любой слой или фрейм.
  • Copy & Rotate: Плагин позволяет быстро расположить по кругу копии элемента.
  • Вячеслав Трушкин: Делает плагин, который позволит вставлять пиктограммы из популярных бесплатных наборов.
  • Janet John: Большая подборка.

Шаблоны

  • Clara Ujiie: Помогает наглядно показать и протестировать состояния адаптивности.
  • Карта сайта в FigJam.
  • Шаблоны и тарифы для студентов и образовательных организаций.

Статьи

  • Font Awesome: Почему перешли на Figma.
  • Про Figma пишут уже в Forbes.

SVG Gobbler

Плагин для Chrome позволяет легко сохранить любые SVG-изображения на странице. Можно быстро получить версию в PNG.

Blobbb

Генератор аморфных пятен в SVG.

Illustrations by Iconfinder

Iconfinder запустили каталог иллюстраций.

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

Qualitative Usability Testing: Study Guide

Nielsen/Norman Group сделали структурированные подборки своих статей о методах пользовательских исследований. Уже есть качественное юзабилити-тестирование и количественные исследования. На подходе, наверняка, ещё много — контента у них завались.

Six Ways to Improve Participant Recall

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

Scaling Research

Блог Ray Opata Olende об управлении UX-исследованиями в компании и их масштабировании.

How to test for accessibility with users at every design stage

Katie Del Angel из Shopify делится опытом проведения UX-исследований для улучшения accessibility с помощью сервиса Fable. Она приводит в пример несколько сценариев.

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

Usethics рассказывают о методе проведения пользовательских исследований с детьми.

Six Tips for Better Unmoderated Scripts

Yuling An из Facebook даёт советы по составлению сценариев удалённых немодерируемых пользовательских исследований.

Careers in Research & Research Operations Report

Сообщество ResearchOps провело опрос среди 147 своих участников на тему навыков, образования и зарплат.

Data Is More than Numbers — Why Qualitative Data Isn’t Just Opinions

Статьи на тему того, почему качественные исследования не просто мнения, в отличие от количественных, никогда не выйдут из моды. Это вечная дискуссия в огромном количестве компаний на ранних стадиях зрелости. Page Laubheimer из Nielsen/Norman Group приводит хорошую памятку для таких разговоров.

How To Build An Ethical User Research Practice At Any Organization

Devin Harold показывает, как компания может сформировать стандарты этики при проведении пользовательских исследований.

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

Can I still use…

Jim Nielsen запустил сопроводительный сайт к известному Can I Use, позволяющему убедиться, что определённые функции доступны в браузере. Со временем поддержка прекращается и он отмечает такие ситуации.

A guide to designing accessible, WCAG-compliant focus indicators

Sara Soueidan показывает, как сделать индикатор фокуса с учётом требований accessibility.

CSS Transforms Tutorial

Памятка по работе с трансформациями в CSS-анимации от Josh W Comeau.

Aligning a Button Label Vertically

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

A Deep Dive on Skipping to Content

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

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

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

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

UX-Maturity Stage 1: Absent

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

Designing the future, 14 days at a time

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

Методологии, процедуры, стандарты

Design Thinking: Study Guide

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

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

Циан

Продолжение ребрендинга Циан от отечественного агентства Щука. Как и зачем его делали.

Upwork

Ребрендинг одной из главных бирж фрилансеров Upwork от американского агентства Porto Rocha.

Cabify

Ребрендинг испанского сервиса такси Cabify, сделанный собственными силами.

Yelp

Ребрендинг справочника Yelp.

WePresent

WeTransfer запустили своё медиа. Они стали одним из самых ярких примеров связи бренда с интерфейсом и на этом сайте их стилистика раскрывается ещё сильнее.

История

Why are hyperlinks blue?

Elise Blanchard разбирается, почему ссылки в браузерах обычно выделены синим цветом. Она разобрала кучу интерфейсов конца 80х и начала 90х и ссылается на конкретный пункт истории обновления версий у классического браузера Mosaic 12 апреля 1993 года.

KidPix

Браузерная версия классического инструмента рисования для детей, выпущенного Apple в 1989 году.

If 8 Popular Websites Existed In The 90s

Дизайнеры агентства Zyro представили современные интернет-сервисы в виде программ и сайтов 90х.

Alvy Ray Smith — A Biography of the Pixel

MIT Press выпустили книгу Alvy Ray Smith «A Biography of the Pixel», со-основателя Pixar. Она посвящена истории графики в целом с фокусом на цифровой. Выдержка из неё об истории пикселя.

Тренды

Color Trends — Top Popular Colors Used in Stock Photography

Цветовые тренды 2021 года от фотобанка Everypixel.

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

Shaper — Interface Styles Shaper

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

The Rise of Long-Form Generative Art

Tyler Hobbs рассказывает о набирающем обороты применении алгоритмического/генеративного дизайна. Это коллекционные серии произведений, которые продаются через NFT и даже генерируются по определённым верифицированным правилам. Он упоминает платформу Artblocks и свой проект Fidenza на ней.

UX Prototyping for AI. Six ways to prototype AI experiences

Owen Schoppe из Salesforce описывает роль прототипов в интерфейсах на базе искусственного интеллекта. Они помогают моделировать результат генерации и общую логику взаимодействия.

Fishdraw

Генератор рисунков рыб на базе алгоритмического дизайна.

Reducing Carbon Emissions On The Web

Berwyn Powell анализирует углеродный след, который оставляют сайты. Как изображения, видео, скрипты и другие части веба влияют на общую картину.

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

How I Experience Web Today

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

Stop asking Linkedin for feedback on your UI design

Nick Groeneveld подсвечивает забавный движ — дизайнеры просят на LinkedIn выбрать один из вариантов дизайна (когда-то для этого использовали Dribbble). Само собой, этот формат не работает.

Academic articles every designer should read

Meghan Wenzel сделала обзор нескольких важных научных и исследовательских публикаций о дизайне. Ценность для бизнеса, поведение пользователей, креативность в целом.

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

Two perspectives on the designer who Steve Jobs could not hire

Arun Venkatesan описывает историю карьеры промышленного дизайнера Richard Sapper, который также повлиял компьютеры (красная кнопка на IBM/Lenovo ThinkPad — его затея). Он из той же немецкой плеяды, что и Dieter Rams, но использовал другие подходы.

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