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

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

Методов пользовательских исследований больше, чем инструментов дизайна интерфейсов (а они на свет лезут). Ловите пачку свежих историй их практического применения и чутка теоретической подпитки:

1. Kie Watanabe из HubSpot даёт советы по донесению результатов пользовательских исследований до продуктовой команды и принимающих решения — https://medium.com/hubspot-product/3-ways-to-make-your-research-better-today-fa85d3ecbaa8. Толковый системный взгляд.

2. Dave Malouf размышляет на тему оценки зрелости пользовательских исследований в компании — https://medium.com/amplify-design/measuring-your-research-operations-maturity-6bebcefa141b.

3. Памятка по проведению интервью с пользователями от Kara Pernice из Nielsen/Norman Group — https://www.nngroup.com/articles/user-interviews/. Достаточно подробно для обзора.

4. Отличный пример описания Jobs to Be Done на основе типичных жизненных ситуаций учителя — https://jtbd.info/four-jobs-teachers-are-trying-to-get-done-547de487a8dc. В другой статье Alan Klement рассказывает, почему концепция «прогресса» — ключевая в методе Jobs to Be Done — https://jtbd.info/progress-the-core-of-jobs-to-be-done-34db4c7e72f2.

5. Nielsen/Norman Group провели опрос среди своих читателей на тему методов количественных исследований, которые они используют — https://www.nngroup.com/articles/quant-research-practice/. Выборка ограниченная, но результаты всё равно интересные.

6. Christina Wodtke неплохо описывает разные подходы к сравнительному анализу конкурентов перед началом работы над продуктом — http://eleganthack.com/comparative-research-done-right/.

7. Издательство O’Reilly выпустило книгу David Farkas и Brad Nunnally «UX Research» в конце 2016 года — https://www.safaribooksonline.com/library/view/ux-research/9781491951286/. Они публикуют главу 7 из неё, посвящённую поиску респондентов для пользовательских исследований ― https://www.oreilly.com/ideas/how-to-recruit-for-user-research.

Часть была в сентябрьском дайджесте, но вы же наверняка добрались только до середины :) А я всё никак не мог вписать выпуск про исследования в график мини-обзоров.

#research

5 ноября я поучаствую в сессии вопросов и ответов от онлайн-интенсива Design Line — http://bit.ly/2y22FQY. У нас уйма событий, про которые есть что рассказать:

— Запуск первого этапа ребрендинга Mail.Ru (и что будет после него) — https://www.facebook.com/jvetrau/posts/10156024283003250

— Вторая версия нашей UX-стратегии aka DesignOps (на подходе статья и презентация)

— Чо как с нашей дизайн-системой Paradigm (новая архитектура)

— Как работает карта компетенций для развития продуктовых дизайнеров (работает с конца прошлого года)

— Как выиграть в Russian Design Cup 2018 (запуск с минуты на минуту)

— Что ждать от Mail Design Conference + Dribbble Meetup 2019 (будет бомба, как всегда)

В составе также Creative People, ONY, Red Collar, Agima, Высшая Школа Брендинга и другие. Всего 10 лекций и 2 мастер-класса, плюс разбор ваших работ в онлайне и ответы на (почти) любые вопросы.

За неделю с 5 по 11 ноября организаторы Design Line обещают прокачать вас в брендинге, веб-дизайне и дизайне интерфейсов в целом, типографике. Ждут графических и веб-дизайнеров, арт-директоров и фрилансеров, независимо от профессионального уровня.

Подробности и покупка билета — http://bit.ly/2EsAelI (1 900 ₽, после 29 октября дороже).

Ежегодная монстрическая презентация новых продуктов и экспериментов Adobe MAX 2018 прошла с 15 по 17 октября в Лос Анджелесе — https://max.adobe.com/sessions/max-online/. Как всегда, карьерный самосвал обновок:

Adobe XD: Октябрьское обновление вышло очень плотным, это крупнейший рывок инструмента — https://theblog.adobe.com/october-2018-release-of-adobe-xd-at-max/. Самое крутое — можно прототипировать голосовые интерфейсы (https://theblog.adobe.com/introducing-voice-prototyping-in-adobe-xd/); прототип слушает команды и отвечает голосом (купили сервис Sayspring в прошлом году — https://www.subtraction.com/2018/10/15/designing-and-prototyping-with-voice-in-adobe-xd/). Фигасе! Вдобавок — UI Kit для Amazon Alexa (https://adobe.ly/xdvoiceuikit).

