Август '16

AIC открывает набор в онлайн-школу. Дизайн и инструменты в цифровой среде развиваются стремительно — стоит только описать тенденции и правила, как они устаревают. Единственный способ научиться — окунуться в среду лидирующей студии и понять принципы на практике. На сайте уже можно записаться в школу.

Отчёт о мастер-классах в рамках конференции, которая прошла 8-10 сентября в Athens, Georgia (США). Она посвящена дизайн-стратегии и собирает мощный состав тематических спикеров.

• Как создавался внутренний инструмент Airshots для автоматического тестирования интерфейса на разных устройствах и языках.

• Дизайн-команда Adobe теперь называется просто Adobe Design вместо Adobe Experience Design (чтобы не путаться с одноимённым инструментом). Они сделали новую айдентику для себя.
• AMA с командой Adobe Design.

Дизайн-команда Automatic (создатели WordPress) запустила блог с бесхитростным названием Design blog. Инициатива появилась во многом благодаря John Maeda, который недавно перешёл в компанию из KPCB. Его должность — «global head of computational design and inclusion» (чем именно будет заниматься).

Fabricio Teixeira собрал список блогов дизайн-компаний и команд на Medium.

Другие новости известных дизайн-команд:

• Блог дизайн-команды медиа-проектов NPR.

Если бы Google Analytics работал в офлайне.

• Комиксы The Design Team пародируют работу дизайн-команд.

• Антон Ловчиков рассказывает, как делал приложение Ремемба. Сначала просто как дизайнер, а потом занялся и разработкой.

В апреле вышла книга Scott Faranello «Practical UX Design». UXMatters публикует вторую главу из неё, посвящённую открытому и закрытому состоянию работы дизайнера.

AIC вместе с Лаборатория Артема Геллера и командой ParaType (на этапе разработки дизайна — в лице Александры Корольковой) приступает к работе над шрифтом для государства. Нам нужен свой шрифт, который сможет стать основой единой экосистемы всех официальных интернет-ресурсов. Современный, бесплатный, общедоступный. Целое семейство шрифтов с разными параметрами, находящееся в открытом доступе. Артём Геллер просит сообщество ответить на несколько вопросов:

• Какой характер должен быть у шрифта для государственных систем?
• Должен ли он быть таким же официальным, как само государство?

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

Kylea Parker рассказывает о том, как перешла из поддержки пользователей Shopify в UX-дизайнера. Советы для тех, кто также переквалифицируется.

Команда блога uxdesign.cc и Adrian Zumbrunnen запустили бота, который рассказывает новости продуктового дизайна. Он основан на недавнем концепте личного сайта Adrian.

Интереснейшая презентация Rob Tannen на тему истории и практики применения патентов на дизайн. Подробно разбирает в том числе известную судебную тяжбу Apple и Samsung.

К выходу готовится документальный фильм Graphic Means о том, как работали дизайнеры в до-цифровую эпоху и как изменилась работа после появления компьютеров. Авторы взяли интервью у пары десятков известных специалистов вроде Tobias Frere-Jones, Ellen Lupton и Dan Rhatigan. Обещают к концу года.

Joe Blau предлагает универсальную иконку для обозначения контекста, в котором компьютер берёт на себя часть действий пользователя. С распространением персональных помощников, беспилотных автомобилей и других продуктов, которые выполняют более активную роль, важно показывать, что компьютер взял часть управления на себя.

• Greg Madison из Unity развенчивает три больших мифа виртуальной реальности. Он скептически относится к фильмам360, использовании для продолжительной работы и использовании классических методов ввода вроде мыши и клавиатуры, да и в целом считает, что со временем всё превратится в дополненную реальность.

• Рассказ студии Perception о работе над интерфейсами к фильму Batman vs Superman.

• Nielsen/Norman Group провели юзабилити-тестирование WeChat. Интерфейс достаточно посредственный, боты не особо умные, да и в целом это чаще не диалог на естественном языке, а хождение по меню. Он популярен благодаря интеграции всего и вся, а также лёгкости платежей.

