Февраль '16

• Geoff Teehan рассказывает о создании расширенных лайков в Facebook.

• Интервью с Гарри Тонаканяном, выпускником школы и, возможно, самым молодым дизайнеров в России в продуктовой компании (ему 16 лет).

• История August de los Reyes, благодаря которому Microsoft повсеместно включил в свои рабочие процессы и ценности инклюзивный дизайн.

• Очень толковое интервью с Cap Watkins, главы дизайна Buzzfeed. О его карьере и как он выстраивает дизайн-процессы в текущей компании.

IDEO вошла в японскую группу компаний kyu collective, продав не раскрываемую долю. Они хотят решать проблемы более сложного уровня. IDEO уже продавали долю в 1996 году, но позже выкупили её обратно. Официальное заявление.

Ещё о покупках дизайн-студий крупными компаниями:

• George Teehan вспоминает, как работалось в Teehan+Lax и чем отличается его деятельность в Facebook.
• IBM покупает немецкое агентство Aperto.
• Marek Pawlowski очень толково анализирует тренд покупок дизайн-студий и описывает возможные сценарии развития такого объединения.

На вопросы об Альфа-Лаборатории отвечают Владимир Мельников, Ярослав Шуваев, Вячеслав Акулов и Иван Васильев. Отечественные банки активно вкладываются в дизайн и UX, у Альфа-Банка это получается хорошо еще со времен начала сотрудничества со Студией Лебедева. А сейчас Альфа одна из немногих, у кого есть выделенная группа про работу над новыми сервисами, поэтому узнать о ее работе особенно интересно.

На вопросы о своей нашумевшей и очень актуальной сейчас концепции «The Best Interface is No Interface» и одноименной книге отвечает Golden Krishna, работавший в Cooper, Samsung и Zappos, а в декабре вышел на работу в Google, где будет заниматься Android.

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

32 плаката о мифах UX появились на сайте автора.

• Генератор отмазок для решения конфликтов с заказчиками и менеджерами.
• Генератор пафосных дизайнерских биографий.
• Собирательный образ клише о типичном дне креативного специалиста. При чем клише подтверждены статистикой.

• Толковая инструкция для тех, кто хочет прокачаться в дизайне и верстке от Nick Fredman. Книги, курсы, публикации, сообщества и т.п. Он сам учился всему этому уже будучи менеджером.

Теперь в плагине Panda доступны расширенные возможности фильтрации лент всех сервисов по категориям, а соц.сети вроде Dribbble и Behance можно смотреть в единой ленте.

Вышла вторая версия Muzli, плагина для Chrome, который заменяет страницу пустой вкладки лентой дизайнерских сайтов и сообществ. Что нового.

• Сайт Collect UI собирает все концепты, сделанные в рамках явления Daily UI.
• Amy Devereux выкладывает иконки каждый день в течение года.

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

• Epic Games показали конструктор игр на базе Unreal Engine внутри виртуальной реальности.
• Интересные наблюдения о том, что объекты в виртуальной реальности, которые ощущаются реалистичными (внешний вид, звук, физическая обратная связь), воспринимаются почти как настоящие. В статье рассказывается о том, как игроки машинально останавливают меч, представляя что он остановлен другим мечом.

• Интересный рассказ об американской студии Volkswagen, которая занимается автономными машинами. Они проводят хорошую параллель с вожжами для управления лошадьми — это хорошая аналогия для текущего состояния автопилотов, где человеку нужно ощущение контроля.
• Visa учит машины самостоятельно платить за бензин и покупки в магазинах.
• Экспериментальный автомобильный интерфейс Honda на базе приложения Drivermode как замена CarPlay и Android Auto.

• Sanjiv Sirpal предлагает термин «продуктектура» для гаджетов интернета вещей. Он описывает принципы, по которым стоит создавать такие продукты, чтобы они не стали унизительными и бесполезными «интерфейсами для интерфейсов».

• Jeremy Bailey делает пародийные скетчи для несуществующих патентов.

