Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-сентябрь 2020.
Fintech Design Conf 2020
12 ноября мы проводим конференцию Fintech Design Conf 2020 в онлайне. Дизайн-команды современных банков и финансовых сервисов покажут, что интересного происходит в отрасли, и расскажут, куда движется индустрия. N26, Тинькофф Инвестиции, Альфа-Банк, Райффайзенбанк, Home Credit Bank, Сбер, Открытие Брокер, БКС, AIC и Контур поговорят о дизайн-системах, бренде, пользовательских исследованиях и других аспектах современной продуктовой работы.
Паттерны и лучшие практики
SaaSFrame — Inspiration for SaaS Marketers & Product Designers
Коллекция маркетинговых паттернов: промо-сайты, промо-письма, публикации в блогах и целые цепочки встречи нового пользователя.
7 UX Best Practices for Livestream Chat
Советы по оптимизации интерфейса чата в онлайн-трансляциях от Ryan H. из Stream.
Fresh Eyes Audits — Your key to better UX design
Jen Enrique из Slack описывает свой метод экспертной оценки «аудит свежим взглядом».
The 5-pass reduction wireframing — A minimalist UX technique
Joseph Russell описывает свой подход к упрощению интерфейсов. Это итеративный процесс от быстрых набросков до серии упражнений по расчистке экранов и самого сценария.
The rise of the accessibility statement
Amy Ackerman анализирует заявления продуктовых компаний о поддержке accessibility. Это всё более востребованные принципы, которые они описывают на своих сайтах.
Always Use Thumbnails to Represent Additional Product Images (76% of Mobile Sites Don’t)
Kathryn Totz из Baymard рассказывает, почему важно использовать маленькие изображения дополнительных фотографий товара в интернет-магазинах, а не просто навигационные элементы.
Writing for global audiences
Susanna Zaraysky из Google даёт советы по упрощению интерфейсных текстов. Так они лучше подойдут для локализации.
Tap to Navigate. How to systematize interactive labels for maps
Linzi Berry из Lyft даёт рекомендации по дизайну индикаторов и объектов на картах.
State-Switch Controls — The Infamous Case of the “Mute” Button
Raluca Budiu из Nielsen/Norman Group разбирает одну из самых главных интерфейсных коллизий — единую кнопку, которая обозначает текущее состояние и одновременно меняет его.
Battle of the Challenger Banks: Can you block my Card?
Erenia N. Kontolatou из Scientia Consulting сравнивает процесс блокировки карты в европейских необанках.
The trouble with app release notes
Jack Horton из Shopify рассказывает о создании гайдлайнов сопроводительных текстов для обновлений в магазинах приложений.
Дизайн-системы и гайдлайны
Naming Tokens in Design Systems
Мощнейший разбор принципов именования токенов от Nathan Curtis. Все возможные варианты и подходы в одной статье.
Шаблоны iPhone 12
13 октября Apple презентовали iPhone 12. Michal Malewicz анализирует фрагментацию разрешений и плотностей экрана, которая усилилась в iOS с выходом всех возможных вариаций телефона. Даже высота статусной строки скачет между 44, 47 и 48 пикселями. Теперь это не сильно лучше зоопарка в Android.
Зато как всегда полно полезных шаблонов от сообщества:
- iPhone 12 Pro для Figma, Photoshop и Sketch от lstore (ещё).
- Все модели от lstore ($24).
- iPhone 12 для Sketch и Photoshop от Дмитрия Коваленко. Отдельно синий и зелёный.
- iPhone 12 и iPhone 12 Pro в руке для Sketch и Photoshop от Pierre Borodin.
- iPhone 12 Pro для Photoshop от Anthony Boyd. Ещё один, второй и третий.
- iPhone 12 Pro для After Effects в 3D от Majo Puterka.
- iPhone 12 Pro для Photoshop от Faridul Haque.
- iPhone всех версий (обычный, Mini, Pro, Pro Max) для Adobe XD, Figma, Photoshop и Sketch от Vijay Verma.
- iPhone 12 и iPhone 12 Pro для Photoshop от Pixeden.
- iPhone 12 Pro для Cinema 4D и Photoshop от Michael Martinho.
- iPhone 12 Pro для Adobe XD от Max Rudberg.
- iPhone 12 и iPhone 12 Pro для Photoshop от Asylab.
- iPhone 12 Pro для Figma и Sketch от Przemyslaw Baraniak.
Шаблоны для iOS 14 уже были в прошлых выпусках. Но вот один масштабный для Adobe XD, Figma и Sketch от Great Simple Studio.
Absolutely FAB
Дизайнеры Google рассказывают о том, как появилась фирменная плавающая кнопка в Material Design. Она стала одним из самых ярких элементов интерфейса, усилившим этот внутренний бренд.
Reimagining Design Systems at Spotify
Gerrit Kaiser, Marina Posniak и Shaun Bent рассказывают об истории развития дизайн-систем в Spotify и текущем подходе Encore.
Responsive Grid Design — Ultimate Guide
Неплохая памятка по сеткам и их адаптивности от Nitish Khagwal.
The good line-height
Сервис подсказывает высоту строки для конкретного размера шрифта, которая вписывается в микро-модуль 8px (или любой другой).
Measuring the Value of Design Systems
Maya Hampton из REI рассуждает о ценности дизайн-систем. Хотя итоговый список не нов, сами рассуждения о сложности оценки годные.
Понимание пользователя
Emulate vision deficiencies in DevTools
Chrome научился эмулировать режим нарушения цветового восприятия.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Drills and Milkshakes — Say Yes to the Mess
Jim Kalbach объясняет обложку своей книги о Jobs to Be Done: на ней и трубочка для молочного коктейля (отсылка к концепции Clayton Christensen), и сверло дрели (концепция Theodore Levitt). Это две школы мысли — работа как прогресс и как процесс. Они работают на разных уровнях.
Stephen Anderson & Karl Fast — Figure It Out
Rosenfeld Media выпустили книгиу Stephen Anderson & Karl Fast «Figure It Out» о концептуальном проектировании. A List Apart публикуют выдержку из главы 8. UXmatters — выдержку из главы 11.
Новые инструменты дизайна интерфейсов
Adobe MAX 2020
В этом году титульная презентация новых продуктов и экспериментов Adobe MAX 2020 прошла с 20 по 22 октября в интернете. Килотонна полезных выступлений от создателей инструментов и просто дизайнеров. Вот что там анонсировали:
XD
Октябрьское обновление. Появилась совместная работа над макетом, 3D-трансформация элементов, общая работа над дизайн-системой через библиотеки Creative Cloud, вложенные компоненты и их состояния, интеграция с Visual Studio Code. Они также создали формат DSP (Design Systems Package) для стандартного описания дизайн-систем.
Photoshop
Замена неба на фото с цветокоррекцией окружения. Нейросетевые фильтры на базе платформы Sensei: перенос стиля, расцветка чёрно-белых фото, увеличение элементов маленького изображения с улучшением качества, туман, мощные трансформации портрета (поменять эмоцию, возраст, поворот головы, очистить недочёты). Улучшенное распознавание шрифтов. Развиваются контенто-зависимый выбор части изображения, обтравки и заливки.
Illustrator
Быстрое перекрашивание иллюстрации на основе цветов другого изображения, больше возможностей работы со шрифтами и общие интерфейсные улучшения.
Illustrator для iPad
Доступен для всех. Как его делали.
InDesign
Обсуждение макетов командой в браузере, поиск и замена цвета, улучшенное обтекание текста.
Fresco для iPhone
Инструмент для иллюстраторов теперь и на телефоне. В основной версии также много улучшений.
After Effects
Доработанный режим работы с 3D.
Aero 2.0
Бета-версия инструмента для дизайна в дополненной реальности.
Creative Cloud
Можно вести стриминг работы над макетом или обсуждать их командой в Photoshop, Illustrator и Fresco. Поддержка большего количества документов: видео, модели и т.п. Версионирование в Photoshop.
Плагины по всем продуктам развиваются как цельный магазин дополнений. Теперь ими можно централизованно управлять через десктопное приложение. Фреймворк для их написания обновился, а сторонние сервисы теперь могут работать с библиотеками Creative Cloud.
Ещё одна интересная инициатива — проверка аутентичности дизайна. Они изучают историю создания и изменения изображений, что помогает ловить ворованные работы и фейки.
Компания тоже транслирует посыл, что инструменты убирают рутину, освобождая время для креатива. Я много раз отмечал, что Adobe — главная компания, которая внедряет идеи алгоритмического дизайна на практике. И делает вчерашнюю магию привычным повседневным инструментом.
Figma
Состояния компонентов начали выходить из беты. Как проектировали и тестировали их. Учебный шаблон, в котором можно пощупать функцию.
Плагины
- Eve Tabler: Основа для таблицы с нужным количеством строк и столбцов. Данные можно импортировать из Google Sheets.
Anima 4
Плагин для Adobe XD, Figma и Sketch научился генерировать код на React. Больше интерактива в прототипах, быстрое сравнение кода и дизайна, обсуждение с командой.
Coded Mails
Пачка шаблонов адаптивных писем рассылки.
SVG Favicon Maker
Простой генератор favicon для браузера в SVG.
Cavalry
Новый инструмент 2D анимации. Интересен прежде всего за счёт процедурной графики и возможности работы с реальными данными.
Justinmind 9
Вышла новая версия старого инструмента. Со временем он стал полноценным редактором интерфейсов, хотя начинал как сервис для прототипирования.
Пользовательские исследования и тестирование
Scaling research at Dropbox
Шикарнейший рассказ Christopher Nash о демократизации пользовательских исследований в Dropbox. Как они обучают и вовлекают дизайнеров и менеджеров продуктов, освобождая время профессиональным исследователям для стратегических проектов.
Зачем Авито «облачные» UX-исследователи и как с ними работать
Михаил Правдин из Авито рассказывает о новой модели работы с UX-исследователями, которую внедряет компания. Это множество фрилансеров, готовых быстро подхватить проект.
Condens — Supercharge your UX research analysis
Сервис для организации базы знаний и инсайтов из пользовательских исследований. Статья от со-основателя.
Research Repositories for Tracking UX Research and Growing Your ResearchOps
Kara Pernice из Nielsen/Norman Group даёт советы по созданию базы знаний и инсайтов из пользовательских исследований.
Recruiting Backup Participants (aka “Floaters”) in User Research
Kara Pernice из Nielsen/Norman Group описывает разные подходы подстраховки на случай, если респондент в UX-исследовании не пришёл.
Revisiting the Evidence for the Left-Side Bias in Rating Scales
Jim Lewis и Jeff Sauro разбираются: есть ли у пользователей склонность выбирать варианты ответа слева в шкале опроса? Практически нет.
Можно ли использовать эмоции как метрику?
Вадим Шлячков анализирует научные исследования на тему исследования эмоций пользователя. В реальности оценивать их сложно.
“Speed dating” с пользователями
Ольга Ржанова рассказывает о регулярном дне общения с пользователями в Яндекс.Маркете. Исследователи раз в неделю приводят несколько респондентов, а дизайнеры показывают им прототипы своих решений.
Remote UX Research: Advantages and Disadvantages, Part 2
Jim Ross разбирает минусы удалённых пользовательских исследований.
Визуальное программирование и дизайн в браузере
CSS Variables 101
Подробная памятка Ahmad Shadeed по переменным в CSS, самой простой реализации токенов в дизайн-системах.
Новые скрипты
Дизайн-менеджмент и DesignOps
Skill Mapping — A Digital Template for Remote Teams
Простой шаблон карты компетенций в виде лепестковой диаграммы от Nielsen/Norman Group. Шаблон.
Командное взаимодействие
Как работать распределённым дизайн-командам
Продолжаю пополнять коллекцию материалов.
12+ Icebreakers to kick off your next zoom meeting
Jeff Gothelf собрал 12 упражнений-разминок для удалённых рабочих сессий.
Design Shopping — Get A Faster Client Buy-In Through A Guided Design Showcase
Kelly Schummer рассказывает о «дизайн-шопинге» — формате рабочих сессий, в которых анализируются сайты конкурентов.
Брендинг цифровых продуктов
Medium
Ребрендинг Medium от агентства Collins. Кажется, это кандидат на главный провал года — сделана маркетинговая коммуникация, а не цифровой продукт (страницы о компании выглядят круто, но пользователи проводят время не там). Подробнее от заказчика. Вся работа мастера веб-типографики Marcin Wichary исковеркана.
Тренды
My chatbot is dead — Why yours should probably be too
Adrian Zumbrunnen закрыл свой эксперимент личного сайта в виде чат-бота. В 2017 году он стал одной из верхних точек хайпа вокруг темы, которая оказалась сильно перегретой.
Алгоритмический дизайн
Adobe MAX 2020
На недавней конференции Adobe MAX 2020 традиционно показали пачку экспериментов с Adobe Sensei. Правда, в этот раз было жиденько — видимо, Adobe тоже видят, что тема алгоритмического дизайна затухает.
2D Plus
Помощь в создании двухмерных иллюстраций, на которых присутствует глубина и перспектива. Позволяет автоматически расставить объекты по удалённости, добавить освещение и тени.
Comic Blast
Автоматизация создания простых комиксов. Делает сетку сцен и фразы героев на основе текстового сценария, помогает в оформлении. Правда, в комментариях к видео профессиональные художники комиксов разнесли концепт, как Танос — половину вселенной.
Typographic Brushes
Моментально создаёт шрифт на основе нескольких штрихов кистью в Adobe Fresco.
Sharp Shot
Улучшает резкость кадров в видео.
Для общего и профессионального развития
UI Coach — UI Design Challenge Generator
Генератор упражнений для дизайнеров. Например, быстро нарисовать определённое приложение в такой-то стилистике.
Материалы конференций
DesignOps Summit 2020
Конференция DesignOps Summit прошла 21-23 октября в онлайне. Обзор выступлений от Jose Coronado. Вторая и третья части. В этом году она посвящена устойчивости команд и дизайнеров в условиях полной удалёнки, так что темы презентаций достаточно общие.
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме, vc.ru или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.
