Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 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.

Письма рассылки

• Забавная коллекция анти-паттернов, когда найти ссылку на отписку от рассылки практически невозможно.
• Шпаргалка по созданию почтовых рассылок от сервиса Send with Us. Этапы процесса, инструменты, советы.

Выдержки из отчета Baymard Institute

• Финальный обзор основных выводов из исследования с попыткой применить их к сайту Macy’s.

Web UI Design Techniques: Colors & Flat Design
Новая книга от UXPin: флет-дизайн, цвета, палитры и техники. Кстати, Krzysztof Stryjewski, автор обложек для этой серии начал публиковать их на Behance.

Дизайн в здравоохранении

• Серия статей на тему дизайна для здравоохранения на Medium.

Гайдлайны платформ и шаблоны дизайна для них

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

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

Понимание пользователя

The Psychology of Pricing: A Gigantic List of Strategies
Появился русский перевод мощного материала о работе с ценами, их отображением является важной частью дизайна для конверсии. Nick Kolenda подготовил очень и очень крутой обзор психологических стратегий и дизайнерских методов методов представления цен продуктов.

Проблемы метода персонажей

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

Похож ли ваш красный на мой красный?
Альтернативные цветовые схемы или цветоаномалия. Цветовая слепота для чайников. Подробное объяснение механизма цветового восприятия на русском. Понятие Квалиа и Теория Разума в придачу. В продолжение темы:

• Aaron Tenbuuren дает советы по подбору цветов в интерфейсах с учетом пользователей, не различающих цвета.

Информационная архитектура, концептуальное проектирование, контент-стратегия

Многоканальное взаимодействие

• Kevin Nichols пишет на тему подготовки контента для компании, взаимодействующей с пользователем сразу по нескольким каналам.
• Jantine Geldof говорит о том, что эффективное кросс-канальное взаимодействие требует изменения культуры в компании, ведь нужно наладить эффективное взаимодействие многих ранее не связанных подразделений.

Проектирование и дизайн экранов интерфейса

Pixate + Form = Google

• Google купил Pixate и сделал Pixate Studio бесплатным.
• После долгого затишья вышла версия Form 1.3. Появилась возможность нативного запуска прототипов, добавлены компоненты material design.
• Интересное интервью Matias Duarte с создателями Pixate и Form. Проливает свет на то, зачем куплены инструменты.

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



Principle — Visual Prototyping
В этом году с новыми инструментами для дизайнера затишье, но вот относительно свежий — Principle. Деталей пока нет, но обещают все то же, что делают InVision-подобные инструменты. Один из создателей — бывший инженер Apple.

Будущее инструментов дизайна

• Плагин Matej Hrescak для Sketch, который реализует часть из описанных в статье Josh Puckett идей.
• Benjamin Berger также поднимает эту проблематику. Он делит рабочий процесс дизайнера на два этапа — поиск подходящего направления и производство продукта на его основе. И ссылается на плагин Matej Hrescak и идеологию Atomic Design как на выход.

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

Sketch

• Sagi Shrieber описывает реальные проблемы перехода на Sketch, с которыми пришлось его команде в SimilarWeb. Отказ от Фотошопа был не таким однозначным и количество багов до сих пор значительно.
• Видео-материалы по работе со Sketch.
• Пара слов о том, как сравнительно легко собирать прототипы в Keynote на основе макетов в Sketch.

Marvel

• Marvel движется в сторону интеграции инструментов юзабилити-тестирования прототипов.

UXPin

• UXPin получили $5млн инвестиций от True Ventures, куда недавно ушел Jeffrey Veen. Будут развиваться быстрее и, наверняка, выпускать больше книжек!

InVision

• Появилась возможность работы со слоями, что заметно упрощает построение сложных экранов.

LucidChart

• Arun Joseph Martin сделал обзор основных возможностей продукта по его использованию для создания диаграмм и прототипов.

Инструменты паблишинга

• Tilda теперь умеет экспортировать страницы в Wordpress. При этом общие элементы сайта вроде меню остаются вашими, Тильда меняет только контент.
• Tilda улучшила возможности работы с мобильной версией.

Плагины к Photoshop

• Плагин Ditto позволяет использовать переменные в Photoshop.

Обзоры инструментов прототипирования

