62
ДАЙДЖЕСТ ПРОДУКТОВОГО ДИЗАЙНА Новости и тренды ЮРИЙ ВЕТРОВ MAIL.RU GROUP ×1 ВЫПУСК

UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

Embed Size (px)

Citation preview

Page 1: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ДАЙДЖЕСТ ПРОДУКТОВОГО ДИЗАЙНА

Новости и тренды

ЮРИЙ ВЕТРОВ

MAIL.RU GROUP

×1ВЫПУСК

Page 2: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

AKA “ОБЗОР СВЕЖИХ МАТЕРИАЛОВ”™Мое главное хобби :) Все самое интересное из прочитанного

попадает сюда с кратким комментарием.

https://www.facebook.com/groups/pdigest/

Page 3: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ИНТЕРФЕЙСЫ НА VC.RUС перезапуском Цукерберг Позвонит я стал курировать рубрику

«Интерфейсы». Самое толковое будет иметь переводы.

https://vc.ru/interface

Page 4: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ПАТТЕРНЫ И ЛУЧШИЕ ПРАКТИКИ

Page 5: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ПРОСТРАНСТВЕННЫЕ ИНТЕРФЕЙСЫОчень интересные размышления Паскаля Де Сильва на тему того,

как представить карту взаимодействия с продуктом в виде многомерного пространства.

Page 6: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ФОТОГРАФИИ В БРЕНДИНГЕОчень толковая статья Лорена Бакстера об использовании

фотографий в интерфейсе для усиления бренда. Он приводит яркие примеры и дает инструкцию по поиску своей стилистики.

Page 7: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

АДАПТИВНЫЕ РАЗМЕРЫ ШРИФТОВSteven Hoober описывает оптимальные размеры шрифта для

разных устройств в зависимости от размера экрана и положения пользователя. В конце статьи идет полезная сводная таблица.

Page 8: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

КАК ПОЧИНИТЬ ИНТЕРФЕЙСОдна из лучших статей на тему пустого состояния интерфейса от

Scott Hurff. Он разделяет их на пять стадий – нет данных, загрузка, мало информации, ошибка, идеальное состояние.

Page 9: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ГАЙДЛАЙНЫ

Page 10: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

SALESFORCE LIGHTNINGДизайн-система компании SalesForce.

Page 11: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

IOS 9Самое интересное ждало анонса force touch и taptic engine. В ОС добавлен

целый пакет решений, сильно сокращающий и упрощающий сценарии работы с приложениями: быстрые действия с домашнего экрана и попапы для показа

ключевой информации без перехода в приложение.

Page 12: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

APPLE TVИнтерфейс стал современным, в духе iOS и MacOS, к

возможностям управления добавился пульт с жестами в духе Nintendo Wii и тач-поверхностью.

Page 13: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

Grommet – UX-фреймворк для корпоративных приложений от HP.

MailChimp собрал хорошее всеобъемлющее стилистическое руководство для работников компании в один гайдлайн.

Page 14: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ПОНИМАНИЕ ПОЛЬЗОВАТЕЛЯ

Page 15: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ВЕБ-ИНТЕРФЕЙСЫ ДЛЯ ДЕТЕЙОчень толковый обзор особенностей дизайна для детей разных возрастов от Trine Falbe. В каждом из периодов развития свои когнитивные и физические

способности, что сильно влияет на оптимальный интерфейс.

Page 16: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ПСИХОЛОГИЯ ЦЕНООБРАЗОВАНИЯПоявился русский перевод мощного материала о работе с ценами, их

отображение является важной частью дизайна для конверсии. Ник Колендаподготовил очень и очень крутой обзор психологических стратегий и

дизайнерских методов методов представления цен продуктов.

Page 17: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ФИЗИЧЕСКИЕ ОГРАНИЧЕНИЯ IPADКсения Стернина изучала физические ограничения при работе с планшетом. По результатам исследования удалось создать карту

safe zones для iPad Air 2.

Page 18: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

БЕЗОПАСНАЯ АНИМАЦИЯVal Head поднимает новую проблему – accessibility для интерфейсной

анимации. Некоторый процент людей страдает от укачивания и для них современные продукты с изощренными переходами не очень-то комфортны.

Page 19: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ИНСТРУМЕНТЫ

