Дайджест продуктового дизайна за февраль: первая конференция Figma, дизайн для гибких экранов и другие материалы
Традиционный дайджест директора по дизайну «Райффайзенбанка» Юрия Ветрова.
Шикарная памятка по проектированию и дизайну интерфейса перетаскивания от Page Laubheimer из Nielsen Norman Group. Как сделать его хорошо в вебе и на мобильных.
Шикарнейший чек-лист для работы над компонентами (да и любой другой частью) дизайн-системы от Nathan Curtis. Какие этапы он проходит от предложения до выкатки с подробным списком конкретных шагов. Он также показывает разницу в трудозатратах на создание компонента с нуля и в рамках дизайн-системы. Изначально она не в пользу дизайн-системы, но компенсируется позже.
Linette Voller из Atlassian предлагает крутую модель для системного описания текстов в интерфейсе. Она использует идею слоёв Jesse James Garrett и раскладывает все инструменты для текстовой коммуникации по ней.
Ольга Крюкова из Usethics сравнила сервисы для удалённого юзабилити-тестирования с оценкой функциональных возможностей. Полезно, что отмечено наличие доступа к отечественной базе респондентов.
Новые инструменты дизайна
- Figma: прошла первая конференция Config 2020. Улучшенный Auto Layout, выбор цветов и шрифтов, ссылки на любые объекты и страницы внутри документа (или вообще внешние), поддержка новых способов управления в прототипах (клавиатуры, игровые джойстики, устройства для пользователей с ограниченными возможностями). Видео выступлений. Интервью с Dylan Field и Noah Levin.
- Плагины для Figma: памятка Yuan Qing Lim по грамотному интерфейсу и инструкция Dan Hollick по созданию. Maze для юзабилити-тестирования; Ditto для совместной работы над текстами; JSON to Figma подгружает данные из JSON; Type Today для библиотеки шрифтов отечественной словолитни.
- Sketch 63: улучшения интерфейса без явного фокуса. И развитие облака.
- Flow Fields: инструмент позволяет делать анимированные линии потоков. Похожие эксперименты от Tyler Hobbs.
- Кажется, самый позорный тренд последних лет теперь точно будет везде. Генератор теней для неоморфичных элементов в вебе.
- Abstract: купили украинскую команду Flawless.
- Iconset: инструмент позволяет хранить набор пиктограмм и раздавать его в популярные инструменты дизайна. Есть версия для Windows.
- Anicons: иконочный шрифт с анимацией и поддержкой разных цветов.
- TinkerSynth: простой инструмент для генеративных абстрактных изображений по модели синтезатора.
- Open Peeps: ещё одна бесплатная библиотека иллюстраций с конструктором типажей от любимчика отрасли Pablo Stanley.
- Seamless Pattern Generator: генератор фоновых паттернов на чистом CSS.
- Zeplin 3.0: появились API и возможность дать ссылку на компонент в коде.
Сервис позволяет вести карты компетенций для дизайн-команды. Оценка, постановка целей, отслеживание реальных задач.
Отличная памятка Kate Moran из Nielsen Norman Group по расчёту ROI дизайна. Как выбрать подходящие метрики и конвертировать их в деньги.
Maitrik Kataria собрал неплохую коллекцию интерфейсных паттернов для использования мобильных приложений одной рукой. Он записал скринкасты удачных примеров и разобрал многие из них.
Jim Lewis и Jeff Sauro напоминают про три основные цели юзабилити-тестирования: обнаружение проблем, сравнение с конкретным показателем или другим интерфейсом. Хорошо описана суть каждого.
Raluca Budiu из Nielsen Norman Group собрала выкладки из исследований о восприятии тёмной и светлой тем. В большинстве случаев светлая тема облегчает чтение.
Kate Kaplan из Nielsen Norman Group сделала памятку по встречам и рабочим сессиям, которые может проводить дизайн-команда. Она также показывает разницу между форматами и рекомендацию по использованию в типичных ситуациях.
Годный разбор истории появления дизайн-мышления и вообще системных подходов к дизайну от Maggie Gram. И, само собой, проблемы с их маркетингом, когда такой шильдик применяется не к месту.
Frederick O’Brien разбирает особенности вёрстки для устройств с гибкими экранами. Отличаются ли они от обычной поддержки адаптивности и какие стандарты и наработки уже есть.
Raluca Budiu из Nielsen Norman Group описывает теорию «информационного чутья», которое помогает пользователям оценивать потенциальную полезность информации на сайтах.
Елена Бородина рассказывает о тестировании визуального дизайна в «Газпромбанке». С помощью пятисекундного теста собирали ключевые реакции — насколько они соответствовали изначальным ожиданиям команды.
Язык алгоритмического дизайна от компании Standard Notation. Принципы, паттерны, процессы.
Умер Larry Tesler, один из ключевых людей в истории современных интерфейсов :( Он работал в легендарной лаборатории Xerox PARC, а потом — в первые золотые годы Apple. Предложил концепцию Сopy & Зaste при работе над экспериментальным текстовым редактором, пропагандировал отказ от модальности в интерфейсах.
Ему приписывают авторство ключевых фраз «user friendly» и «what you see is what you get». Он был одним из тех, кто показал наработки Xerox PARC Стиву Джобсу (и дальше помог внедрять их в Macintosh изнутри Apple). Кажется, из этой эпохи легенд остался только Alan Kay.
Kara Pernice из Nielsen Norman Group описывает подход к делению сценария юзабилити-тестирования на составляющие, которые дают разную наводящую информацию. Это позволяет проверить не только удобство работы с функциональностью, но и её обнаруживаемость.
Alaine Mackenzie из Shopify даёт советы по управлению удалёнными дизайн-командами. Она отмечает, что сложность зависит от степени распределённости и, как ни странно, проще всего с полностью рассредоточенными людьми — тогда не возникает локальной группы, которая неизбежно становится ядром всех активностей.
Читайте полную версию дайджеста в моём блоге. В нём много новых материалов по дизайн-системам, инструментам дизайна, трендам, пользовательским исследованиям.
За свежими ссылками также можно следить: