Тренды в упаковке и логотипах, агрегатор «бенто-сеток» и редизайн навигации Uber: главное в продуктовом дизайне за июнь

Традиционный дайджест Юрия Ветрова, директора по дизайну и бренду Muse Group.

В мобильной ОС интерфейсных обновлений особо нет, в основном развитие самой оболочки и ключевых приложений. Зато про новые очки много интересного. Я собрал всё, что хоть как-то полезно дизайнерам.

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

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

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

• Figma: Одни из самых масштабных и ценных обновлений инструмента.

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

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

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

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

• Sketch 97: Переименование сразу множества слоёв, приложение Mirror для iPad и другие обновления интерфейса.
• Adobe XD: Alex Ivanovs заметил, что Adobe постепенно убирает возможность скачать инструмент. Явно о его закрытии не говорили, но после покупки Figma это было неизбежно.
• Durves: Простой инструмент позволяет сделать что-то похожее на схематичную поверхность ландшафта.
• Framer AI: Запустили ветку алгоритмического дизайна в своём инструменте. Он позволяет сгенерировать сайт по текстовому описанию, а потом докручивать отдельные элементы из набора предложений.
• Adobe Express: Новый простой инструмент дизайна для несложных макетов и видео. Он умеет генерировать изображения и шрифты с помощью Firefly, готовит макет под разные размеры.
• Adobe Illustrator: Добавили экспериментальную функцию Generative Recolor. Она меняет цвета на сложных иллюстрациях с помощью их движка алгоритмического дизайна Firefly.
• ClipDrop Uncrop: Простой сервис позволяет дорисовать то, что было за границами изображения (примерно как Generative Fill у Photoshop).
• Spline AI: Инструмент для 3D научился генерировать объекты по текстовому описанию и накладывать стиль по примеру.
• Runway Gen-2: Генерирует короткие видео по текстовому описанию.
• Illustroke: Генератор векторных иллюстраций по текстовому запросу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте полную версию дайджеста в моём блоге. За свежими ссылками также можно следить в Telegram-канале или в группе во «ВКонтакте». Спасибо всем, кто помогает наполнять дайджест.

#интерфейсы #ux #ui