• Обзор Weld и Atomic.

Пользовательские исследования и тестирование, аналитика

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 дает рекомендации на тему опросов по поводу нескольких вариантов дизайна. Как понять, что наиболее популярный по абсолютным значениям вариант статистически корректно выбирать победителем.

Визуальное программирование и дизайн в браузере

Живые гайдлайны и компонентные системы

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

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


Weld — From idea to website in minutes
Инструмент Weld позволяет создавать адаптивные сайты в браузере. Есть готовый набор элементов, можно делать анимацию, облегчается хостинг.


Framer

• Улучшена работа со слоями для прототипов, импортированных из Sketch.
• Онлайн-инструмент Prototyp на базе Framer.
• Антон Карташов написал обзорный пост про работу с Coffee Script во Framer.

Pure UI
Интересные размышления Guillermo Rauch о том, что если бы интерфейс проектировался как функция, а не конкретное визуальное решение. Это позволит дизайнеру и разработчику работать более плотно.


Protein

• Совсем на днях вышло интервью с подробным рассказом о проекте и планах на будущее.

Новые скрипты

• Фейерверк на CSS и JS.
• Полигональный лев, который следит за курсором.
• Интересное поведение при drag&drop.
• Полигональный динозавр, реагирующий на движение мыши.
• Анимированные переходы между страницами.
• JS-библиотека Dragula для drag&drop.
• Автоматическое увеличение ширины и высоты полей ввода на JavaScript.

Работа с SVG

• Инструмент рисования, помогающий понять, как работают пути в SVG.
• Подробное руководство Sara Soueidan по нетривиальностям раскраски SVG с помощью CSS.
• Lea Verou о создании круговых диаграмм в SVG.

Работа с Flexbox

• Drew Minns о том, как сортировать элементы в flexbox.

Работа с цветом

• Генератор случайных градиентов, помогает в наше непростое время лонгридопараллаксов
• Коллекция CSS-переменных с большой палитрой цветов, названных простыми словами.

Веб-типографика

• Интересное исследование по использованию шритфов в письмах рассылки от компании Style Campaign. Популярность конкретных шрифтов, начертаний, способы подгрузки кастомных шрифтов, размеры и соотношения, цвета и т.п.
• Компания 1910 предлагает выравнивать текст не по самой базовой линии, а по промежутку между ними. Это облегчает создание вертикального ритма в интерфейсах.

Smarter Grids With Sass And Susy
Michelle Barker написал небольшое пошаговое руководство по созданию адаптивных сеток с помощью фреймворка Susy на базе Sass. В этой ветке будут собираться решения по работе с сетками в CSS.


Bootstrap и Foundation

• Шаблон с сеткой Bootstrap 3 для Sketch.

JavaScript для дизайнеров

• Хорошая пошаговая обучалка работе с JS-фреймворком React.

The W3C Mobile Checker
Альфа-версия инструмента для проверки мобильных и планшетных сайтов от W3C. Пока что проверка идет долго, если вообще отрабатывает, но выдает советы по улучшению дизайна и верстки.

Метрики и ROI

Новые медиа и онлайн-журналистика

• О том, как и зачем считать вовлеченность читателя.

Управление интерфейсными проектами, процессами и командами

Branding and #DesignInTech
Интересная дискуссия на тему провязки бренда в интерфейсе и других аспектах продукта, которую вели John Maeda, Robert Padbury и Tim McCoy.

Zeplin

• Продукт вышел из беты. В блоге описываются основные изменения.

Tactical Design Critique
Marcin Wichary рассказывает о формализованном процессе критики дизайна, использующемся в команде Medium. Это небольшой воркшоп, чем-то похожий на хорошо известный peer reviews, позволяющий найти и описать множество проблем в интерфейсе.

Построение дизайн-культуры

• О том, как работает дизайн-команда GoPro. Интересно, что каждую неделю все сотрудники должны походить пару часов с камерой компании, чтобы лучше понимать как ее используют потребители.

Кейсы

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 и запустила сразу два блога: общий и посвященный специализированным инструментам. Поток статей на старте мощный, есть много интересного:

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

Кейсы редизайна