Дизайн-команда Vox Media рассказывает о своём опыте создания голосового помощника для Amazon Echo. Полезные советы для тех, кто пробует создавать голосовые интерфейсы.

• Oliver Roeder размышляет о роли дизайнера в эпоху алгоритмов. Он считает, что суть не меняется — это просто ещё один инструмент в арсенале.

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

Другие кейсы редизайна:

• Как сервис Nextdoor уменьшил проявления расизма в сервисе для общения соседей. Интересные эксперименты с интерфейсом и текстами.

Профессиональный стандарт «Специалист по дизайну графических и пользовательских интерфейсов» сейчас активно дорабатывается и инициативная группа проводит опрос — понять, что входит в обязанности UX-профессионалов России и стран СНГ. Опрос анонимный, понадобится около 15 минут. Его результаты будут опубликованы.

Актуальные вопросы развития UX как направления, да и каждого профессионала, который думает о развитии.

Julie Zhuo подробно рассказывает о процессе поиска, собеседования и интеграции новых дизайнеров. Много полезных советов по всем этапам процесса.

Yael Tolub перечисляет основные метрики, которые оценивают успешность мобильных приложений.

• Как использовать свойство CSS «writing-mode» для компоновки страницы.
• Индикатор прокрутки на чистом CSS.
• Библиотека in-view.js сообщает, когда во viewport появляется определённый DOM-элемент. Хорошее решение для динамических промо-сайтов.

Приложение для просмотра, оптимизации и конвертации SVG файлов. После установки становится просмотрщиком SVG по-умолчанию. В зависимости от цвета иконки, меняется тема интерфейса между светлой и тёмной (стандартные просмотрщики показывают изображение белого цвета на белом фоне). Иконки можно оптимизировать для уменьшения размера (например, Sketch оставляет много мусора при экспорте), а также поменять размер и в один клик конвертировать в PNG в разных размерах для веба, iOS и Android. Другие инструменты для работы с SVG:

• Приложение SVGsus для Mac упрощает работу с SVG. Организация набора иконок, их оптимизация и подготовка ресурсов.

• Памятка Abbey Fitzgerald о том, как работают более простые возможности масок в CSS.

• Tim Brown из Typekit рассказывает о том, как сделать полностью адаптивный текст. Размер шрифта, межстрочное и межпараграфное расстояние зависят от ширины окна браузера.
• В Chrome появилось свойство CSS font-display, которое облегчит подгрузку кастомных шрифтов. По мере его распространения можно будет отказаться от решений на базе JavaScript.
• Отличные мысли Marchin Wichary из Medium о сложностях следования принципам классической типографики в вебе.

• Nash Vail разбирает особенности кривых движения в CSS.
• José Rosário рассказывает, как добиться высокого FPS в CSS-анимации.

• Вышла вторая версия инструмента Interactions внутри Webflow. Расширены возможности анимации для сайтов на платформе.

• К Framer теперь можно подключить MIDI-клавиатуру для управления анимацией.

Michael Scharnagl разбирает способы оптимизации кода страницы, которые уменьшают дёргание текста при подгрузке медиа-объектов и других данных.

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

• Ещё одна памятка Jeff Sauro по поводу количества респондентов в зависимости от вопроса, стоящего перед исследованием.

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

Отличная статья Philip Hodgson из UserFocus о том, как правильно ставить вопросы для пользовательских исследований. Это поможет находить действительно ценные инсайты, а не просто поставить галочку о проведённом этапе проекта. Philip ссылается на книгу зоолога Niko Tinbergen, который выдвинул 4 принципа наблюдения за животными — они применимы и для изучения поведения людей.

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

• Cooper доработали свою сравнительную таблицу инструментов — появился фильтр для выбора подходящего.

• В Tilda теперь можно создавать свои модули.

Генератор контента для макетов и прототипов Dummi выдаёт списки пользователей, городов, книг и статей в JSON.

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

• InVision переименовали свою серию видео-презентаций от известных дизайнеров в DesignTalks и переработали подсайт.

• Вышла вторая версия плагина к Sketch, связка стала работать лучше.