• Хороший зрелый взгляд Matt Hartman на тему реально полезных сценариев использования мессенджеров. Сейчас эта тема перегрета и многие с пеной у рта воспроизводят известное «Не будет ни газет, ни книг, ни кино, ни театров, а будет одно сплошное телевидение». Статья советует думать, действительно ли перенос сценария в мессенджер упростит работу пользователя. Кроме того, тут толковые мысли на тему находимости ботов и надстроек, а также их рынка в целом.
• Трезвый взгляд на тренд от Cennydd Bowles. Он говорит о том, что современные продукты пытаются стать важнее, чем есть на самом деле, отнимая у пользователя кучу времени и сил. И упоминает пример интерфейса встречи нового пользователя в виде чата, который из двух простых экранов сделал утомительный 15-минутный диалог.
• Еще одна пачка интересных мыслей на тему от Alistair Croll. В частности, про то, как тестировать такие интерфейсы.

• Quartz совершил еще одну мини-революцию в мире новостных сайтов и запустил приложение-мессенджер для чтения новостей. Оно общается с пользователем в формате чата, имитируя живого собеседника; иногда даже кидает гифки. Пока доступно только для iPhone. Приложение Quartz разобрали по полочкам. Анимация и встреча нового пользователя.
• Шикарный лонг-рид о том, как работает Buzzfeed. Во второй половине много интересного об их работе с аналитикой.
• О том, как меняется работа с аналитикой в современных СМИ.

• UXPin совсем разошлись, выпустили четыре книги про тренды 2016 года и два бандла с ними — первый и второй. Не хватает бандла бандлов.
• InVision запустил еще одну серию статей, на этот раз мнения известных дизайн-менеджеров о будущем професии. Первая часть более слабая.

Andy Budd о том, почему UX-дизайнеры как отдельная роль не прижились в Силиконовой долине. Во многом благодаря готовым дизайн-системам и гайдлайнам мобильных платформ, где всё уже продумано из коробки.

• Еще один разбор идей Paul Otlet и сравнение с тем, в какую сторону интернет и гипертекст развивались в реальности.

Мощнейшая историческая справка о появлении кибернетики как науки от Hugh Dubberly и Paul Pangaro. Статья очень длинная и ищет корни в начале 20 века, связывая ключевые имена в истории развития компьютеров. Во второй половине много интересного про связь кибернетики с дизайном и в целом появление проектирования взаимодействия. Пробраться через текст непросто, но точно стоит тем, кому интересна история профессии.

Сайт UX Timeline собирает разные версии дизайна известных продуктов. На старте есть Deezer, AirBnB, Uber, Spotify, Dropbox, Vimeo, Mailchimp, Shazam.

Как Медуза синхронизирует пуш-уведомления в десктопном браузере и приложении, а также выбирает, о чем именно уведомлять пользователя.

• История работы над интерактивной статьей The Atlantic от студии Truth Labs.

• Vox сделали новую версию Chorus CMS, более подходящую для поддержки большой линейки продуктов. Немного о том, как переводили на нее издание Curbed (правда, больше про поиск визуального стиля)..

Tim Brown из IDEO о том, что по мере распространения дизайн-мышления оно перестает быть конкурентным преимуществом для компаний.

• Christina Wodtke разбирает мифы о менеджерах продуктов и их не очень корректном сравнении с UX-специалистами.

• Avocode собрали статистику по итогам дизайн-макетов, которые загружали в сервис в 2015 году. Инструменты, именование файлов, приемы оформления.

• Zeplin теперь генерирует CSS. Если поддерживать консистентность названий слоев в макете с классами реального кода, жить будет еще проще. Кроме того, будет и поддержка переменных для препроцессоров.

Smashing Magazine публикует главу Bell Callahan из книги Smashing Book 5 о его процессе работы над адаптивным дизайном. Там также много про работу с клиентом в целом.

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

Michelle Bacigalupi описывает внедрение системного подхода к работе с пользовательскими исследованиями и аналитикой в неком известном, но не названном сервисе конференц-связи.

• Jake Knapp выпускает книгу Sprints, посвященную практике дизайн-спринтов. Выходит 8 марта. Вырезанная из книги глава про работу над сервисом подкастов Gimlet Media.
• Brian Cervino собрал в Trello план проведения дизайн-спринта. Отличный шаблон.
• Прошлым летом вышла отличная методичка от Google (PDF).

