Чаще всего мне задают два вопроса:

1. Как ты всё успеваешь и правда ли сам пишешь дайджест? (спойлер: сам)
2. Подскажи дизайнера!

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

В итоге отправляю в группу «Ищу_дизайнера» ― она специализируется на дизайнерских вакансиях. Она одна из крупнейших в Фейсбуке (33 тыщи), я и сам публикую наши открытые позиции в ней. В прошлом году у них появился канал в Телеграме ― https://t.me/designer_ru/.

Сама группа в Фейсбуке ― https://www.facebook.com/groups/512613598826785/ (у ребят есть ещё и сайт с жирным доменом www.designer.ru). Видимо, всем спрашивающим буду кидать ссылку на этот пост 🙂

P.S. Кстати, на первый вопрос обычно отвечаю презентацией о фоновых исследованиях ― https://www.slideshare.net/jvetrau/wud2014-yvetrov-background-research. Какие-то сервисы поменялись, но в целом подход работает и сейчас.

P.P.S. В этом канале нет и не будет рекламы, но взаимопиар — почти единственный способ растить аудиторию канала в Телеграме. Я иногда делаю ВП, но без фанатизма и в любом случае про то, что не стыдно рекомендовать.

Продолжаем качать насмотренность и искать добротные интерфейсные паттерны или интересные эксперименты с ними. В этом выпуске:

1. Nathan Gitter впечатлился выступлением «Designing Fluid Interfaces» на WWDC 2018 и сделал серию экспериментальных интерфейсных решений, которые показывают похожую анимацию в ходе управления жестами — https://medium.com/@nathangitter/building-fluid-interfaces-ios-swift-9732bb934bf5.

2. Команда SteelKiwi Inc. сравнивает реализацию типовых интерфейсных задач в Android и iOS — https://medium.muz.li/differences-between-designing-native-ios-apps-and-native-android-apps-e71256dfa1ca. Годная памятка для тех, кто только начинает изучать специфику мобильных платформ.

3. Экспериментальная лаборатория пытается понять, какие новостные форматы подойдут для поколения Z. В первой части статьи Tristan Ferne разбирает имеющиеся на рынке подходы — https://medium.com/bbc-news-labs/beyond-800-words-new-digital-story-formats-for-news-ab9b2a2d0e0d. Во второй дизайн-команда сделала несколько интерактивных прототипов — https://medium.com/bbc-news-labs/beyond-800-words-prototyping-new-story-formats-for-news-e3102e783b5f.

4. Kim Flaherty из Nielsen/Norman Group подсказывает, как лучше показывать разделы помощи и поддержки клиентов на сайте — https://www.nngroup.com/articles/customer-service-model/.

5. Dre Zhou из Askable показывает, как предзаполнение форм и избегание совсем нулевых результатов повышает конверсию и комфорт пользователей — https://uxdesign.cc/default-valid-vs-default-invalid-641570ae2fec.

Коротенько, потому что многие жалуются на длинную писанину. Но ведь столько всего интересного происходит в профессии, что фиг остановишься! Короч, до скорых встреч :)

#patterns

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

1. Chris Lee пообщался с дизайн-менеджерами и директорами Dropbox, Airbnb, Facebook и других компаний и составил небольшую памятку по их подходам к управлению дизайн-процессами и командами — https://medium.muz.li/things-i-learned-interviewing-design-leaders-from-the-valleys-top-companies-ddeec3042f7a.

2. Кстати, vc.ru с весны ведёт отличную серию историй российских дизайн-студий и креативных агентств — https://vc.ru/category/%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B8%D0%B0%D0%B3%D0%B5%D0%BD%D1%82%D1%81%D1%82%D0%B2. Вышла уже дюжина рассказов с хорошим обзором бизнеса и результатов.

3. Andre Le Masurier из лондонского Google рассказывает о том, как устроена команда дизайна бренда — https://www.invisionapp.com/blog/googles-andre-le-masurier/.

4. Блог дизайн-команды Asana ― https://medium.com/asana-design. Пока пустовато, но ребята бодрые и должны раскачаться.

