/designer

Основа архитектуры в доках: навигационные страницы и страницы для контента Продолжаем тему про системную аналитику для дизайнеров и про то, как строится архитектура удобной документации. Расскажу про простейшее правило, которое резко повысит шансы твоих читателей найти нужное в доке. Навигационные страницы задают вопрос: «чего ты хочешь найти?» и стремятся предоставить максимум вариантов. Они берут на себя функцию оглавления в книге. Точка входа в доку — всегда список. Примеры: «список книг про дизайн» или главная slashdesigner.ru. В них не может быть много сплошного текста, поскольку он их раздует и тем самым затруднит поиск нужной страницы. Такая страница стремится вытаскивать полезные ссылки ближе к точке входа, сохраняя плоскую структуру. Страница в режиме базы данных — тоже навигационная. Страницы контента стремятся ответить на заданный ранее вопрос: «делай раз, делай два, делай три, профит». В них содержится линейный нарратив по определённой узкой теме: «описание сценария покупки», «как варить борщ» или как сделать анимацию на Smart Animate. Он строится от общего к частному и стремится быть инструкцией в виде нумерованного списка. Посреди текста не может быть объявлено вложенных ноушн-страниц, содержащих ключевую информацию, поскольку их будет крайне затруднительно найти из точки входа, потому что придётся вчитываться в текст. Ссылкой можно дать читателю полезный выбор или дополнительный пример, который актуален в контексте чтения. Если в тексте много ссылок, это делает его шумным и усложняет восприятие. Кроме того, на них могут отвлекаться и не дочитывать статьи. Каждая ссылка — микро-решение: нужно ли мне её нажимать, или стоит продолжить чтение? Это повышает когнитивную нагрузку. Если не придерживаться этого деления и смешивать вложенные страницы с текстом, читатель неминуемо запутается в структуре и получит плохой пользовательский опыт. Ноушн, конечно, умеет конвертировать блоки в новые страницы посреди текста любой длины, но это не лучшее архитектурное решение в организации доки. Страницы контента имеют ограничения по своей длине, после которой текст в таком объёме невозможно усвоить, и тогда его нужно декомпозировать более мелко, превращая их в навигационные. То, что было обзорной статьёй, может стать навигацией целого учебника. #первые_шаги #доки #Notion

Лекция Школы дизайна Яндекса о дизайн-системах youtu.be/4hKxbvse1_Y В процессе подготовки к стриму наткнулся на свежую лекцию дизайнера Александра Дьякова, в которой он рассуждает о том, что такое дизайн-система, какие у неё задачи, из чего она состоит и как выглядит. Также он приводит примеры того, как дизайн-система работает в Яндекс Картах. Эта небольшая лекция всего за 20 минут хорошо раскрывает основы темы. Она поможет лучше воспринимать то, что я буду рассказывать в среду, позволит мне минимизировать повторения и сфокусироваться больше на своей теме. Задачи дизайн-системы - Позволяет дизайнерам и разрабам говорить на одном языке - Делает продукт консистентным и целостным - Упрощает и ускоряет работу, минимизирует ошибки Тезисы 1. Дизайн-систему делают таковой те правила и логика, которые реализованы в коде. Это отличает её от UI-кита. 2. Дизайн-система — это всегда конструктор. Примеры: лего и писменность. 3. Палитра в ДС Карт семантическая и делится на 4 группы: текст, фон, кнопки и иконки. Это позволяет избежать ошибок и не тратить время на ручное перекрашивание элементов. 4. Написали плагин Appearance, который позволяет менять макету тему в пару кликов, если стили заранее правильно названы. 5. Компонентами должны быть самые часто используемые сущности, которые стоит обезличивать. Это даёт вариативность и упрощает поддержку системы. 6. Яндекс Карты используют единый дизайн для обоих платформ (от себя добавлю, что Ozon тоже так делает). 7. Figma API позволяет автоматизировать обновление компонентов из Фигмы в код, когда это будет нужно разработчику, и это уже реализовано в системе Яндекса. Однако, такой подход делает систему хрупкой и поэтому написали бота для Слака, который палит ошибки и упоминает накосячивших. #для_профи #дизайн_системы #Яндекс

