Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге
Юрий Ветров об интерфейсах
Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге

Дайджест продуктового дизайна, август 2015

  • 3 сентября 2015

Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-июль 2015.

Паттерны и Best Practices

How to Use Photography in Branding
Очень толковая статья Loren Baxter об использовании фотографий в интерфейсе для усиления бренда. Он приводит яркие примеры и дает инструкцию по поиску своей стилистики.
How to Use Photography in Branding
Адаптация для больших экранов

  • Рекомендации Baymard Institute по адаптации дизайна интернет-магазинов к большим мониторам. Их процент все больше и уже пора обратить внимание на этих пользователей.

Responsive Upscaling: 11 Ideas for Large-Screen E-Commerce Design
Большие сенсорные экраны

  • Kara Pernice из NN/g продолжает тему работы с большими сенсорными экранами. Она взяла интервью у Dorothy Shamonsky из ViewPoint, которая специализируется на таких интерфейсах. Часть советов капитанские, но подборка полезная.

Почтовая рассылка

  • Kevin Mandeville из Litmus с еще одной крышесносной историей о возможностях писем рассылки. Они разыгрывали 5 билетов на свою конференцию и вот что из этого получилось.
  • Команда Медузы рассказывает о том, как они работают с почтовыми рассылками.

Воспринимаемая скорость интерфейса

  • Эксперименты с различными загрузчиками от стажера Viget. Ian Tate сравнивает несколько вариантов анимации и смотрит, насколько пользователи готовы ждать загрузки интерфейса.
  • Хорошо структурированный набор советов на тему от Adrian Zumbrunnen.

Коллекции интерфейсной анимации

  • UI Movement, еще одна коллекция.

Работа с уведомлениями

  • Создатели приложения Hopper сделали несколько подходов к запросу на отправку уведомлений пользователям и вот что из этого получилось.

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

MailChimp Content Style Guide
MailChimp собрал хорошее всеобъемлющее стилистическое руководство для работников компании. Раньше это были разрозненные гайдлайны, но теперь они сведены в один.
MailChimp Content Style Guide
HP Grommet
Grommet, UX-фреймворк для корпоративных приложений от HP.
HP Grommet

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

Designing Web Interfaces For Kids
Очень толковый обзор особенностей дизайна для детей разных возрастов от Trine Falbe. В каждом из периодов развития свои когнитивные и физические способности, что сильно влияет на оптимальный интерфейс.
Micro-Moments
Google выпустил новый сайт про микромоменты — мелкие спонтанные сценарии, которые инициируют пользователи на мобильных устройствах.
Micro-Moments

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

Content Wireframing for Responsive Design
Новая книга UXPin про прототипирование для адаптивного дизайна на уровне контента.

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

Russian Prototyping Club
Антон Карташов создал группу про Origami, Framer.js, Pixate и другие современные дизайн-инструменты. Практические вопросы по конкретным задачам, решение проблем, руководства для начинающих.
Russian Prototyping Club
Куда двигаются инструменты прототипирования

  • Julius Huijnk опросил создателей и руководителей ключевых инструментов прототипирования (Axure, InVision, Marvel, Proto.io, UXPin) на тему их будущего и возможности создания универсального продукта. Он представлял себе некий универсальный сервис для абсолютно всех задач в процессе работы над дизайном продуктов, но по факту затея не очень здравая — дизайн-процессы сильно различаются от компании к компании, от проекта к проекту. Полезный материал для тех, кто мечтает создать такого монстра.
  • Khoi Vinh размышляет о том, куда идет рынок инструментов прототипирования.

Principle
Инструмент вышел: стоимость несколько выше ожиданий, но доступна пробная версия. По видео-ролику выглядит довольно приятно — есть много мелочей, который отсутствуют в Pixate и плохо реализованы в Proto.io. Подробнее:

  • Первая реакция практикующего русского комьюнити на Principle. Покоряет с первых минут, инструмент и правда очень крутой. Особенно с учетом того, что это самая первая версия.
  • Создатели говорят, что можно воссоздать ключевые взаимодействия Facebook Paper за 60 секунд. Видео, правда, показывает результат, а не процесс, но коллеги начали активно экспериментировать с инструментом и скорость работы в нем действительно большая.
  • Обзор возможностей Principle от Benjamin Berger. Он получил раннюю версию еще месяц назад и успел много поработать с ней. В его блоге я и увидел косвенное упоминание продукта в конце июля.


Flinto

  • Flinto переродился и выпустил инструмент для работы с прототипами и анимацией для Mac, похожий на недавний Principle. Гонка инструментов не утихает!


Five app prototyping tools compared — Proto.io, Pixate, Origami, Framer & Form
Очень крутой подход к сравнению современных инструментов прототипирования. Tes Mat пытается собрать в них один и тот же интерфейс и описывает плюсы и минусы Proto.io, Pixate, Origami, Framer и Form.
InVision

  • Вслед за Marvel, в сторону юзабилити-тестирования прототипов пошел и InVision. Они сделали связку с Lookback.
  • Now, еще один UI Kit от InVision. Есть версии для Sketch и Photoshop.
  • Появилась возможность создавать «доски» для мудбордов, гайдлайнов и презентаций.

Sketch

  • Плагин для переключения состояний от evilmartians.

Прототипирование в Keynote

  • Неплохой обзорный материал о том, как анимировать интерфейсы в Keynote.
  • И еще один — о том, как анимировать макеты из Sketch.

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

32 Ways To Measure The Customer Experience
Отличная классификация методов пользовательских исследований от Jeff Sauro в привязке к конкретным задачам.
32 Ways To Measure The Customer Experience
Comparing Between- and Within-Subjects Studies
Jeff Sauro о пользовательских исследованиях, где разные задания даются одним и тем же, либо совсем разным респондентам. В конце он сравнивает плюсы и минусы этих вариантов. Первый дешевле, второй дает меньше помех.

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

WebKit Visual Styles Sidebar
WebKit внедряет наглядный визуальный редактор стилей страницы. Помимо стандартной панели с кодом, добавилась вкладка в духе графических редакторов, где можно явно задать основные параметры оформления — почти как в Sketch или Photoshop. Очень круто, ждем такую же штуку в Chrome.

CSS is complicated. Web Inspector’s new Visual Styles sidebar can help you perfect a design — now in the nightly. pic.twitter.com/ucS5BUkO6Q

— WebKit (@webkit) 20 августа 2015


SalesForce Lightning Design System
Дизайн-система Lightning компании Salesforce. Немного о том, как она делалась.
SalesForce Lightning Design System
Работа с Bootstrap и Foundation

  • Вышла первая альфа-версия Bootstrap 4. В блоге проекта внушительный список изменений. Помимо этого, запущен официальный каталог тем оформления.

Bootstrap Themes
Easee
И еще один новый инструмент для дизайнеров Easee. Он позволяет делать анимацию в браузере. Небольшой рассказ его создателя Steven Fabre о том, как и зачем он его сделал.
Easee
Framer

  • Tes Mat пишет книгу о Framer.
  • Сессия вопросов и ответов с Koen Bok, создателем Framer.

Webflow CMS
Webflow запускает свою CMS: пока не все ясно, но выглядит интригующе. Практически визуальное создание динамичного адаптивного сайта с кучей технически сложных элементов.
Webflow CMS
Работа с Flexbox

  • 20-минутный видео-курс по flexbox.
  • Очень простое и понятное объяснение основных принципов flexbox от Ben Gremillion из ZURB. Кстати, следующая версия фреймворка Foundation будет использовать его.

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

  • Bram Stein из Typekit рассказывает о своем видении будущего веб-шрифтов. Очень здорово о технологическом развитии веб-типографики из первых рук.
  • Еще один поисковик-подборщик по базе Google Web Fonts.
  • Библиотека-типограф на JavaScript.

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

  • Коллекция разного рода визуализаций и интерактивных концептов.
  • Полигональный кот в догонку к полигональному динозавру.
  • WebGL Studio для работы с 3D-сценами в вебе.
  • Зарождается интересный продукт, реализующий двухстороннее взаимодействие между кодом и результатом (пока упор на графику).
  • Инструмент для рисования циклоид, несколько вариантов, настраиваемые параметры, эскпорт результата.

Режимы наложения слоев в браузере

  • Еще один обзор возможностей CSS-фильтров, от Vincent De Oliveira.

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

Applied UX Strategy, Part 3: Platform Thinking
Моя статья о платформенном мышлении на основе недавней презентации. Как перестать плодить документацию и начать жить. Все это сжигает уйму времени на бумагомарательство — силы уходят на полировку побочных документов, а не продукта. Нужно воспринимать работу над продуктом как создание и развитие платформы, а не конкретный релиз. Русскоязычная версия.
UX-стратегия на практике. Часть 3 — Платформенное мышление
Я рассказывал об этом на Smashing Magazine (мобильный веб и контент-проекты). Но там был упор на конкретные кейсы, а в этой публикации — пошаговая инструкция по созданию такой платформы.
В конце идет длинный список всех тех, благодаря кому эта картина выстроилась в единое целое и начала внедряться на практике. Изначальная идея была простой, первый прототип платформы появился в середине 2012 года. Но по мере перевода все большего количества сервисов на нее видение корректировалось и расширялось. У нас огромное количество продуктов и вопросов по каждому из них, так что мы еще в пути. Поэтому серия будет продолжаться 🙂
UX-стратегия

  • Paul Bryan хорошо описывает свое видение UX-стратегии. У нее 7 ключевых составляющих: связка с бизнес-стратегией, модель клиента, карта experience, сравнительные исследования и отчеты, общий план внедрения стратегии и roadmap.

Дизайн-культура

  • Jon Kolko пишет в Harvard Business Review о том, как большим корпорациям привить дизайн-культуру.
  • Очень крутая идея Nick Daze по подбору дизайнеров в команду с учетом необходимых навыков. Используется лепестковая диаграмма, которая показывает сильные и слабые стороны как отдельного сотрудника, так и всей команды.

Building Creative Teams without Your Gut
Найм дизайнеров

  • Tom Petty о том, как компания GoCardless строит процесс найма дизайнеров.

Design Sprints

  • Как команда The Guardian использует формат дизайн-спринтов.

Getting Started With UX Design Process & Documentation
Еще одна книга UXPin, о построении дизайн-процесса и работе с документацией.
The Designer’s Guide to Collaborating With Developers
И еще одна — о взаимодействии дизайнеров и разработчиков.
Presumptive Design — Design Research Through the Looking Glass
Leo Frishberg и Charles Lambdin предлагают свою вариацию на тему lean UX. Не особо осмысленное отпочковывание с основным мотивом создания «нас не понимают», но в копилку терминологии полезно.

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

Техника пикапа — Как создать продукт и покорить пользователей
На летней программе института Стрелка и Rambler & Co выступил Rahul Sen из Spotify, занимающийся вопросами роста пользовательской базы и прибыли. У него достаточно интересная концепция выстраивания работы с пользователем как личных взаимоотношений. В этой статье, правда, совсем общий обзор, чуть больше деталей было в англоязычной версии. Хотя самое интересное осталось в самой презентации и, видимо, тренинге. В том числе об их модели метрик AACR (Acquisition, Activation, Conversion, Retention) и ее провязке в интерфейсе.
Техника пикапа — Как создать продукт и покорить пользователей
Design x Data
IDEO запустили блог на Medium, посвященный использованию данных и аналитики в дизайне. Пока, правда, всего пара публикаций.

Кейсы

