Дайджест продуктового дизайна
55.8K subscribers
95 photos
18 videos
522 links
Юрий @jvetrau Ветров собирает свежие статьи, инструменты, паттерны и тренды с 2009 года. 250 000 читателей на vc, VK и других каналах.

Все выпуски — https://jvetrau.com/category/digest/
ВК — https://vk.com/pdigest

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

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

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
Единый стиль иллюстраций для Slack, который появился в 2017 году ― безоговорочный хит, который активно воспроизводит половина компаний. Он позволяет в игривой форме совместить человечность (люди отображены целиком и в сюжетах) и показать ключевые метафоры продукта (объекты и части интерфейса). Ну и просто типичный тренд, за которым все побежали, сцепившись паровозиком ― есть и другие стилистики, которые решают эти задачи.

Alice Lee, которая пустила волну по заказу Slack, рассказала о работе над проектомhttps://www.byalicelee.com/slack. Стартовый мудборд, промежуточные вариации, библиотека типовых объектов и большая галерея результатов ― дельно и подробно.

В конце статьи Alice даёт годные советы для тех, кто ищет свой стиль. Сейчас появилось сразу несколько генераторов стоковых иллюстраций, которые сильно удешевляют их создание и делают доступными для большего количества компаний (а клонирование, ясное дело, убивает разнообразие и ценность своего лица):

Humaaans (https://www.humaaans.com/) и Drawkit (https://www.drawkit.io/): Дёшево повторяем стиль Slack.

Isometriclove (https://isometriclove.com/): Собираем изометрию по шаблону на раз-два.

Конечно, получить стоковый результат можно было и на Shutterstock или Getty Images, они давно заполонили интернеты. Новое поколение конструкторов хотя бы даёт целостность подхода — легче собрать свой сюжет из готовых объектов.

Но если вы хотите выразить свой бренд в иллюстрациях, а не просто поставить сюжетную заглушку ― нужно искать свой язык. В статье Alice есть небольшая затравка на тему. Ну и в прошлом выпуске мини-дайджеста было много примеров: https://t.me/pdigest/123 и https://t.me/pdigest/124.

Само собой, полезно изучать тренды: Creative Bloq как раз выпустили обзор — https://www.creativebloq.com/features/5-huge-illustration-trends-for-2019. Удачи в поисках себя!

#illustrations #designsystems
Я давно хотел делать сводный обзор ключевых событий года в декабре и вот первый заход для Кода Дурова — https://kod.ru/trendy-v-dizayne-na-2019-god/. У каждого заголовка есть тег — по нему найдёте все выпуски по теме:

Прогнозы на 2019 #trends
Самые толковые обзоры трендов 2019 года в дизайне, технологиях и профессии в целом выпустили Fjord, Pantone, Milo Themes, UX Collective, Webflow, Shutterstock, Depositphotos и Creative Bloq — https://t.me/pdigest/142. Ради интереса можно сравнить с тем, что обещали на 2018 — https://t.me/pdigest/10.

DesignOps #designops
Баззворд описывает дизайн-менеджмент цифровых продуктов (https://jvetrau.com/designops-definition/). Он переупаковывает уже известные подходы, но ставит очень грамотный фокус — развивать дизайн-процессы, инструменты, методы и практики под масштабирование. Т.е. так, чтобы ими мог легко воспользоваться любой дизайнер в компании. Это то, что отличает его от остальных. Приставку «Ops» добавляли в этом году ко всему, что движется — ResearchOps, Design Systems Ops и т.п.

Голосовые интерфейсы #voiceui
Будущее у голосовых интерфейсов получше, чем у покрывающихся пылью ботов. Продажи устройств бодро растут, а основные платформы стремительно обзаводятся партнёрствами и интеграциями во всё, что подключено к электричеству и интернету. К концу года прогнозируют 100 миллионов устройств.

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

Алгоритмический дизайн #algorithms
Давно интересуюсь темой (https://algorithms.design/) — это инструменты, которые помогут упростить построение интерфейса, подготовку графики и контента, а также персонализацию продукта.

Гибкие экраны
Samsung показал концепт телефона — https://www.engadget.com/2018/11/07/samsung-foldable-phone-infinity-flex-display/ (весной выйдет коммерческая модель). Android поддержит эту возможность в ближайшее время — https://www.engadget.com/2018/11/07/android-will-natively-support-foldable-phones/. Похоже, наконец-то начнётся интересная движуха в мобильных интерфейсах, где всё стало слишком предсказуемо. А вот что делали Apple и Google:
— Material Design: https://t.me/pdigest/53 + https://t.me/pdigest/54
— iOS 12: https://t.me/pdigest/63
— Шаблоны iPhone Xs, Xs Max, Xr: https://t.me/pdigest/104

Новые инструменты дизайна #tools
Последние три-четыре года движуха на рынке инструментов дизайна стала настолько заметной, что про неё написал даже Bloomberg, который обычно витает в облаках мега-корпораций — https://t.me/pdigest/28. Это видно и по деньгам: в InVision вложили уже $235 млн, Figma — $42,9 млн, Framer — $35 млн, Marvel — $8 млн, Zeplin — $1,2 млн. Есть и покупки, но пока частично удачные — InVision свою экосистему укрепляет, а Гугл сгноил Pixate и Form.

Дизайн-системы #designsystems
Как лучший способ унифицировать линейку продуктов и упростить работу по запуску новой функциональности, дизайн-системы активно на слуху последние годы (http://designsystemsclub.ru/). За последние год-полтора идея приросла крепкими примерами в двух ключевых местах ― токены и интеграция с инструментами дизайна (https://t.me/pdigest/125).

Это далеко не всё, что было в 2018 году: появлялись новые интерфейсные паттерны (#patterns) и книги (#books). Обсуждали дизайн-мышление (https://t.me/pdigest/59 + https://t.me/pdigest/60) и дизайн-спринты (https://t.me/pdigest/108). Отмечали 20 лет одного из лучших агентств Nielsen/Norman Group (https://t.me/pdigest/94) и 50-летие The Mother of All Demos (https://t.me/pdigest/144), где показали основы современных персональных компьютеров. Список можно продолжать долго.

Сейчас всё готовится стихнуть перед новогодними и рождественскими праздниками. Но уже в первые недели января пройдёт выставка CES 2019 (отчёт о прошлой — https://t.me/pdigest/16), где наверняка покажут уйму интереснейших вещей.

#digest #overview
Чтобы не рыться каждый раз в архивах мини-дайджеста, собрал все полезные материалы про унифицированные иллюстрации. Рассказы от Adobe, Airbnb, Creative Market, Dropbox, Лаборатории Касперского, Mail.ru, Putnam Studio, Shopify, Slack, WordPress.

Если кто просил добавочки к ним, то вот она (хотя какие-то ссылки залежались в черновике слишком долго):

КЕЙСЫ
1. Booking.com. Как анализировали цели использования, выбирали стилистику и адаптировали под конкретные задачи.

2. Spacebase.

3. Netguru. К нему сделали конструктор сюжетов.

КОНСТРУКТОРЫ
1. Drawer. Новое слово в жанре — теперь они ещё и анимированные.

2. Open Doodles, Smash и Vector Creator: Ещё три бесплатные коллекции иллюстраций с конструктором.

3. Superscene: 3D от Сraftwork.

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

#illustrations