Page 20: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

RUSSIAN PROTOTYPING CLUBАнтон Карташов создал группу про Origami, Framer.js, Pixate и другие

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

Page 21: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

PRINCIPLEСоздатели говорят, что можно воссоздать ключевые

взаимодействия Facebook Paper за 60 секунд.

Page 22: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

FLINTO ДЛЯ MACИнструмент переродился и выпустил приложение для работы с

прототипами и анимацией для Mac, похожий на недавний Principle.

Page 23: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

INVISIONЦелая череда анонсов в сентябре:

«Insight» упрощает взаимодействие между дизайнерами и разработчиками.

«Inbox», единый инструмент для работы с перепиской вокруг проектов.

«Motion», продвинутые инструменты для работы с анимацией.

Онлайн-курсы для дизайнеров. Первый из них ведет Scott Hurff из Tinder.

Page 24: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

AXURE RP 8 BETAВ августе появилась возможность поставить бета-версию Axure RP

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

Page 25: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

Easee – анимация в браузере.

Линда Донг, которая работала в Apple над инструментами для рекламной системы iAd, показывает, как использовать iAdProducer для прототипирования интерфейсов.

Сервис PageCloud стал одним из хитов недавно прошедшего TechCrunch Disrupt. Он позволяет на лету редактировать страницу сайта в браузере и сохранять изменения на сервер.

Sympli – отечественный инструмент для передачи дизайна от дизайнеров разработчикам.

Page 26: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

КУДА ИДУТ ИНСТРУМЕНТЫJulius Huijink опросил создателей и руководителей ключевых

инструментов прототипирования (Axure, InVision, Marvel, Proto.io, UXPin) на тему их будущего и возможности создания универсального продукта.

Page 27: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

Khoi Vinh размышляет о том, куда идет рынок инструментов прототипирования. Adobe наняла его заниматься инструментами для дизайнеров – одно из самых интересных назначений последнего времени.

Сессия вопросов и ответов с Koen Bok, создателем Framer.

Tes Mat пытается собрать один и тот же интерфейс и описывает плюсы и минусы Proto.io, Pixate, Origami, Framer и Form. Кстати, на подходе его книга о работе во Framer.

Page 28: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

BOOTSTRAP 4Вышла первая альфа-версия. В блоге внушительный список

изменений. Также запущен официальный каталог тем оформления.

Page 29: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

MATERIAL DESIGN LITEФреймворк, позволяющий легко и быстро построить свой сайт на мобильных платформах в «материальном» стиле.

Page 30: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ПОЛЬЗОВАТЕЛЬСКИЕ ИССЛЕДОВАНИЯ

И ТЕСТИРОВАНИЕ

Page 31: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ANALYSIS ISN’T COOLБольшинство публикаций и выступлений на тему пользовательских

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

Page 32: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

УПРАВЛЕНИЕ ИНТЕРФЕЙСНЫМИ

ПРОЦЕССАМИ И ПРОЕКТАМИ

Page 33: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ПЛАТФОРМЕННОЕ МЫШЛЕНИЕКак перестать плодить документацию и начать жить. Нужно

воспринимать работу над продуктом как создание и развитие платформы, а не конкретный релиз. На русском.

Page 34: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

КОМУ НУЖНА UX-СТРАТЕГИЯ?У нее 7 ключевых составляющих от Paul Bryan: связка с бизнес-

стратегией, модель клиента, карта experience, сравнительные исследования и отчеты, общий план внедрения стратегии и roadmap.

Page 35: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

БРЕНДИНГ В ИНТЕРФЕЙСАХИнтересная дискуссия на тему провязки бренда в интерфейсе и

других аспектах продукта, которую вели John Maeda, Robert Padbury и Tim McCoy.

Page 36: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

МЕТРИКИ И ROI

Page 37: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

32 СПОСОБА ИЗМЕРИТЬ UXОтличная классификация методов пользовательских

исследований от Jeff Sauro в привязке к конкретным задачам.

Page 38: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

КЕЙСЫ

Page 39: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

KREMLIN.RUАртем Геллер отвечает на вопросы Smashing Magazine о работе

над новым сайтом Kremlin.ru. Насыщенная статья, в которой много интересных технических деталей.

Page 40: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ALCATEL WATCH UXШикарнейший кейс Дениса Невожая про работу над

