В закромах не нашел нормально работающего примера в Figma из прошлых проектов, так как всё очень стремительно устаревает. А сайт ВкусВилл ещё только должен пройти путь модернизации дизайн-системы и работы с адаптивной вёрсткой.

Поэтому специально для канала я подготовил небольшой пример в Figma на абстрактном контенте, чтобы показать, как это может работать.

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

📱 Смотреть пример в Figma

Можно скопировать себе и изучить, как там всё работает.

- - - -
#дизайн #uxui #дизайнсистемы #адаптив #вебдизайн #figma #variables #переменные

🛫Канал: Мыслью по древу

Нравится выполнять тестовые? Мне тоже нет. А уж какие бывают "креативные" задания.

Как вы поняли, я считаю, что тестовые совершенно не работают.

И вот почему:

1️⃣ Отказы
Если тестовое является обязательным этапом отбора, работодатель может потерять потенциально подходящих кандидатов, которые не готовы тратить время на задание. Например, когда я последний раз менял место работы, за неделю у меня накопилось 12 тестовых заданий, и все они были обязательными для перехода на следующий этап. Кстати, ни одно из них я так и не выполнил. То есть эти компании "потеряли" меня как кандидата.

2️⃣Жульничество
Вы не видите сам процесс выполнения задания соискателем. А это открывает простор для разного рода махинаций. Я даже встречал наставников и менторов, специализирующихся на выполнении тестовых заданий вместе или вместо своих подопечных.

Особенно тупо тестовое работает на первом касания, когда задание дают сразу после отклика.

Будучи нанимающим директором, я уже давно отказался от тестовых заданий при поиске дизайнеров грейда мидл и выше. Если есть сомнения в навыках кандидата, я практикую так называемое техническое интервью. На нём мы моделируем более-менее реальную ситуацию, когда дизайнер, арт-директор и продакт накидывают идеи и концепты по проблемной фиче прямо во время звонка. Задачи тоже берём реальные: с болями пользователей, их потребностями, гипотезами, данными аналитики и исследований, реальными макетами прода. Интервьюер играет роли арт-директора и продакта, презентуя задачу, освещая проблемы, отвечая на вопросы и направляя соискателя.

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

Однако, тестовые задания всё же могут быть эффективными при сверхбольшом потоке кандидатов, например, на вакансии джунов и стажёров. Но такие задания необходимо составлять таким образом, чтобы они оценивали не абстрактный «уровень», а конкретные базовые навыки: умение обращаться с типографикой, обрабатывать графический контент, владение композицией и вёрсткой и т. д. Просто сверстать лендинг, во-первых, слишком объёмно для начинающего, во-вторых, мало о чём может сказать нанимателю, кроме того, что соискатель очень хочет работать в этой компании.

- - - -
#дизайн #карьера #найм

🛫Канал: Мыслью по древу

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


- - - -
#дизайн #карьера #найм #тестовоезадание

🛫Канал: Мыслью по древу

А ещё в макетах была отсылка.

- - - -

🛫Канал: Мыслью по древу

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

📱 Смотреть в Figma

- - - -
#дизайн #карьера #найм #вкусвилл

🛫Канал: Мыслью по древу

Недавно тестировали интересный концепт для дизайна системы на нашей SDUI платформе в Figma. Идея заключается в том, чтобы собрать на переменных второго уровня (component) такие вариативные элементы, как ячейки, разичные сложные панели и т.п., чтобы избежать создания сложных структур из вложенных компонентов с множеством вариантов. При этом сам компонент можно (и нужно) детачить, сохраняя «рецепт» ячейки и управляя им через коллекцию переменных. Эту сущность мы так и назвали — «рецепты».

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

- - - -
#дизайн #uxui #дизайнсистемы #variables #figma #переменные

🛫Канал: Мыслью по древу

Вот так это работает в фигме на примере рецепта ячейки и как из него сделать тизер продукта.


- - - -
#дизайн #uxui #дизайнсистемы #variables #figma #переменные

🛫Канал: Мыслью по древу

Кстати, ложка дегтя во всей этой концепции, это забагованные в хлам переменные фигмы. Вот такой необъяснимый полтергейст, например, происходит со свойствами, привязанными к булевой переменной, при оборачивании в компонент. Из мастера работает, из инстанса не работает... 😵

- - - -
#variables #figma #переменные #баги

🛫Канал: Мыслью по древу

Или как вам такое?)
Иконка скидывается на дефолтную при детаче... 😱
А всё из-за того, что одно из свойств привязано к булевой переменной. И это почему-то скидывает оверрайды.

- - - -
#variables #figma #переменные #баги

🛫Канал: Мыслью по древу

Про доступность интерфейсов

Ещё её называют инклюзивностью. В общем, насколько легко или возможно использовать интерфейс с теми или иными физическими ограничениями.

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

Отдельно стоит упомянуть функционал для незрячих. Как правило, он связан с работой с экранным диктором — программой, которая озвучивает элементы интерфейса и происходящее на экране. Про то, как незрячие пользуются телефоном, было в своё время на YouTube отличное видео от Вилсакома.

Ну а эта история — про моё столкновение с доступностью во «ВкусВилл».

***

В компании есть обычай отправлять всех новых лидеров на обучение Beyond Taylor (система менеджмента, или даже философия работы в ВВ). Обучение представляет собой проект, который студенты проводят через все этапы подготовки, как стартап. Исследование рынка, проверка потребностей, болей клиента, построение гипотез и их проверка. И в конце получается готовый к переходу на этап MVP продукт.

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

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

Это перевернуло мой мир и в целом стало удивительным открытием для команды 😬

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

А вы работаете с доступностью ваших проектов?

- - - -
#вкусвилл #доступность #инклюзивность #доступныйдизайн #a11y #accessibility

🛫Канал: Мыслью по древу

Кто такой веб-дизайнер?

Недавно попросили сделать ревью программы одного курса в качестве эксперта. Его специализация называлась «Веб-дизайн». И меня это немного смутило. Дело в том, что когда только появился цифровой дизайн, веб-дизайнерами называли всех, кто создаёт что-то в интернете. Причём изначально в эту работу входил и код. То есть веб-дизайнер делал сайты "под ключ". Затем, при разделении ролей, этим словом стали называть дизайнера, который делает макет сайта и передаёт его верстальщику.

Но сейчас понятия настолько усложнились, что даже «верстальщик» уже никто не говорит, теперь они фронтендеры. Про дизайнеров всё чаще говорят UX/UI-дизайнер или дизайнер продукта.

Но тем не менее понятие «веб-дизайнер» ещё не вымерло полностью, и несмотря на то, что многие, судя по моим опросам, понимают под этим «мастера по лендосам», в отрасли единства нет. Встречал вакансии, где в требованиях был описан почти чистый UX/UI, в смысле проектирование веб-сервисов и т. д.

Так какой вывод? А вывод, что в отрасли наплодили такое количество пересекающихся понятий, что чёрт ногу сломит. Вот и чего должен уметь этот веб-дизайнер, сиди теперь думай.

- - - -
#брюзжание #вебдизайн

🛫Канал: Мыслью по древу

Дайджест канала за январь-июль 2024

Каналу скоро пол года. Было много интересных постов, и мне вдруг подумалось сделать небольшую подборку постов по группам тем. Чтобы точно не пропустить самое интересное😉.


▶️ КАРЬЕРА

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

Мой не оптимальный старт — как я начинал свою карьеру дизайнера.

Что такое релевантный опыт — почему не весь ваш опыт учитывается при найме.

База по собеседованиям — основные ошибки и советы по прохождению собеседований.


▶️ ДИЗАЙН-СИСТЕМЫ

Референсная палитра — отдельная группа токенов цвета с перечислением всех уникальных оттенков.

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

Семантическая палитра — слой токенов цвета с семантической привязкой.

Сем. палитра во ВкусВилл — пример семантической палитры текущего мобильного приложения ВВ.

Бывают ли неатомарные ДС — рассуждения на тему "Is atomic design dead"

Атомарность в нашей ДС — почему дизайн-система и платформа у нас это разное, и как выстроена атомарность на уровне ДС.

Что такое SDUI — Краткое описание понятия.

Дизайн-токены — что это, и зачем.

Рецепты компонентов — техника описания основных характеристик групп компонентов.



▶️ БРЮЗЖАНИЕ

Про менторство — моё отношение к этому и почему я не занимаюсь менторством.

Операторы figma — о чрезмерном фокусе дизайнеров на инструменте.

Для кого старается продуктовый дизайнер — цель работы дизайнера, и что такое эффективность дизайна.

Про тестовые задания — почему они не работают.

О красоте — как объяснить красоту, и можно ли её измерить.

О доступности интерфейса — мой опыт исследования доступности во ВкусВилл.

Кто такой веб-дизайнер — о пересекающихся понятиях в индустрии



▶️ ДИЗАЙН-ТОНКОСТИ

Оптическая компенсация — как с ней работать в интерфейсе

Почему UI иконка – это не картинка — о важности единства стиля иконок в интерфейсе и шрифта.

Про Touch target — как работать с облатсью нажтия в компонентах.

Почему модульные сетки устарели — моё виденье развития и актуальности использования модульных сеток в дизайне интерфейсов.
И пример адаптива на переменных в фигме.


▶️ СТАТЬИ И ВЫСТУПЛЕНИЯ

Описания работы механики наследуемых свойств в нашей SDUI платформе.
Часть 1 и Часть 2

Типографика во ВкусВилл — как я организовал работу с текстом в нашей диаайн-платформе.

Запись выступления на Дизайн-выходных — тема "Как сделать дизайнера разработчиком, не заставляя писать код".

Ответы на вопросы зрителей — видео ответов на вопросы из зала после выступления на Д-в.

- - - -
#дизайн #вебдизайн #uxui #дизайнсистемы #вкусвилл

🛫Канал: Мыслью по древу

CJM и портрет пользователя — работа дизайнера?

Часто в портфолио и тестовых заданиях я вижу, что дизайнеры строят CJM и формируют портреты аудитории. Всегда возникает большой вопрос о происхождении этих данных, и почему-то кажется, что они взяты с потолка. Но даже если дизайнер сам провёл исследование, нашёл респондентов и опросил их, насколько это релевантно для роли продуктового дизайнера в целом?

Я в дизайне уже без малого 17 лет, и именно как дизайнер я ни разу не создавал CJM или портреты пользователей (похожая ситуация и у других опытных дизайнеров, которых я спрашивал). Чаще я сталкивался с этим в роли менеджера, а работающие примеры таких артефактов, как правило, являются плодом труда целой команды и мало похожи на те слайды, которые дизайнеры показывают в презентациях своих кейсов.

Например, в превью к этому посту — скриншот CJM только части мобильного приложения ВкусВилла (корзина, чек-аут и оплата), а полную карту собирает целая команда, которая так и называется — «команда CJM». То же самое и с портретами аудитории. И, как видно из объёма работы, ни одному дизайнеру такое не вытянуть в одиночку, и не добиться нужной актуальности и глубины.

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

Но на курсах из раза в раз дизайнеров учат делать не свою работу, а затем требуют этого в тестовых заданиях. Дизайнеры выдумывают неработающие артефакты для кейсов и ставят себе в портфолио. Возникает вопрос: зачем?🤔


- - - -
#дизайн #CJM #вкусвилл

🛫Канал: Мыслью по древу

⛔️ВАКАНСИЯ В АРХИВЕ


Ищем дизайнера продукта в мобильное приложение 🥑.

Что важно:
— От 2-х лет релевантного опыта
— Опыт работы с дизайн-системами
— Уметь строить дизайн на основе данных (аналитика, исследования)
— Уметь решать задачи (а не просто двигать пиксели😉)
— Портфолио, которое понравится нашему эйчару 😁


- - - -
#дизайн #вакансия #вкусвилл

🛫Канал: Мыслью по древу

Про джунов

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

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

Эти принципы важны для команд, которые хотят быть эффективными и дорожат своей репутацией. Конечно, можно нанять много джунов, завалить их рутинной работой «подай-принеси» и увольнять, когда надоест. Но это негативно скажется и на имидже команды, и на атмосфере внутри неё.

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

Найм джунов — это хорошая инвестиция, которая помогает выращивать мидлов, уже погруженных в культуру и процессы команды. Это здорово, если в ближайшее время мы сможем реализовать такой подход. Но делать это нужно вдумчиво, а команда должна быть к этому готова.

- - - -
#дизайн #карьера #вкусвилл

🛫Канал: Мыслью по древу