Что должен показывать в своём портфолио продуктовый дизайнер Этот вопрос спросили в комментариях к одному из предыдущих постов, я решил вытащить ответ в канал и дописать его, поскольку он имеет какой-то аномально высокий отклик. «Будет ли полезен твой курс про портфолио тем, кто может показать эффективность своих дизайн-решений? А то помню эти смешные советы по портфолио, что каждый кейс должен быть сдобрен инфой о том как ты улучшил жизнь ЦА, бизнеса, своей команды и всей планеты. Но реалии ведь совсем другие, не на каждом продукте даже настроены метрики, сформирована юнит экономика, проводятся а/б-тесты и пр.» Ответ: Если ты мыслишь такими категориями, наверное этот курс не для тебя, а для более начального уровня, чтобы ребята перестали присылать мне лендинги с визитками в откликах на продуктовую вакансию, потому что это трата времени. Округлим продуктового дизайнера до проектировщика, поскольку в крупных компаниях c инхаус-командами востребована именно эта роль. Задача портфолио такого спеца в том, чтобы показать мыслительный процесс и способность всё структурировать, превращать хаос в порядок в интересах бизнеса, развязывать кривую архитектуру, бороться с легаси и максимально упрощать непростую жизнь людей, которые работают с ужасными интерфейсами. А не в том, чтобы показать красивые картинки и поразить анимациями на Бихансе/Дрибле. Проектирование — не про то, чтобы дизайн красочно продавал, это к ребятам из маркетинга. Ежедневно мы препарируем логику, которая кажется сложной и запутанной, редизайним и пилим новые фичи на основе исследований. Большая часть нашей работы не связана с графикой. Поэтому, когда мне присылают ссылку на прокачанный Дрибл, я могу лишь пожать плечами: ну да, ты крут, ты умеешь в UI и даже рисуешь иллюстрации, но это лишь 20% от того, что я ищу. У нас есть UI-кит и целая команда юайщиков. И иллюстраторы, которым можно заказать зарендерить любую иллюстрацию, а твои 2D-люди не подходят нам по стилю. Ты конечно можешь нарисовать иконку, но у нас есть Мега-Андрей, который рисует иконки всем командам Ozon, так что и это уметь не обязательно. В сухом остатке от продуктового дизайнера мне нужно умение проектировать и работать в продуктовой команде. Стоит показыать то, что ты можешь показать и хочешь продать, не спотыкаясь о фактическую реализацию проектов в жизни и свои представления о красоте. Цель портфолио — не в исторической достоверности, а в раскрытии твоего потенциала для будущего работодателя. Если дизайнер в своей жизни делал только визитки, это не значит, что в его портфолио должны быть только они, иначе он так и застрянет на таком уровне заказов. Там может быть что-то совсем космическое, например, операционная система для VR. Главное — показать, что ты круто умеешь проектировать: определять задачи и решать их. Поэтому, я хорошо реагирую на портфолио в Notion. Это решение сразу даёт тебе конкурентное преимущество, поскольку твои кейсы могут содержать вложенные страницы с подробностями, в которые можно провалиться. Такой формат сразу адаптирован на текстовый контент с вставками иллюстраций и видео. Когда верстают текст картинкой, меня это бесит, потому что я часто смотрю портфолио с мобильного по пути на работу и не могу прочитать. Портфолио в Фигме — тоже так себе затея по той же причине. Да, в Ноушне нет лайков, но они мало бы влияли на моё решение, будет ли оффер. 3-4 решённые задачи, оформленные в виде внятных статей или даже видео, сработали бы лучше ссылки на Беханс. Я говорю только за себя. Возможно, другие дизайн-лиды имеют свои критерии и им нужен только Беханс/Дрибл и упор на красивый UI. А каким ты видишь идеальное портфолио? Накидай в комменты ссылок на классные портфолио, можно и на своё. #первые_шаги #карьера #UX #ППД