Забавный комикс, показывающий методологии разработки ПО в виде разных автомастерских.

Сервис Wake запустил блог In Progress, в котором выходят очень толковые интервью руководителей известных дизайн-команд. Мало воды, много интересных инсайтов.

Некоторые из этих и других статей на тему построения дизайн-команд и дизайн-культуры:

• Как работает дизайн-команда Stripe.
• Как работает дизайн-команда FiftyThree, создателей приложения Paper.
• Интересные выводы из исследования UC Berkeley о том, как лидеры взаимодействуют друг с другом. Их эксперимент подтвердил, что это потенциально конфликтная ситуация и каковы причины этого.
• Irene Au предлагает интересный подход к оценке морали дизайн-команды.
• ustwo практикует формат дизайнерского пинг-понга для прокачки навыков внутри команды и получения свежих идей. Два дизайнера работают с макетом по очереди, пересылая его друг другу.
• Шикарное описание текущего понимания профессии и роли UX-менеджера от Brandon Schauer из CapitalOne. Получился настоящий манифест, емкий и вдохновляющий.
• Ryan Page, руководитель одной из дизайн-команд в Capital One, рассказывает о том как устроен дизайн в компании.
• Katarina Batina из Artsy рассказывает о том, как устроен дизайн в компании. Недавно у них прошла масштабная реорганизация, которую проводил Robert Lenne, перешедший из IDEO.

• Виталий Фридман рассказывает, как можно использовать Responsive Breakpoints Generator и другие инструменты для кадрирования и оптимизации изображений для разных разрешений.
• Как работает сервис Cloudinary, генерирующий изображения и код для разных разрешений поддерживаемых устройств, который еще и правильно кадрирует изображения.
• Responsive View, еще один сервис предпросмотра состояний адаптивного сайта на разных устройствах.

• Поддержка мульти-тач-жестов.

• Manuel Rego Casanovas разбирает несколько ситуаций применения CSS Grid Layout.

• Подробная инструкция по работе с фильтрами в SVG на примере фирменного подхода Spotify с жестким колорированием картинок.
• Фильтры VSCO в CSS.

• Кнопки, прилипающие к курсору мыши.
• Анимированные иконки, сделанные с помощью библиотеки mo.js.
• Эффект кнопки Shazam.
• Эффекты расходящихся кругов при нажатии на кнопку.
• Серия эффектов разделения на частицы при наведении на кнопку.
• Эксперимент с простой дополненной реальностью в браузере.

• Шикарный разбор особенностей использования em и rem от Zell Liew.

Christian Cantrell в деталях рассказывает о том, как работает инициатива AMP от Google по представлению новостных сайтов на мобильных. Он также сравнивает отдельные ее моменты с подобными решениями Facebook (Instant Articles) и Apple (News).

• Еще 5 концептов Dribbble, переведенных в реальные скрипты.
• Ramotion выложили код на Swift для своего концепта кругового меню. Сам скрипт на GitHub.

Optimizely запустили свою дизайн-систему OUI. На GitHub доступна библиотека компонентов, есть и живой гайдлайн. Tom Genoni и Daniel O’Connor рассказывают о создании платформы.

Еще о живых гайдлайнах и компонентных системах:

• CSS-фреймворк Bulma на базе flexbox.
• Nathan Curtis пишет о том, что развитие дизайн-системы должно быть отдельным продуктом, ведь самое важное начинается после ее внедрения.
• Обсуждение ограничений Atomic Design у Nathan Curtis и Trent Walton. Идеология хорошо описывает модульный дизайн и имеет кучу полезных инструментов для внедрения на практике. Но классификация компонентов через 5 не очень очевидных уровней иногда ведет к путанице — этот паттерн уже организм или еще молекула? В этом плане классификация того же БЭМ проще и понятнее — есть базовые элементы и компоненты, которые состоят из них.
• Как компания Shyp использует GitHub для коммуникации дизайнеров и разработчиков при работе над живым гайдлайном. Ничего сверхъестественного, просто неплохо описано.
• Статья Cas Lemmens, в которой помимо общефилософских рассуждений есть рассказ о дизайн-принципах Spotify и инициативе Glue (Global Language & the Unified Experience) по унификации продуктов компании.

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

