Как оседлать радугу

Старший дизайнер ВКонтакте Илья Гришин попал в Команду в 18 лет. В Лектории VK Hackathon он рассказал, как стал частью VK после окончания школы и какие задачи стоят перед Департаментом дизайна ВКонтакте.

Как попасть в VK в 18 лет?

Когда в 2012 году ВКонтакте запустили сообщество VK Designers, я уже интересовался дизайном и начал принимать участие в конкурсах, предлагал свои идеи по улучшению интерфейсов сайта. В конце 2012 года меня упомянули в публикации с победителями — я выиграл iPad Mini.

Перенесёмся в 2016 год. Тогда ВКонтакте объявила конкурс на редизайн сайта vk.com. Среди призов были MacBook Pro, поездка в Сан-Франциско на конференцию для дизайнеров и возможность стать частью Команды ВКонтакте. Я был на летних каникулах, поэтому решил принять участие. Мне казалось, что делать редизайн будет просто, но летняя жара и лень осложняли задачу.

Я отправил свою работу на конкурс и оказался в пятёрке победителей. Мне подарили MacBook Pro, но в Сан-Франциско я так и не полетел — мама запретила, ведь мне было 16 лет. Я ждал, что мне напишут из VK и предложат работу, но этого не произошло.

После ещё нескольких конкурсов мне предложили нарисовать десктопную версию мессенджера. Разумеется, я согласился и нарисовал всё достаточно быстро. Похоже, в VK этого не ожидали, поэтому ответили мне не сразу. Шло время, близились экзамены. Я написал Андрею Рогозову, объяснил ситуацию. Он моментально прочитал моё сообщение и писал ответ в течение 8 минут. Андрей предложил обговорить возможность сотрудничества после экзаменов.

По приезде в Зингер одним из первых меня встретил продакт-менеджер ВКонтакте Макс Павлов. Тогда мы работали над одним из первых приложений для VK Fest. Я приехал в Питер без ноутбука, поэтому не мог вносить правки, которые Максу были очень нужны. Пришлось взять его рабочий ноутбук и начать рисовать. Через пару часов состоялась встреча с Андреем [Рогозовым] и двумя дизайнерами: Пашей Князевым и Мишей Лихачёвым. Мы обсуждали мои планы на будущее, и ребята предложили работать с ними.

В первые месяцы работы я ничего не понимал. Ребята постоянно помогали мне втянуться, зная, что новичкам непросто. Тогда над ВКонтакте работали около 50 человек, а дизайнеров было всего 3, включая меня.

Департамент дизайна

Сейчас у нас в команде уже 7 человек. Каждый дизайнер отвечает за определённый продукт и занимается схожими по специфике сферами. Например, один дизайнер может заниматься сообществами, e-commerce и сервисами.

Вся работа происходит в Sketch. Какое-то время мы рассматривали переход на Figma, взвешивали все плюсы и минусы, но каких-то больших преимуществ не обнаружили. К тому же мы не хотим терять время на перенос макетов из Sketch в Figma.

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

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

Это наш UI Kit. Когда я только присоединился к Команде, его не было. Нужно было собирать макет из совершенно разных макетов. В один момент мы поняли, что дальше так нельзя. Как раз в то время к Мише пришли с идеей тёмной темы. Тогда же у нас возникла проблема: ячейки, которые мы отдавали разработчикам, из-за отсутствия жёстко сформированный палитры верстались заново, и нам приходилось всё перепроверять. Для решения проблемы Миша с разработчиками собрал все цвета в единую палитру, поэтому теперь в наших экранах не возникает никаких новых цветов. Мы внесли её в приложение и стайлгайд в Zeplin, создали токен с тёмной и светлой темами и теперь вы можете этим пользоваться. Схема тёмной темы для разработчиков есть в открытом доступе на GitHub. Подробнее об этом можно почитать в блоге на Habr.

Системные задачи

Иногда дизайнерам приходится заниматься не очень интересными вещами. Однажды ко мне пришёл разработчик с предложением систематизировать палитру vk.com. Чтобы вы понимали, веб-версия ВКонтакте — наш самый большой проект. Какое-то время у нас существовала палитра в UI Kit на уровне дизайнеров, но жёсткого контроля за этим не было. Поэтому мне пришлось систематизировать 1600 цветов за 2 дня.

Чуть-чуть о ревью

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

Главное, чтобы пользователю было как можно проще взаимодействовать с интерфейсом.

Итог

VK Designers научил меня с вниманием относиться к деталям. Каждый отступ, каждая иконка — всё это часть визуального стиля платформы. Если вы хотите делать классные интерфейсы — думайте о пользователях, и у вас всё получится.

Полную запись выступления Ильи можно посмотреть здесь:

В конце выступления Илья поделился полезными ссылками для дизайнеров: vk.cc/a3KvYF

The Brown Room — независимое интернет-издание про социальные сети и современные технологии.

Автор: Влад Воробьёв
Корректоры: Лена NL, Арсений Метелев
Изображения: VK Hackathon