From Russia With Love — Behind The Responsive Redesign Of Kremlin.ru
Артем Геллер отвечает на вопросы Smashing Magazine о работе над новым сайтом Kremlin.ru. Насыщенная статья, в которой много интересных технических деталей. Это первый российский государственный проект «на страницах» подобного издания.
Версия на русском.
From Russia With Love — Behind The Responsive Redesign Of Kremlin.ru
Alcatel Watch UX
Шикарнейший кейс Дениса Невожая про работу над интерфейсом умных часов One Touch Watch от Alcatel. Во всех деталях показаны итерации дизайна, рассказано о первоначальных задумках и конечной реализации. Это собственная платформа Alcatel, так что поиск решений особенно интересен.
Alcatel Watch UX
Хосейн Рахман: Как в Jawbone проектируют hardware-продукты
Очень мощный кейс от команды Jawbone, охватывающий все нюансы продуктовой работы. Вторая часть.
Хосейн Рахман: Как в Jawbone проектируют hardware-продукты
Blurring Is the Auto-Tune of UI Design, and Other Things We Thought About While Designing Wildcard 2.0
Khoi Vinh рассказывает о работе над новостным приложением Wildcard, для которого он делал достаточно глубокое исследование о карточных интерфейсах. Правда, изначально они планировали запускать мобильный браузер, но он не взлетел и наработки отдали для более простой недели. Приложение вышло недавно и это одна из самых эффектных штук на iOS в этом году.

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

  • Отличная и эффектно поданная история редизайна тематического новостного сайта The Hechinger Report. Интересно, что дизайнеры осознавали объективную реальность и отдельно думали о том, как красиво подавать контент для издания, где фотографий зачастую нет.
  • Небольшой рассказ о том, как Vox Media работает над своими лонг-ридами.
  • Александр Комаров рассказывает о том, как его команда работала над приложением для координации часовых поясов.

Дизайн в Samsung

  • Компанию часто пинают в дизайнерском сообществе, а между тем они сделали много действительно крутых вещей. Очень толковая статья о том, как компания изменила отношение к дизайну и роли вице-президента по дизайну An Yong-Il в этом.

История

50 years ago today the word «hypertext» was introduced
Интервью с Ted Nelson, автором идеи гипертекста. Он в деталях рассказывает о том, как пришел к этой идее, как 50 лет назад проходила ее легендарная презентация и что из всего этого получилось.
50 years ago today the word «hypertext» was introduced
Веб ’90х

  • Мощный материал The Rolling Stone о том, как создавался легендарный сайт фильма Space Jam и как вообще киноиндустрия пришла в интернет.

'Space Jam' Forever — The Website That Wouldn't Die

Тренды

The Post-Mac Interface
Очень длинный, но очень интересный текст об истории развитии GUI от Adam Baker. Он вспоминает концепцию интерфейса Anti-Mac от Jakob Nielsen и D. Gentner 1996 года, в которой они пытались переосмыслить классический интерфейс Mac с учетом появления интернета. Что-то из их предсказаний сбылось, что-то нет и Адам предлагает свое видение Post-Mac.
The Post-Mac Interface
Trends in Newsrooms — Gaming the news
В последнее время СМИ все чаще готовят спец.проекты и альтернативные варианты подачи материалов, представленные в игровой манере. Сайт ассоциации WAN IFRA разбирает наиболее яркие примеры.
Web Design Book of Trends 2015-2016
Книга UXPin про тренды в вебе 2015-2016.
Носимые устройства

  • Принципы дизайна носимых устройств от Fjord.

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

  • Jake Zukowski, ex-Frog о комбинации юзабилити и безопасности в дизайне автомобильных интерфейсов.

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

How to design award-winning websites
Lasse Kristensen является членом жюри FWA. Он рассказывает о том, по каким критериям судит работы.
How to design award-winning websites
Продуктовый дизайнер

  • Mike Atherton достаточно интересно рассуждает на эту тему, включая нечеткую границу между дизайнером и продукт-менеджером.
  • Kyle Fiedler о том, как это устроено в дизайн-студии ThoughtBot.

