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

Уже почти пять лет руководитель портальной дизайн-команды Mail.Ru Group Юрий Ветров публикует в своем блоге регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок он отбирает примерно 5% стоящих публикаций, которыми интересно поделиться среди экспертов.

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

Машины дизайна

Один из лучших материалов месяца от Тревиса Гертца. Он
говорит о том, что современный дизайн в вебе превратился в унылое однообразие и разбирает причины этого засилия клонов. А после предлагает выход — куда смотреть и куда двигаться, чтобы выйти из тупика.

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

История иконок

Шикарнейший
материал по истории иконок от 80-х до настоящего времени. Компания Futuramo разбирает эволюцию подходов и приводит примеры всех более-менее значимых платформ. Обзорная версия на русском.

Унификация дизайна. Часть 2

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

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

В прошлом году мы перезапустили пять сервисов в бургерном дизайне («Афиша», «Авто», «Здоровье», «Погода», «Гороскопы»), в этом уже четыре («Недвижимость», «ТВ», «Леди», Hi-Tech). Это дичайше интересная и сложная задача, хотя мы пока прошли только первый ее этап — предстоит развивать платформу продуктово, систематизировать технологически и чистить визуально.

Pixate + Form = Google

Google
купила Pixate и сделал Pixate Studio бесплатным. Вдобавок, после долгого затишья вышла версия Form 1.3. В нем появилась возможность нативного запуска прототипов, добавлены компоненты Material Design.

Читайте интересное интервью Матиаса Дуарте с создателями Pixate и Form — проливает свет на то, зачем куплены инструменты.

Пространство интерфейса

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

Tilda Education и Readymag Design School

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

Google Material Design Lite

Фреймворк, позволяющий легко и быстро построить свой сайт на мобильных платформах в «материальном» стиле. По словам представителей Google, он построен на HTML5, CSS3 и JavaScript, не использует других фреймворков, является кросс-браузерным и реализован по методу gracefully degradation, что позволяет ему хорошо работать даже в старых браузерах. В комплекте — базовые компоненты (кнопки, карточки, меню, переключатели, прочее), 5 типичных шаблонов, простой инструмент для настройки цветовых тем и вполне внятную документацию.

Приятный бонус — один из шаблонов построен на основе сайта Android.
Репозиторий на GitHub.

Еще немного свежего про Material Design:

Обзор ресурсов для дизайнеров, работающих над Material Design.
Тейлор Линг сравнил реализацию главной кнопки в приложениях Google с тем, что написано в гайдлайнах. Почти все не соответствуют тому, что написано в официальных рекомендациях.
Продолжение мощного кейса про редизайн Chrome для Android от Себастьяна Габриеля.
За последний год в любви Material Design с большим придыханием признались многие дизайнеры и издания. Менг То пишет о том, что он не лучше и не хуже iOS — просто другой. В статье интересные сравнения сильных и слабых сторон обеих платформ.
Шаблоны Nexus 5 и 9 в PSD от Себастьяна Габриеля.

Унификация дизайна SalesForce

Джина Болтон
рассказывает о том, как команда SalesForce унифицировала дизайн линейки продуктов и перешла от живых гайдлайнов к живой дизайн-системе. Они хранят переменные вроде цветовой палитры отдельно и раздают их по всем платформам — вебу, мобильным приложениям. Более старая публикация и Theo — кусок технологического решения.

Также на тему живых гайдлайнов будут интересны:

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

Выпадающие списки в мобильных формах

Люк Вроблески
рекомендует по возможности отказаться от выпадающих списков в мобильных формах. Они требуют большего количества нажатий, а в случае с современным iOS системный контрол («барабан») еще и крайне неудобен.

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

Психология ценообразования

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

Прототипирование с iAd Producer

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

PageCloud

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

Использование персонажей

Дэвид Травис о проблемах в использовании персонажей, которые
привели к девальвации метода и всеобщему прохладному отношению к нему.

Анализ полученных знаний

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

Два года в команде Photoshop

Чарльз Пирсон
работает пользовательским исследователем в команде Photoshop и рассказывает о своей работе.

Facebook Design

Дизайн-команда Facebook еще более плотно
взялась за Medium и запустила сразу два блога: общий и посвященный специализированным инструментам. Поток статей на старте мощный, есть много интересного:

Даррен Геррати о работе над инструментом для рекламодателей, который наглядно показывает сложный механизм таргетинга и расчета стоимости, а также обучает клиентов более эффективной работе. Очень интересно.
4 принципа Facebook при работе над b2b-интерфейсами.

Стать дизайнером за 365 дней

Марко Ступик
рассказывает о своем личном проекте, где он делал по иконке-иллюстрации каждый день в течение года. Это позволило ему профессионально прокачаться, получить кучу полезных контактов, да еще и продать многие из этих работ. Формат «100 работ в течение 100 дней» популярен в последние годы, во многом благодаря Майклу Бейруту из Pentagram — это отличный способ прокачать свои профнавыки.

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

Фонд и дизайн стартапов

Очень интересное
интервью с Браденом Ковитцем, дизайн-партнером Google Ventures, о том, как фонд работает со стартапами в плане дизайна.

QuartzCode

Приложение
QuartzCode помогает дизайнерам создавать нативный код в Objective C или Swift для анимации в iOS- и Mac-приложениях. Она импортирует графику в SVG, хотя можно создавать векторные изображения и прямо в инструменте.

#DesignInTech

Интересная
дискуссия на тему провязки бренда в интерфейсе и других аспектах продукта, которую вели Джон Маеда, Роберт Пэдбери и Тим Маккой.

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