Лого vc.ru

Продуктовый дизайн: 20 самых важных материалов за июль

Продуктовый дизайн: 20 самых важных материалов за июль

Уже почти пять лет руководитель портальной дизайн-команды Mail.Ru Group Юрий Ветров публикует в своем блоге регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок он отбирает примерно 5% стоящих публикаций, которыми интересно поделиться среди экспертов.

Специально для ЦП Юрий Ветров собрал выжимку из 20 самых интересных ссылок июля.

Поделиться

Машины дизайна

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

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

История иконок

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

Унификация дизайна. Часть 2

На Smashing Magazine вышла моя вторая статья об унификации дизайна в Mail.Ru Group — как мы приводим к единому виду линейку контент-проектов с помощью дизайнерско-технологического решения и бургерного подхода. Это продолжение истории с мобильным вебом, которая вышла весной.

Я уже рассказывал об этом осенью в виде презентации. Теперь все это в виде статьи, с кучей полноформатных иллюстраций и дополнительных деталей. Версия на русском.

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

Pixate + Form = Google

Google купила Pixate и сделал Pixate Studio бесплатным. Вдобавок, после долгого затишья вышла версия Form 1.3. В нем появилась возможность нативного запуска прототипов, добавлены компоненты Material Design.

Читайте интересное интервью Матиаса Дуарте с создателями Pixate и Form — проливает свет на то, зачем куплены инструменты.

Пространство интерфейса

Очень интересные размышления Паскаля Де Сильва на тему того, как представить карту взаимодействия с продуктом в виде многомерного пространства. Это пространство может быть как простым, двухмерным, так и более сложным. Если четкая модель есть, то пользователю будет гораздо проще работать с приложением. Он приводит удачные примеры и полную кашу, которой почему-то славятся музыкальные сервисы.

Tilda Education и Readymag Design School

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

Google Material Design Lite

Фреймворк, позволяющий легко и быстро построить свой сайт на мобильных платформах в «материальном» стиле. По словам представителей Google, он построен на HTML5, CSS3 и JavaScript, не использует других фреймворков, является кросс-браузерным и реализован по методу gracefully degradation, что позволяет ему хорошо работать даже в старых браузерах. В комплекте — базовые компоненты (кнопки, карточки, меню, переключатели, прочее), 5 типичных шаблонов, простой инструмент для настройки цветовых тем и вполне внятную документацию.

Приятный бонус — один из шаблонов построен на основе сайта Android. Репозиторий на GitHub.

Еще немного свежего про Material Design:

  • Обзор ресурсов для дизайнеров, работающих над Material Design.
  • Тейлор Линг сравнил реализацию главной кнопки в приложениях Google с тем, что написано в гайдлайнах. Почти все не соответствуют тому, что написано в официальных рекомендациях.
  • Продолжение мощного кейса про редизайн Chrome для Android от Себастьяна Габриеля.
  • За последний год в любви Material Design с большим придыханием признались многие дизайнеры и издания. Менг То пишет о том, что он не лучше и не хуже iOS — просто другой. В статье интересные сравнения сильных и слабых сторон обеих платформ.
  • Шаблоны Nexus 5 и 9 в PSD от Себастьяна Габриеля.

Унификация дизайна SalesForce

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

Также на тему живых гайдлайнов будут интересны:

  • Инструмент с открытым кодом для создания хорошо оформленных гайдлайнов в виде сайта.
  • Скрипт проверяет отхождения реального CSS в продукте от того, что описано в гайдлайнах.

Выпадающие списки в мобильных формах

Люк Вроблески рекомендует по возможности отказаться от выпадающих списков в мобильных формах. Они требуют большего количества нажатий, а в случае с современным iOS системный контрол («барабан») еще и крайне неудобен.

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

Психология ценообразования

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

Прототипирование с iAd Producer

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

PageCloud

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

Использование персонажей

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

Анализ полученных знаний

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

Два года в команде Photoshop

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

Facebook Design

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

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

Стать дизайнером за 365 дней

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

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

Фонд и дизайн стартапов

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

QuartzCode

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

#DesignInTech

Интересная дискуссия на тему провязки бренда в интерфейсе и других аспектах продукта, которую вели Джон Маеда, Роберт Пэдбери и Тим Маккой.

Читайте полную версию дайджеста в моем блоге. В нем, как обычно, много новых материалов по дизайну для Apple Watch, Android Wear, Material Design, расширений для Sketch, свежих скриптов и еще тонна всего. За свежими ссылками также можно следить в группе на Facebook — спасибо всем, кто помогает наполнять ее. Вы также можете получать свежие обзоры по почте.

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

Зная сколько денег им приносит главная, боятся ее кардинально менять. Уверен что на маленькой доле аудитории что-то новое тестируют

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

1. Страница должна помещаться в 1 экран.
2. Лучше всего продаются большие форматы баннеров (сейчас это 300x300), поскольку они позволяют использовать видео, которое особенно востребовано рекламодателями. А такие форматы сильно ограничивают дизайнерскую сетку.
3. Убирание или перемещение любой ссылки, изменение ее заметности — напрямую влияют на переходы в продукт, а значит и на его прибыль.

Мы рисовали и рисуем уйму подходов и вариаций, разного рода экспериментов, но учитывая ограничения и цену ошибки, революционные изменения здесь не всегда возможны. На Хабре про это частично писали при редизайне 2012 года — habrahabr.ru/company/mailru/blog/142193/. Мы без труда провели революцию в контент-проектах, провели большую эволюцию Почты на мобильных, сделали еще много достаточно крупных изменений по всей линейке продуктов. Но главная портала — история про органиченное пространство решений.

Энтерпрайз летит задним ходом? =\

0

vk.com/uxbike — паблик со скринштами популярных приложений. Для тех, кто не хочет изобретать велосипед. Готовые примеры дизайна. Может кому-то пригодится по-братски:-)

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Sasha Zivers

Ничего не заставит.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Sasha Zivers

Ну да, приравнивать жену к предментам, ок-ок. )

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Sasha Zivers

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

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Artem Korsunov

Сайт написан на Laravel :)

«Омоймот» — сайт для подбора мотоциклов с блогами пользователей
0
Alexander Pershin
HTML Academy

Все перечисленные задачи типовые для IT, просто взял примеры чуть шире просто программирования.

Называя "обезъянками" других IT-специалистов вы показываете великолепнейший уровень дискусии, достойный только высококласснейших программистов, повелителей логики и алгоритмов.

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

Куда пойти учиться программисту: советы опытного тимлида, преподавателя и новичка
1
Показать еще