{"id":9132,"title":"\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0435 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u043e\u0446\u0438\u043a\u043b\u043e\u0432 \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438","url":"\/redirect?component=advertising&id=9132&url=https:\/\/vc.ru\/pochta\/325041-kak-kanadskie-lyubiteli-snegohodov-i-kvadrociklov-otkryli-dlya-sebya-rossiyu&placeBit=1&hash=cd54543b13c8a6083dd50d5669dab69e3e15e40792f9ed69859d5c8934b50d3d","isPaidAndBannersEnabled":false}
Дизайн
ВКонтакте

Публикуем «Канон» — библиотеку знаний дизайнеров ВКонтакте

Всем привет, я Матвей Правосудов, старший продуктовый дизайнер ВКонтакте. Ранее мы делились нашей системой VKUI и описывали подход к оформлению приложения для iPad.

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

Год назад в департаменте дизайна было десять дизайнеров, сегодня нас уже 28. Мы стремительно расширяемся, и передавать знания в таком темпе становится сложнее. Недавно за один месяц должны были выйти пять новых дизайнеров — без «Канона» процесс адаптации занял бы тучу сил и ресурсов. Поэтому хочу обратиться к руководителям дизайн-команд — не переключайтесь, вам будет интересно!

Департамент дизайна ВКонтакте вне работы 😊

Всё началось с онбординга

В марте 2020 года Команда ВКонтакте ушла на удалёнку. Департамент дизайна начал адаптироваться: стали по максимуму использовать Figma, перевели еженедельное дизайн-демо в онлайн и участили созвоны, чтобы не терять живое общение.

Летом мы планировали взять стажёра в команду дизайна, а в команду e-commerce параллельно присоединялась дизайнерка. Нам впервые предстояло онбордить дизайнеров в режиме онлайн. В офисе всё было проще — настроили ноут, получили доступы, посмотрели на файлики, сходили за чаем и начали пилить задачу. Все вопросы разбирали сразу — достаточно было подъехать на стуле. С удалённой работой всё сложнее. Есть две большие проблемы:

1. Много знаний живёт в головах разных дизайнеров. Это так называемый bus-фактор — вряд ли наставник сможет сразу ответить на все вопросы новичка. В офисе дизайнеры сидят в одной комнате, поэтому ответ находится быстро.

2. Онбординг всегда проходил хаотично. У наставников не было понятного плана, что нужно сделать новичку и им самим, — вопросы решались по мере поступления.

К тому моменту в нашем Dropbox Paper уже было несколько документов с инструкциями по работе в Figma от Миши и Вани. Ещё была статья с серьёзным названием «Регламент для новичка» от Паши. Я предложил её переписать — добавить информацию про доступы и инструменты, ближе познакомить с командой и рабочим процессом.

Одна из первых версий онбординга для новичка

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

Первая версия дизайн-библиотеки

Сценарии и структура

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

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

Мы посмотрели на «Канон» как на продукт, у которого будут пользователи (дизайнеры) со своими сценариями, и выделили два самых популярных:

  • 👨‍🎓Я новичок и хочу понять, что вообще происходит. Нужен необходимый минимум информации, чтобы познакомиться с контекстом и приступить к первой задаче.
  • 🤔У меня конкретный запрос: как сделать иконку, заказать иллюстрацию, провести исследование? Возможно, человек никогда не создавал анимации, и у нас есть понятный гайд, как решить эту задачу.

Так как эти два сценария возникают чаще других, мы вынесли разделы максимально наверх. Сначала идёт пара статей для новичков, затем наш любимый раздел «Как?» — в нём собраны краткие, но ёмкие ответы на вопрос «как сделать X». Все остальные дополнительные инструкции находятся дальше по скроллу и не отвлекают.

Актуальная версия главной страницы «Канона»

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

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

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

Как улучшаем

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

Чтобы не упускать такие нюансы из виду, мы просим ребят оставлять комментарии в любых документах, где они видят ошибки и неточности. В «непродуктовые» дни я прорабатываю и исправляю эти замечания.

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

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

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

Шаблон персонального чек-листа для новичка. Работает ещё и для наставников: сразу понятен список задач на весь испытательный срок

«Канон» — это коллективный труд, в котором собраны знания самых разных дизайнеров. Вклад в библиотеку может внести любой сотрудник. Недавно Андрей сделал нам подарок — собрал целый раздел про анимации и законтрибьютил его в «Канон». Такое произошло в первый раз, и я надеюсь, что не в последний.

Раздел про анимации

Что нам это дало

«Канон» стал неотъемлемой частью онбординга, которая упрощает многие бытовые моменты. Сейчас к нам уже почти не приходят с вопросами, раскрытыми в доке.

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

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

Посмотреть своими глазами

Хватит слов! Вот публичная версия «Канона». Она, конечно, немного урезанная — всю внутрянку показать не можем. Чтобы увидеть все статьи и разделы, приходите к нам работать 😉

На что обратить особое внимание

