Дизайн Yury Vetrov
2 665

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

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

В закладки

1. Клуб создателей отечественных дизайн-систем

В этом году многие отечественные компании показали свои наработки по дизайн-системам. Команда Mail.Ru Group решила придать импульс их развитию в России и запустила сайт-коллекцию Design Systems Club.

На сайте собрана информация о компаниях, про активность которых мы знали наверняка: библиотеки компонентов, статьи, презентации и прочее. Главный критерий упоминания на сайте — компания понимает под «дизайн-системой» технологический фреймворк, а не банальный UI Kit в Sketch (или классический гайдлайн на скриншотах).

Если мы про вас незаслуженно забыли или переврали в описаниях ― пишите Андрею Сундиеву или мне. Подпишитесь на рассылку, чтобы получать всё свежее раз в месяц.

2. Design Principles

Бен Бринелл собрала ещё одну мощную коллекцию дизайн-принципов, которая в чём-то даже крупнее классического Design Principles FTW.

3. How to Deal With Bad Design Suggestions

Кара Пернис и Кэтрин Уайттон подсказывают, как действовать в ситуации, когда менеджер или заказчик предлагает странные решения. Важно не вступать в конфликт, а лучше изучить суть идеи и на практике объяснить её работоспособность или неуспешность.

4. Fjord Trends 2018

Ежегодный обзор трендов от Fjord. Он всегда один из самых сбалансированных.

Другие прогнозы на 2018 год.

  • Толковый обзор визуальных и интерактивных трендов 2018 года от дизайн-команды Webflow без вечного тухляка вроде анимации, фоновых видео и крупных заголовков.
  • Ольга Шевченко из Vintage Web Production участвует в жюри Awwwards и отмечает одни из самых выразительных приёмов, которые используют современные промосайты и сайты компаний.
  • Ежегодный обзор трендов от журнала uxdesign.cc, которые перебирают приличное количество публикаций за год.
  • Крейг Филлипс троллит ежегодные обзоры трендов серией дурацких прогнозов.
  • Якоб Нильсен пытается спрогнозировать рост количества UX-специалистов и замахнулся аж на 100 млн человек к 2050 году. Он ссылается на три предпосылки: больше специалистов в компаниях, которые уже системно занимаются дизайном, больше компаний, которые начинают делать это, и больше стран, где есть такие компании.

5. Лучшие дизайн-конференции в 2018 году

Игорь Губайдулин собрал список конференций.

6. Learn UX Research Methods with GIFs

Моя коллега Ксения Стернина описала популярные методы пользовательских исследований в гифках.

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

  • Alva: новый инструмент для дизайнеров заточен под дизайн-систему в правильном понимании ― дизайнер использует визуальное представление React-компонентов, а не банальный UI Kit. После моды на конвертеры из кода в Sketch создатели инструментов наконец-то добрались до правильного подхода.
  • Вышло большое обновление инструмента для создания макетов Framer. Видео показывает работу с векторными объектами, адаптивность и другие обязательные вещи. Читайте инструкцию Павла Лаптева по работе с интерфейсами виртуальной реальности, пошаговое руководство по базовым функциям от Саши Окунева, смотрите видеокурс от Руслана Шарипова.
  • Adobe XD: декабрьское обновление. Очень ленивое.
  • Вышла версия 48 Sketch. В этот раз без больших рывков: управление цветовыми профилями, развитие Sketch Cloud и библиотек, поиск и замена цвета, улучшенное масштабирование символов и много мелочей. Компания также выпустила официальный UI Kit для iOS. Плагины: SketchCleaner помогает причесать макеты, а Chart — создавать простые графики и диаграммы в макетах.
  • Обзор обновлений в основном продукте InVision, которые будут доступны в начале следующего года. А ещё она запустила небольшой венчурный фонд для создателей дизайн-инструментов.
  • Небольшая памятка по работе с новым инструментом анимации Haiku от Nad Chishtie.
  • UXPin показала экспериментальный инструмент для импорта реальных компонентов в коде в свой инструмент дизайна. Оказалось, не в Sketch, но обычно такие примеры вдохновляют создателей плагинов и других надстроек.
  • Вышла версия 1.5 Fuse. Появилось приложение для просмотра прототипов на Android и iPhone. В следующем году появится интеграция со Sketch и FuseJS с возможностью использовать просто JavaScript.
  • Интервью с основателем Tilda Никитой Обуховым об истории и будущем продукта.

8. Cristobal Castilla & Zack Schiller — Design Systems & Tools at Facebook

Выступление Кристобаль Кастильи о дизайн-системе FIG в Facebook. Рассказ касается в основном шаблонов для Sketch и Origami, но затрагивает компоненты в коде и подход к развитию платформы в целом. Для дизайнерских инструментов собственными силами написан какой-то космический набор дополнений, прослоек и плагинов.

Помимо удобства организации это даёт возможность использовать иконки из единого репозитория с разработкой, подключать данные из личного профиля (это удобно и для прототипирования, и для юзабилити-тестирования). Это мощный ориентир того, как можно организовать работу с дизайнерскими инструментами.

9. M-Commerce ― Terrible UX

Обновлённая статистика по конверсии в мобильных интернет-магазинах от Nielsen Norman Group. Хотя она всё ещё хуже обычных компьютеров и по процентам, и по деньгам, разрыв стремительно сокращается.

10. Top 11 Tech Sneak Peeks from MAX 2017 that Wow’ed