5. Dave Malouf размышляет на тему применимости организационной модели Spotify и любых других методологий и рабочих подходов — https://medium.com/amplify-design/the-allure-of-a-shiny-misunderstood-silver-bullet-925a9f643f2. Важно понимать, что они предполагают определённую культуру и договорённости, которые могут работать в одной и не получиться в другой компании.

6. Издательство Rosenfeld Media выпустило книгу Kevin Hoffman «Meeting Design: For Managers, Makers, and Everyone» ― https://rosenfeldmedia.com/books/meeting-design/. UXmatters публикует главу 5 из неё о стилях фасилитации — https://www.uxmatters.com/mt/archives/2018/08/book-excerpt-meeting-design.php.

P.S. Кстати, моя заметка о DesignOps вышла на английском — https://uxdesign.cc/designops-or-ux-strategy-or-design-management-or-design-leadership-b579c1070f18. Между тем, в LinkedIn настоящий шторм переименований должностей — интересно, какого масштаба достигнет эта волна к концу года :)

#designmanagement #designops

Организаторы одной из трёх крупнейших отечественных дизайн-конференций Design Prosmotr запускают новую, с упором на иностранных спикеров. Design Trend (http://designtrend.ru/) пройдёт на выходных 15-16 сентября в Москве. Упор на графический дизайн, брендинг и всё такое.

В составе Luke Hayman (Pentagram), Rama Allen (The Mill), Ken Cato (Cato Brand Partners), Fritz Gottschalk (Gottschalk+Ash), Adrian Shaughnessy (Unit Editions), Fredrik Öst и Erik Kockum (Snask), Greg Durrell (Hulse&Durrell) и пара отечественных ребят — 13 экспертов из 7 стран.

Иностранные спикеры к нам приезжают часто (сейчас, например, очередное лето на Стрелке с топовыми ребятами), но в таком объёме за раз — не так регулярно. Пару лет это делали организаторы российского OFFF, но сейчас он на паузе. Не знаю, перехватят ли ребята знамя, но инициатива отличная и сил они положили на это прилично. Больше подробностей про место проведения, билеты и всё остальное — http://designtrend.ru/.

Если вы ищете, куда ещё сходить прокачаться, то Татьяна Смирнова ведёт канал @mosdesign с анонсами митапов, конференций и других мероприятий в Москве про дизайн. Вот, например, афиша на август — https://t.me/mosdesign/60, на подходе сентябрьская. Многие начинали аналогичные подборки, но со временем затухали. Я и сам бы хотел делать такую в своём дайджесте, но и так слишком много времени трачу на него. Надеюсь, у Тани хватит терпения надолго :) Подписаться — https://t.me/mosdesign/.

#events #conference

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

1. Kyle Peatt рассказывает историю создания дизайн-системы Shopify Polaris — https://ux.shopify.com/the-system-always-kicks-back-d94b945407f2. Очень годный разбор особенностей и проблем внедрения и популяризации платформы. Например, многие компании видят дизайн-систему как способ поднять базовый уровень дизайна продуктов, но типовые решения могут ограничивать дизайнеров; поэтому они постоянно делают «концепт-кары» — эксперименты с интерфейсными паттернами в духе единого дизайна, которые двигают Polaris вперёд.

2. Matt Bond недавно перешёл в Asana, но стоял у истоков дизайн-системы Atlassian — https://medium.com/asana-design/the-key-lessons-i-learned-creating-a-popular-design-system-d078c817b4dd. Он рассказывает о ключевых выводах, которые сделал для себя при работе над ней.

3. Толковый рассказ Anthony Zhang из Oscar Health о постепенном развитии дизайн-системы в компании — https://medium.com/oscar-tech/six-lessons-learned-by-creating-a-design-system-at-a-fast-moving-start-up-30ba8458fa20. Как делать её без надрыва, потихоньку дополняя и обновляя.

4. Liz Khoo из Salesforce рассказывает о взаимодействии команд, работающих над дизайн-системой — https://medium.com/salesforce-ux/evolving-a-design-system-at-scale-88aa2f249525.

Ну и скриптец в тему: Facundo Corradini показывает способ задавать цвет текста в элементе управления в зависимости от фона средствами CSS — https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/. Это упрощает описание компонентов в дизайн-системах.

Между делом открылась регистрация на специализированную конференцию Clarity в Нью-Йорке — https://www.clarityconf.com/ (10-12 декабря). Первая была огонь, вторая совсем в молоко (был там и обломался — https://www.facebook.com/502273249/posts/10155309403678250/). На третью программы пока нет, но надо быть осторожным, чтобы опять не попасться на имеющие мало отношения к теме презентации.

#designsystems

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

1. Angela Huenerfauth и David Teller предлагают крайне интересный метод оценки зрелости дизайна продукта — http://uxpamagazine.org/creating-usability-maturity-models/. Они договорились с менеджерами продуктов об отслеживании этого показателя по ходу работы разработки и принимают совместное решение о достаточном уровне юзабилити для его выпуска. На вид сложновато, но это, возможно, оттого что подход пока совсем незнаком.

2. Aaron Powers и Scott Mackie из Athena Health полемизируют с недавними провокационными статьями Alan Cooper и Jared Spool о ROI дизайна — https://medium.com/athenahealth-design/getting-questions-about-the-roi-of-ux-3-ways-to-refocus-the-conversation-to-opportunities-9a3ef763cb34. Это здоровый вопрос любой продуктовой команды — в какие активности лучше всего инвестировать ресурсы. Авторы показывают несколько примеров из своей практики, которые упрощали выбор команд.

3. Dani Nordin из Athena Health описывает подход компании к решению дизайн-долга — https://medium.com/athenahealth-design/creating-a-sustainable-strategy-for-tackling-product-wide-ux-debt-5542c6b028bd. Толковый системный метод, как и всё, о чём пишет команда.

4. Памятка Jeff Sauro по ключевым интерфейсным метрикам — https://measuringu.com/ux-benchmark-metrics/.

Тема сложная, так что всего четыре ссылки. Да и этим летом я слегка зачастил с публикациями, поэтому попробую найти баланс между их здоровым количеством и ЖЕЛАНИЕМ ОБЯЗАТЕЛЬНО РАССКАЗАТЬ ВАМ ОБ ВОТ ЕЩЁ ОДНОЙ СТАТЕЕЧКЕ :) Постепенно возвращаюсь к формату 2-3 постов в неделю.