Загляните в «Принципы проектирования продуктов». Это ДНК нашего подхода к дизайну и своеобразный мостик между дизайнерами и продактами, который помогает создавать качественные интерфейсы. Почитайте статьи в разделе «Как?», посмотрите «Лучшие практики». И давайте обмениваться опытом — делитесь своими подходами и лайфхаками в комментариях!

Чем «Канон» может быть вам полезен

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

(Это мы)
0
38 комментариев
Популярные
По порядку
Написать комментарий...

Cегодня нас уже 28

И что ни один из 28 дизайнеров не сказал, что прятать в приложении популярный раздел Список сообществ и Последние сообщества под всплывающую панель с дополнительным нажатием это плохая идея?

Как и замена кнопки Уведомлений на Тиктоки в нижней панели до этого. ред.

44

Тоже самое с музыкой - нахрена мне предлагать при входе каждый раз раздел шлако-рекомендаций, вместо перехода на таб "Моя музыка"? 
Я понимаю, что им похеру и шлак надо продвигать как-то, но BLEAT, ведь можно стейты последние запоминать, не? И где тут каноны? 
Я не говорю уже про невозможность отключить ebanie клипы, содержание которых отталкивает от использования социалки всё больше и больше. Впрочем, давно уже нашел спасение в спотифае, реддите и твиттере. ред.

33

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

4

Все 0.0001% пользователей, которые воспользуются этой возможностью.

2

При чем тут дизайнеры? Продакт решил так. А решил так, чтобы продвигать свой клон тик-тока. Цель поставлена, KPI надо растить.

16

Добавили ленту новостей "a la" Яндекс Дзен. В какую же сраку превратился ВК :( Дизайнеры молодцы ребята, многое смотрю в их гайдах, спасибо что делитесь. Манагеры конечно же уничтожают продукт, убери ВК пиратский контент, как ему придет конец.

3

Вот концепт (на основе другого концепта), но там такая же идея с разделением сервисов и меню навигации. ред.

0

Стажерка... Ну ок... Дизайнерка?... 😂🤣😂
Ради пары одобрений от особо упоротых феменисток и ЛГБТ так обосрать русский язык... 🤨
Днище полное, Яша... 😔

8

Сразу видно, что правил русского языка вы не знаете

–2

Какая адовая бюрократия, господи. Это уже даже не смешно.

0

Абсолютно любая новость про ВК: *выходит*
Гриша: АААААААААААААА!!!!

14

Ну какая же это бюрократия?

Здорово, что знания передаются внутри компании и, в данном случае, за её пределами. Это помогает организовывать работу в компаниях так, чтобы всем было удобно и комфортно.

Респект ребятам, это монументальная работа и хорошая база знаний для любого дизайнера.

7

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

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

6

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

2

Потому что пока больше нечем. Но я надеюсь это исправить своим проектом.

1

А зачем себя мучить? Я не пользуюсь и не мучаюсь. С одноклассниками переписываться?

0

Нет, а чем пользоваться вместо ВК? Инстаграмом? Он ещё хуже. Фейсбуком? Тем более. Простите, но у меня нет жизни, без соцсетей я вообще кукухой поеду.

3

А че ты там делаешь-то в этом вк

Upd. Все, понял вопросов нету ред.

2

Эмм. Я уверен что есть куда больше соцсетей, чем ты перечислил.

0

И тем не менее, новичкам в дизайне и разработке будет полезно почитать о процессах, например. Там все довольно неплохо описано. 

6

Гриш папей таблеток

0

Комментарий удален

Комментарий удален

Статью наверное тоже по канонам писали)

0

Все компиляторы сделаны с использованием компиляторов...

0

Комментарий удален

Спасибо за статью.
Расскажите, пожалуйста, как дизайнеры балансируют между желанием создать удобный интерфейс и задачами от начальников по внедрению/продвижению того, что неудобно/неинтересно, но нужно для бизнеса.

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

9

между желанием создать удобный интерфейс и задачами от начальников по внедрению/продвижению

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

2

году в 2006-2007, будучи мелким шкетом каким-то макаром в вопросах и ответах мэйл.ру наткнулся на программиста Руслана, который тогда пилил java mail.ru агент. Я описывал проблему, он мне ответил и предложил потестировать новый билд. так на добровольных началах я ему помогал где-то с год отлавливать баги. причем плодотворненько так правили. а вот потом началось. сначала его заставили отчитываться каждый день за то, что он делает. потом ко мне приставили менеджера, у которого и без меня работы было дофига и срок исправления бага с 30-60 минут растянулся до 1-2х дней. ну а вишенкой на торте стали постоянные извинения программиста, который в течение месяцев отписывался в стиле "Да-да, я помню про эти баги, но у меня от начальства приоритет на внедрение какой-то лабуды из "моего мира"". так за 3-4 месяца из условных 50 багов было исправлено штук 5-10 и на сим я распрощался с тестированием. Подозреваю что ничерта не изменилось и до сих пор думаю, что 1 индивид в разы продуктивнее, чем индивид с вышестоящим начальством