Стрим: Слияние дизайн-систем, опыт Ozon 17 ноября 2021, 14:00 Figma пригласили меня выступить на их первом русскоязычном стриме и рассказать о том пути к современной дизайн-системе, который Ozon прошёл за последний год. Стрим будет интересен старшим продуктовым дизайнерам из крупных компаний. У нас одновременно существует несколько дизайн-систем: для основного продукта Ozon, для панели продавца и других проектов. Без объединения не добиться консистентности продуктов, к которой мы стремимся. Чтобы решить эту сложнейшую задачу, в нашем случае понадобились полгода усилий сборной команды. Итогом стала новая дизайн-система с UI-китом на Фигме. Она заимствовала лучшие практики, которые удалось найти. Её раскатывают внутри Ozon до конца 2021. Расскажу о этапах и возможных вариантах слияния, подводные камни и инсайты, а также подробности о реализации новой системы. Зарегистрироваться на стрим → Бесплатно #для_профи #стрим #дизайн_системы #Figma

Книга «Сложный дизайнер» В этой онлайн-книге не будет основ композиции, типографики, правил сочетания цветов и упражнений. Она о трудовой этике и профессионализме, о коммуникации с клиентами, отношениях и лидерстве, про то, как дизайнеру работать хорошо. Её пишет Женя Арутюнов, арт-директор дизайн-бюро «Интуиция». В ней он структурирует собственный опыт и знания о профессии дизайнера. Книга именно электронная, кроме текста там есть всякие интерактивные штуки, войсы и забавные видео-вставки. Всего в ней будет 9 глав. Уже опубликованы 5 из них, следующие будут появляться в течение этого года. То, что мне удалось найти в книге, определённо представляет ценность. После беглого прочтения у меня сложилось ощущение, что я пообщался с интересным человеком. Ознакомиться с полным описанием и приобрести доступ за 740 ₽: intuition.team/book Если ты прочитал эту книгу, делись мнением в комментариях. Там же я приложу свои комментарии к вышедшим главам. #для_профи #софт_скилы #полезная_реклама

Стрим про дизайн-системы в Ozon и апдейт по курсу 17 ноября приму участие в первом русскоязычном стриме от Figma на тему «Слияние дизайн-систем: опыт Ozon». Расскажу про наш путь с дизайн-системой, который мы проделали за последний год. Поговорим о том, как происходит слияние нескольких UI-китов и фронтенд-библиотек в одну большую систему, какие в этом процессе есть этапы и подводные камни. По этому поводу скоро будет отдельный анонс. Из-за этого стрима и личных причин не успеваю дописать видео для своего курса «Портфолио продуктового дизайнера», который планировал запустить в начале ноября. Первый поток откладываем до января 2022. Мне уже нравится то, что получается и не терпится этим поделиться! На этом проекте я осознал, насколько важна в разработке онлайн-курса роль методиста. Он упаковывает контент в что-то удобоваримое для студентов и оценивает эффективность обучения при помощи метрик, позволяя мне думать о том, что давать, а не как. Также методист работает как предохранитель и не позволяет мне надорваться в попытке объять необъятное. Когда писал контент, сначала конечно же принялся писать полотно «Как быть продуктовым дизайнером вообще» и захлебнулся в попытке выпить этот океан. Фокус на слишком широкую тему вреден, и я часто об этом забываю. Посылаю лучи благодарности тем, кто принял участие в нашем опросе, ваши ответы дали нам много ценных идей, которые мы обязательно проработаем в курсе. Stay tuned! #первые_шаги #ППД #стрим #дизайн_системы

