Июль '15

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

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

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

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

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

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

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

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

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

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

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

Отличная мотивирующая статья Abby Covert для тех, кто хочет стать информационным архитектором, да и вообще вырасти профессионально в UX. В том числе о ложных и правильных целях развития.

Создатели Readymag запустили свою онлайн-школу дизайна. По сути это скорее набор добротных обучающих статей, посвященных основам дизайна — шрифты, сетка, цвет, композиция.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Colleen Roller дает советы модераторам пользовательских исследований с тем, чтобы минимально влиять на их результаты.

Небольшая шпаргалка по шкале Лайкерта от Jeff Sauro.

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

• Обзор Weld и Atomic.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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