• Простой, но добротно описаный кейс работы над редизайном мобильного приложения Thanx. Особых открытий нет, но процесс для таких задач показан хорошо.
• Дарья Калинина из команды Яндекс.Денег рассказывает о произошедшем на неделе редизайне сервиса.
• Рассказ о редизайне бизнес-ориентированного приложения календаря для Android.
• Рассказ о том, как делался инструмент для работы с диаграммами в приложении Paper.

Непрошенные редизайны

• Очень толковый концепт приложения Google Calendar от Brian Nelson.

Редизайн BBC

• Мощный материал команды BBC об опыте локализации группы продуктов с учетом адаптивности. Много тонких нюансов, которые всплывают только в таких крупных проектах.

История злоключений Healthcare.gov

• О студии Nava, которая участвовала в редизайне гос.сервисов США в команде Обамы и переосмыслила работу над ними. Как правило, это монструозные системы, которые запускаются целиком, а потом отгребают по полной. Они сделали их модульными, так что независимые подрядчики могут работать над отдельными кусками, что добавляет динамики и качества. В итоге они открыли отдельную компанию, которая специализируется на переосмыслении работы над гос.сервисами.

История

History of Icons — A visual brief on icon history by FUTURAMO
Шикарнейший материал по истории иконок от 80х до настоящего времени. Компания Futuramo разбирает эволюцию подходов и приводит примеры всех более-менее значимых платформ. Обзорная версия на русском.

Тренды

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

• Joshua Johnson пытается понять, почему современные сайты такие одинаковые и как можно с этим бороться.

Идеология No UI

• Близкая по духу концепция Zero UI, хотя и более приземленная. В отличие от No UI, который предлагает не делать интерфейс вообще, Zero UI говорит об отказе от GUI.
• О фейковых интерфейсных решениях и том, грешновато ли это. Если уж отказываться от принятия решений пользователем в пользу системы, то не стоит имитировать сообщения о ее статусе. Ведь это делает разрыв между ментальной моделью пользователя и реальной моделью работы системы еще большим.

Автомобильные интерфейсы

• Исследование университета Торонто говорит о том, что проекция интерфейса на лобовое стекло ухудшает безопасность вождения.
• Brian Lamb рассказывает о концепте интерфейса для Kia, который они сделали в свободное время при работе над веб-версией системы MyUVO.

Виртуальная реальность

• Julius Tarng недавно пришел в Facebook и занялся виртуальной реальностью. Он описывает свои первые шаги и дает советы начинающим, а также показывает, как использовать Quartz Composer для этого.

Умные часы и браслеты

• Коллекция умных часов от Casio, которые они выпускали с начала 90х.

Для общего и профессионального развития

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 Stupic рассказывает о своем личном проекте, где он делал по иконке-иллюстрации каждый день в течение года. Это позволило ему профессионально прокачаться, получить кучу полезных контактов, да еще и продать многие из этих работ. Формат «100 работ в течение 100 дней» популярен в последние годы, во многом благодаря Michael Beirut из Pentagram — это отличный способ прокачать свои проф.навыки.


The Guide to Interactive Wireframing
Новая книга от UXPin о создании интерактивных wireframes.

Все выпуски рассылки Главреда. Эксперимент
Максим Ильяхов выложил все выпуски рассылки Главреда на своем сайте.


Анонсы тренингов и семинаров

• Школа дизайна Яндекса запустила блог на Look at Me, рассказывающий о ходе проекта.

Шутки про дизайнеров за 400

• Шутки на тему от одного из художников Симпсонов.
• Как дизайнеры врут клиентам. Перевод на русский.
• Обратная серия постеров о том, как клиенты врут дизайнерам.

Продуктовый дизайнер

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

Sketchnotes

• Руководство по использованию цвета.

Отрывки из книги Mike Monteiro «You’re My Favorite Client»

• Майк выложил всю первую главу из книги: «Зачем вам нужен дизайн».

Люди и компании в отрасли

Дизайн-партнеры венчурных компаний

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

Покупка дизайн-студий крупными компаниями

• Мнение Thomas Lockwood о том, почему у бизнеса дизайн-агентств проблемы.

Susan Kare

• Видео выступления Susan Kare с мини-конференции Layers.

Свежие ссылки можно также отслеживать в одноименной Facebook-группе или получать раз в месяц по почте. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.