Хак про динамические стрелки между объектами в Фигме Расскажу о коннекторах — скрытой киллер-фиче Фигмы, на которую наткнулся на днях. В FigJam есть стрелки, которые называются Connector Lines. Их можно растянуть от одного объекта до другого и в отличие от обычных стрелок они обновляют свою форму, если один из подцепленных к ним объектов подвинуть. Это удобно для рисования схем, майндмэпов и прочих юзер-флоу, когда структура разрастается на глазах. Дизайнер из моей команды Яна Малякина обнаружила, что если копировать такую стрелку из FigJam в обычный фигма-файл, она сохраняет возможность прилипать к объектам. Она значительно облегчает рисование различных блок-схем, в которых не нужно больше тратить время на отрисовку стрелок вручную. Это просто офигеть как круто! На текущий момент нет возможности создать коннектор прямо из Фигмы (моя версия 102.9, не бета). Также попавший в Фигму коннектор интересно ведёт себя: если обернуть его фреймом и сделать тот компом, коннектор выскользнет из фрейма обратно на верхний уровень. Возможно, так сделано, потому что каждый коннектор индивидуален и нет смысла наследовать какие-либо свойства мастер-компонента. В будущем они могут сделать отдельный инструмент для удобного создания коннекторов. Или уберут их из дизайн-режима, посчитав это поведение багом. В основном режиме дизайна в Фигме их всегда не хватало, и они были для меня основной причиной в принципе использовать FigJam и иногда заглядывать в Miro. Думаю, их специально не завозят в дизайн-режим, чтобы поддержать интерес к проекту FigJam. Годами я рисовал стрелки через обычный инструмент Arrow, не желая покидать Фигму и не привыкнув к Autoflow. Чтобы пощупать коннекторы тебе было легче, я сделал урок в Figma Community, где создал карточки и коннектор между ними, который предлагаю перевесить на другую карточку. Утянуть урок к себе → #для_профи #Figma

Про ребрендинг Мейла в VK и их библиотеки компонентов Холдинг Mail ru Group объвил о масштабном ребрендинге. Единым брендом всех сервисов компании стал VK. Название «ВКонтакте» сохранится как бренд соцсети. Округлый знак VK сменился на более острый и геометричный, благодаря чему удалось сделать из его составных частей узнаваемый паттерн, который теперь будет удобно использовать в рекламе. Предыдущий знак был вполне приличный в качестве лого соцсети, но смотрелся инородно и его не удавалось органично масштабировать на другие проекты. Об этом ребрендинге на VC вышла статья, в которой можно прочитать о предыстории такого решения и любопытных деталях. Читать на vc.ru → Кстати, у VK есть публичная дизайн-система на Figma Community, в китах которой я с удовольствием поковырялся. Об этом написал свой обзорный пост: Библиотеки компонентов VK (часть 1) → Остаётся открытым вопрос, как дизайн-система VK будет интегрироваться с Paradigm. #для_профи #дизайн_системы #полезная_реклама #VK

Реверс-дизайн: как получить полный контроль над дизайном продукта перед редизайном, если у тебя нет макетов Несколько лет назад у меня произошёл прорыв в понимании того, как анализировать интерфейсы и с чего начинать проектирование любой уже существующей системы. Сегодня расскажу пару слов о подходе, с которого этот прорыв начался и который я назвал реверс-дизайном. Это очень мощная техника сбора данных перед редизайном любого сложного интерфейса, в котором есть флоу. Реверс-дизайн — это создание прототипа какого-либо продукта из существующего дизайна при помощи скриншотов всех его ключевых состояний. Это даёт возможность быстро получить интерактивную раскадровку экранов, чтобы найти места для улучшения дизайна и облегчить сборку переработанного флоу. По ссылке бонусом дал порядок действий, как это делать, а также множество плюсов этого подхода: slashdesigner.ru/reverse-design Всегда удивляло, что немногие дизайнеры задумываются о том, что так можно. Максимум вставляют один сиротливый скрин старого дизайна в Фигму, по которому можно оценить только визуал, но невозможно восстановить логику взаимодействия. Так вот: собирать полный флоу на скринах — можно. #для_профи #UX

