Продуктовый дизайн: 20 самых важных материалов за октябрь
Дайджест от директора по дизайну бренда Mail.Ru Юрия Ветрова.
Иллюстрации стали обязательной частью айдентики цифровых продуктов ― они есть в каждом первом сервисе. Ещё бы ― в хорошем интерфейсе всё занято полезными вещами и особо нет мест для выражения бренда, разве что лого, цветовая палитра, пиктограммы и характерные паттерны.
Так что иллюстрации ― простой и экспрессивный способ сделать бодрее и более узнаваемо. Особо продвинутые проявляют единство коммуникации в текстах и анимации, но этого сложнее добиться. Так что неудивительно, что половина Dribbble забита безинтерфейсными картинками. Собрал пачку историй известных компаний, которые нашли себя.
Кейт Моран и Ким Флаэрти из Nielsen, Norman Group показывают причины возникновения технологических мифов и то, как они влияют на использование продуктов.
На ежегодной презентации новых продуктов и экспериментов Adobe Max 2018 показали карьерный самосвал обновок: Adobe XD, Photoshop для iPad, Adobe Fonts (бывший TypeKit), обновления After Effects, Illustrator, InDesign, Dimension и других инструментов. Экспериментальные: Project Aero, Project Gemini, Character Illustrator CC, Premiere CC. Обновления уже прилетели через Creative Cloud.
Билл Чанг провёл пользовательское исследование схематичных экранов загрузки, которые популяризировал в своё время Facebook. Они помогают, если показывают загрузку поэтапно и снижают неопределённость ожидания, а не просто служат в качестве заглушек. Автор даёт советы по правильной анимации для них.
Пятая часть серии статей Нейтена Кёртиса о релизном цикле дизайн-систем говорит о взаимозависимостях между компонентами и другими слоями модульности.
Ралука Буди и Катрин Вайтентон продолжают серию исследований голосовых интерфейсов от Nielsen, Norman Group. Они изучили ожидания пользователей от идеального умного помощника и сопоставили их с существующими продуктами по нескольким критериям. Крайне интересная пища для выбора направлений развития.
7. Новые инструменты дизайна интерфейсов
- Figma. Появилась мощная функция для работы с группой повторяющихся объектов, когда их можно изменять одновременно. Читайте также инструкцию по работе с API для начинающих от Даниэля Холика Daniel Hollick из TIDAL. Пошаговое подключение к макетам и их разбор.
- FramerX. Лачезар Петков разобрал нюансы работы с инструментом.
- Interplay. Экспериментальный онлайн-инструмент дизайна интерфейсов, который также обещает связку с реальными компонентами дизайн-системы на React, Angular и Vue.
- Modulz. Кольм Тьют начал сбор денег на свой фреймворк для создания дизайн-систем, о котором писал несколько раз в дайджесте (сопроводительная статья). Денег дали.
- Overframe. Простой инструмент для Mac позволяет вставить интерактивный прототип в рамку телефона и получить видео для промосайта.
- Ratio. Экспериментальный инструмент дизайна от Флриана Шульца. В своей сопроводительной статье он рассказывает о принципах работы. Ratio основан на токенах и использует их в достаточно передовом виде (например, может подключать их из стороннего инструмента).
- Principle 5. Вышло обновление, хотя и лёгонькое. Можно импортировать макеты из Figma, есть тёмная тема оформления.
- UXPin. В прототипах появились общие переменные, которые можно использовать на разных шагах (например, введённое в форму имя пользователя).
- Famous. Инструмент обещает экспорт макетов Sketch, Adobe XD и Photoshop в работающие Progressive Web Apps.
- Webflow. Добавили инструмент работы с CSS Grid.
- Sketch. Советы Дмитрия Бунина по использованию стилей текста в Sketch 52.
- Prototypr. Запустила хронологию обновлений инструментов дизайна — сейчас есть архив за последний год.
- UX Feedback. Сервис позволяет опросить пользователей сайта. На входе — оценка через смайлики (по шкале из пяти), есть возможность задать дополнительные вопросы.
- Sympli Versions. Система версионирования макетов и шаблонов для дизайнеров от Sympli. Её анонсировали в 2017 году, теперь она доступна для всех.
- Purple. Сервис помогает хранить проектную документацию по дизайну: от входящих требований и сценариев использования в самых разных вариациях до макетов и других наглядных результатов работы.
- Drafta. Ещё один сервис для хранения макетов в команде. Правда, не особо полезный ― просто галерея без спецификаций и даже описания. Делает отечественная компания Scada.
- Sensitive. Ещё один сервис версионирования макетов.
Джефф Сауро описывает подход сводных оценочных листов состояния UX в продукте. Это отличный наглядный инструмент для отслеживания «здоровья» дизайна и выбора точек приложения усилий дизайн-команды.
Карл Фаст пишет о трёх ролях дизайна в современных компаниях: интеграция, трансформация и эволюция. Толковый взгляд на задачи дизайн-менеджера.
Ханна Маккелви и Яккуилен Л. Франк рассказывают, как они использовали customer journey map для встречи новых сотрудников в библиотеке. Эта задача сама по себе интересная и важная, так что статья полезна вдвойне.
Фред О'Брайан описывает текущее состояние конструкторов сайтов, использующих алгоритмический дизайн. Он пообщался с создателями многих из них или процитировал их мнения на эту тему.
12. "Lazy Loading Images"
Памятка по реализации «ленивой» загрузки изображений в вебе от Рауля Нанвани. Многие сильно ухудшают работу с сайтами, реализуя только часть из этих практик. В итоге пользователи с хорошим интернетом дольше ждут, пока загрузится графика.
Дело Гутенберга живёт, новые книги по дизайну интерфейсов появляются регулярно. Вот пара-тройка свежих:
- Скотт Кьюби "Writing for Designers" о текстах в интерфейсах.
- Кэт Холмс "Mismatch" об инклюзивном дизайне.
- Адам Силвер "Form Design Patterns" о приёмах дизайна форм.
- Тим Браун "Flexible Typesetting" от главного типографа Adobe.
- Ну и выдержка из прошлогодней книги Матей Латин "Rhythm in Web Typography".
Аврора Харли говорит о значительном улучшении рекомендательных систем за последние годы. Она даёт советы по их реализации.
Памятка по проведению интервью с пользователями от Кары Пернис из Nielsen, Norman Group. Достаточно подробно для обзора.
Вивьен Жанг описывает паттерн подталкивания пользователя к действию с помощью отложенной анимации элемента интерфейса. Это помогает обратить внимание на функциональность, не вываливая на человека все возможности сразу.
17. "Designing design systems"
Толковая статья Жерлин Яренпун-Филипс из Clearleft о внедрении дизайн-систем на практике. Полезные нюансы процесса общения с продуктовой командой или клиентом.
Отличный пример описания Jobs to Be Done на основе типичных жизненных ситуаций учителя.
19. Pocket Design
Блог дизайн-команды Pocket. В первой статье Тони Мёрфи рассказывает о целях редизайна продукта и принципах дизайна, которые закладывали в него.
Меган Вензель делится опытом выстраивания процесса UX-исследований в компании с нуля.
Читайте полную версию дайджеста в моём блоге. В нём, как обычно, много новых материалов по дизайну, дизайн-системам, инструментам дизайна, свежих скриптов и прочего. За свежими ссылками также можно следить в группе на Facebook, сообществе во «ВКонтакте» или канале Telegram — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.
Комментарий удален модератором