Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

Традиционный дайджест директора по бренду и дизайну «Райффайзенбанка» Юрия Ветрова.

Четвёртый год я провожу исследование: «Какие дизайн-команды в отечественных продуктовых компаниях самые сильные?».

Можно сравнить результаты за 2020, 2019 и 2018 годы. Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда для профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.

Помимо заметного изменения стилистики, в анонсе есть неплохой обзор важных частей гайдлайнов:

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь
  • Темы оформления с динамическим цветом — самая заметная часть Android 12. Причём можно создавать и более сложные темы. Команда выпустила отличный плагин для Figma, помогающий создавать их.
Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь
Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь
  • Работа с гибкими экранами описана ещё лучше.
  • Доступен мощный UI Kit для Figma.
Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

На ежегодной мега-конференции было несколько крупных и мелких анонсов:

  • Photoshop и Illustrator могут работать в браузере. Пока с базовыми возможностями, но их будут развивать. Есть также гостевой доступ с просмотром и комментированием макетов.
Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь
Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь
  • Creative Cloud Spaces — организация проектов и макетов для совместной работы в вебе.
  • XD подзатих, новостей в последнее время мало. Появились связка с Lottie, проигрывание видео и публикация на Behance.
Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

Советы Nora Pekker из IBM по составлению roadmap UX-исследований в продукте или команде.

Группа энтузиастов проанализировала 425 909 фавиконок из интернета. Популярные форматы, размеры, цвета и всё такое.

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

Kate Kaplan из Nielsen/Norman Group описывает формат воркшопа по описанию миссии дизайн-команды.

Liz Blanchard рассказывает о работе над видением будущего для интерфейсов RedHat (формат описания и воркшопы, на которых его генерировали).

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

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

Jeff Sauro и Jim Lewis показывают, как измерить прошлый опыт работы пользователя с продуктом. Это комбинация срока использования, частоты и процента востребованных ключевых функций.

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

  • Cleanup Pictures: простой онлайн-инструмент позволяет моментально убрать объект с фотографии. Просто выделяете его и он сам отрисовывает всё.
  • Lorem Space: сайт даёт картинки для макетов — обложки фильмов, карточки товаров и т.п. Их можно получить по простой ссылке.
  • Mesh Gradients Editor: генератор mesh-градиентов в браузере. Их можно настраивать.
  • Spectrum: генератор цветовых палитр, которые можно быстро применить к любой части макета, включая иллюстрации и картинки. Плагин для Figma.

Page Laubheimer из Nielsen/Norman Group показывает способы организации товаров в интернет-магазинах, которые не укладываются в основные категории.

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

Deborah Lindberg рассказывает о регулярных упражнения дизайнеров Atlassian, когда они пробуют создать на дизайн-системе компании известные продукты на рынке. Это позволяет проверить её масштабируемость и отловить потенциальные проблемы.

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

Nielsen/Norman Group сделали структурированную подборку своих статей о методах полевых и контекстных исследований, а также удалённом юзабилити-тестировании.

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

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

И ещё одна, Accessibility Maze.

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

Jennifer Bost и Anna Gregory рассказывают о новых принципах дизайна Microsoft. Они дают пару советов на тему внедрения принципов в рабочие практики.

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

Creative Navy сделали обзор методов, помогающих упростить первое использование интерфейсов физических устройств (и не только).

Генератор аватаров по словесному описанию с помощью алгоритмического дизайна. Можно смешать разных персонажей и жанры.

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

Перевод на русский онлайн-книги Ryan Rumsey «Business Thinking for Designers» от InVision.

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

R.E. Hawley анализирует занятный тренд в дизайне книг — массу однообразных обложек, состоящих из абстрактных цветных пятен.

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

Anna Niess, Pedro Carmo и Johnny Rodgers рассказывают о проектировании и поэтапном запуске новой функции Slack коротких аудио- и видео-клипов. Они прошли много итераций и показывают, как менялось взаимодействие пользователей.

Photoshop в браузере и генератор цветовых палитр для Figma: 20 самых важных материалов в продуктовом дизайне за октябрь

Maria Rosala из Nielsen/Norman Group даёт ориентиры по выборке респондентов для пользовательских интервью. Она описывает разные ситуации, которые влияют на размер.

Читайте полную версию дайджеста в моём блоге. За свежими ссылками можно следить в группе на Facebook или во «ВКонтакте», а также в Telegram-канале. Спасибо всем, кто помогает наполнять дайджест.

7575
11 комментариев

Спасибо за подборку новостей!

https://cleanup.pictures/ клёвый, но оооооооооооооочень долгий!

3
Ответить

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

3
Ответить

Юрий, у меня из-за твоих дайджестов место в закладках кончилось :-\

2
Ответить

Photoshop и Illustrator могут работать в браузере. Пока с базовыми возможностями, но их будут развивать. То же, что умеет бесплатный Pixlr.

1
Ответить

Благодарю за отлично выполненную статью, во всех аспектах.

С удовольствием и интересом прочитал, с удовольствием посмотрел, хоть и далёк от темы дизайны, спасибо Юра.

С Уважением, A Tree 🖖

1
Ответить

Очень полезно, большое спасибо!

1
Ответить

Кому нужен аналог фотошопа в браузере, можете ещё посмотреть https://www.photopea.com/
В некоторых местах обходит pixlr, psd поадекватнее открывает и всё такое.

1
Ответить