Подборки книг

  • David Travis советует книги под конкретные задачи. Список не то что бы большой, но подход интересный.

I Have No Idea What The Hell I Am Doing
Перевод статьи на основе свежего выступления Brad Frost об особенностях и философии дизайна в современном вебе. Много ключевых идей собраны вместе.

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

Designer Bios
Забавная коллекция мини-биографий дизайнеров из их личных сайтов и сайтов студий. Кто и как себя подает.
Интересные назначения дизайнеров

  • Khoi Vinh не зря сотрудничал с Adobe при работе над инструментом прототипирования Comp CC. Компания наняла его заниматься инструментами для дизайнеров. Одно из самых интересных назначений последнего времени.
  • Susan Kare стала главой продуктового дизайна в Pinterest. Интервью о том, чем именно она занимается.

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

  • Accenture купили студию Chaotic Moon из Austin (Техас).

Закрытие LayerVault

  • AMA с Andrew Wilkinson, выкупившим DesignerNews.

Материалы конференций

Uideo — 374 около-дизайн-видео
Андрей Якушев запустил агрегатор видео с отечественных дизайнерских конференций. В базе уже под четыре сотни выступлений.
Uideo — 374 около-дизайн-видео
UX Strategies Summit 2015 Review, Part 1 — Overview and Workshops
Отчет Pabini Gabriel-Petit о конференции UX Strategies Summit 2015, проходившей 10-11 июня в Сан-Франциско, США. Очень подробный конспект ключевых выступлений. День 2.
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.

Получать свежий дайджест по почте

Юрий Ветров

Директор по бренду и дизайну (ex-Muse Group (Ultimate Guitar, MuseScore, Audacity и другие), Райффайзен Банк и Mail.ru Group). Я руковожу командами, которые отвечают за дизайн, исследования и редактуру бренда и интерфейсов, а также дизайн-систему в коде. Автор книги и курса «Паттерны дизайн-менеджмента» и «Дайджеста продуктового дизайна». Со-организовывал Fintech Design Conf, Mail Design Conf и московский Dribbble Meetup, а также Russian Design Cup. Читал лекции в Британке, курировал курс Future London Academy в Лондоне. Мои публикации есть на Smashing Magazine, UXmatters и UX Collective. Подробнее обо мне.

Другие статьи по теме
Дайджест продуктового дизайна, апрель 2025
View Post
  • Дайджест

Дайджест продуктового дизайна, апрель 2025

  • Юрий Ветров
  • 20 мая 2025
Дайджест продуктового дизайна, март 2025
View Post
  • Дайджест

Дайджест продуктового дизайна, март 2025

  • Юрий Ветров
  • 17 апреля 2025
Дайджест продуктового дизайна, февраль 2025
View Post
  • Дайджест

Дайджест продуктового дизайна, февраль 2025

  • Юрий Ветров
  • 16 марта 2025
Дайджест продуктового дизайна, январь 2025
View Post
  • Дайджест

Дайджест продуктового дизайна, январь 2025

  • Юрий Ветров
  • 8 февраля 2025
Дайджест продуктового дизайна, декабрь 2024
View Post
  • Дайджест

Дайджест продуктового дизайна, декабрь 2024

  • Юрий Ветров
  • 29 декабря 2024
Дайджест продуктового дизайна, ноябрь 2024
View Post
  • Дайджест

Дайджест продуктового дизайна, ноябрь 2024

  • Юрий Ветров
  • 5 декабря 2024
Дайджест продуктового дизайна, октябрь 2024
View Post
  • Дайджест

Дайджест продуктового дизайна, октябрь 2024

  • Юрий Ветров
  • 9 ноября 2024
Дайджест продуктового дизайна, сентябрь 2024
View Post
  • Дайджест

Дайджест продуктового дизайна, сентябрь 2024

  • Юрий Ветров
  • 16 октября 2024

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Юрий Ветров об интерфейсах
Дизайн-менеджмент цифровых продуктов, © 2007-2018

Input your search keywords and press Enter.