интерфейсом умных часов One Touch Watch от Alcatel.

Page 41: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

Очень мощный кейс от команды Jawbone, охватывающий все нюансы продуктовой работы. Вторая часть.

Толковый кейс работы над новым приложением Paper для iPhone. Почему FiftyThree не стали портировать широко известную iPad-версию, а переосмыслили с нуля.

Page 42: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ИСТОРИЯ

Page 43: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

THE SPACE JAMМощный материал The Rolling Stone о том, как создавался

легендарный сайт фильма Space Jam и как вообще киноиндустрия пришла в интернет.

Page 44: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ИСТОРИЯ ИКОНОКШикарнейший материал по истории иконок от 80-х до настоящего

времени. Компания Futuramo разбирает эволюцию подходов и приводит примеры всех более-менее значимых платформ.

Page 45: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ТРЕНДЫ

Page 46: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

POST-MACAdam Baker вспоминает концепцию Anti-Mac от Якоба Нильсена и

Гентнера 1996 года и предлагает свое видение Post-Mac.

Page 47: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

DESIGN MACHINESСовременный дизайн в вебе превратился в унылое однообразие. Travis Gertz разбирает причины этого засилия клонов и предлагает выход — куда смотреть и куда двигаться, чтобы выйти из тупика.

Page 48: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

APPLE WATCH ОТ LUKE WROBLEWSKIЛюк предложил упрощенную модель работы интерфейса. Часы действительно

обладают избыточностью для такого маленького устройства и его подход ближе к Android Wear, более простой платформе в этом плане.

Page 49: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ПРОФЕССИОНАЛЬНОЕ РАЗВИТИЕ

Page 50: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

UIDEOАндрей Якушев запустил агрегатор видео с отечественных

дизайнерских конференций. Уже более 600 роликов.

Page 51: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

TILDA EDUCATIONНикита Обухов уделяет много времени воспитанию рынка. В

октябре запускаются два онлайн-курса в дополнение к статьям –по веб-дизайну и веб-паблишингу.

Page 52: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

READYMAG DESIGN SCHOOLНабор добротных обучающих статей, посвященных основам

дизайна – шрифты, сетка, цвет, композиция.

Page 53: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ДИЗАЙН В СТАРТАПАХОчень интересное интервью с Braden Kowitz, дизайн-партнером Google Ventures, о том, как фонд работает со стартапами в плане

дизайна.

Page 54: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

DEATH TO BULLSHITBrad Frost запустил новый блог по мотивам своей недавней презентации. Он собирает в нем примеры плохих практик в

дизайне и того, как индустрия борется с ними.

Page 55: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

ЛЮДИ И КОМПАНИИ В ОТРАСЛИ

Page 56: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

COOPER NYCCooper пошли против тренда схлопывания самостоятельного

бизнеса на дизайне и сами купили студию Catalyst Group. Теперь у них есть офис в Нью-Йорке и расширенная экспертиза.

Page 57: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

МАТЕРИАЛЫ КОНФЕРЕНЦИЙ

Page 58: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

OFFF RUSSIA 201510 и 11 октября ИКРа во второй раз приводит международный

фестиваль OFFF в Россию. Приедут IDEO, AKQA, Joshua Davis, StinkDigital, MUCHO. Во второй день пройдут мастер-классы от IDEO и Joshua Davis.

Page 59: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

COOPER И COOPER UМасштабная серия статей о Cooper U, большой инициативе компании Cooper Consulting по дизайн-образованию. Интервью с Tereza Brazen,

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

Page 60: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

P.S.Свежие материалы можно получать по почте в формате почтовой рассылки. Подписывайтесь.

Это был эксперимент, надеюсь, не провальный :)

*

*

Page 61: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

CREDITS

ГЕННАДИЙ ДРАГУН

ДМИТРИЙ ПОДЛУЖНЫЙ

ПАВЕЛ СКРИПКИН

АНТОН АРТЕМОВ

ДЕНИС ЕФРЕМОВ

ЕВГЕНИЙ СОКОЛОВ

АЛЕКСЕЙ КОПЫЛОВ

Page 62: UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

СПАСИБО!ЮРИЙ ВЕТРОВ

www.jvetrau.com twitter.com/jvetrau