Появились первые плагины. Помимо базовых типа Zeplin и дежурных вроде Slack и Jira есть трушные дизайнерские — Overflow, ProtoPie, UI Faces, Rename It.

Ещё одна интересная штука — автоанимация, когда инструмент сам простраивает переход между двумя артбордами со сменой состояний элементов.

Связанные символы могут обновляться в макетах, которые используют их, при изменении оригинала. Также можно открывать файлы Adobe Illustrator и экспортировать в After Effects.

Photoshop: Обещанная полноценная версия для iPad подтвердилась — https://theblog.adobe.com/adobe-photoshop-aero-gemini-dimension-photoshop-cc/ и https://www.adobe.com/creativecloud/photoshop-ecosystem.html. Можно работать с PSD-файлами в адаптированном интерфейсе. Доступна будет в следующем году.

Основная версия тоже обновилась — https://helpx.adobe.com/photoshop/using/whats-new.html и https://theblog.adobe.com/adobe-photoshop-aero-gemini-dimension-photoshop-cc/. Много новых возможностей, улучшений старых и оптимизации интерфейса (например, наконец-то есть математические формулы при задании размеров).

Adobe Fonts (https://fonts.adobe.com/): TypeKit наконец-то переименовали (https://theblog.adobe.com/typekit-is-adobe-fonts/). И сняли много ограничений — можно синхронизировать на компьютер хоть все 14 000 шрифтов, нет разницы между использованием на компьютере и в вебе, убрали лимиты по просмотрам и доменам в вебе.

[продолжение в https://t.me/pdigest/119]

#tools #adobe #events

[начало в https://t.me/pdigest/118]

Другие инструменты, про которые рассказывали на Adobe MAX 2018:

— After Effects с пачкой приятных возможностей (https://helpx.adobe.com/after-effects/using/whats-new.html).

— Illustrator с кучей улучшений интерфейса и работы с объектами (https://helpx.adobe.com/illustrator/using/whats-new.html).

— InDesign облегчает перекомпоновку при изменении размеров страницы и автоматом подбирает правильную обрезку изображений (https://helpx.adobe.com/indesign/using/whats-new.html).

— Project Aero для рисования в дополненной реальности (https://www.adobe.com/products/projectaero.html).

— Project Gemini, инструмент для рисования на iPad (https://www.adobe.com/creativecloud/drawing-painting.html).

— Character Animator CC прикрутил наработки из эффектных прошлогодних демок с быстрым наложением иллюстративных стилей на персонажей (https://theblog.adobe.com/introducing-characterizer-and-more-game-changing-innovation-in-character-animator-cc/).

— Dimension 2.0 для использования 3D-объектов в двухмерных изображениях (https://theblog.adobe.com/adobe-photoshop-aero-gemini-dimension-photoshop-cc/).

— Premiere CC сфокусировался на видеоблогерах (https://www.engadget.com/2018/10/15/adobe-premiere-rush-cc-photoshop-ipad/). Одна из новых демок Adobe Sensei показывает потенциальное развитие — https://www.engadget.com/2018/10/16/adobes-smooth-operator-intelligent-cropping/ — автоматическая обрезка ландшафтного видео для stories.

Обновления уже прилетели через Creative Cloud. Все видео выступлений — https://www.behance.net/live/replays.

Хотя многие с удивлённым мизинчиком поправят монокль, глядя с высоты своих Фигм и Скетчей, Adobe — важная компания на рынке, так что какие-то из их продуктов вы наверняка используете. Грешновато профессионалу не интересоваться тем, что происходит с инструментами дизайна, ведь Adobe делает безумное количество прорывных штуковин.

#tools #adobe #events

Если вы не успеваете прочитать все статьи из дайджеста, то у меня плохие новости ― выходят ещё и книжки. Многие не верят, что я читаю все статьи, которыми делюсь (а зря). Но буду честен ― до всех книг добраться нет шансов (хотя штук 15-20 в год выходит). Вот пара-тройка свежих:

1. A Book Apart: Scott Kubie «Writing for Designers» о текстах в интерфейсах — https://abookapart.com/products/writing-for-designers. Они публикуют выдержку из неё ― https://alistapart.com/article/writing-for-designers-excerpt.

2. MIT Press: Kat Holmes «Mismatch» об инклюзивном дизайне (она руководит этой инициативой в Microsoft) — https://mitpress.mit.edu/books/mismatch. Выдержка из неё ― https://www.fastcompany.com/90243282/the-no-1-thing-youre-getting-wrong-about-inclusive-design.

3. 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/.

4. A Book Apart: Tim Brown «Flexible Typesetting» от главного типографа Adobe — https://abookapart.com/products/flexible-typesetting.

5. Выдержка из главы 6 книги Matej Latin «Rhythm in Web Typography», посвящённая ритму в веб-типографике — https://betterwebtype.com/rhythm-in-web-typography. Сама книга вышла в прошлом году в онлайн-версии — https://betterwebtype.com/web-typography-book.

Основной поток анонсов был летом — https://t.me/pdigest/68, но дело Гутенберга живёт и свежие издания появляются.

#books

Создатели канала http://t.me/uxidesign/ регулярно делают переводы статей о дизайне интерфейсов. Они выходят примерно раз в неделю. Я, конечно, за то, чтобы все учили язык и читали оригиналы, но всех не переделаешь :)

Проскакивают новости и подборки, обзоры конференций (например, Design Matters — https://t.me/uxidesign/366) и анонсы курсов, а на прошлой неделе разыгрывали годовую подписку на Adobe Creative Cloud. Но всё-таки главная крутость канала — переводы. Подписывайтесь на @uxidesign, например.

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

Ratio (https://useratio.com/): Экспериментальный инструмент дизайна от Florian Schulz. В своей крутейшей сопроводительной статье он рассказывает о его принципах работы ― https://medium.com/@getflourish/designing-with-ratio-dcc656d5385d. Ratio основан на токенах и использует их в достаточно передовом виде (например, может подключать их из стороннего инструмента).

Interplay (https://interplayapp.com/): Экспериментальный онлайн-инструмент дизайна интерфейсов, который также обещает связку с реальными компонентами дизайн-системы на React, Angular и Vue.

Modulz: Colm Tuite начал сбор денег на свой фреймворк для создания дизайн-систем, о котором писал несколько раз в дайджесте — https://www.kickstarter.com/projects/stephenhaney/modulzthe-next-step-in-visual-coding. Денег дали.

Sympli Versions (https://versions.sympli.io/): Система версионирования макетов и шаблонов для дизайнеров от Sympli. Её анонсировали в прошлом году, теперь она доступна для всех.

Principle 5 (http://principleformac.com/posts/principle-five.html): Вышло обновление, хотя и лёгонькое. Можно импортировать макеты из Figma, есть тёмная тема оформления.

Overframe (https://overframe.xyz/): Простой инструмент для Mac позволяет вставить интерактивный прототип в рамку телефона и получить видео для промо-сайта.

Famous (https://famous.co/): Инструмент обещает экспорт макетов Sketch, Adobe XD и Photoshop в работающие Progressive Web Apps.

Figma: Появился мощная функция для работы с группой повторяющихся объектов, когда их можно изменять одновременно — https://blog.figma.com/introducing-smart-selection-51f6ca7a817b.

Читайте также инструкцию по работе с API для начинающих от Daniel Hollick из TIDAL — https://medium.com/@danhollick/a-designers-guide-to-the-figma-api-64f2785969d8. Пошаговое подключение к макетам и их разбор.

UXPin: В прототипах появились общие переменные, которые можно использовать на разных шагах (например, введённое в форму имя пользователя) — https://www.uxpin.com/studio/blog/variables-and-conditional-interactions-for-interactive-prototyping/.

FramerX: Lachezar Petkov разобрал нюансы работы с инструментом — https://www.smashingmagazine.com/2018/10/new-framer-x-initial-impressions/.

Webflow: Добавили инструмент работы с CSS Grid — https://webflow.com/grid.

UX Feedback (https://uxfeedback.ru/): Сервис позволяет опросить пользователей сайта. На входе — оценка через смайлики (по шкале из 5), есть возможность задать дополнительные вопросы.

Purple (https://www.purple.pm/): Сервис помогает хранить проектную документацию по дизайну — от входящих требований и сценариев использования в самых разных вариациях до макетов и других наглядных результатов работы.

Drafta (https://drafta.co/): Ещё один сервис для хранения макетов в команде. Правда, не особо полезный ― просто галерея без спецификаций и даже описания.

Sensitive (https://sensive.co/): Ещё один сервис версионирования макетов.

Prototypr запустили хронологию обновлений инструментов дизайна — https://www.prototypr.io/time-machine/ — сейчас есть архив за последний год.

Уф, подержите моё пиво — пошёл делать следующую подборку инструментов.

#tools

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

Вот пачка историй известных компаний, которые нашли себя:

Airbnb: Рассказ Jennifer Hom — https://airbnb.design/your-face-here/. Её интервью Wired на эту же тему ― https://www.wired.com/story/jennifer-hom-illustrations-airbnb/.

Adobe: Рассказ Emma Zhang — https://medium.com/@emmazhang_7383/designing-adobes-brand-illustration-style-3c982ded31f6.

Mail.Ru: Рассказ Евгения Долгова ― https://www.youtube.com/watch?v=uHAL-fV-SHk&list=PLzqQCeTtpSBozWJzUGnTTSU-11RE9Gau6. Презентация ― https://www.slideshare.net/EugenDolgov/illustrations-63067904.

Shopify: Рассказ Meg Robichaud о работе над серией иллюстраций для нулевых состояний интерфейса — https://ux.shopify.com/empty-states-more-like-you-have-no-idea-how-much-work-goes-into-those-states-amirite-e0102f58b64e. Очень интересный подход, где иллюстрация передаёт нужное настроение в текущем сценарии — успех, неудача, нейтральное сообщение. У неё много топовых статей на тему. Разница между иллюстрациями для продукта и маркетинга — https://medium.com/shopify-ux/product-vs-marketing-illustration-7ac474dfe2ed. Роли и задачи продуктовой иллюстрации — https://ux.shopify.com/product-illustration-for-people-who-dont-know-anything-about-product-illustration-3f43d7b2ec06. Нюансы работы с командой иллюстраторов в продуктовой команде — https://ux.shopify.com/7-truths-of-running-an-illustration-team-2d44fb8fcf7e.

Лаборатория Касперского: Рассказ студии Мыслеформа — https://designpub.ru/%D0%BA%D0%B0%D0%BA-%D0%BC%D1%8B-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%B0%D1%82%D1%8B%D0%B2%D0%B0%D0%BB%D0%B8-%D1%81%D1%82%D0%B8%D0%BB%D1%8C-%D0%BA%D0%BE%D1%80%D0%BF%D0%BE%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B9-%D0%B8%D0%BB%D0%BB%D1%8E%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%B8-%D0%BB%D0%B0%D0%B1%D0%BE%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8%D0%B8-%D0%BA%D0%B0%D1%81%D0%BF%D0%B5%D1%80%D1%81%D0%BA%D0%BE%D0%B3%D0%BE-c8b32b3f1c7b.

Creative Market: Рассказ Ryan Weaver — https://medium.com/@ryantheweave/crafting-a-new-illustration-style-for-creative-market-412acba2e673. Bronwyn Gruet о модульности с коллекцией типовых объектов — https://medium.com/building-creative-market/scaling-our-illustration-system-with-object-libraries-dd3ebe7318e7. Daniella Valerio о принципах цветовой палитры — https://medium.com/building-creative-market/a-color-exercise-for-our-brands-illustration-db39af44f081.

Wordpress: Рассказ Alice Lee — http://byalicelee.com/wordpress/.

Dropbox: Ещё до того, как ребята ударились в чересчур абстрактное искусство, Michael Jeter во всех подробностях расписывал историю развития стиля — https://medium.com/dropbox-design/illustrating-a-more-human-brand-part-1-e1cfe3c28d9. Как и какие задачи решал каждый из подходов на конкретных этапах жизненного цикла компании. Вторая часть про рождение следующего подхода — https://medium.com/dropbox-design/illustrating-a-more-human-brand-part-2-d2e9494cc8a3.

Ryan Putnam даёт советы по унификации иллюстраций — https://medium.com/putnam-studio/illustration-identities-are-our-thing-c9f136e46510.

[продолжение в https://t.me/pdigest/124]

#illustrations #designsystems

[вторая часть]

На нашей конференции Mail Design Conference / Dribbble Meetup выступает много иллюстраторов. Ловите плейлист с видео их рассказов — https://www.youtube.com/playlist?list=PLzqQCeTtpSBreAQlv8ZX6zm_GgxnqtHS5 (на подходе ещё парочка с G8).

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

При этом в наше нелёгкое время мета-модернизма не существует одного главного тренда — параллельно востребованы сразу несколько стилей. Много человечных персонажей в духе Slack (хит прошлого года), изометрия (лезет изо всех щелей благодаря простоте исполнения, даже бесплатная библиотека объектов есть — https://isometriclove.com/), отсылки к 50-60м (приятная дурашливость), лёгкий объём через фронтальную диметрическую проекцию (что там у вас было по черчению?) и совсем спорный арт-хаус от Dropbox и Mailchimp (вспоминаем вечную дискуссию о разнице между дизайном и искусством). А сейчас вот всё больше запросов на 3D в духе хайпового Pitch. Конечно, лучше искать уникальный подход, но это доступно не всем.

У меня в рукаве, как всегда, есть подборочка на тему в Пинтересте — https://www.pinterest.ru/jvetrau/product-illustrations/. Ну и попробуйте сказать, что сейчас самое трендовое? :) Оставлю вас в этом подвешенном состоянии.

#illustrations #designsystems

Октябрьский дайджест уже собран в черновике и в нём накопилось кой-чего свежего про дизайн-системы:

5 часть серии статей Nathan Curtis о релизном цикле дизайн-систем говорит о взаимозависимостях между компонентами и другими слоями модульности — https://medium.com/eightshapes-llc/dealing-with-dependencies-inside-design-systems-aa6ce2cf7bc3.

Толковая статья Jerlyn Jareunpoon-Phillips из Clearleft о внедрении дизайн-систем на практике — https://clearleft.com/posts/designing-design-systems. Полезные нюансы процесса общения с продуктовой командой или клиентом.

Rambler обновили сайт своей дизайн-системы Ratio — https://ui-kit.rambler.ru/.

Josh Clark тоже пишет о том, что промежуточные проектные артефакты зачастую бесполезны и лучше сфокусироваться на развитии дизайн-системы даже на ранних этапах продуктовой работы — https://bigmedium.com/ideas/only-one-deliverable-matters.html.

Дизайн-команда Lyft сделала мощный генератор цветовых палитр для своей дизайн-системы, который обеспечивает гибкость, но при этом алгоритмическую предсказуемость и поддержку достаточного контраста — https://www.colorbox.io/. Kevyn Arnott рассказывает о том, как она создавалась — https://design.lyft.com/re-approaching-color-9e604ba22c88.

Tyler Miller показывает, как можно сделать тёмную тему оформления интерфейса и описать её переменные — https://uxdesign.cc/systemizing-color-for-change-9dde4d0018e4.

Кажется, после гипер-мощного всплеска всеобщего интереса к дизайн-системам в 2015-2017 годах они становятся обычным делом и поток публикаций становится таким же обыденным. В нашу коллекцию отечественных дизайн-систем давно ничего не добавлялось — http://designsystemsclub.ru/. Видимо, все переключились на перекрашивание в DesignOps.

#designsystems

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

1. Bill Chung провёл пользовательское исследование схематичных экранов загрузки, которые популяризировал в своё время Facebook — https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a. Они помогают, если показывают загрузку поэтапно и снижают неопределённость ожидания, а не просто служат в качестве заглушек. Автор даёт советы по правильной анимации для них.

2. Kate Moran и Kim Flaherty из Nielsen/Norman Group показывают причины возникновения технологических мифов и то, как они влияют на использование продуктов — https://www.nngroup.com/articles/technology-myths/.

3. Alexander Handley описывает уровни детализации wireframes и сценариев — https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a.

4. Относительно толковый разбор особенностей дизайна интерфейсов в блокчейне — https://medium.com/@jmer.ux/blockchain-ux-design-challenges-principles-and-heuristics-903f8e0aa370. Большинство статей на тему страдают отсутствием конкретики, здесь хотя бы неплохой обзор ключевых нюансов.

5. Marli Mesibov из Mad*Pow даёт советы по дизайну интерфейсов, которые помогают в поддержании ментального здоровья пользователей — https://www.smashingmagazine.com/2018/10/designing-experiences-improving-mental-health/.

6. Alita Joyce из Nielsen/Norman Group описывает принципы хороших микро-взаимодействий в интерфейсе — https://www.nngroup.com/articles/microinteractions/.

7. Edward Scott говорит о проблемах горизонтальных вкладок на странице товара — https://baymard.com/blog/avoid-horizontal-tabs. Они помогают разделить масштабное описание на части, но пользователи теряют их. От него же о правильном поле ввода срока окончания действия карты — https://baymard.com/blog/how-to-format-expiration-date-fields.

На следующей неделе выйдет традиционный ежемесячный дайджест — осталось шлифануть черновик и он у вас на экранах. Хороших выходных!

#patterns