Продуктовый дизайн: 20 самых важных материалов за июль

Дайджест руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.

Дейв Грей обновил свой популярный шаблон карты эмпатии. В него добавлены цели, порядок заполнения и подсказки.

Продуктовый дизайн: 20 самых важных материалов за июль

Кайо Кальдерари сделал обзор инструментов контроля версий для дизайнеров. В основном они работают с макетами Sketch и основаны на Git. Один из свежезапущенных — Kactus.

Несколько лет портальная дизайн-команда Mail.Ru Group занимается обновлением и унификацией продуктов. У нас сформировалась дизайн-система, на которой работают медиапроекты, мобильный веб и частично productivity-сервисы, появился стиль пиктограмм и иллюстраций, стандартизируются промописьма и промосайты.

Конечно, ещё не во всех сервисах всё хорошо, а где-то первый редизайн не решил всех проблем, но огромный рывок за прошедшие годы трудно не заметить. Чтобы ускорить процесс обновления и сделать нашу работу публичной, мы делимся частью нашей дизайн-системы Paradigm.

Что такое дизайн-система в нашем понимании:

  • Визуальный язык определяет то, как мы создаём интерфейсы продуктов. Как и в обычном языке, у нас есть алфавит (переменные), слова (элементы интерфейса), предложения (компоненты) и цельные тексты (экраны и продукты). Алфавит неизменен, словарный запас трансформируется со временем, а вот предложения и тексты из них создаются всегда разные.
  • Единые компоненты на технологическом уровне — единственный источник правды. Дизайн «вшит» в них, сервисы получают и обновляют их из единого репозитория. Продукты под брендом Mail.Ru, которые используют их на практике: медиапроекты, мобильный веб, часть productivity-сервисов. Они пока доступны только внутри компании.
  • Шаблоны для дизайнерских инструментов — лучший способ быстро показать идею. Другими словами, это просто высокоуровневые скетчи. В идеальной ситуации макеты не верстают, а собирают из единых компонентов. Мы писали об этом раньше.

Виталий Фридман детально разобрал паттерны выбора даты и времени. Статья содержит много примеров и советов по выбору подходящего к конкретной задаче решения. Он также разобрал принципы построения хорошего слайдера.

Продуктовый дизайн: 20 самых важных материалов за июль

Мэг Робихауд рассказала о работе над серией иллюстраций для нулевых состояний интерфейса Shopify. Очень любопытный подход, где иллюстрация передаёт нужное настроение в текущем сценарии — успех, неудача, нейтральное сообщение.

Продуктовый дизайн: 20 самых важных материалов за июль

Исследование Nielsen/Norman Group на тему навязчивости разных форматов рекламы в вебе и на мобильных платформах. Правда, оно проводилось на базе Wireframes, а не реальных баннеров, но так или иначе эксперты смотрели на влияние разных отвлекающих факторов — и в целом антирейтинг выглядит логично.

В другой статье Тереза ​​Фессенден разобрала негативные факторы, влияющие на неприязнь пользователей к рекламе. Они готовы считать её необходимым злом и мириться с ней при определённых условиях.

Продуктовый дизайн: 20 самых важных материалов за июль

Дэн Браун обновил свою классификацию принципов информационной архитектуры и составил список из 43 «линз», через призму которых можно оценивать эффективность интерфейсных решений.

Продуктовый дизайн: 20 самых важных материалов за июль

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

  • 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% времени пониманию того, что и зачем нужно сделать, и только после этого переходят к проработке решения.

Продуктовый дизайн: 20 самых важных материалов за июль

Филипп Бушар в деталях рассказал о создании второй версии легендарной образовательной игры Oregon Trail, вышедшей в 1985 году.

Продуктовый дизайн: 20 самых важных материалов за июль

Джо Каппес и Дживон Пайк из Cooper разобрали паттерны взаимодействия с голосовыми интерфейсами. Всего пять приёмов, которые подходят для разных задач.

Продуктовый дизайн: 20 самых важных материалов за июль

Джош Лавджой и Джесс Холбрук из Google описали подход к работе с возможностями машинного обучения для дизайнера. Материал о том, как общаться с разработчиками и аналитиками и прототипировать сервисы до того, как готовы алгоритмы.

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

Обзор визуальных трендов 2017 года в письмах рассылки.

Продуктовый дизайн: 20 самых важных материалов за июль

Алексей Иванов составил подборку Telegram-каналов для дизайнеров.

Продуктовый дизайн: 20 самых важных материалов за июль

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

Продуктовый дизайн: 20 самых важных материалов за июль

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

Продуктовый дизайн: 20 самых важных материалов за июль

Ник Бутчер из Google описал возможности и нюансы работы с адаптивными иконками, которые появились в Android O. Они хорошо ложатся в разнообразные оболочки и позволяют создавать интересную анимацию. В другой статье Лиам Спрэдлин в деталях разобрал основные инструменты навигации в Android. Удобно, что для каждого из них отмечено, участвует ли он в истории переходов.

Продуктовый директор Shopify Брэндон Чу рассказал о своём подходе к принятию решений: как выделить те, что принимаются быстро и в которых не страшно ошибиться, а как понять, какие наиболее важные и где нужно детально продумать последствия. Его шаблон для принятия решений учитывает UX.

Продуктовый дизайн: 20 самых важных материалов за июль

Издательство Sitepoint в марте 2017 года выпустило книгу Бэна Колмана и Дэна Гудвина «Designing UX: Prototyping». UXmatters опубликовал из неё седьмую главу, посвящённую HTML-прототипам.

В начале 2017 года издательство Houghton Mifflin Harcourt выпустило книгу Дженнифер Мюллер «Creative Change» о том, как не просто предлагать креативные и прорывные идеи, а добиваться их внедрения. UXmatters опубликовал на неё обзор.

Читайте полную версию дайджеста в моем блоге. В нём, как обычно, много новых материалов по дизайну для Apple Watch, Android Wear, Material Design, расширений для Sketch, свежих скриптов и ещё тонна всего. За свежими ссылками также можно следить в группе на Facebook — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.

33
2 комментария

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

3
Ответить

Традиционный пост к дайджесту Юрия Ветрова. Когда уже закончите готовить дайджесты и сделает что-то с интерфейсами мейлру?

3
Ответить