Дайджест продуктового дизайна, июль 2015
Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-июнь 2015. Вы можете получать свежие обзоры по почте.
Паттерны и Best Practices
Spatial Interfaces
Очень интересные размышления Pasquale D«Silva на тему того, как представить карту взаимодействия с продуктом в виде многомерного пространства. Это пространство может быть как простым, двухмерным, так и более сложным. Если четкая модель есть, то пользователю будет гораздо проще работать с приложением. Он приводит удачные примеры и полную кашу, которой почему-то славятся музыкальные сервисы.
Dropdowns Should be the UI of Last Resort
Luke Wroblewski рекомендует по возможности отказаться от выпадающих списков в мобильных формах. Они требуют большего количества нажатий, а в случае с современным iOS системный контрол («барабан») еще и крайне неудобен.
Ad Placement for Mobile
Aurora Bedford из NN/g описывает нюансы использования рекламы на мобильных. В условиях и без того ограниченного пространства надо быть втройне аккуратным и не бесить пользователей, не сдвигать начало контента совсем вниз и не создавать ощущения конца страницы.
The ultimate guide to designing landing pages that convert
Отличная шпаргалка по лендингам от WebDesignerDepot.
Письма рассылки
Выдержки из отчета Baymard Institute
Web UI Design Techniques: Colors & Flat Design
Новая книга от UXPin: флет-дизайн, цвета, палитры и техники. Кстати, Krzysztof Stryjewski, автор обложек для этой серии начал публиковать их на Behance.
Дизайн в здравоохранении
Гайдлайны платформ и шаблоны дизайна для них
Material Design
- Google Material Design Lite — фрейморк, позволяющий легко и быстро построить свой сайт на мобильных платформах в «материальном» стиле. По словам представителей Google, он построен на HTML5, CSS3 и JavaScript, не использует других фреймворков, является кросс-браузерным и реализован по методу gracefully degradation, что позволяет ему хорошо работать даже в старых браузерах. В комплекте — базовые компоненты (кнопки, карточки, меню, переключатели, etc), 5 типичных шаблонов, простой инструмент для настройки цветовых тем и вполне внятную документацию. Приятный бонус — один из шаблонов построен на основе сайта Android. Репозиторий на GitHub.
- Обзор ресурсов для дизайнеров, работающих над material design.
- Taylor Ling сравнил реализацию главной кнопки в приложениях Google с тем, что написано в гайдлайнах. Почти все не соответствуют тому, что написано в официальных рекомендациях :)
- Продолжение мощного кейса про редизайн Chrome для Android от Sebastien Gabriel.
- За последний год в любви material design с большим придыханием признались многие дизайнеры и издания. Meng To пишет о том, что он не лучше и не хуже iOS, просто другой. В статье интересные сравнения сильных и слабых сторон обеих платформ.
- Шаблоны Nexus 5 и 9 в PSD от Sebastien Gabriel.
Apple Watch
Понимание пользователя
The Psychology of Pricing: A Gigantic List of Strategies
Появился русский перевод мощного материала о работе с ценами, их отображением является важной частью дизайна для конверсии. Nick Kolenda подготовил очень и очень крутой обзор психологических стратегий и дизайнерских методов методов представления цен продуктов.
Проблемы метода персонажей
Похож ли ваш красный на мой красный?
Альтернативные цветовые схемы или цветоаномалия. Цветовая слепота для чайников. Подробное объяснение механизма цветового восприятия на русском. Понятие Квалиа и Теория Разума в придачу. В продолжение темы:
Информационная архитектура, концептуальное проектирование, контент-стратегия
Многоканальное взаимодействие
Проектирование и дизайн экранов интерфейса
Pixate + Form = Google
Prototyping with iAd Producer
Linda Dong, которая работала в Apple над инструментами для рекламной системы iAd, показывает как использовать iAd Producer для прототипирования интерфейсов. Оказывается, он обладает неожиданно сильными возможностями для интерфейсных дизайнеров.
Principle — Visual Prototyping
В этом году с новыми инструментами для дизайнера затишье, но вот относительно свежий — Principle. Деталей пока нет, но обещают все то же, что делают InVision-подобные инструменты. Один из создателей — бывший инженер Apple.
Будущее инструментов дизайна
PageCloud
Сервис PageCloud стал одним из хитов недавно прошедшего TechCrunch Disrupt. Он позволяет на лету редактировать страницу сайта в браузере и сохранять изменения на сервер. Кроме того, легко импортировать макет из того же Photoshop прямо в браузер. Все это неплохо показано в видео.
Sketch
Marvel
UXPin
InVision
LucidChart
Инструменты паблишинга
Плагины к Photoshop
Обзоры инструментов прототипирования
Пользовательские исследования и тестирование, аналитика
Analysis Isn«t Cool
Большинство публикаций и выступлений на тему пользовательских исследований много говорят о том, как проводится работа с пользователями, но не очень активно рассказывает об одном из ключевых этапов — анализу полученных знаний. Jim Ross жалуется на это и описывает свой подход.
5 Things to Know about Likert Scales
Небольшая шпаргалка по шкале Лайкерта от Jeff Sauro.
How To Moderate Effectively In Usability Research
Colleen Roller дает советы модераторам пользовательских исследований с тем, чтобы минимально влиять на их результаты.
Measuring & Modeling Customer Expectations
Jeff Sauro предлагает метод отслеживания и прогнозирования пользовательских ожиданий от продукта. Для этого пользователям показывается стандартный опросник по 7-балльной шкале до и после работы с интерфейсом, при этом лучше делить их на две группы, чтобы первая оценка не влияла на вторую.
How to statistically test preference data
Jeff Sauro дает рекомендации на тему опросов по поводу нескольких вариантов дизайна. Как понять, что наиболее популярный по абсолютным значениям вариант статистически корректно выбирать победителем.
Визуальное программирование и дизайн в браузере
Живые гайдлайны и компонентные системы
QuartzCode
Приложение QuartzCode помогает дизайнерам создавать нативный код в Objective C или Swift для анимации в iOS- и Mac-приложениях. Она импортирует графику в SVG, хотя можно создавать векторные изображения и прямо в инструменте.
Weld — From idea to website in minutes
Инструмент Weld позволяет создавать адаптивные сайты в браузере. Есть готовый набор элементов, можно делать анимацию, облегчается хостинг.
Framer
Pure UI
Интересные размышления Guillermo Rauch о том, что если бы интерфейс проектировался как функция, а не конкретное визуальное решение. Это позволит дизайнеру и разработчику работать более плотно.
Protein
Новые скрипты
Работа с SVG
Работа с Flexbox
Работа с цветом
Веб-типографика
Smarter Grids With Sass And Susy
Michelle Barker написал небольшое пошаговое руководство по созданию адаптивных сеток с помощью фреймворка Susy на базе Sass. В этой ветке будут собираться решения по работе с сетками в CSS.
Bootstrap и Foundation
JavaScript для дизайнеров
The W3C Mobile Checker
Альфа-версия инструмента для проверки мобильных и планшетных сайтов от W3C. Пока что проверка идет долго, если вообще отрабатывает, но выдает советы по улучшению дизайна и верстки.
Метрики и ROI
Новые медиа и онлайн-журналистика
Управление интерфейсными проектами, процессами и командами
Branding and #DesignInTech
Интересная дискуссия на тему провязки бренда в интерфейсе и других аспектах продукта, которую вели John Maeda, Robert Padbury и Tim McCoy.
Zeplin
Tactical Design Critique
Marcin Wichary рассказывает о формализованном процессе критики дизайна, использующемся в команде Medium. Это небольшой воркшоп, чем-то похожий на хорошо известный peer reviews, позволяющий найти и описать множество проблем в интерфейсе.
Построение дизайн-культуры
Кейсы
Product Design Unification Case Study, Part 2: «Burger-Driven» Framework
На Smashing Magazine вышла моя вторая статья об унификации дизайна в Mail.Ru Group — как мы приводим к единому виду линейку контент-проектов с помощью дизайнерско-технологического решения и бургерного подхода. Это продолжение истории с мобильным вебом, которая вышла весной.
Я уже рассказывал об этом осенью в виде презентации. Теперь все это в виде статьи, с кучей полноформатных иллюстраций и дополнительных деталей. Версия статьи на русском.
В прошлом году мы перезапустили пять сервисов в бургерном дизайне (Афиша, Авто, Здоровье, Погода, Гороскопы), в этом уже четыре (Недвижимость, ТВ, Леди, Hi-Tech). Это дичайше интересная и сложная задача, хотя мы пока прошли только первый ее этап — предстоит развивать платформу продуктово, систематизировать технологически и чистить визуально.
My Two Years as an Anthropologist on the Photoshop Team
Charles Pearson работает пользовательским исследователем в команде Photoshop и рассказывает о своей работе.
Facebook Design
Дизайн-команда Facebook еще более плотно взялась за Medium и запустила сразу два блога: общий и посвященный специализированным инструментам. Поток статей на старте мощный, есть много интересного:
Кейсы редизайна
Непрошенные редизайны
Редизайн BBC
История злоключений Healthcare.gov
История
History of Icons — A visual brief on icon history by FUTURAMO
Шикарнейший материал по истории иконок от 80х до настоящего времени. Компания Futuramo разбирает эволюцию подходов и приводит примеры всех более-менее значимых платформ. Обзорная версия на русском.
Тренды
Design Machines
Один из лучших материалов месяца от Travis Gertz. Он говорит о том, что современный дизайн в вебе превратился в унылое однообразие и разбирает причины этого засилия клонов. А после предлагает выход — куда смотреть и куда двигаться, чтобы выйти из тупика. Очень вдохновляюще, да и оформлено здорово. Все то же в формате презентации. В продолжение темы: 
Идеология No UI
Автомобильные интерфейсы
Виртуальная реальность
Умные часы и браслеты
Для общего и профессионального развития
Tilda Education
Где-то в начале месяца команда Tilda Publishing запустила свою школу дизайна. Никита Обухов в последнее время уделяет много времени воспитанию рынка и эти материалы — часть общей инициативы. А в октябре запускаются два онлайн-курса в дополнение к статьям — по веб-дизайну и веб-паблишингу.
Readymag Design School
Создатели Readymag запустили свою онлайн-школу дизайна. По сути это скорее набор добротных обучающих статей, посвященных основам дизайна — шрифты, сетка, цвет, композиция.
So you want to be an IA?
Отличная мотивирующая статья Abby Covert для тех, кто хочет стать информационным архитектором, да и вообще вырасти профессионально в UX. В том числе о ложных и правильных целях развития.
How to become an awesome designer in 365 days
Marko Stupić рассказывает о своем личном проекте, где он делал по иконке-иллюстрации каждый день в течение года. Это позволило ему профессионально прокачаться, получить кучу полезных контактов, да еще и продать многие из этих работ. Формат »100 работ в течение 100 дней» популярен в последние годы, во многом благодаря Michael Beirut из Pentagram — это отличный способ прокачать свои проф.навыки.
The Guide to Interactive Wireframing
Новая книга от UXPin о создании интерактивных wireframes.
Все выпуски рассылки Главреда. Эксперимент
Максим Ильяхов выложил все выпуски рассылки Главреда на своем сайте.
Анонсы тренингов и семинаров
Шутки про дизайнеров за 400
Продуктовый дизайнер
Sketchnotes
Отрывки из книги Mike Monteiro «You«re My Favorite Client»
Люди и компании в отрасли
Дизайн-партнеры венчурных компаний
Покупка дизайн-студий крупными компаниями
Susan Kare
Свежие ссылки можно также отслеживать в одноименной Facebook-группе или получать раз в месяц по почте. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