Образовательный сервис «Design Line Pro» Рекомендую сообщество с дизайн-задачами, разборами от менторов и трансляциями про дизайн. Считаю, что быть хорошим дизайнером без помощи других невозможно. Крайне важно участвовать в профессиональных сообществах, общаться с живыми людьми твоего уровня и выше, сравнивать себя с ними, дружить и соревноваться. Это вдохновляет и подталкивает ход мыслей в нужную сторону, приносит новые проекты и связи. Кто-то попадает в хорошую дизайн-команду и ему достаточно общения внутри неё. Идеально, когда старшие дизайнеры подкидывают домашние задания и вкладывают в тебя своё время, это самый быстрый путь прокачаться. Но попасть в такие места — большая удача и редкость. Более реалистична картина, когда ты идёшь на дизайн-курсы и там общаешься с одногруппниками в чатах. Но курсов огромное количество, и вообще непонятно, в каких есть реальная экспертиза, а в каких только красивый лендинг. С организаторами DL знаком и могу подтвердить, что это компетентные ребята. Оформить подписку за 1 900 ₽ в месяц можно на сайте: Перейти на сайт DL Pro → Что даёт подписка? - Точечная прокачка того, что тебе нужно: проектирование, визуал, работа в команде, бизнес-сторона дизайна - Разборы твоих работ менторами. Примеры: раз, два, три. Можно без ограничения спрашивать фидбэк по своим работам у менторов в телеграм-чате. Их 10 человек, каждый отвечает за свою сферу. Все они — бывшие участники DL - Дизайн-задачи. Каждые две недели по расписанию — новые задачи от приглашённых экспертов из крупных компаний и агентств - Комьюнити. Можно общаться с другими дизайнерами и комментировать работы друг друга - Видеозаписи 15 прошедших интенсивов Design Line с 2018, а также участие в новых. В разделе «События» более 100 лекций и воркшопов про сайты, мобилки, 3D, UI-анимацию и маркетинговый дизайн. #полезная_реклама #первые_шаги

Продолжение истории про промо-коды: всё аннулировали (обновлено) Итог: Техподдержка Ноушна подтвердила мне, что работающие на всех промо-коды — это уязвимость. Сегодня, 3 октября, всем, кто активировал промо-коды, пришло письмо о списании зачисленной суммы. Промо-коды были предназначены для поддержки стартапов, которые подтвердили, что они действительно являются стартапами и используют Team Plan. Для них программа продолжает действовать. Читать: slashdesigner.ru/notion-fail В своей статье поупражнялся в арифметике и разложил, какие потери могут быть от такого промо-кода, а также задался вопросом, нужен ли Team Plan на всю команду в принципе. Также прокомментировал посты других каналов про ситуацию с промо-кодами. Считаю решение Ноушна верным, но подача коммуникации не на высоте. Могли бы признать косяк со своей стороны и снизить потенциальный негатив. #для_профи #Notion

Апдейт про Ноушн Ситуация с Ноушном получилась неоднозначной. Я выложил промо-код, не вникая в условия. Он должен был работать на командных планах (Team Plans), а работал на всех. Естественно, я и другие фанаты продукта ломанулись его активировать. Насколько я понимаю, это не входило в планы маркетинга Ноушна, является уязвимостью их системы промо-кодов и наносит им ущерб. Я сожалею, что распространил эту информацию, не вникая в условия их кампании по поддержке стартапов. Полученные в результате ошибки 500 баксов на счету я принял решение вернуть им через техподдержку. Саша Окунев

Делаю курс «Портфолио продуктового дизайнера» для джуниоров Чтобы повысить шансы попасть на хорошее место, тебе пригодится определённый набор навыков про сбор данных, исследования, генерацию идей. В твоём портфолио должны быть нужные акценты на решении задач, а не на визуале. Я каждый день смотрю десятки портфолио дизайнеров и вижу однотипные ошибки: непонимание задачи и макеты, которые никак не иллюстрируют изначально заявленную цель кейса. Курс даст участникам внятное представление про этапы моей работы и процесс найма дизайнеров. Это позволит выгодно проявить себя на собеседованиях в крупных компаниях с выстроенными дизайн-процессами. Первый тестовый запуск на 10 человек будет длиться 4 недели, за которые я буду давать теорию, персонально разбирать портфолио каждого из участников, дам примеры задач для тех, кто хочет проектировать сложные интерфейсы. Запуск планируем на ноябрь 2021, то есть до Нового года у тебя будет переосмысленное портфолио. 1. Предварительная запись. Если хочешь попасть на курс, пожалуйста, заполни анкету → 2. Скидка 10%. Мой методист требует 10 человек на кастдев. Те, кто пройдёт интервью на полчаса, получат скидку. Пиши: @gvozdeva. #первые_шаги