#metrics #roi

Собрал дайджест продуктового дизайна за август 2018 ― https://jvetrau.com/digest-2018-aug/.

Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX

#digest

В августе в мире новых инструментов дизайна выдалось относительное затишье, но это они к осени готовились. Вот пачка свежих блестящих игрушек для тех, кто уже успел перескочить со Скетча на Фигму, а с неё — на Framer X (и опять подумывает, что засиделся):

React Proto (https://react-proto.github.io/react-proto/): Экспериментальный инструмент помогает переводить макеты Sketch в компоненты на React. Он облегчает разбивку экрана на отдельные паттерны, каждый из которых может иметь вложенность и логику поведения.

Affinity Publisher (https://affinity.serif.com/en-gb/publisher/): Компания запускает конкурента InDesign — постепенно откусывает всё больше от продуктовой линейки Adobe. Бета-версия уже доступна и пока что бесплатна. Видео-демонстрация — https://www.facebook.com/affinitybyserif/videos/2095064040528220/.

Principle 4.0 (http://principleformac.com/posts/principle-four.html): Много улучшений по редактору и возможностям анимации.

Trailer (https://www.trailerapp.io/): Приложение для Mac помогает делать видео работы с интерфейсом для продуктовых промо-роликов. Видео работы — https://www.youtube.com/watch?v=1Zod9UkS05Y.

Preely (https://preely.com/): Инструмент помогает собирать и тестировать интерактивные прототипы интерфейсов. Импорт из Sketch и достаточно обширная аналитика по выполнению сценариев.

FramerX: Постепенно рассказывают о ключевых функциях: лейауты — https://framer.com/x/layout/ и рисование — https://framer.com/x/drawing. Работа с лейаутами крайне интересна и обещает сильно упростить жизнь дизайнерам. Antoine Plu делится впечатлениями о бета-версии — https://blog.prototypr.io/framer-x-preview-9d067f35cf9a (он записал скринкаст работы).

А ещё появилось официальное описание того, как работают компоненты — https://framer.gitbook.io/framer/components/design. Возможность импортировать любые компоненты на React упоминается.

Adobe XD: Июльское (https://theblog.adobe.com/july-2018-release-of-adobe-xd-stroke-enhancements-commenting-on-design-specs-and-more/) и августовское обновления (https://theblog.adobe.com/august-2018-release-of-adobe-xd-reorder-assets-asset-extraction-and-more/). Улучшение работы с выдачей спецификаций разработчикам и интеграция со сторонними инструментами. Читайте подробный разбор Adobe XD от издания Prototypr — https://blog.prototypr.io/hands-on-with-adobe-xd-f82be12f405f.

Figma: Добавлены расширенные способы взаимодействия с прототипом — https://blog.figma.com/the-finale-of-prototyping-week-interactions-e30182a8ff8e. Небольшой курс от Designlab — https://trydesignlab.com/figma-101-course/.

Abstract (https://www.goabstract.com/): Серьёзно обновился сайт инструмента.

Бонус: Пачка шикарных шаблонов для набросков интерфейсов дополненной и виртуальной реальности от Владимира Курбатова — https://medium.com/inborn-experience/templates-for-ar-vr-sketches-e424dfb60e54.

Готовимся к новому рывку наших старых знакомых (Sketch должен приструнить выскочек, а Adobe проведёт конференцию MAX с кучей анонсов), ждём новых «убийц» привычных продуктов и следим за тем, насколько разойдутся шопоголики из InVision в сезон распродаж.

#tools

В среду анонсировали новые телефоны iPhone Xs, Xs Max и Xr. Хотя печально видеть, что весь мир упоролся и готов есть гумус ложками (экраны с «чёлкой», ухудшающей ландшафтный режим, стали нормой), дизайн для них никто не отменял.

За два дня успели нагенерировать уйму шаблонов для подачи макетов:
— iPhone Xs и Xs Max от Lstore (https://lstore.graphics/free-iphone-xs/), Apply Pixels (https://applypixels.com/template/iphone-xs/), Virgil Pana (https://dribbble.com/shots/5239796-iPhone-XS-vector-mockup) и Pixeden (https://www.pixeden.com/psd-mock-up-templates/psd-iphone-xs-max-mockup).
— iPhone Xr от Apply Pixels (https://applypixels.com/template/iphone-xr/) и Pixeden (https://www.pixeden.com/psd-mock-up-templates/psd-iphone-xr-mockup).

Разрешение (https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/) и плотности (https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/) экрана новых телефонов есть в официальных гайдлайнах. Самое важное:
— iPhone Xs — 1125px × 2436px (5,8", @3x)
— iPhone Xs Max — 1242px × 2688px (6,5", @3x)
— iPhone Xr — 828px × 1792px (6,1", @2x)

Сам iOS 12 прилетит на устройства в понедельник, 17 сентября. Актуальный UI Kit для Sketch, Adobe XD, Photoshop и Keynote есть на сайте Apple — https://developer.apple.com/design/resources/.

Apple Watch как платформа для сторонних приложений оказались не такими востребованными (даже свежих шаблонов быстро не нашлось), но показали их 4 поколение с более крупным экраном и изменёнными циферблатами на новой watchOS 5 — https://www.apple.com/ru/apple-watch-series-4/. Они тоже стремятся к безрамочности. Размеры экрана — https://developer.apple.com/design/human-interface-guidelines/watchos/visual-design/display-sizes/:
— 44mm — 368px × 448px
— 40mm — 324px × 394px

В общем, пора обновлять портфолио, а то что вы как лохи с морально устаревшим iPhone X :)

P.S. Как правильно писать — Xs или XS? Даже в гайдлайнах Apple пока по-разному, так что ждём устаканивания.

#tools #templates

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

1. Шикарнейшая памятка по работе с интерфейсной анимацией от Taras Skytskyi — https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9. Он обозревает реальные ситуации в работе с цифровыми продуктами, а не абстрактные законы из мира классической анимации и всё это на наглядных примерах.

2. Therese Fessenden из Nielsen/Norman Group рассказывает о теории заметности и интерпретации элементов интерфейса — https://www.nngroup.com/articles/prominence-interpretation-theory/. Их сочетание влияет на восприятие продукта в целом.

3. Простые и наглядные советы Rachel McConnell из Deliveroo по написанию хороших названий для кнопок в интерфейсе — https://medium.com/deliveroo-design/lets-do-this-how-to-write-better-calls-to-action-ea534768b599.

4. Xinyi Chen и Yuxuan (Tammy) Zhou из Nielsen/Norman Group описывают подходы к быстрой авторизации через QR-код или одноразовый код в китайских мобильных приложениях — https://www.nngroup.com/articles/mobile-login-china/.

5. Saadia Minhas детально разбирает ситуации, в которых нужно использовать чекбокс и тумблер — они решают схожие задачи, но не взаимозаменяемы — https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8.

6. Памятка Stéphanie Walter по дизайну мобильных форм — https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/. Со времён классической книжки Luke Wroblewski мало что поменялось, но её нового издания явно не хватает, так что статья полезна. Часть 2 рассказывает об обработке полей ввода на мобильных — https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-2/.

Хороший дизайнер (носматриваеться).

#patterns

Nathan Curtis — самый полезный и плодовитый автор на тему дизайн-систем. Он пишет о реальных проблемах и практиках внедрения, а не в сотый раз пережёвывает основы модульного дизайна. В этом сезоне он публикует серию статей о процессе обновления дизайн-систем:

1. Что включается в релизы и с чего вообще начинать — https://medium.com/eightshapes-llc/releasing-design-systems-57fca91a23f6.

2. Как строить релизный цикл — https://medium.com/eightshapes-llc/design-system-release-cadence-2e3e6694ba21

3. Версионирование на разных уровнях (библиотека компонентов, сами компоненты, дизайнерские шаблоны и токены) — https://medium.com/eightshapes-llc/versioning-design-systems-48cceb5ace4d

4. Как и когда выкатывать новые версии — https://medium.com/eightshapes-llc/visual-breaking-change-in-design-systems-1e9109fac9c4

Кстати, если вы пропустили, то весной он написал серию статей об описании компонентов в живых гайдлайнах — https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015 (две части ещё не опубликованы).

Ну а самый главный вопрос — когда же он наконец напишет книжку, ведь статей у него уже несколько десятков. Это будет самое ценное руководство по внедрению дизайн-систем. Тем более, что самую первую книгу о них написал тоже он, ещё в 2009 году — http://www.peachpit.com/store/modular-web-design-creating-reusable-components-for-9780321601353.

Короч, подписывайтесь — https://medium.com/eightshapes-llc/.

#designsystems

Вышла электронная книга «Enterprise Design Sprints» по дизайн-спринтам от InVision — https://www.designbetter.co/enterprise-design-sprints. Автор — Richard Banfield, который уже выпускал книгу на тему — http://shop.oreilly.com/product/0636920038573.do.

Я пока не добрался до неё, но оригинальная «Sprint» от Jake Knapp из Google Ventures (https://www.thesprintbook.com/) — одна из лучших книг по дизайну интерфейсов в целом. На вид процесс понятен и концептуально похож на дизайн-мышление, чего тут писать на 500 страниц?! Но книга запредельно методологична — этого не хватает очень многим практическим изданиям. В этом году вышел её перевод — https://www.alpinabook.ru/catalog/StartupsInnovativeEntrepreneurship/124511/.

Jake ушёл из Google Ventures в конце прошлого года (https://medium.com/@jakek/taking-some-old-advice-d48b94175de8) — хочет написать 12 книг и консультирует другие компании.

Например, недавно он провёл мета-дизайн-спринт для New York Times — https://open.nytimes.com/how-to-run-13-design-sprints-at-once-inside-maker-week-at-the-new-york-times-5d3b95ca2441. В рамках ежегодного хакатона компании 13 команд одновременно решали свои задачи с помощью методологии.

Весной я писал про дискурс вокруг дизайн-мышления — https://t.me/pdigest/59 и https://t.me/pdigest/60, вариацией на тему которого являются дизайн-спринты. Сильные компании адаптируют методологию под свои задачи и специфику продуктового дизайна. Наиболее известны три:

1. Design Sprints от Google — https://designsprintkit.withgoogle.com/ (максимальный хайп)
2. IBM Design Thinking — https://www.ibm.com/design/thinking/ (фокус на масштабирование)
3. Design 4 Delight от Intuit — http://www.intuitlabs.com/design-for-delight/ (начали одними из первых)

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

Да и полностью повторить их по методичке редко возможно — например, дизайн-спринты предполагают 5-дневный формат. Но даже внутри Google их используют в упрощённом виде. А на одном из их калифорнийских митапов на вопрос «Кто использует дизайн-спринты в 5-дневном формате» руку не поднял никто. В общем, трезво оценивайте то, что льют вам в уши :)

#designthinking #designsprint #methodology

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

Sketch 52: Вышла бета — https://sketchapp.com/beta/. Обещают улучшение интерфейса и тёмную тему оформления. Самое главное — упрощение работы с изменяемыми свойствами в символах, так что то же переопределение цвета будет менее костыльным. Jon Moore в диком восторге, описал новый подход подробнее — https://medium.com/ux-power-tools/the-sketch-update-weve-all-been-waiting-for-plus-a-brand-new-ux-power-tools-72c405fd490d. А ещё — намёк на упрощение вставки реальных данных в макеты.

Плагины:
— 6Spiral позволяет рисовать спирали — https://medium.com/sketch-app-sources/you-can-now-easily-draw-beautiful-spiral-and-helix-shapes-in-sketch-4a921c13f5ef.
— Visual Inspector Scribble — https://www.canvasflip.com/visual-inspector/scribble/ обеспечивает совместную работу дизайнеров и интерфейсных писателей в Sketch.

Статьи:
— Travis Folck из Walmart рассказывает о Sketch-библиотеке дизайн-команды — https://medium.com/walmartlabs/helping-designers-adhere-to-a-design-system-with-sketch-a14db5215096.

FramerX: Продукт вышел из беты — https://framer.com/blog/posts/x-release/. Zach Johnston из Dropbox собрал несколько примеров того, что можно сделать с реальными данными в новом FramerX — https://medium.com/dropbox-design/designing-with-real-data-5b64c0876858. А Modou Lo перечислил самые сырые места текущей версии — https://blog.prototypr.io/framer-x-is-awesome-but-its-not-ready-71362ede1b3e.

Alva (https://meetalva.io/): Продукт вошёл в бету. Как и FramerX, он заточен под дизайн-систему в правильном понимании ― дизайнер использует визуальное представление React-компонентов, а не банальный UI Kit.

Adobe XD: Сентябрьское обновление — https://theblog.adobe.com/september-2018-release-of-adobe-xd-responsive-resize-timed-transitions-and-more/. Изменение размеров макетов с адаптивностью, проверка правописания, улучшение прототипов и анимации. Читайте также инструкцию по работе с внешним контентом — https://blog.prototypr.io/content-first-design-second-prototyping-with-words-and-adobe-xd-c4c07cac21ef.

Axure RP 9: Бета-версию уже можно попробовать — https://www.axure.com/blog/axure-rp-9-beta/. Возможен импорт макетов из Sketch.

Mokup (https://mokup.me/): Ещё один инструмент прототипирования и анимации. Выглядит средне, импортирует только PSD и SVG, но до кучи можно добавить.

Marvel: Поддерживает импорт прототипов, сделанных внутренней функциональностью Sketch — https://marvelapp.com/sketch-prototyping.

Logo Lab (https://logolab.app/): Инструмент помогает оптимизировать логотип для разных представлений в цифровых продуктах и печати.

Cleanmock (https://cleanmock.com/): Ещё один сервис для эффектной презентации экранов интерфейса в устройствах.

Avocode: добавили поддержку Adobe Illustrator (https://avocode.com/adobe-illustrator, на подходе Figma и InVision Studio) и открыли свой SDK — https://avocode.com/sdk. Они накопили неплохой опыт работы с макетами разных инструментов и сделали универсальный формат, который содержит данные из всех возможных инструментов — https://blog.avocode.com/how-could-the-design-industry-innovate-faster-7f363c2b5aa0.

Chipmunk (https://www.getchipmunk.com/): Сервис обещает помочь командам хранить рабочие макеты и другие дизайн-ресурсы.

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

#tools

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

1. Jonas Naimark из Google показывает базовые подходы к интерфейсной анимации — https://medium.com/google-design/motion-design-doesnt-have-to-be-hard-33089196e6c2. Ёмко и по делу. Кстати, также вышел перевод статьи Тараса Скитского на эту же тему, которую я расхваливал раньше — https://vc.ru/design/46504-osnovnye-principy-ispolzovaniya-animacii-v-ux.

2. Edward Scott описывает проблемы в формах с полями в несколько колонок — https://baymard.com/blog/avoid-multi-column-forms. Пользователи теряют нить и пропускают их.

3. Raluca Budiu из Nielsen/Norman Group описывает психологический принцип слепоты к изменениям — https://www.nngroup.com/articles/change-blindness-definition/. Учитывая его, можно добиться лучшей заметности элементов интерфейса.

4. Неплохой обзор видов тёмных паттернов от Suzanne Scacca — https://www.smashingmagazine.com/2018/09/dark-patterns-and-other-design-no-nos-for-mobile/.

5. В другой статье Suzanne даёт советы по подготовке мобильной версии сайта к праздничным распродажам — https://www.smashingmagazine.com/2018/09/get-your-mobile-site-ready-for-the-2018-holiday-season/.

6. Matthäus Niedoba работает над интерфейсом Cinema4D и даёт советы по реализации ползунка для настройки градиента — https://uxdesign.cc/design-better-gradients-ba162d6faf53.

7. Kim Flaherty из Nielsen/Norman Group даёт советы по своевременному упоминанию дополнительных платежей при покупке товара в интернет-магазинах — https://www.nngroup.com/articles/ecommerce-taxes-fees/. Магазин рискует не только сорвать текущую продажу, но и надолго отбить у покупателя желание возвращаться.

Полезно качать насмотренность, а то будет получаться адаптация от Netflix (https://tjournal.ru/77270-mem-adaptaciya-ot-netflix).

#patterns

Собрал дайджест продуктового дизайна за сентябрь 2018 ― https://jvetrau.com/digest-2018-sep/. Спасибо Александру Орлову (https://www.behance.net/0rlov) за новый визуальный стиль — до конца года он обкатается и станет органичнее.

Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX

#digest

Всегда интересно узнать, «а как там у коллег по цеху?» Я давно собираю рассказы об устройстве дизайн-команд в продуктовых компаниях — можно найти новые идеи или убедиться, что и так делаешь всё по красоте. Вот пачка примеров из свежего дайджеста:

Dropbox: Josh Saito о практиках и приёмах совместной работы дизайн-команды Dropbox Paper, которые помогают им поддерживать бодрость духа — https://medium.com/dropbox-design/how-to-stay-scrappy-9c42af21c996.

Societe Generale: Morgane Peng о том, как устроена дизайн-команда банка — https://www.invisionapp.com/blog/societe-generale-design/.

IBM: Arin Bhowmick об устройстве креативных пространств для дизайнеров и сессий ко-дизайна с продуктовыми командами — https://uxdesign.cc/designing-a-place-for-designers-866948355fe9.

Google: Небольшое интервью с главой компании Sundar Pichai, в котором есть немного деталей об устройстве дизайна — https://www.fastcompany.com/90227530/sundar-pichai-qa. Негусто, но полезно от человека у руля.

Ну и про вездесущий DesignOps вдогонку — колонка UXmatters, в которой Jennifer Fabrizi (Travelers), Leo Frishberg (Home Depot Quote Center), Pabini Gabriel-Petit (UXmatters) и Tobias Komischke (Honeywell) приводят своё видение термина — https://www.uxmatters.com/mt/archives/2018/09/designops.php.

Если вы пропустили сам дайджест, то вот он, родненький — https://jvetrau.com/digest-2018-sep/. Свежие ссылочки уже поднакопились и вот-вот польются.

#designmanagement #designops #teams

Сергей Рассказов — один из важных энтузиастов отечественного шрифтового дизайна. Он ведёт канал https://t.me/typeschool, заведует небольшой словолитней ZEH Foundry (http://rasskazov.pro/), проводит международную конференцию Typetersburg (http://www.typetersburg.ru/) и тематическую Школу (http://school.rs/).

На выходных прошла открытая защита курса (https://typetersburg.timepad.ru/event/826965/) с известными дизайнерами в жюри: Юрий Гордон, Андрей Шелютто, Иван Петров, Макси Шилов, Евгений Григорьев и другие. И уже открыт набор на новый поток, который стартует в октябре — http://school.rs/2018-19/.

В блоге Сергея много подробных разборов шрифтовых и других работ, обзоров и кейсов — http://rasskazov.pro/blog/. Анонсы всех его бесконечных активностей всегда есть в Телеграме @typeschool. Меня часто спрашивают «как я всё успеваю» и всегда приятно видеть коллег по профессии, которым сам задал такой же вопрос :)

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

1. Smashing Magazine выпустили книгу Adam Silver «Form Design Patterns» о приёмах дизайна форм — https://www.smashingmagazine.com/printed-books/form-design-patterns/. Автор разбирает множество типовых примеров. Они публикуют отрывок из неё, посвящённый формам регистрации — https://www.smashingmagazine.com/2018/10/form-design-patterns-excerpt-a-registration-form/.

2. Памятка по реализации «ленивой» загрузки изображений в вебе от Rahul Nanwani — https://imagekit.io/blog/lazy-loading-images-complete-guide/. Многие сильно ухудшают работу с сайтами, реализуя только часть из этих практик. В итоге пользователи с хорошим интернетом дольше ждут, пока загрузится графика.

3. Толковый подход Ben Hersh из Medium к хорошим текстам в интерфейсе — https://medium.com/@MostlyCogent/the-riddle-of-ux-writing-ab35b1033c05. Он разделяет три составляющих ― понятность, дружелюбность и эмоциональность.

4. Ещё одна памятка на эту тему от Dylan Ortega — https://blog.nomnominsights.com/the-3-elements-of-really-great-ux-writing/. Типичная, но хорошо структурированная.

5. Vivian Zhang описывает паттерн подталкивания пользователя к действию с помощью отложенной анимации элемента интерфейса — https://uxplanet.org/micro-nudge-a-micro-animation-for-behavioral-change-dd15ecd4fab3. Это помогает обратить внимание на функциональность, не вываливая на человека все возможности сразу.

6. Michael Berger из Basecamp рассказывает о быстрой навигации по продукту для пользователей с ограниченными возможностями (хотя пригодится и остальным) — https://m.signalvnoise.com/the-next-big-jump-in-basecamp-accessibility-a2119c08309e. Оно похоже на spotlight в MacOS.

7. Мини-сайт с памяткой по грамотной реализации диалогов в интерфейсах — https://modalzmodalzmodalz.com/. Лучший совет — вообще избегать их там, где это возможно.

8. Aurora Harley говорит о значительном улучшении рекомендательных систем за последние годы — https://www.nngroup.com/articles/recommendation-expectations/. Она даёт толковые советы по их реализации.

Отличный повод сделать свою работу краше.

#patterns