0

Вы в 21 году придумали внутреннюю вики и ramp up план?

5
Уполномоченный файл

Подобные корпоративные каноны-хуены делают из голодных дизайнеров самоуверенных негибких жирдяев, которые потом на выходе "все знают".
И хер их потом на другой кухне переучишь. Знали-проходили :-(

2

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

Мы как раз поэтому и не пишем гайдлайны по компонентам в том же объёме, в каком делают Apple (Human Interface Guidelines) и Material Design. Хоть и описание некоторых вещей упростило бы нам работу, позволяя не отвечать на одни и те же вопросы, но они бы создавали рамки дизайнерам, заставляя принимать правила как данность

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

2

Интересно, думала, что вконтакте гораздо раньше к этому пришли

3

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

Потребность и потенциальную пользу начали ощущать при переходе на удалёнку в марте год назад и при росте команды 

2

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

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

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

3

28??? 28 человек не могут сделать приличный дизайн?? Пздц..

2

У меня только один вопрос, что в этом такого? Создали регламенты просто, базу знаний.

1

Канонка!!! Канонка где???!!!1!!1!! Негоже в такой прогрессивной команде дизайнеркам и стажеркам без канонки то онбордить. ред.

1

Я хоть и не дизайнер и не дизайнеровод, но почитал и это полезно. Так можно оформить онбординг всех сотрудников

0

А когда вы деньги зарабатываете для компании?))

Давайте я переведу на русский фрагмент статьи за вас.

Мой вариант:
Кроме инструкций, в которые можно вставить фио, чтобы назвать это модным онбордингом, мы обязательно тратим рабочее оплаичваемое время на:
Общение на посторонние темы с коллегами
День в неделю на неключевые непродуктовые задачи
Отдельно собираемся подумать все вместе, хотя как? Если это все чаще встреча онлайн))
Наставничество, чтобы 2 сотрудника тратили время, а не 1. Наш онбординг не справляется с задачей обучения новичков на 100 процентов, нужен еще наставник. Благодаря такому подходу мы не успеваем выделять время на ключевые задачи с примерно одинаковой скоростью в компании.

А вот как было у вас:

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

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

0

Комментарий удален

Какие молодцы! Классная штука 👍 Утащу к себе.

0
Читать все 38 комментариев
IKEA начала сдавать в Токио квартиры в 10 м² за $0,86 в месяц, чтобы показать, что в них тоже можно жить Статьи редакции

Внутри есть мини-спальня, рабочая зона, диван, стиральная машина и другое.

Зимний набор на оплачиваемую стажировку в Тинькофф Старт: какие задачи решают стажеры

Стажировка пройдет по направлениям: аналитика, QA, бэкенд-разработка (Java, C++, Python, Scala, .Net, Golang), фронтенд, мобильная разработка (iOS и Android), ML, маркетинг и менеджмент образовательных проектов.

«Как иронично, что фирме в сфере психического здоровья плевать на психическое здоровье собственных работников» Статьи редакции

Сотрудники Spring Health жалуются на соучредительницу Эйприл Го: она запугивает их, увольняет при всех, вынуждает работать по 70 часов в неделю и не нанимает тех, кто спрашивает про переработки. Го объясняет: «Мы носимся как безголовые цыплята, потому что на кону человеческие жизни».

Эйприл Го — на ноябрь 2021 года самая молодая женщина-директор компании с оценкой более $1 млрд Slush
Разговор PRO: аналитика рекламы

Эксперты компании Registratura, входящей в iConText Group, вместе со своим клиентом «Олант» приняли участие в спецпроекте AdIndex.ru, где поговорили о рекламной аналитике.
Сергей Ерофеев, генеральный директор Registratura, Андрей Сахаров, руководитель отдела продаж Registratura, и Филипп Иванов, директор по интернет-маркетингу и e-commerce «Олант»…

Фото: Курьер Delivery Club из Рыбинска в ретро-форме Статьи редакции

Сотруднику выдали шинель и фуражку, а рюкзак поменяли на ящик с кожаными ремешками.

Пользователи пожаловались на недоступность платформы для продажи хендмейд-товаров Etsy Статьи редакции

Они предположили, что Etsy могли заблокировать из-за решения суда, который признал запрещённой одну его страницу.

Юбилей кешбэка: как в 130 лет выглядеть «на все сто»

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

Плюшки – от робота, а преференции – для резидента

Как наладить взаимовыгодное сотрудничество на территории ОЭЗ «Технополис Москва».

Как обустроить домашнюю студию звукозаписи при скромном бюджете Статьи редакции

Почему сведённый трек нужно проверять на паршивой Bluetooth-колонке, какие плагины выгоднее брать новичку и с каким синтезатором работал Ханс Циммер, создавая саундтрек к «Тёмному рыцарю», — в пересказе Pitchfork.

AudioMunk
null