Обновление фигмы?
Вчера совершенно случайно для себя обнаружил изменение в механике оверрайдов свойств текста в Figma. И то ли я проглядел анонс, то ли его не было… или это надвигается так «Конфиг»👀
В общем, теперь стиль не пропадает при изменении некоторых свойств текста:зачеркивание, курсив, жирность, подчеркивание.
Раньше, если горячей клавишей, например, подчеркнуть весь текст или фрагмент, стиль из библиотеки «отваливался».
При этом оверрайды ещё и наследуются при смене стиля.
С одной стороны, наконец можно делать, например, ссылки без костылей. Но при этом возникает большой вопрос, насколько это хорошо для дизайн-системы, поскольку такая реализация не вполне укладывается в работу на токенах и не интуитивна при передаче в разработку.🤔
- - - -
#figma #обновление
🛫 Канал: Мыслью по древу
Вчера совершенно случайно для себя обнаружил изменение в механике оверрайдов свойств текста в Figma. И то ли я проглядел анонс, то ли его не было… или это надвигается так «Конфиг»
В общем, теперь стиль не пропадает при изменении некоторых свойств текста:
Раньше, если горячей клавишей, например, подчеркнуть весь текст или фрагмент, стиль из библиотеки «отваливался».
При этом оверрайды ещё и наследуются при смене стиля.
С одной стороны, наконец можно делать, например, ссылки без костылей. Но при этом возникает большой вопрос, насколько это хорошо для дизайн-системы, поскольку такая реализация не вполне укладывается в работу на токенах и не интуитивна при передаче в разработку.
- - - -
#figma #обновление
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9
Про доступность интерфейсов
Ещё её называют инклюзивностью. В общем, насколько легко или возможно использовать интерфейс с теми или иными физическими ограничениями.
Таких ограничений масса: дальтонизм, слабое зрение. Даже перелом правой руки и необходимость тыкать в телефон непривычным образом или немота и глухота — тоже влияют на прохождение некоторых сценариев (например, позвонить или принять звонок).
Отдельно стоит упомянуть функционал для незрячих. Как правило, он связан с работой с экранным диктором — программой, которая озвучивает элементы интерфейса и происходящее на экране. Про то, как незрячие пользуются телефоном, было в своё время на YouTube отличное видео от Вилсакома.
Ну а эта история — про моё столкновение с доступностью во «ВкусВилл».
***
В компании есть обычай отправлять всех новых лидеров на обучение Beyond Taylor (система менеджмента, или даже философия работы в ВВ). Обучение представляет собой проект, который студенты проводят через все этапы подготовки, как стартап. Исследование рынка, проверка потребностей, болей клиента, построение гипотез и их проверка. И в конце получается готовый к переходу на этап MVP продукт.
Догадайтесь, что выбрал я… Да, ту самую цифровую доступность. Причём опрос коллег показал, что никто из них не занимался этим вопросом и не помнит, прорабатывалась ли ранее доступность приложения. И я, будучи полностью уверенным, что нащупал проблему, отправился опрашивать пользователей.
Но как же я удивился, когда на интервью с респондентами вдруг выяснилось, что у нас не просто есть поддержка экранного диктора, а довольно много незрячих пользователей постоянно пользуются нашим приложением, да ещё и дают положительный фидбэк, что наше приложение вполне себе удобное.
Это перевернуло мой мир и в целом стало удивительным открытием для команды😬
А секрет оказался прост. Всё приложение построено полностью на нативных компонентах, которые из коробки системой уже довольно неплохо озвучены. Хотя, конечно, нам предстоит исследовать и соответствующую аудиторию, и работу этого функционала, чтобы взять под осознанный контроль и развивать его.
А вы работаете с доступностью ваших проектов?
- - - -
#вкусвилл #доступность #инклюзивность #доступныйдизайн #a11y #accessibility
🛫 Канал: Мыслью по древу
Ещё её называют инклюзивностью. В общем, насколько легко или возможно использовать интерфейс с теми или иными физическими ограничениями.
Таких ограничений масса: дальтонизм, слабое зрение. Даже перелом правой руки и необходимость тыкать в телефон непривычным образом или немота и глухота — тоже влияют на прохождение некоторых сценариев (например, позвонить или принять звонок).
Отдельно стоит упомянуть функционал для незрячих. Как правило, он связан с работой с экранным диктором — программой, которая озвучивает элементы интерфейса и происходящее на экране. Про то, как незрячие пользуются телефоном, было в своё время на YouTube отличное видео от Вилсакома.
Ну а эта история — про моё столкновение с доступностью во «ВкусВилл».
***
В компании есть обычай отправлять всех новых лидеров на обучение Beyond Taylor (система менеджмента, или даже философия работы в ВВ). Обучение представляет собой проект, который студенты проводят через все этапы подготовки, как стартап. Исследование рынка, проверка потребностей, болей клиента, построение гипотез и их проверка. И в конце получается готовый к переходу на этап MVP продукт.
Догадайтесь, что выбрал я… Да, ту самую цифровую доступность. Причём опрос коллег показал, что никто из них не занимался этим вопросом и не помнит, прорабатывалась ли ранее доступность приложения. И я, будучи полностью уверенным, что нащупал проблему, отправился опрашивать пользователей.
Но как же я удивился, когда на интервью с респондентами вдруг выяснилось, что у нас не просто есть поддержка экранного диктора, а довольно много незрячих пользователей постоянно пользуются нашим приложением, да ещё и дают положительный фидбэк, что наше приложение вполне себе удобное.
Это перевернуло мой мир и в целом стало удивительным открытием для команды
А секрет оказался прост. Всё приложение построено полностью на нативных компонентах, которые из коробки системой уже довольно неплохо озвучены. Хотя, конечно, нам предстоит исследовать и соответствующую аудиторию, и работу этого функционала, чтобы взять под осознанный контроль и развивать его.
А вы работаете с доступностью ваших проектов?
- - - -
#вкусвилл #доступность #инклюзивность #доступныйдизайн #a11y #accessibility
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11
Кто такой веб-дизайнер?
Недавно попросили сделать ревью программы одного курса в качестве эксперта. Его специализация называлась «Веб-дизайн». И меня это немного смутило. Дело в том, что когда только появился цифровой дизайн, веб-дизайнерами называли всех, кто создаёт что-то в интернете. Причём изначально в эту работу входил и код. То есть веб-дизайнер делал сайты "под ключ". Затем, при разделении ролей, этим словом стали называть дизайнера, который делает макет сайта и передаёт его верстальщику.
Но сейчас понятия настолько усложнились, что даже «верстальщик» уже никто не говорит, теперь они фронтендеры. Про дизайнеров всё чаще говорят UX/UI-дизайнер или дизайнер продукта.
Но тем не менее понятие «веб-дизайнер» ещё не вымерло полностью, и несмотря на то, что многие, судя по моим опросам, понимают под этим «мастера по лендосам», в отрасли единства нет. Встречал вакансии, где в требованиях был описан почти чистый UX/UI, в смысле проектирование веб-сервисов и т. д.
Так какой вывод? А вывод, что в отрасли наплодили такое количество пересекающихся понятий, что чёрт ногу сломит. Вот и чего должен уметь этот веб-дизайнер, сиди теперь думай.
- - - -
#брюзжание #вебдизайн
🛫 Канал: Мыслью по древу
Недавно попросили сделать ревью программы одного курса в качестве эксперта. Его специализация называлась «Веб-дизайн». И меня это немного смутило. Дело в том, что когда только появился цифровой дизайн, веб-дизайнерами называли всех, кто создаёт что-то в интернете. Причём изначально в эту работу входил и код. То есть веб-дизайнер делал сайты "под ключ". Затем, при разделении ролей, этим словом стали называть дизайнера, который делает макет сайта и передаёт его верстальщику.
Но сейчас понятия настолько усложнились, что даже «верстальщик» уже никто не говорит, теперь они фронтендеры. Про дизайнеров всё чаще говорят UX/UI-дизайнер или дизайнер продукта.
Но тем не менее понятие «веб-дизайнер» ещё не вымерло полностью, и несмотря на то, что многие, судя по моим опросам, понимают под этим «мастера по лендосам», в отрасли единства нет. Встречал вакансии, где в требованиях был описан почти чистый UX/UI, в смысле проектирование веб-сервисов и т. д.
Так какой вывод? А вывод, что в отрасли наплодили такое количество пересекающихся понятий, что чёрт ногу сломит. Вот и чего должен уметь этот веб-дизайнер, сиди теперь думай.
- - - -
#брюзжание #вебдизайн
Please open Telegram to view this post
VIEW IN TELEGRAM
Дайджест канала за январь-июль 2024
Каналу скоро пол года. Было много интересных постов, и мне вдруг подумалось сделать небольшую подборку постов по группам тем. Чтобы точно не пропустить самое интересное😉 .
▶️ КАРЬЕРА
Оптимальный старт карьеры продуктового дизайнера — Основные ошибки начала пути и несколько советов.
Мой не оптимальный старт — как я начинал свою карьеру дизайнера.
Что такое релевантный опыт — почему не весь ваш опыт учитывается при найме.
База по собеседованиям — основные ошибки и советы по прохождению собеседований.
▶️ ДИЗАЙН-СИСТЕМЫ
Референсная палитра — отдельная группа токенов цвета с перечислением всех уникальных оттенков.
Инструменты генерации палитры — небольшой обзор средств по построению растяжек цветов и мой личный опыт.
Семантическая палитра — слой токенов цвета с семантической привязкой.
Сем. палитра во ВкусВилл — пример семантической палитры текущего мобильного приложения ВВ.
Бывают ли неатомарные ДС — рассуждения на тему "Is atomic design dead"
Атомарность в нашей ДС — почему дизайн-система и платформа у нас это разное, и как выстроена атомарность на уровне ДС.
Что такое SDUI — Краткое описание понятия.
Дизайн-токены — что это, и зачем.
Рецепты компонентов — техника описания основных характеристик групп компонентов.
▶️ БРЮЗЖАНИЕ
Про менторство — моё отношение к этому и почему я не занимаюсь менторством.
Операторы figma — о чрезмерном фокусе дизайнеров на инструменте.
Для кого старается продуктовый дизайнер — цель работы дизайнера, и что такое эффективность дизайна.
Про тестовые задания — почему они не работают.
О красоте — как объяснить красоту, и можно ли её измерить.
О доступности интерфейса — мой опыт исследования доступности во ВкусВилл.
Кто такой веб-дизайнер — о пересекающихся понятиях в индустрии
▶️ ДИЗАЙН-ТОНКОСТИ
Оптическая компенсация — как с ней работать в интерфейсе
Почему UI иконка – это не картинка — о важности единства стиля иконок в интерфейсе и шрифта.
Про Touch target — как работать с облатсью нажтия в компонентах.
Почему модульные сетки устарели — моё виденье развития и актуальности использования модульных сеток в дизайне интерфейсов.
И пример адаптива на переменных в фигме.
▶️ СТАТЬИ И ВЫСТУПЛЕНИЯ
Описания работы механики наследуемых свойств в нашей SDUI платформе.
Часть 1 и Часть 2
Типографика во ВкусВилл — как я организовал работу с текстом в нашей диаайн-платформе.
Запись выступления на Дизайн-выходных — тема "Как сделать дизайнера разработчиком, не заставляя писать код".
Ответы на вопросы зрителей — видео ответов на вопросы из зала после выступления на Д-в.
- - - -
#дизайн #вебдизайн #uxui #дизайнсистемы #вкусвилл
🛫 Канал: Мыслью по древу
Каналу скоро пол года. Было много интересных постов, и мне вдруг подумалось сделать небольшую подборку постов по группам тем. Чтобы точно не пропустить самое интересное
Оптимальный старт карьеры продуктового дизайнера — Основные ошибки начала пути и несколько советов.
Мой не оптимальный старт — как я начинал свою карьеру дизайнера.
Что такое релевантный опыт — почему не весь ваш опыт учитывается при найме.
База по собеседованиям — основные ошибки и советы по прохождению собеседований.
Референсная палитра — отдельная группа токенов цвета с перечислением всех уникальных оттенков.
Инструменты генерации палитры — небольшой обзор средств по построению растяжек цветов и мой личный опыт.
Семантическая палитра — слой токенов цвета с семантической привязкой.
Сем. палитра во ВкусВилл — пример семантической палитры текущего мобильного приложения ВВ.
Бывают ли неатомарные ДС — рассуждения на тему "Is atomic design dead"
Атомарность в нашей ДС — почему дизайн-система и платформа у нас это разное, и как выстроена атомарность на уровне ДС.
Что такое SDUI — Краткое описание понятия.
Дизайн-токены — что это, и зачем.
Рецепты компонентов — техника описания основных характеристик групп компонентов.
Про менторство — моё отношение к этому и почему я не занимаюсь менторством.
Операторы figma — о чрезмерном фокусе дизайнеров на инструменте.
Для кого старается продуктовый дизайнер — цель работы дизайнера, и что такое эффективность дизайна.
Про тестовые задания — почему они не работают.
О красоте — как объяснить красоту, и можно ли её измерить.
О доступности интерфейса — мой опыт исследования доступности во ВкусВилл.
Кто такой веб-дизайнер — о пересекающихся понятиях в индустрии
Оптическая компенсация — как с ней работать в интерфейсе
Почему UI иконка – это не картинка — о важности единства стиля иконок в интерфейсе и шрифта.
Про Touch target — как работать с облатсью нажтия в компонентах.
Почему модульные сетки устарели — моё виденье развития и актуальности использования модульных сеток в дизайне интерфейсов.
И пример адаптива на переменных в фигме.
Описания работы механики наследуемых свойств в нашей SDUI платформе.
Часть 1 и Часть 2
Типографика во ВкусВилл — как я организовал работу с текстом в нашей диаайн-платформе.
Запись выступления на Дизайн-выходных — тема "Как сделать дизайнера разработчиком, не заставляя писать код".
Ответы на вопросы зрителей — видео ответов на вопросы из зала после выступления на Д-в.
- - - -
#дизайн #вебдизайн #uxui #дизайнсистемы #вкусвилл
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17
CJM и портрет пользователя — работа дизайнера?
Часто в портфолио и тестовых заданиях я вижу, что дизайнеры строят CJM и формируют портреты аудитории. Всегда возникает большой вопрос о происхождении этих данных, и почему-то кажется, что они взяты с потолка. Но даже если дизайнер сам провёл исследование, нашёл респондентов и опросил их, насколько это релевантно для роли продуктового дизайнера в целом?
Я в дизайне уже без малого 17 лет, и именно как дизайнер я ни разу не создавал CJM или портреты пользователей (похожая ситуация и у других опытных дизайнеров, которых я спрашивал). Чаще я сталкивался с этим в роли менеджера, а работающие примеры таких артефактов, как правило, являются плодом труда целой команды и мало похожи на те слайды, которые дизайнеры показывают в презентациях своих кейсов.
Например, в превью к этому посту — скриншот CJM только части мобильного приложения ВкусВилла (корзина, чек-аут и оплата), а полную карту собирает целая команда, которая так и называется — «команда CJM». То же самое и с портретами аудитории. И, как видно из объёма работы, ни одному дизайнеру такое не вытянуть в одиночку, и не добиться нужной актуальности и глубины.
И отдельно учиться строить всё это нет смысла, потому что в работе так или иначе дизайнер обязательно столкнётся и с исследованиями, и с CJM, и с портретами аудитории. Гораздо важнее не научиться строить самому, а понять, как работать с этими данными.
Но на курсах из раза в раз дизайнеров учат делать не свою работу, а затем требуют этого в тестовых заданиях. Дизайнеры выдумывают неработающие артефакты для кейсов и ставят себе в портфолио. Возникает вопрос: зачем?🤔
- - - -
#дизайн #CJM #вкусвилл
🛫 Канал: Мыслью по древу
Часто в портфолио и тестовых заданиях я вижу, что дизайнеры строят CJM и формируют портреты аудитории. Всегда возникает большой вопрос о происхождении этих данных, и почему-то кажется, что они взяты с потолка. Но даже если дизайнер сам провёл исследование, нашёл респондентов и опросил их, насколько это релевантно для роли продуктового дизайнера в целом?
Я в дизайне уже без малого 17 лет, и именно как дизайнер я ни разу не создавал CJM или портреты пользователей (похожая ситуация и у других опытных дизайнеров, которых я спрашивал). Чаще я сталкивался с этим в роли менеджера, а работающие примеры таких артефактов, как правило, являются плодом труда целой команды и мало похожи на те слайды, которые дизайнеры показывают в презентациях своих кейсов.
Например, в превью к этому посту — скриншот CJM только части мобильного приложения ВкусВилла (корзина, чек-аут и оплата), а полную карту собирает целая команда, которая так и называется — «команда CJM». То же самое и с портретами аудитории. И, как видно из объёма работы, ни одному дизайнеру такое не вытянуть в одиночку, и не добиться нужной актуальности и глубины.
И отдельно учиться строить всё это нет смысла, потому что в работе так или иначе дизайнер обязательно столкнётся и с исследованиями, и с CJM, и с портретами аудитории. Гораздо важнее не научиться строить самому, а понять, как работать с этими данными.
Но на курсах из раза в раз дизайнеров учат делать не свою работу, а затем требуют этого в тестовых заданиях. Дизайнеры выдумывают неработающие артефакты для кейсов и ставят себе в портфолио. Возникает вопрос: зачем?
- - - -
#дизайн #CJM #вкусвилл
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔21🔥6💯6
Ищем дизайнера продукта в мобильное приложение
Что важно:
— От 2-х лет релевантного опыта
— Опыт работы с дизайн-системами
— Уметь строить дизайн на основе данных (аналитика, исследования)
— Уметь решать задачи (а не просто двигать пиксели
— Портфолио, которое понравится нашему эйчару
- - - -
#дизайн #вакансия #вкусвилл
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17
This media is not supported in your browser
VIEW IN TELEGRAM
Про джунов
Я часто говорю, что у нас во ВкусВилл пока нет вакансий для джуниор-дизайнеров, потому что мы «ещё маленькие». Что это значит и почему для найма джунов нужно быть более зрелыми? Ведь многие считают, что джуны — это просто дешёвая рабочая сила.
На практике джуниор-дизайнеру нужен наставник — кто-то из опытных дизайнеров, кто будет тратить время на его обучение, онбординг, ревью и сопровождение. Это сразу снижает общую производительность команды. Кроме того, стажёры и джуны будут рассчитывать на карьерный рост. Для этого должны быть чёткие механизмы повышения и соответствующие грейды. Нужно также понимать, как часто возникает потребность в миддл-дизайнерах, сколько времени и джунов требуется, чтобы вырастить одного миддла.
Эти принципы важны для команд, которые хотят быть эффективными и дорожат своей репутацией. Конечно, можно нанять много джунов, завалить их рутинной работой «подай-принеси» и увольнять, когда надоест. Но это негативно скажется и на имидже команды, и на атмосфере внутри неё.
Несмотря на то, что ВВ — большой и известный бренд, наша собственная команда дизайнеров существует меньше года. И каждый дизайнер в команде очень важен: ведь, например, в мобильном приложении сейчас работает всего пять дизайнеров.
Найм джунов — это хорошая инвестиция, которая помогает выращивать мидлов, уже погруженных в культуру и процессы команды. Это здорово, если в ближайшее время мы сможем реализовать такой подход. Но делать это нужно вдумчиво, а команда должна быть к этому готова.
- - - -
#дизайн #карьера #вкусвилл
🛫 Канал: Мыслью по древу
Я часто говорю, что у нас во ВкусВилл пока нет вакансий для джуниор-дизайнеров, потому что мы «ещё маленькие». Что это значит и почему для найма джунов нужно быть более зрелыми? Ведь многие считают, что джуны — это просто дешёвая рабочая сила.
На практике джуниор-дизайнеру нужен наставник — кто-то из опытных дизайнеров, кто будет тратить время на его обучение, онбординг, ревью и сопровождение. Это сразу снижает общую производительность команды. Кроме того, стажёры и джуны будут рассчитывать на карьерный рост. Для этого должны быть чёткие механизмы повышения и соответствующие грейды. Нужно также понимать, как часто возникает потребность в миддл-дизайнерах, сколько времени и джунов требуется, чтобы вырастить одного миддла.
Эти принципы важны для команд, которые хотят быть эффективными и дорожат своей репутацией. Конечно, можно нанять много джунов, завалить их рутинной работой «подай-принеси» и увольнять, когда надоест. Но это негативно скажется и на имидже команды, и на атмосфере внутри неё.
Несмотря на то, что ВВ — большой и известный бренд, наша собственная команда дизайнеров существует меньше года. И каждый дизайнер в команде очень важен: ведь, например, в мобильном приложении сейчас работает всего пять дизайнеров.
Найм джунов — это хорошая инвестиция, которая помогает выращивать мидлов, уже погруженных в культуру и процессы команды. Это здорово, если в ближайшее время мы сможем реализовать такой подход. Но делать это нужно вдумчиво, а команда должна быть к этому готова.
- - - -
#дизайн #карьера #вкусвилл
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥30
Что-то давно ничего не было про SDUI... Исправляем!🙂
Помните, я на Д-в рассказывал про наш собственный редактор интерфейсов, типа «собственная Фигма»?
Напомню, мы в компании делаем SDUI-платформу для мобильного приложения, и к ней разрабатываем собственный редактор. Он не заменяет Фигму, но работает с ней в связке и должен сильно облегчить работу с макетами, ведь у нас верстка автоматизирована. По сути, он позволяет визуально редактировать не макет, а уже сразу верстку экрана — в этом и вся фишка.
Разработка идёт полным ходом, и сейчас уже можно создавать компоненты и экраны. У нас появился менеджер файлов, все данные хранятся в облаке. Но лучше показать, чем рассказывать😉
Прикладываю видосики. Работы ещё много, но осенью уже планируем пилотные тесты на нашей команде дизайнеров.
- - - -
#вебредактор #вкусвилл #sdui #figma
🛫 Канал: Мыслью по древу
Помните, я на Д-в рассказывал про наш собственный редактор интерфейсов, типа «собственная Фигма»?
Напомню, мы в компании делаем SDUI-платформу для мобильного приложения, и к ней разрабатываем собственный редактор. Он не заменяет Фигму, но работает с ней в связке и должен сильно облегчить работу с макетами, ведь у нас верстка автоматизирована. По сути, он позволяет визуально редактировать не макет, а уже сразу верстку экрана — в этом и вся фишка.
Разработка идёт полным ходом, и сейчас уже можно создавать компоненты и экраны. У нас появился менеджер файлов, все данные хранятся в облаке. Но лучше показать, чем рассказывать
Прикладываю видосики. Работы ещё много, но осенью уже планируем пилотные тесты на нашей команде дизайнеров.
- - - -
#вебредактор #вкусвилл #sdui #figma
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24
С прошлой недели я пользуюсь специальной версией приложения ВВ. В ней вкладка поддержки уже работает на SDUI. Мы запустили внутренний тест среди сотрудников, чтобы проверить работу и собрать метрики. Впечатления от использования потрясающие. Если бы я не знал, то даже не догадался бы, что интерфейс этой вкладки чем-то отличается от остального приложения.
Разве что стилем. Постепенно переводим дизайн интерфейса в минимализм. Особенно доставляет новая темная тема😎
Если всё пойдет хорошо, то скоро потрогать SDUI можно будет и в обычной версии приложения😉
- - - -
#вкусвилл #мобильноеприложение #sdui #demo
🛫 Канал: Мыслью по древу
Разве что стилем. Постепенно переводим дизайн интерфейса в минимализм. Особенно доставляет новая темная тема
Если всё пойдет хорошо, то скоро потрогать SDUI можно будет и в обычной версии приложения
- - - -
#вкусвилл #мобильноеприложение #sdui #demo
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13
Кто такой дизайнер дизайн-систем?
Часто можно услышать, что эту роль выделяют отдельно от продуктовых дизайнеров, считают её особенной и даже называют таких их UX-архитекторами. Давайте разберёмся.
Что такое дизайн-система?
Чтобы ответить на этот вопрос, нужно понять, кто её пользователи. Это дизайнеры, разработчики, иногда другие участники процесса создания продукта. Дизайн-система помогает решить ряд проблем: ускоряет разработку, повышает согласованность и качество реализации дизайна, позволяет повторно использовать имеющиеся элементы. Список может быть длинным. Получается, есть клиент и его потребности. Значит, дизайн-система — это продукт.
Так что же, дизайнер, который работает над дизайн-системой — продуктовый дизайнер? Выходит, что да. Только он специализируется на довольно узкой и специфической области. Есть же сферы, например, финтех, ретейл, туризм и B2B, которые сильно отличаются друг от друга, вот дизайн-системы, на мой взгляд, это такая же ниша.
Откуда берутся дизайнеры ДС?
Это только мои наблюдения. Поскольку дизайнеры сами пользуются ДС, то в какой-то момент они начинают испытывать проблемы, которые она должна решать. Некоторых дизайнеров это мотивирует взять дело в свои руки, пойти к разработчикам, научиться их понимать, учитывать их потребности и постепенно предлагать решения. Со временем опыт будет накапливаться, и с ростом экспертизы некоторые дизайнеры начинают специализироваться на этой нише.
В общем, если подходить к дизайн-системе как к продукту, то будет проще выстроить работу и процессы, а также объяснить внутри компании, например руководителю, зачем она нужна.
- - - -
#дизайнсистемы #дизайн
🛫 Канал: Мыслью по древу
Часто можно услышать, что эту роль выделяют отдельно от продуктовых дизайнеров, считают её особенной и даже называют таких их UX-архитекторами. Давайте разберёмся.
Что такое дизайн-система?
Чтобы ответить на этот вопрос, нужно понять, кто её пользователи. Это дизайнеры, разработчики, иногда другие участники процесса создания продукта. Дизайн-система помогает решить ряд проблем: ускоряет разработку, повышает согласованность и качество реализации дизайна, позволяет повторно использовать имеющиеся элементы. Список может быть длинным. Получается, есть клиент и его потребности. Значит, дизайн-система — это продукт.
Так что же, дизайнер, который работает над дизайн-системой — продуктовый дизайнер? Выходит, что да. Только он специализируется на довольно узкой и специфической области. Есть же сферы, например, финтех, ретейл, туризм и B2B, которые сильно отличаются друг от друга, вот дизайн-системы, на мой взгляд, это такая же ниша.
Откуда берутся дизайнеры ДС?
Это только мои наблюдения. Поскольку дизайнеры сами пользуются ДС, то в какой-то момент они начинают испытывать проблемы, которые она должна решать. Некоторых дизайнеров это мотивирует взять дело в свои руки, пойти к разработчикам, научиться их понимать, учитывать их потребности и постепенно предлагать решения. Со временем опыт будет накапливаться, и с ростом экспертизы некоторые дизайнеры начинают специализироваться на этой нише.
В общем, если подходить к дизайн-системе как к продукту, то будет проще выстроить работу и процессы, а также объяснить внутри компании, например руководителю, зачем она нужна.
- - - -
#дизайнсистемы #дизайн
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8
Окна и всплывающие элементы
Этой задачей я занимался всю прошедшую неделю. Всё началось довольно просто: нужно было создать виджеты для вывода снекбаров, тостов и модальных окон для нашей SDUI платформы.
Однако кажущаяся простота оказалась иллюзией и довольно быстро покинула чат, а по мере изучения проблемы задача начала обрастать нюансами.
Сначала была идея создать универсальный компонент, который в зависимости от настроек мог бы работать как тост, снекбар или модальное окно. Кроме того, планировалось сделать единую очередь для их отображения, чтобы если на клиент одновременно поступят, скажем, 3 тоста, 2 снекбара и 5 модальных окон, они не появлялись все сразу, а показывались поочередно в порядке приоритета.
Но вскоре выяснилось, что тосты могут быть как продуктовыми, так и системными. Если с продуктовыми всё было более-менее понятно, то системные тосты включали различные ошибки и разрывы соединения. Возник вопрос: что делать, если в момент показа модального окна происходит разрыв соединения, и нужно отобразить тост? Закрывать модальное окно? Ставить тост в очередь? Я решил поспрашивать коллег и в комьюнити, но оказалось, что в основном все использовали нативные всплывающие окна платформ и подобными впопросами так глубоко не задавались. Ну что ж, пришлось разбираться самостоятельно.
В первую очередь я пересмотрел всю работу со слоями и разработал общую схему для платформы (рисунок 1). В основу легло распределение z-index из старого доброго Bootstrap. После переработки получилось следующее:
🔘 Content — на картинке не подписан, но это самый нижний слой, отвечающий за отображение основного содержимого на экране.
🔘 Dropdown — слой для контекстных меню. В мобильных приложениях это редкость, но на всякий случай пусть будет.
🔘 Sticky — слой для закреплённых элементов. Предполагается использовать его для футеров, хедеров и таб-бара.
🔘 Fixed — самый верхний слой до бэкдропа, на всякий случай.
🔘 Backdrop — затемнение, перекрывающее контент при появлении модального элемента.
🔘 Modal — основной слой для шторок и модальных окон.
🔘 Popover — слой для онбордингов, контекстных меню и других всплывающих элементов с высоким приоритетом. Также сюда предполагается отправлять системные тосты.
🔘 Tooltip — слой для всплывающих подсказок.
В итоге получились два отдельных виджета: Banner и Window. Первый отвечает за тосты и снекбары, второй — за модальные окна. Очередь для них стала раздельной. Системным тостам разрешено образовывать стек с продуктовыми, но не более двух баннеров на экране одновременно (рисунок 2). Теперь осталось провести тщательное тестирование и выявить все возможные "а что если" ситуации. Однако, кардинальных изменений системы, надеюсь, уже не будет🤞 .
P.S. Да, кто-то обязательно спросит: "А почему нельзя использовать нативные диалоги?"
Ответ прост: в них нельзя передавать свою верстку, то есть наши любимые врапперы. А нам очень важна управляемость контента.
- - - -
#дизайнсистемы #SDUI #дизайн #uxui
🛫 Канал: Мыслью по древу
Этой задачей я занимался всю прошедшую неделю. Всё началось довольно просто: нужно было создать виджеты для вывода снекбаров, тостов и модальных окон для нашей SDUI платформы.
Однако кажущаяся простота оказалась иллюзией и довольно быстро покинула чат, а по мере изучения проблемы задача начала обрастать нюансами.
Сначала была идея создать универсальный компонент, который в зависимости от настроек мог бы работать как тост, снекбар или модальное окно. Кроме того, планировалось сделать единую очередь для их отображения, чтобы если на клиент одновременно поступят, скажем, 3 тоста, 2 снекбара и 5 модальных окон, они не появлялись все сразу, а показывались поочередно в порядке приоритета.
Но вскоре выяснилось, что тосты могут быть как продуктовыми, так и системными. Если с продуктовыми всё было более-менее понятно, то системные тосты включали различные ошибки и разрывы соединения. Возник вопрос: что делать, если в момент показа модального окна происходит разрыв соединения, и нужно отобразить тост? Закрывать модальное окно? Ставить тост в очередь? Я решил поспрашивать коллег и в комьюнити, но оказалось, что в основном все использовали нативные всплывающие окна платформ и подобными впопросами так глубоко не задавались. Ну что ж, пришлось разбираться самостоятельно.
В первую очередь я пересмотрел всю работу со слоями и разработал общую схему для платформы (рисунок 1). В основу легло распределение z-index из старого доброго Bootstrap. После переработки получилось следующее:
В итоге получились два отдельных виджета: Banner и Window. Первый отвечает за тосты и снекбары, второй — за модальные окна. Очередь для них стала раздельной. Системным тостам разрешено образовывать стек с продуктовыми, но не более двух баннеров на экране одновременно (рисунок 2). Теперь осталось провести тщательное тестирование и выявить все возможные "а что если" ситуации. Однако, кардинальных изменений системы, надеюсь, уже не будет
P.S. Да, кто-то обязательно спросит: "А почему нельзя использовать нативные диалоги?"
Ответ прост: в них нельзя передавать свою верстку, то есть наши любимые врапперы. А нам очень важна управляемость контента.
- - - -
#дизайнсистемы #SDUI #дизайн #uxui
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
UX FLOW • Сергей Мухин
Окна и всплывающие элементы Этой задачей я занимался всю прошедшую неделю. Всё началось довольно просто: нужно было создать виджеты для вывода снекбаров, тостов и модальных окон для нашей SDUI платформы. Однако кажущаяся простота оказалась иллюзией и довольно…
Кстати, не знаю, что заставило меня сделать именно такую визуализацию слоев. Видимо, пробудился спящий внутренний графдиз, из глубин подсознания всплыли референсы с какой-нибудь презентации нового UI от Microsoft, дальше руки сами потянулись к Figma, я начал баловаться с изометрией и эффектами, и вот — меня уже было не остановить.
Да, картинка сделана полностью в Figma, дорабатывать например, в ФШ не стал, по этому местами она выглядит стрёмно 😁.
Но скучные гайды и документацию по дизайн-системе эта иллюстрация вполне себе оживила, да и ключевые смыслы визуализирует как надо.
Да, картинка сделана полностью в Figma, дорабатывать например, в ФШ не стал, по этому местами она выглядит стрёмно 😁.
Но скучные гайды и документацию по дизайн-системе эта иллюстрация вполне себе оживила, да и ключевые смыслы визуализирует как надо.
🔥8
Привет! Давно не было новостей, и одна из причин этого — масштабное изменение направления в нашей работе.
Сейчас в ВВ разрабатывается очень мощная фича, которая затронет как онлайн, так и офлайн части бизнеса, и фундаментально изменит многие механизмы доставки (но как именно, пока секрет😉).
Релиз запланирован на ноябрь, и чтобы всё прошло по плану, потребуются экстраординарные усилия, в том числе и от команды дизайнеров.
В частности, мы временно приостановим работу над SDUI и сосредоточимся на внедрении базовой дизайн-системы прямо сейчас, чтобы команда разработки смогла воспользоваться компонентным подходом в текущем приложении ВкусВилл.
Это очень интересный опыт, когда внедрение дизайн-системы становится частью крупной фичи. В текущем приложении пока есть только UI Kit для дизайнеров, который уже начали использовать разработчики. Нам предстоит провести тщательный аудит этого КИТа и переработать его в полноценную основу для дизайн-системы. А ещё созвоны... Очень много созвонов. Обязательно расскажу, как и куда это всё будет двигаться.
Как говорится, "Не переключайтесь!"
- - - -
#дизайнсистемы #вкусвилл #дизайн #uxui
🛫 Канал: Мыслью по древу
Сейчас в ВВ разрабатывается очень мощная фича, которая затронет как онлайн, так и офлайн части бизнеса, и фундаментально изменит многие механизмы доставки (но как именно, пока секрет😉).
Релиз запланирован на ноябрь, и чтобы всё прошло по плану, потребуются экстраординарные усилия, в том числе и от команды дизайнеров.
В частности, мы временно приостановим работу над SDUI и сосредоточимся на внедрении базовой дизайн-системы прямо сейчас, чтобы команда разработки смогла воспользоваться компонентным подходом в текущем приложении ВкусВилл.
Это очень интересный опыт, когда внедрение дизайн-системы становится частью крупной фичи. В текущем приложении пока есть только UI Kit для дизайнеров, который уже начали использовать разработчики. Нам предстоит провести тщательный аудит этого КИТа и переработать его в полноценную основу для дизайн-системы. А ещё созвоны... Очень много созвонов. Обязательно расскажу, как и куда это всё будет двигаться.
Как говорится, "Не переключайтесь!"
- - - -
#дизайнсистемы #вкусвилл #дизайн #uxui
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22🤯4
Всем привет. Скоро обязательно расскажу, куда я пропадал надолго. А пока тут вышла история моего карьерного пути на канале Собес.
📱 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
СОБЕС
Карьерный путь Art director во Вкусвилле
Опыт в дизайне
больше 15 лет
Откуда работаешь
Компания в Москве, работаю из Волгограда
Опиши свой путь в дизайне
Свою карьеру я начал в 2007 году в Волгограде, в рекламном агентстве, как веб-дизайнер. В то время…
Опыт в дизайне
больше 15 лет
Откуда работаешь
Компания в Москве, работаю из Волгограда
Опиши свой путь в дизайне
Свою карьеру я начал в 2007 году в Волгограде, в рекламном агентстве, как веб-дизайнер. В то время…
🔥16
Вот так заканчиваешь продуктивную пятницу, ложишься спать, а в 5 утра уже оказываешься в больничной палате, удивляясь, как это вообще произошло. Так я провел почти две недели в больнице, и здоровье напомнило, насколько мы все хрупки.
Но как же приятно вернуться к работе!
Я уже полностью восстановился и готов снова взяться за свои задачи. Более того, едва меня выписали, я сразу начал планировать участие в дизайн-выходных в Калининграде в октябре. Правда, летать мне пока нельзя, а добираться поездом оказалось сложнее, чем я думал — почти как за границу: нужен загранпаспорт и транзитная виза😬 . Ну, видимо, всему свое время.
Материал, который я готовил на Д-в, не пропадет. Обязательно в ближайшее время напишу из этого длиннопост или статью о мышлении при проектировании дизайн-систем.
Вот такие новости за последние недели. Очень хочется скорее вернуться к работе, но сначала нужно разобраться с тем, что произошло за время моего отсутствия. Кажется, я никогда не выпадал из рабочего процесса так надолго, даже в отпуске.
- - - -
🛫 Канал: Мыслью по древу
Но как же приятно вернуться к работе!
Я уже полностью восстановился и готов снова взяться за свои задачи. Более того, едва меня выписали, я сразу начал планировать участие в дизайн-выходных в Калининграде в октябре. Правда, летать мне пока нельзя, а добираться поездом оказалось сложнее, чем я думал — почти как за границу: нужен загранпаспорт и транзитная виза
Материал, который я готовил на Д-в, не пропадет. Обязательно в ближайшее время напишу из этого длиннопост или статью о мышлении при проектировании дизайн-систем.
Вот такие новости за последние недели. Очень хочется скорее вернуться к работе, но сначала нужно разобраться с тем, что произошло за время моего отсутствия. Кажется, я никогда не выпадал из рабочего процесса так надолго, даже в отпуске.
- - - -
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯17
Важнейший софт скил дизайнера
Часто встречаю обсуждения о том, какой навык, не связанный с визуальной частью дизайна, наиболее важен. Кто-то считает, что это умение самостоятельно проводить пользовательские исследования, кто-то говорит о базовых навыках программирования для лучшего понимания разработчиков. Другие выделяют создание персон и CJM. Этот список можно продолжать.
По иллюстрации, возможно, многие решили, что я буду говорить о навыке продаж. Но нет. На мой взгляд, важнейшим навыком, не только для дизайнеров, является мышление предпринимателя.
Например, в сообществе дизайнеров дизайн-систем часто звучит вопрос "Как убедить начальство в необходимости ДС?" Представьте, что ДС — это ваш продукт, а начальство (бизнес) — клиент. Сначала нужно найти его боли, а затем показать, как ваша система их решит. А также понимать, как она принесет ценность, сколько потребует ресурсов и какие специалисты нужны.
Предпринимательские навыки пригодятся в любой инициативе, выходящей за рамки "мне говорят, я делаю". Когда я вводил новые процессы в команде, моя задача была не просто навязать своё видение, а сделать работу удобнее для всех, чтобы изменения реально заработали.
Каждая попытка что-то изменить в компании похожа на запуск стартапа: нужно найти единомышленников, ресурсы, продать идею, затем измерить успешность и продумать масштабирование в случае успеха.
Эти мысли не покидают меня, пока я работаю над проектом SDUI. Моя работа — это не столько дизайн, сколько общение с людьми, подготовка документов, метрик и экономики проекта — основа любого успешного продукта.
- - - -
#дизайн #карьера #софтскилы
🛫 Канал: Мыслью по древу
Часто встречаю обсуждения о том, какой навык, не связанный с визуальной частью дизайна, наиболее важен. Кто-то считает, что это умение самостоятельно проводить пользовательские исследования, кто-то говорит о базовых навыках программирования для лучшего понимания разработчиков. Другие выделяют создание персон и CJM. Этот список можно продолжать.
По иллюстрации, возможно, многие решили, что я буду говорить о навыке продаж. Но нет. На мой взгляд, важнейшим навыком, не только для дизайнеров, является
Например, в сообществе дизайнеров дизайн-систем часто звучит вопрос "Как убедить начальство в необходимости ДС?" Представьте, что ДС — это ваш продукт, а начальство (бизнес) — клиент. Сначала нужно найти его боли, а затем показать, как ваша система их решит. А также понимать, как она принесет ценность, сколько потребует ресурсов и какие специалисты нужны.
Предпринимательские навыки пригодятся в любой инициативе, выходящей за рамки "мне говорят, я делаю". Когда я вводил новые процессы в команде, моя задача была не просто навязать своё видение, а сделать работу удобнее для всех, чтобы изменения реально заработали.
Каждая попытка что-то изменить в компании похожа на запуск стартапа: нужно найти единомышленников, ресурсы, продать идею, затем измерить успешность и продумать масштабирование в случае успеха.
Эти мысли не покидают меня, пока я работаю над проектом SDUI. Моя работа — это не столько дизайн, сколько общение с людьми, подготовка документов, метрик и экономики проекта — основа любого успешного продукта.
- - - -
#дизайн #карьера #софтскилы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25
Ищем дизайнера продукта на сайт в команду Обед.ру (проект ВкусВилл)
Что важно:
— От 3-х лет релевантного опыта (в FoodTech, RetailTech или EdTech)
— Опыт работы с дизайн-системами
— Уметь строить дизайн на основе данных (аналитика, исследования)
— Уметь решать задачи (а не просто двигать пиксели
— Классное портфолио
- - - -
#дизайн #вакансия #вкусвилл #обедру
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6