• Появилась интеграция с Framer.
• Кстати, у инструмента шикарная 404.

• Приложение Crystal для просмотра макетов Sketch на Android-телефонах.
• Крутейшая серия статей Mike Mariano о том, как создавать плагины для Sketch. Пошаговые инструкции, начиная с самых базовых вещей.
• Как создавать инфографику в Sketch.
• Шаблон иконок приложения для Android и iOS в Sketch.

• Вышла вторая версия Principle. Появилась работа с компонентами.
• Reony Tonneyck о том, как реализовать параллакс в Principle.

Приложение Pattern для прототипирования на iPad. Интересные решения, хотя сам процесс выглядит вымученным относительно простой бумаги и ручки.

Памятка по дизайну интерфейсов для ТВ от Molly Lafferty из This Also.

Подробное сравнение Adobe Illustrator, Affinity Design и Sketch с точки зрения дизайнера иконок. Iconfinder делали такое же сравнение пару лет назад, но с тех пор инструменты сильно обновились.

Николай Бабич в деталях сравнивает инструменты для передачи макетов и ресурсов разработчикам. Он описывает интерфейс и возможности Avocode, Sympli и Zeplin.

Новый инструмент C4 Studio для работы над интерфейсной анимацией. Пока что это альфа-версия, но обещают импортируют макетов из Sketch, и код в Xcode на выходе. У продукта уматнейший промо-ролик про беды коммуникации дизайнера и разработчика.

John Saito из Dropbox разбирает ситуации в англоязычных интерфейсах, когда необходимо писать заголовок словами с большой буквы. Правила языка говорят, что заголовки должны писаться с большой буквы, но гайдлайны iOS и Android говорят разное.

Хорошая памятка Nielsen/Norman Group по выбору тональности интерфейсных текстов. Они предлагают 4 градации: весёлый—серьёзный, формальный—непринуждённый, уважительный—фривольный, с энтузиазмом—сухой.

• Толковая и ёмкая памятка по customer journey map от Nielsen/Norman Group.
• Обзорная статья от Realtime Board на основе материалов внутренней библиотеки и обкатки на пользователях. От процесса до сравнения с похожими инструментами.

Отличнейшая презентация Stephen P. Anderson о том, как создавать концептуальные модели. Сложная тема разжёвана по шагам.

Curt Arledge из Viget не первый, кто пишет про психологию пользовательского опыта, но у него получилось более полезно для практики. Он разделяет то, как переживалось событие и то, что остаётся в памяти. И даёт советы по улучшению продуктов с учётом этого.

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

• Немного о том, как Facebook делает свои продукты доступными. Интересно, что они пытаются в том числе объяснить суть картинок тем, кто не может их увидеть.
• Ruby Zheng описывает социальные аспекты accessibility, позволяющие уважительно относиться к пользователям с ограниченными возможностями.

Arindam Roy рассказывает о плюсах продуктов, интерфейсы которых не просто утилитарны, но желанны пользователями. Зачастую ощущения от использования таких продуктов лучше в сравнении с полными функциональными аналогами, но менее притягательными.

Libby Bawcombe из NPR провела пользовательское исследование читателей новостей и составила 50 стрессовых ситуаций, в которых пользователи работают с новостными сайтами.

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

Безумно крутая статья Kennedy Elliott об особенностях восприятия разных типов инфографики. По каждому пункту она ссылается на добротные исследования и даёт рекомендации, когда и где использовать их.

Обновилась подробная шпаргалка по размерам графических элементов в социальных сетях от Adsvise. Они также добавили шаблоны для Photoshop и Sketch.

• Шаблон iOS 10 для Sketch от Great Simple Studio.

• Luigi Notaro разбирает изменения в гайдлайнов в Android Wear 2.0. Google пересмотрел цветовые палитры — они стали более тёмными для того, чтобы сэкономить батарейку и не отвлекать пользователя лишний раз. Используется достаточно интересная формула для расчёта цветов относительно основного.

Jessie Chen показывает пример описания принципов дизайна для CRM-системы. Они привязаны к пирамиде, похожей на модель Маслоу.