Продуктовый дизайн: 20 самых важных материалов за июль
Дайджест руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.
Дейв Грей обновил свой популярный шаблон карты эмпатии. В него добавлены цели, порядок заполнения и подсказки.
Кайо Кальдерари сделал обзор инструментов контроля версий для дизайнеров. В основном они работают с макетами Sketch и основаны на Git. Один из свежезапущенных — Kactus.
Несколько лет портальная дизайн-команда Mail.Ru Group занимается обновлением и унификацией продуктов. У нас сформировалась дизайн-система, на которой работают медиапроекты, мобильный веб и частично productivity-сервисы, появился стиль пиктограмм и иллюстраций, стандартизируются промописьма и промосайты.
Конечно, ещё не во всех сервисах всё хорошо, а где-то первый редизайн не решил всех проблем, но огромный рывок за прошедшие годы трудно не заметить. Чтобы ускорить процесс обновления и сделать нашу работу публичной, мы делимся частью нашей дизайн-системы Paradigm.
Что такое дизайн-система в нашем понимании:
- Визуальный язык определяет то, как мы создаём интерфейсы продуктов. Как и в обычном языке, у нас есть алфавит (переменные), слова (элементы интерфейса), предложения (компоненты) и цельные тексты (экраны и продукты). Алфавит неизменен, словарный запас трансформируется со временем, а вот предложения и тексты из них создаются всегда разные.
- Единые компоненты на технологическом уровне — единственный источник правды. Дизайн «вшит» в них, сервисы получают и обновляют их из единого репозитория. Продукты под брендом Mail.Ru, которые используют их на практике: медиапроекты, мобильный веб, часть productivity-сервисов. Они пока доступны только внутри компании.
- Шаблоны для дизайнерских инструментов — лучший способ быстро показать идею. Другими словами, это просто высокоуровневые скетчи. В идеальной ситуации макеты не верстают, а собирают из единых компонентов. Мы писали об этом раньше.
Виталий Фридман детально разобрал паттерны выбора даты и времени. Статья содержит много примеров и советов по выбору подходящего к конкретной задаче решения. Он также разобрал принципы построения хорошего слайдера.
Мэг Робихауд рассказала о работе над серией иллюстраций для нулевых состояний интерфейса Shopify. Очень любопытный подход, где иллюстрация передаёт нужное настроение в текущем сценарии — успех, неудача, нейтральное сообщение.
Исследование Nielsen/Norman Group на тему навязчивости разных форматов рекламы в вебе и на мобильных платформах. Правда, оно проводилось на базе Wireframes, а не реальных баннеров, но так или иначе эксперты смотрели на влияние разных отвлекающих факторов — и в целом антирейтинг выглядит логично.
В другой статье Тереза Фессенден разобрала негативные факторы, влияющие на неприязнь пользователей к рекламе. Они готовы считать её необходимым злом и мириться с ней при определённых условиях.
Дэн Браун обновил свою классификацию принципов информационной архитектуры и составил список из 43 «линз», через призму которых можно оценивать эффективность интерфейсных решений.
Новости инструментов дизайна
- Figma: вышла вторая версия десктопного приложения. Инструмент научился делать интерактивные прототипы и готовить макеты к передаче разработчикам. Дискуссия с главой Figma Диланом Филдсом о выходе второй версии инструмента.
- Adobe XD: сайт-коллекция шаблонов.
- Sketch: появился плагин Sketch Material для создания элементов интерфейса Material Design разного уровня сложности.
- Principle: вышла версия 3.0, которая включает много мелких и средних улучшений интерфейса.
- Kite Compositor: вышла версия 1.5. Из новинок — аналог драйверов из Principle, а также новые события для создания интерактивных прототипов.
- Framer: дизайн-команда Framer дала советы по работе с новой версией.
- Omnigraffle: вышла версия 3.0.
- Vectr: обзор.
- Gifmock: приложение помогает собрать анимацию интерфейса в оптимизированный по качеству и размеру GIF. Есть плагин для Sketch.
- Supernova Studio: ещё один инструмент, который обещает превратить макеты в работающее приложение для мобильных платформ. Хотя пока на него постоянно жалуются за неэффективный код. На этот раз — из макетов Sketch в React Native.
Пол Адамс описал, как строится процесс определения проблемы в Intercom. Разработчики компании уделяют 40% времени пониманию того, что и зачем нужно сделать, и только после этого переходят к проработке решения.
Филипп Бушар в деталях рассказал о создании второй версии легендарной образовательной игры Oregon Trail, вышедшей в 1985 году.
Джо Каппес и Дживон Пайк из Cooper разобрали паттерны взаимодействия с голосовыми интерфейсами. Всего пять приёмов, которые подходят для разных задач.
Джош Лавджой и Джесс Холбрук из Google описали подход к работе с возможностями машинного обучения для дизайнера. Материал о том, как общаться с разработчиками и аналитиками и прототипировать сервисы до того, как готовы алгоритмы.
Кстати, я обновил сайт про алгоритмический дизайн, добавил много новых удачных примеров и запустил рассылку.
Обзор визуальных трендов 2017 года в письмах рассылки.
Алексей Иванов составил подборку Telegram-каналов для дизайнеров.
Диего Далия рассказал о том, как формировался подход к работе с проектированием услуг в IBM на базе её версии дизайн-мышления.
Хорошая методичка по анализу внутренних поисковых запросов на сайте от Сьюзан Фаррелл из Nielsen/Norman Group. Где смотреть, что искать, какие выводы и улучшения делать.
Ник Бутчер из Google описал возможности и нюансы работы с адаптивными иконками, которые появились в Android O. Они хорошо ложатся в разнообразные оболочки и позволяют создавать интересную анимацию. В другой статье Лиам Спрэдлин в деталях разобрал основные инструменты навигации в Android. Удобно, что для каждого из них отмечено, участвует ли он в истории переходов.
Продуктовый директор Shopify Брэндон Чу рассказал о своём подходе к принятию решений: как выделить те, что принимаются быстро и в которых не страшно ошибиться, а как понять, какие наиболее важные и где нужно детально продумать последствия. Его шаблон для принятия решений учитывает UX.
Издательство Sitepoint в марте 2017 года выпустило книгу Бэна Колмана и Дэна Гудвина «Designing UX: Prototyping». UXmatters опубликовал из неё седьмую главу, посвящённую HTML-прототипам.
В начале 2017 года издательство Houghton Mifflin Harcourt выпустило книгу Дженнифер Мюллер «Creative Change» о том, как не просто предлагать креативные и прорывные идеи, а добиваться их внедрения. UXmatters опубликовал на неё обзор.
Читайте полную версию дайджеста в моем блоге. В нём, как обычно, много новых материалов по дизайну для Apple Watch, Android Wear, Material Design, расширений для Sketch, свежих скриптов и ещё тонна всего. За свежими ссылками также можно следить в группе на Facebook — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.