Подборка 11 экспериментальных проектов Adobe, показанных на конференции MAX 2017. Многие из них основаны на платформе алгоритмического дизайна Sensei. Самые интересные ― SceneStitch для быстрой замены целых частей фото, Puppetron для стилизации фотографий под работы иллюстраторов (модель не нужно тренировать заранее) и PhysicsPak для создания сложного паттерна в любой форме. Другие новости алгоритмического дизайна:

  • Отечественный сервис Trendmind помогает генерировать дизайн одежды. Один из его основателей Татьяна Попова рассказывает историю создания.
  • Экспериментальный инструмент от группы исследователей MIT подсказывает предположительную визуальную заметность элементов на странице или в макете. Получается тепловая карта, которую впоследствии должно подтвердить или опровергнуть реальное eye-tracking-исследование. Для сравнительно простых интерфейсов это вполне рабочий инструмент, хотя нужно критически относиться к результатам для более-менее сложных продуктов. Видео работы.
  • Исследовательская инициатива Google PAIR на тему пользы современных решений на базе искусственного интеллекта в профессиональной среде. Анонс.
  • Команда Netflix продолжает разрывать шаблоны и рассказывает о следующем поколении своей технологии автоподбора промобаннеров для фильмов. Они научились персонализировать кадр для конкретного пользователя в зависимости от того, что лучше зайдёт ― например, настроение сцены или кадр с конкретным актёром.
  • Экспериментальное приложение от Google автоматически собирает комикс в несколько кадров из видео. Выбирает нужные моменты, располагает их в шаблоне, обрабатывает с помощью фильтров.
  • Microsoft добавила в Word помощника по составлению резюме, который ориентируется на других кандидатов с LinkedIn. Он подсказывает, какие навыки лучше добавить и на что сделать упор, чтобы получить конкурентоспособный профиль и адаптировать его под конкретную вакансию.
  • Джастин О'Бейрн дотошно сравнивает карты Google и Apple. Он пытается разобраться, как Google умудрилась получить высокую графическую и смысловую детализацию зданий и зон активности даже для небольших городов и посёлков. Компания использует подходы алгоритмического дизайна и выделяет уйму полезной информации из спутниковых снимков и панорам улиц.

11. How To Systematically Reduce The Risk & Uncertainty Of New Ideas

Александр Остервальдер показывает, как снижать риски новых продуктов по трём критериям (желанность, жизнеспособность, реализуемость) с помощью его шаблонов бизнес-модели и ценностного предложения.

12. Design Thinking is Kind of Like Syphilis — It’s Contagious and Rots Your Brains

Мощный лонгрид Ли Винселя с глубокой критикой дизайн-мышления. Он копает в сторону нездорового отношения к понятию «инновации» и абстрактному желанию «переизобрести что-нибудь» без попытки осознать, как эта вещь или явление работает и в чём именно его проблемы.

Дизайн-мышление — отличный способ популяризации вдумчивого дизайн-процесса для недизайнеров; проблема в том, что зачастую всё заканчивается просто на уровне простого выплеска «креативной энергии».

13. Big Data Have You Afraid? You’re Not Alone

Билл Парди разжёвывает дизайнерам основные принципы анализа больших данных.

14. Здравая критика в дизайне

Станислав Рапп достаточно ёмко описывает подход к организации критики дизайна. Её ценность, процесс, пример из личной практики.

15. Проектировщик СКБ Контур — принципы

Неплохое описание навыков и обязанностей проектировщика интерфейсов в дизайн-команде СКБ Контур.

16. 5 Metrics to Diagnose Website Problems in Online Studies

Джефф Сауро даёт пять простых критериев для оценки успешности интерфейса, который проверяется через удалённое немодерируемое юзабилити-тестирование. Просматривать десятки и сотни видео бывает утомительно, так что способ быстрее обнаруживать проблемы важен.

17. The Secrets of Creating Great Design Workshops

Дэн Браун описывает универсальный подход к проведению любой рабочей сессии по концептуальной проработке интерфейса. Это общая канва, в которую вполне укладываются популярные «брендированные» процессы. В другой статье он описывает основные навыки фасилитатора, которые помогают провести удачные рабочие сессии по проектированию интерфейса.

18. There are no small changes

Де Трейнор из Intercom показывает пример того, как много вопросов по реализации продуктового решения нужно решить даже для маленького изменения.

19. Messages Matter — Exploring the Evolution of Conversation

Команда Facebook Messenger подготовила анализ истории развития общения с помощью коротких сообщений и мессенджеров и описывает своё видение того, как они меняются. Много интересных данных и статистики.

20. Branded in Memory

Интересный эксперимент на тему того, как потребители запоминают логотип бренда. Группу респондентов попросили набросать логотипы десяти широко известных компаний. В результате выделились их наиболее запоминаемые черты. А ещё Джим Нильсен собрал простой онлайн-тест на узнаваемость логотипов ― насколько форма символа известных брендов позволяет узнать его по общим очертаниям.

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

#дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 2, "likes": 17, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 31291, "is_wide": false, "is_ugc": true, "date": "Wed, 27 Dec 2017 17:32:00 +0300" }
{ "id": 31291, "author_id": 8729, "diff_limit": 1000, "urls": {"diff":"\/comments\/31291\/get","add":"\/comments\/31291\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/31291"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

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

Популярные

По порядку

0

Моя коллега Ксения Стернина описала популярные методы пользовательских исследований в гифках.

И вправду, очень важный материал

Ответить
0

Спасибо

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления