/designer
14.8K subscribers
419 photos
27 videos
24 files
461 links
Канал про продуктовый дизайн, инструменты и практику. Рекламы нет.

Сайт: slashdesigner.ru

Рубрики: #первые_шаги #для_профи #Figma #майндсет #задача #UI_ревью #дизайн_системы

Форматы: #снек #статья #видео #анонс #подкаст

Автор: @okunev
Download Telegram
10 минут до начала стрима.
Спасибо всем, кто пришёл послушать стрим и задал классные вопросы! Я постараюсь ответить на все сообщения, которые вы насыпали в личку. Получил огромную радость от возможности поделиться этим докладом, поскольку тема дизайн-систематизации очень волнует.

На пике у нас было более 500 слушателей со всего мира, вы крутые!

Ждём подрезанную запись от Фигмы и скоро выложим слайды.

Напомню, что дизайн-команда Ozon продолжает расти и нанимать классных ребят. Если ты уверен в своих силах и тебе понравилось, что ты услышал/увидел, приходи к нам и примени нашу новую дизайн-систему в бою! Также у нас открылась вакансия дизайн-лида в Москве.

Направляй своё портфолио HR Алёне Фарбанец: @farbai или мне: @okunev.

Фото: Андрей Носачёв

#стрим #дизайн_системы #Figma #Ozon
Презентация со стрима про дизайн-системы выложена на Figma Community

Дублировать к себе →

В файле можно посмотреть, какие сетки и лайфхаки я использую в дизайне своих презентаций. Также можно посмотреть анимации в режиме прототипа.

Приносим свои извинения за задержку с видео, ждали согласования американского офиса.

@slashdesigner #для_профи #дизайн_системы #презентации #Figma #Ozon
1
Видео со стрима «Слияние дизайн-систем: опыт Ozon»

17
ноября 2021 года состоялся первый русскоязычный стрим Figma, на котором я был гостем. В течение часа я делился нашим опытом дизайн-систем в Ozon. Выкладываю видео:

youtu.be/SunT0K5ULH4

В видео рассказал:

1. О трёх элементах, из которых состоит любая прочная дизайн-система: UI-кит, фронт-либа и документация. Что будет, если один из них убрать?

2. Над какими проектами работают дизайнеры в Ozon, а также какие у них потребности к дизайн-системам. Всего у нас более 80 продуктовых дизайнеров и около 15 команд.

3. Как выглядит типичный пайплайн работы дизайнеров и фронтов на небольшом проекте и почему в крупных компаниях он становится неэффективным.

4. О двух возможных стратегиях слияния: поглощении и создании новой дизайн-системы, плюсы и минусы обоих стратегий. Примеры слияния, которое я проводил с иконками Ozon, а также первая попытка внедрить единую дизайн-систему веб-проектов.

5. Сложности слияния на равных и переговоры, а также о приходе руководителя всего продуктового дизайна Ozon. О важности лидера дизайна.

6. Ценности нашей новой дизайн-системы для веб-проектов: источник правды в коде, токенизация, витрина компонентов.

7. Команда дизайн-системы. Какой был процесс создания. Итоги полугода работы сборной команды дизайн-системы из 8 человек.

8. Немного цифр: на выходе 40 готовых компонентов, кит весом в 700 мб, 400 тысяч слоёв и первый боевой проект, который использует новую систему. О наших планах переезда всех внутренних фронтовых систем.

Не пропусти презентацию с этого выступления, она выложена в Figma Community.

Это уникальный полезнейший контент. Я очень рад, что Ozon настолько открытая компания, что я смог поделиться нашими подходами в мельчайших деталях и рассказать об ошибках. Обычно такое закрывают под NDA, не разбираясь, потому что «как бы чего не вышло».

#для_профи #дизайн_системы #Figma #Ozon
1
#ui_review
1. Разбор лендинга про игровой сервер

Попробую быстрый формат дизайн-ревью.

В @designchat2 пришёл молодой парень, который попросил оценить его дизайн лендинга в Фигме. Я и другие участники чата оставили ему полезных комментов.

Дизайн в Фигме с комментами →

Смотреть лучше с десктопа. Чтобы сделать комменты видимыми, нажми C. Работа вполне показательная и ошибки типичные, видел их сотни раз в портфолио других. Если занимаешься лендингами, заходи почитать фидбэк, пока его не свернули. И да, лендинги продуктовым дизайнерам делать уныло, но почему бы не размяться.

@slashdesigner #первые_шаги #лендинги
Проект #UI_ревью: разбор твоего дизайна интерфейсов

Я хочу создать сообщество, похожее по духу на @figmachat, где люди помогают друг другу в рамках заданной концепции.

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

Все ценные комментарии из этого файла были причёсаны и перенесены в финальный файл разбора, который я выложил в Figma Community. Вот что получилось:

UI Review #1. Утянуть разбор к себе

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

UI Review специализируется на продуктовом дизайне и проектировании для экранов. Желательно присылать работы, которые требуют нашей экспертизы именно в этих темах, а не только нуждаются в оценке визуального дизайна. Мы не про маркетинговый дизайн: лендинги, брендинг, баннеры и полиграфию, а про продуктовый и интерфейсный: дашборды, B2B, виджеты, приложения, сложные интерфейсные механики и флоу.

Выбранный мной формат ревью предполагает техническую работу по сохранению комментариев, которую будет делать мой помощник. Она требует оплаты, поэтому, получить разбор можно будет за скромные 500 ₽ (чуть больше 6$). Мы вышлем инструкцию для оплаты, когда подтвердим, что работа попадёт на разбор. Сами комментарии в разборах мы оставляем бесплатно.

После ревью подавший работу может прислать исправленную версию и она будет добавлена в уже опубликованный выпуск ревью в Figma Community. Вот это будет вообще мечта.

Чтобы принять участие в UI Review, оставляй заявку в группе @uireview.

Чтобы получать уведомления о новых разборах и комментировать работы, вступай в канал @uireviewers.

Чтобы читать ревью других, оставайся на @slashdesigner, все ревью будут выкладываться в рубрике #ui_review.

Ссылки по теме:
Правила попадания на ревью и процесс
Требования к работам
Какие выгоды получают авторы?
Правила ревью для авторов

#первые_шаги
Правило семи

У любого человека есть ограничение кратковременной памяти, которое было описано учёным Джорджем Миллером в 1956 году. Этот эффект называют «кошельком Миллера» и о нём есть статья в Википедии: Магическое число семь плюс-минус два.

Эффект заключается в том, что мы можем какое-то время держать в голове около 7 объектов. Кто-то на пару больше, кто-то меньше. Если мы видим список из 7 пунктов, велики шансы, что мы сможем воспроизвести его, ничего не забыв.

Его следует учитывать в проектировании интерфейсов. Всё, чего больше 9, будет восприниматься нами как «много». Часть сущностей будет оставаться за пределами восприятия.

В интерфейсе часто возникает потребность найти что-то в длинном списке. Если пунктов много и они следуют хаотично, доступ к нужному из них затрудняется. Возникает потребность применять к ним UX-паттерны: сортировать, фильтровать, группировать или даже внедрять поиск. Мы делаем это для того, чтобы уменьшить время, которое необходимо на идентификацию нужного.

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

Я вдохновился на этот пост, когда наткнулся на длинный список, в котором можно настроить 152 типа уведомлений от LinkedIn.

Настройка уведомлений глобально должна отвечать на один вопрос: «хочу ли я или не хочу получать ваши письма». Этот пример показывает, как продукт по полной программе прогнулся под маркетинг, заставляя пользователя 152 раза выключить свитч для отключения уведомлений.

Продукт трепыхается и пытается решить непосильную задачу: сделать один свитч на всё не разрешают, группировка уже не спасает, вёрстка получается невыразительной и раздутой. Но комичным этот макет делает именно визуальное пренебрежение правилом семи. Когда мы взаимодействуем с интерфейсом, мы взвешиваем, нужно ли инвестировать в него время и какую пользу это принесёт в итоге. Есть предел, после которого мы отказываемся от идеи пройти интерфейс до конца и находим себе более полезное занятие, чем анализ каждой из этих настроек. Тогда мы просто настраиваем фильтр, который с порога автоматически удаляет любые письма от LinkedIn и блокируем уведомления на уровне ОС.

@slashdesigner #первые_шаги #UX
2
Какой редактор ты предпочитаешь для 3D?
Anonymous Poll
28%
Blender
15%
Cinema 4D
5%
Другое
42%
Не умею в 3D
10%
Результаты
#ui_ревью
2. Разбор лендинга для финсервиса Monetha

В этом выпуске разберём ещё один лендинг. Основная его проблема — расплывчатые формулировки и отсутствие осязаемой выгоды.

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

Внутри:
- На что менять немодных флэт-людей
- Какой ширины должна быть полоса набора
- Как навести порядок в слоях

Файл в Figma Community →
Его можно скопировать себе в Drafts, все комментарии на странице «Ревью»

Больше не принимаю лендинги. Хочется поразбирать что-то более сложное: интерфейсы, сервисы и приложения.

Заявки на разборы принимаю в группе @uireview. О формате рубрики

@slashdesigner #первые_шаги
Метрики для дизайнера

С наступившим! Плавно выходим из новогодней спячки и возвращаемся к дизайну.

Моя коллега Саша Савельева — очень крутой продуктовый дизайнер из Ozon. Она одна из немногих знакомых мне спецов, кто применяет на практике метрики и делится своими знаниями.

Эта тема недостаточно освещена в русскоязычном комьюнити, поэтому Саша написала статью для /designer:

slashdesigner.ru/ux/retention

Тезисы из статьи:

1. Метрики — хороший аргумент в спорах, поскольку основаны на фактах.

2. Метрики дают проверить эффективность дизайн-решений.

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

4. Ключевые показатели для продуктового дизайнера — конверсия и retention (возвращаемость).

5. Лучше иметь 10 пользователей, которые возвращаются в продукт через какое-то время, чем 100, которые не возвращающихся.

6. Метрики продукта не должны измеряться в абсолютных числах (количество пользователей, кликов и тд). Грамотнее смотреть на относительные, в процентах. Причина в том, что абсолютные значения могут быть зависимы от внешних источников трафика и не позволяют оценить эффективность нашего продукта.

7. Убедить команду, что работа с цифрами важна, очень сложно, но необходимо.

8. Надо подключить систему аналитики и ввести замеры в еженедельную рутину.

Кстати, Саша завела канал @delo_v_designe. Подписывайся, если интересуешься темой количественной аналитики.

#для_профи #метрики
47
Бэкапимся

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

Файлы FigJam сохраняются через меню File внутри Фигмы.

Figma может в любой момент закрыть корпоративные аккаунты на базе доменов в зоне RU, чтобы не нарушать требования о санкциях. Тогда продолжать работать над макетами получится только с личных акков через VPN. Добро пожаловать в дивный новый мир, где Россия — страна-изгой. Не закрывайте глаза на происходящее и читайте новости!

#для_профи
164👎25🎉5
Forwarded from Фигма-чат
Мы прекращаем работу на неопределённый срок

Сложившаяся ситуация — глобальная катастрофа, которая разрушает всё на своём пути. Многим сейчас стало не до дизайна. Когда страдают люди, мы не можем поддерживать мирное обсуждение дизайна в Фигме. Наша задача в том, чтобы держать чат в порядке, однако в последние дни резко увеличилось количество негатива. Происходящее разрушает наш проект и его изначальную концепцию «только про Фигму».

Нет никаких эмоциональных сил отвечать на вопросы по Фигме и параллельно убирать сообщения с агитацией и негативом.

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

Мы создавали чаты по дизайну, чтобы бескорыстно помогать людям и приносить пользу. Мы выросли до 10 000 участников, которые за время существования чата говорили «спасибо» друг другу больше 10 000 раз. Мы благодарим всех, кто отвечал на вопросы и задавал их. Благодаря вам мы сами многое узнали о любимом инструменте. Мы сделали крутейшее сообщество и перезнакомили множество интересных людей.

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

Мы желаем всем добра и скорейшего решения конфликта. Разморозим чат, как только ситуация восстановится, но сейчас нужно поставить паузу.
433👎14
Я уехал из России и перезапускаю канал

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

Новый железный занавес падает стремительно. Количество стран, с которыми у России открытое воздушное пространство, всё меньше. Лизинговые самолёты не выпускают из страны, международные рейсы отменяются десятками. Те, кто может, уезжают, используя любую возможность. Я видел очереди из людей с домашними животными и кучей чемоданов. Уехать — привилегия, и я благодарен случаю за то, что сейчас моя семья в безопасности.

Оцепенение и ужас первых недель спали, и я понял, что снова могу думать, действовать, делать что-то продуктивное, а не просто молчать. В этой ситуации я хочу перезапустить канал, продолжать писать и поддерживать свою аудиторию как могу.

Мне написала девочка из Одессы, которой недавно пришлось оставить свой дом. Поблагодарила за канал и за то, что она выучила Фигму и нашла работу после декрета. Закрытие канала и Фигма-чата её очень расстроило. Такой фидбэк очень важен. Пожалуй, это то, ради чего я создал канал.

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

IT-индустрия по западному образцу предполагает использование глобальных инструментов вроде сервисов Гугла, Амазона, Майкрософта, Фигмы, Миро и Ноушна, а также десятков других продуктов с офисами в США и Европе. По моему мнению, в России сама отрасль такого IT плавно заканчивается. Теперь любая западная компания, которая остаётся на российском рынке, сталкивается с репутационными рисками. По этой причине старая инфраструктура будет и дальше разваливаться, поскольку всё больше компаний будут уходить.

У дизайнеров в России есть два пути: уезжать из страны или остаться. Во втором варианте участвовать в постепенном выстраивании всей локальной отечественной IT-инфраструктуры с нуля. Это титаническая работа, которая может занять годы.

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

Также я открываю комментарии канала. Они всегда помогали раскрыть посты лучше, делиться опытом по дизайну. Пожалуйста, продолжай писать ценные комментарии и помогать тем, у кого есть вопросы.
451👎51🎉20
#стать_лидом №7. Стратегии взаимодействия

Когда-то читал книгу «В команде с врагом». В ней нашёл ценную классификацию из четырёх возможных стратегий в ситуации двустороннего конфликта.

Мне они помогают понять, что я должен делать сейчас, и какую стратегию я осознанно выбираю. Это много раз помогало мне как дизайн-менеджеру в разных ситуациях.

Бороться — использовать силовой путь решения, когда перевес на нашей стороне.

Избегать — бежать в безопасное место, где другая сторона не может оказать на нас влияние.

Торговаться — отстаивать свои интересы путём переговоров, идти на компромиссы там, где можем.

Принять — полностью согласиться с противником или даже перейти на его сторону, играть по его правилам.

Читать:
slashdesigner.ru/lead/strategies

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

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

#для_профи
49👎3
Санкции: как дизайнеры в России могут решить проблемы с инструментами

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

Читать:
slashdesigner.ru/emigrate/sanctions

Проблема глубже, и это касается не только Adobe, но и любого сервиса с западными корнями. Как способны ударить санкции? В чём логика тех, кто блокирует нас? Исходя из жёсткости санкций, мы можем рассматривать разные стратегии выживания:

1. Заменить платёжную систему на Union Pay
2. Сделать карту в иностранном банке
3. Можно совершить платёж с иностранной карты
4. Переходить на ещё не заблокированные аналоги
5. Пиратить софт, если он работает локально
6. Дождаться, пока появится российский аналог нужного продукта, поучаствовать в его создании
7. Если ничего не подошло, эмигрировать

Знаешь другие варианты? Давай обсудим в комментариях.

#санкции
18👎12
1. Relocate Info: вакансии, полезные контакты

Хочу порекомендовать канал @relocate_info. Не знаком с авторами и это не реклама, но вижу в нём много ценной информации, связанной с переездом и поиском работы в IT. Вот, например, подборка ссылок про работу на Кипре. А вот запись стрима про визу O1, на которую в США нет квот.

Также в канале можно найти прямые контакты тех, кто размещает международные вакансии из крупных компаний, что супер-ценно.


2. youtube.com/c/NewHR: регулярные трансляции с разборами резюме от кадрового агентства NewHR

5 апреля будет стрим c Анной Наумовой, PM из Apple. В прямом эфире она будет разбирать резюме продакт менеджеров. Держим в голове, что хороший продуктовый дизайнер — без пяти минут PM.

Вот запись предыдущего стрима на аналогичную тему.


3. glassdoor.com
Флагманский сервис для поиска IT-работы в разных странах. Как Хедхантер, только глобальный. Можно узнать уровень зарплат в разных городах, а также рейтинг компаний и отзывы сотрудников.

#для_профи #эмиграция
52👎8