• Памятка Jeff Sauro по проведению экспертной оценки.

• Еще одна памятка от Jeff Sauro.

Хорошие мысли Nalini Kotamraju из Salesforce о некотором внутреннем кризисе классического понимания роли UX-исследователя. Рост возможностей аналитики и количественных экспериментов, упрощение доступа к пользователям за счет удаленных исследований, гибкая разработка — все это сильно меняет привычный ход работ пользовательских исследователей.

Victor Yocco описывает подход пользовательских исследований, когда команда исследователей выдергивает пользователей в естественной среде (например, покупателей определенных товаров прямо в магазине, людей у банкомата или посетителей зоопарка). Процесс, особенности, подводные камни.

Шикарная памятка Chris Ashton по тестированию сайтов в зоопарке браузеров. Он предлагает делать его в три захода — сначала отловить самые заметные косяки реализации в самом популярном браузере, затем взяться за пару самых убогих, а в конце еще раз пройтись в нескольких востребованных.

Олег Якубенков описывает метод исследования поведения пользователей с помощью анализа статистики их работы в продукте. За сравнительно короткое время можно изучить паттерны поведения 50-100 человек. Часть из описанных проблем находятся юзабилити-тестированием или рассчетом метрик, но далеко не все.

• Вышла вторая версия Marvel.

• Плагин HTML Block позволяет получать CSS-код из макетов.

• GifGun — инструмент для быстрого экспорта анимации в GIF.

• На сайте Sketch запустился каталог плагинов и интеграций с другими инструментами.
• Перевод недавнего интервью с основателем Sketch Pieter Omvlee.
• Sketch Repo, еще один сайт с ресурсами для Sketch.
• Кажется, скоро релиз надстройки Silver, которая делает из Sketch почти что Adobe Comet. Вышло сразу две статьи за неделю с её обзором — первая и вторая (на русском).
• 140 шаблонов устройств для Sketch от Meng To. Телефоны, планшеты, ноутбуки.
• Прототипирование с помощью Framer.js.
• Вышел Sketch 3.6, который помимо всего прочего чинит работу с текстом.

• Создатели инструмента Koncept, пробующего совместить возможности прототипирования и юзабилити-тестирования из коробки, сделали бесплатный пробный период для читателей группы. Нужно пройти небольшой опрос и продуктом можно будет пользоваться месяц бесплатно.

• Новый интересный пост о работе с вектором.
• Инвайты потихоньку раздаются и уже есть первые отзывы. О работе в живом приложении можно послушать в подкасте layout (еще один выпуск).

• Видео-обзор основного процесса работы в инструменте от Paul Trani.

• Небольшая статья про работу с инструментом.

Adobe выпустили Animate CC как замену Edge Animate и Flash Professional, совмещающую задачи обоих инструментов. Векторная анимация, у которой на выходе не умерший флеш, а HTML5-код. Немного о нем.

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

Компания вышла на тропу войны — помимо недавно приобретенного Macaw, они купили еще и Relay, который позволяет обсуждать дизайн в Slack. Эта команда (они назывались Waybury) делала еще и перспективный сервис Iconic для системной работы с SVG-иконками. Судя по заявлению ребят, это скорее acquihire. И это не говоря о буйстве инициатив по контент-маркетингу. Интересно, какой у компании глобальный план — побороться с Photoshop и Sketch или побить сотню мелких инструментов?

Помимо этого, они запустили Labs, экспериментальную команду для работы над вещами помимо основного продукта. Их первый релиз Craft — это плагин для Sketch и Photoshop, облегчающий использование реальных данных в макетах. Из файла, облачного хранилища, фотостока или любой веб-страницы. Кроме того, он может клонировать паттерны в духе Comet. Обзор его возможностей (на русском и ещё немного). О других возможностях Craft и инициативах InVision:

• Как использовать межнациональные имена в Craft.
• Как вставлять повторяющиеся текстуры с помощью Craft и использовать заливку текста картинкой.
• Новая версия Workflow, встроенного инструмента для управления дизайн-проектами.
• Как InVision использовал свой инструмент Boards для работы над айдентикой своей новой серии митапов Design+.