Миша Розов из студии Pinkman каждый день с 23 по 27 августа проводит 5 эфиров в поддержку своего интенсива С удовольствием анонсирую интересную движуху для развития кругозора продуктовых дизайнеров. Расписание: → Понедельник Разогрев. Дизайн сайта Икеи и 3д-конфигуратор мебели. Стрим прошёл сегодня, запись уже доступна в канале по ссылке ниже. → Вторник Будем работать с формой, композицией, сеткой и, конечно, типографикой: вёрнем к жизни snob ru. → Среда Замахнёмся на мобилку, чтобы развеять миф, что дизайнеры мобильных приложений — это какие-то другие дизайнеры. Короче, под нож попадёт Litres. → Четверг Самый масштабный по объему и количеству. Будем рендерить шоты с косметикой и собирать это в модный сайт для Don’t touch my skin. → Пятница Закончим софтом: возьмем английскую версию сайта AmoCRM и will make it great again. Ссылки на эфиры в канале: @wannabelikerozov17feb #полезная_реклама

Саша Окунев в гостях у «Охуительных историй» Дал весёлое живое интервью Богдану из канала @uxuitelno. Он недавно запустил одноимённый подкаст про продуктовый дизайн и UX. Слушать: Anchor.fm | Яндекс Музыка | Apple Podcasts | Google Подкасты | Spotify Мы оба руководим дизайн-командами и было что обсудить: поговорили про организацию дизайн-систем, мой переход в управление, первые провалы, про то как строю процессы в команде, про фидбэк и решение конфликтов. Вторая половина получилась вполне по теме рубрики #стать_лидом. Не пропусти также интервью с Алиной Ермаковой из Сбера, она крутая. В комментариях к посту – тезисы. #для_профи

Ищу продуктовых дизайнеров №3 Прошу откликаться только мидл+ и синьёров. Города: Москва, Питер Дизайн-команда Озона снова расширяется. Всего у нас открыто целых 10 вакансий, 4 из которых — ко мне. Всего в направлении продуктового дизайна уже несколько десятков дизайнеров. Мы развиваем наше комьюнити, устраиваем митапы и много передаём друг другу накопленный опыт. Московская часть команды работает со мной на 54 этаже в Москва Сити. Вакансия: Старший продуктовый дизайнер В дизайне Озона происходят интересные процессы, в которых можно получить уникальный редкий опыт и проявить себя. Например, мы женим несколько дизайн-систем в одну и внедряем единые стандарты для команд, которые раньше работали независимо. Это сложная и интересная работа с кучей неизвестных, где у тебя будет большой уровень самостоятельности. Мы регулярно проверяем наш дизайн на исследованиях и делаем жизнь тысяч наших продавцов удобнее. Основной продукт нашей команды — seller.ozon.ru, это панель управления продавца и мобильное приложение, через которые они мониторят продажи, собирают заказы, управляют складами. Портфолио в Ноушне, выстроенное от решённых задач, будет плюсом. По нему я должен понять, что ты сильный проектировщик и тебе можно доверить самостоятельную работу над крупным разделом в нашей системе. Если ты засиделся в своём банке, устал от бюрократии, хочешь движухи и эффективно выстроенных процессов, на которые ты можешь влиять, давай пообщаемся. Если ты засиделся в агентстве или стартапе, устал от раздолбайства и хочешь понятных правил игры, давай пообщаемся. Если ты понял, что быть дизайн-лидом — это не твоё, а хочется продолжить рисовать сценарии, давай пообщаемся. Естественно, полностью белая зарплата, плавающий рабочий график, окна во всю стену, новые маки на M1, бесплатный кофе на кухне, ДМС в Чайке и система жирных бонусов за хорошую работу. Чтобы откликнуться, оставь заявку на странице вакансии. PS — также коллега ищет редакторов и руководителя группы поддержки партнёров в соцсетях. #анонсы #для_профи