Hi-Tech

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

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

Свежее

Вакансии

Написать

Уведомлений пока нет

Пишите хорошие статьи, комментируйте,
и здесь станет не так пусто

Войти

Ru Юрия Ветрова. Дайджест от директора по дизайну бренда Mail.

В закладки

Ещё бы ― в хорошем интерфейсе всё занято полезными вещами и особо нет мест для выражения бренда, разве что лого, цветовая палитра, пиктограммы и характерные паттерны. Иллюстрации стали обязательной частью айдентики цифровых продуктов ― они есть в каждом первом сервисе.

Особо продвинутые проявляют единство коммуникации в текстах и анимации, но этого сложнее добиться. Так что иллюстрации ― простой и экспрессивный способ сделать бодрее и более узнаваемо. Собрал пачку историй известных компаний, которые нашли себя. Так что неудивительно, что половина Dribbble забита безинтерфейсными картинками.

Кейт Моран и Ким Флаэрти из Nielsen, Norman Group показывают причины возникновения технологических мифов и то, как они влияют на использование продуктов.

Экспериментальные: Project Aero, Project Gemini, Character Illustrator CC, Premiere CC. На ежегодной презентации новых продуктов и экспериментов Adobe Max 2018 показали карьерный самосвал обновок: Adobe XD, Photoshop для iPad, Adobe Fonts (бывший TypeKit), обновления After Effects, Illustrator, InDesign, Dimension и других инструментов. Обновления уже прилетели через 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 для встречи новых сотрудников в библиотеке. Ханна Маккелви и Яккуилен Л. Эта задача сама по себе интересная и важная, так что статья полезна вдвойне.

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

Многие сильно ухудшают работу с сайтами, реализуя только часть из этих практик. Памятка по реализации «ленивой» загрузки изображений в вебе от Рауля Нанвани. В итоге пользователи с хорошим интернетом дольше ждут, пока загрузится графика.

Вот пара-тройка свежих: Дело Гутенберга живёт, новые книги по дизайну интерфейсов появляются регулярно.

  • Скотт Кьюби "Writing for Designers" о текстах в интерфейсах.
  • Кэт Холмс "Mismatch" об инклюзивном дизайне.
  • Адам Силвер "Form Design Patterns" о приёмах дизайна форм.
  • Тим Браун "Flexible Typesetting" от главного типографа Adobe.
  • Ну и выдержка из прошлогодней книги Матей Латин "Rhythm in Web Typography".

Она даёт советы по их реализации. Аврора Харли говорит о значительном улучшении рекомендательных систем за последние годы.

Достаточно подробно для обзора. Памятка по проведению интервью с пользователями от Кары Пернис из Nielsen, Norman Group.

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

Полезные нюансы процесса общения с продуктовой командой или клиентом. Толковая статья Жерлин Яренпун-Филипс из Clearleft о внедрении дизайн-систем на практике.

Отличный пример описания Jobs to Be Done на основе типичных жизненных ситуаций учителя.

19. Pocket Design

В первой статье Тони Мёрфи рассказывает о целях редизайна продукта и принципах дизайна, которые закладывали в него. Блог дизайн-команды Pocket.

Меган Вензель делится опытом выстраивания процесса UX-исследований в компании с нуля.

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

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

Написать

Push-уведомления

{ "page_type": "article" }

["\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u043f\u043b\u0430\u0446\u0435\u0431\u043e \u0441\u043a\u0430\u0447\u0430\u043b\u0438
\u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u0440\u0430\u0437","\u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043e\u0442 email
\u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0435\u043c\u043e\u0432","\u041d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u043d\u0430\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0438\u0445\u0438
\u0433\u043e\u043b\u043e\u0441\u043e\u043c \u041f\u0430\u0441\u0442\u0435\u0440\u043d\u0430\u043a\u0430 \u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043e\u043a\u043d\u043e \u043d\u0430 \u043e\u0441\u0435\u043d\u044c","\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043a\u0430\u043b\u0438\u0444\u043e\u0440\u043d\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430
\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u044c\u044e","\u0425\u0430\u043a\u0435\u0440\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043e\u0439\u0442\u0438 \u0434\u0432\u0443\u0445\u0444\u0430\u043a\u0442\u043e\u0440\u043d\u0443\u044e
\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0433\u043e\u0432\u043e\u0440\u043e\u0432","\u0413\u043e\u043b\u043e\u0441\u043e\u0432\u043e\u0439 \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0432\u044b\u043a\u0443\u043f\u0438\u043b
\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044e-\u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044f"]

Приложение-плацебо скачали
больше миллиона раз

Подписаться на push-уведомления

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть