100 разработчиков в команде и обучение дизайнеров фронтенду — интервью с Серёжей Поповым, руководителем «Лига А.»

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

Серёжа работал в маленьких студиях, большом международном продукте, на фрилансе и в быстро развивающемся стартапе Setka. За последние 5 лет он научил фронтенду больше 300 человек, в том числе дизайнера, основателя студии PINKMAN, Мишу Розова. Сейчас руководит аутсорс-продакшеном на 100 человек.

Если я прихожу на диджитал тусовку, где мы общаемся со студиями, ясное дело, представляюсь директором Лиги А. И всем сразу понятно: у него свое агентство, он руководитель.

Если выступаю на конференции, то тут мой спич про себя может варьироваться. В последнее время я не представляюсь разработчиком. Говорю, что уже 10-11 лет в ИТ, но последние 3 года не пишу код сам. Плюс, так как я занимаюсь в HTML Academy всем, что связано с выпускниками, фронтенд постоянно рядом со мной. Я давно не выступаю с техническими темами, не рассказываю, как докручивать какую-то функцию. Мои темы довольно абстрактные, но при этом проблематичные. Например, взаимодействие дизайнеров и разработчиков.

Еще есть конференции для тимлидов, и там я представляюсь как человек, который занимается управлением джуниорами. Лига в целом задумывалась как идея: давайте возьмем учеников HTML Academy, попробуем дать им реальные проекты и посмотрим, что получится.

В детстве момента, связанного с программированием, не было вообще. Мы жили небогато: в 11-12 лет я пошел работать: помогал кому-то на даче, листовки раздавал. Школа, в которой я учился, была с художественным уклоном. До пятого класса рисование было обязательным предметом. После девятого нас разделили на три направления: одни ребята занимались росписью, другие рисовали картины, а третьи играли в театре. Все, кто был активным и не хотел делать ничего руками, уходили в актерское, — я в их числе. До сих пор сделать из прототипа что-то красивое — это не мое, у меня просто мозги так не работают.

Где-то в 7 классе я уже начал задумываться, что дальше. Я не из тех, кто понадеется на случайность и потом всю жизнь будет страдать. Мне нужно было что-то конкретное. И родители записали меня в подготовительную школу при ИТМО, чтобы потом поступить в их техникум, а из него — в универ сразу на второй или третий курс. В подготовительной школе нам давали что-то вроде технической грамотности: что такое компьютер, как он устроен, потом пошли пакеты прикладных программ — Word, Excel, Paint — даже были основы веб-разработки. Большую часть времени мы, конечно, играли в контру по сети, но тем не менее это было прикольно. Нас в общем готовили к техникуму.

Он появился спустя полгода, как я пошел на эти курсы — вся семья сбрасывалась. Это была середина восьмого класса, мне тогда было 12-13. Когда купили комп, я увлекся информатикой. В итоге мне даже ставили двойки за то, что я подвергал сомнению слова преподавателя на уроке. Сейчас я понимаю, что это был такой воспитательный момент. Пока она объясняла, что надо сделать в Excel за два урока, я уже это делал и уходил. В конце концов в четверти у меня были все-таки пятерки.

Да, прошел по средним баллам за вступительные испытания. Я никогда не стремился в обучении к пятеркам, красным дипломам, золотым медалям. У меня есть такая проблема: я все, что изучаю, сразу пытаюсь переносить в практическую плоскость. Не углубляюсь в тему слишком сильно теоретически, а начинаю пробовать.

У нас был предмет в техникуме, который назывался базы данных. Я к тому времени все это уже умел и не приходил ни на один урок. Появился только на экзамене, сдал его на пять, но суммарно за предмет получил тройку, потому что не был ни на одной лекции. Меня это не интересовало, потому что я понимал: на реальной работе никто не будет смотреть, стоит у тебя 3 по Microsoft Access или пять. Будут смотреть на то, что ты умеешь.

Так только казалось. На первом курсе у меня случился переломный момент. Школа была гуманитарная, математика с физикой давались мне неплохо, но то, что я начал получать на первом курсе в техникуме, было уже over моих способностей. У нас был один специализированный предмет — основы программирования. Он мне вообще не дался. Через год в техникуме я даже начал думать: черт возьми, это вообще не мое.

Когда все поехали отдыхать летом, я взял стопку хардкорных книг по программированию и отправился с ними на дачу к другу. Я настолько начитался этого всего, что вернулся в сентябре уже чуть ли не программистом. Три месяца я читал, искал инфу в интернете, пытался писать какие-то программы, вспоминал, что было на основах программирования. На втором курсе, когда у нас пошло программирование на C и на C++, ситуация была совсем другая — я делал лабораторные за половину потока. Тогда же, на втором курсе, я начал самостоятельно изучать web, верстку — было просто интересно.

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

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

Меня часто спрашивают, почему я с такой технической базой ушел во фронтенд, который в узких кругах вообще не считают программированием. Все очень просто: когда ты написал 900 тысяч идеальных строк кода на бекенде — никто этого не увидит. Зато достаточно сверстать одну простую страничку на фронтенде, и это увидят все. Банально, я маме хотел показать, чем занимаюсь. Она, например, The Village читает — пользуется сайтом, в создании которого я участвовал.

В конце третьего курса я устроился на первую работу в студию.

Да, прогуливал техникум, писал диплом и параллельно нарабатывал опыт. Я просто пробовал для себя. Сейчас — очень круто все устроено: ты приходишь, например, в HTML Academy, тебя учат, рассказывают, куда лучше идти работать. Вот тебе фриланс, вот тебе студия, вот тебе продукт. Выбирай! Вот тебе зарплата минимум 40к, вот тебе шаблон резюме, вот тебе целый список вакансий в разных городах. Иди только, пожалуйста, устройся на работу.

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

Да не было тогда понятия фронтенда. Мне давали макет, я сам учился и верстать, и интегрировать WordPress, сам общался с заказчиком. Ну знаешь, такая студия самого низкого уровня.

Это был четвертый курс техникума, мне было 17 или 18 лет. Я до сих пор говорю всем студентам, что если у них есть возможность «просесть» в деньгах первые полгода ради получения опыта — надо это делать. И многие отвечают: «Нет, я хочу и 100 тысяч и опыт». А потом они не могут по два года найти работу. Избаловали индустрию, но да ладно.

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

Я все решал сам. У меня не было ощущения, что я могу у кого-то попросить помощи. Читал книги, лазил на форумах, копался в коде — вот и все. На тот момент никаких курсов не было.

Потом мне эта история очень сильно помогла, когда я начал заниматься с джуниор-разработчиками. Мы, конечно, сейчас сильно перескочим по повествованию, но когда я первый раз пришел наставником в HTML Academy, почти 6-7 лет назад, то мне пришлось весь объем хаосных знаний, накопленных за годы самостоятельного изучения, разбирать и систематизировать. Понимаешь, когда ты заходишь на форум и смотришь, как другой чувак сделал свою задачу, у тебя нет уверенности, что это лучшее решение. Все, что ты знаешь — вот так можно, так должно сработать. И потом оказывается, что многие вещи, которые ты знал и делал — ты делал не совсем правильно, и можно было сделать гораздо лучше.

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

Отучился два семестра и забрал документы. Я тогда уже работал активно в студии, понял, что востребован на рынке. И вот тут как раз возник этот вопрос, про который ты говорила: а может я стою чего-то большего? Я начал искать новую работу, стал ходить по собеседованиям и попал в Veeam Software. Это крупная международная питерская компания, занимающаяся виртуальными машинами. Пришел туда на позицию junior HTML-верстальщика. Я был частью маркетингового отдела, который работает с Северной Америкой. Создавал лендосы под мероприятия, лендосы под продукты, лендосы для проверки спроса — на деле я, конечно, тогда вообще не понимал, что делаю в глобальном смысле: как работает маркетинг, зачем мы ходим на всякие синки и так далее. Я фокусировался на своих задачах.

Да у меня был шок. Из подвальной студии я попал в бизнес-центр с окнами в пол, с выделенным рабочим местом, крутым компьютером, печеньками, HR-менеджером… это 2012 год, наверное. Я просто сел и начал фигачить задачи. У меня было желание все переделать. Я ходил и говорил: «Давайте сделаем систему, чтобы быстрее работать, соберем библиотеки компонентов». Команда меня всячески поддерживала: пришел джун мотивированный, пусть суетится, лишь бы что-то делал. Мне этого было мало, и я начал общаться с другими отделами: с Южной Америкой, Африкой, Европой, Россией. Мы стали думать с ребятами, как сделать так, чтобы у нас были общие компоненты, потому что фирменный стиль пересекался. Я даже ходил в отдел к дизайнерам, они там вообще были в шоке: пришел какой-то джун из Америки и пытается что-то поменять. Ушел я из Veeam Software через год, когда мне стало скучно. Я узнал все, что мог узнать, практически никаких новых супер-задач не было. Мне показалось, что я достиг потолка здесь.

В никуда — на фриланс. Понял, что могу свои знания применить на куче разных проектов. В этот момент как раз и начал наставничать в HTML Academy: проверял домашки, мотивировал ребят, закрывал их дополнительные вопросы.

Да, и до сих пор я так считаю, что человек, который знает чуть больше, чем ноль, может что-то дать человеку, который знает ноль. Тот же подход мы используем в Лиге: чувак, у которого два проекта, дает инфу тому, у кого один проект; у которого три проекта, обучает того, у кого их два и так далее до тим-лидов. У нас все делятся друг с другом инфой.

Почти три года. Ко мне с задачами приходила куча питерских диджитал-агентств, в которые раньше я не мог устроиться. Ценник дорос до 1500 рублей за час, когда по рынку в среднем было 300-500.

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

Второе, за что мне платили — сильное тестирование своей работы. Часто верстальщик отдает проект, а потом отдел тестирования возвращает ему 200 багов, и он начинает их править. За мной багов было мало.

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

С заказами проблем не было, я зарабатывал какие-то бешеные деньги для себя на тот момент: в один месяц дошел до 350 тысяч рублей.

Да, такое было, но ты не забывай, что все это время я наставничал в HTML Academy. Потом меня позвали туда куратором образовательной программы. Я вел теперь уже не по 2-3 студента, а по 15, делал так, чтобы они эффективнее обучались, иногда ходил в офис на синки и вместе с командой дорабатывал программу. Когда клиентов на фрилансе стало слишком много, я стал привлекать лучших выпускников: отдавал им часть заказов за процент. Начал делать мини-продакшн на базе себя любимого.

Вся эта история закончилась в тот момент, когда я решил переехать в Москву. Подустал от фриланса, от такого формата коммуникации с клиентом. Плюс мне казалось, что я не развиваюсь как разработчик: только применяю имеющиеся навыки. Ну я и выкинул свою резюме на HH. Меня позвали на собеседование в компанию, которая называется Setka. Я прошел тестовое задание, прошел собеседование по телефону, и они позвали меня в офис. Там сделали оффер, и я переехал. Звучит, конечно, гораздо проще, чем было на деле.

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

И над ним, и над проектами тогдашнего Look At Media. Начинал как раз с поддержки The Village и Wonderzine. Последний переверстал с нуля. А потом уже стал работать над Setka. Было прикольно, потому что мне не давали конкретные технические задания. Это было скорее нечто вроде: мы хотим, чтобы редактор умел вот это, вот тебе дизайнер, подумайте вместе. Такой подход сильно прокачал меня в UX. В Setka я проработал года полтора.

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

Первое — начал выступать на конференциях, причем стартанул сразу с Web Standards Days — топовой бесплатной конференции. Читал доклад «Поговорим о братьях наших меньших» — рассказывал про джунов. После этого выступления втянулся в тему. В один из последующих годов у меня было 35 выступлений, я полетал по всей России.

Второе — сделал сообщество Moscow CSS, клон питерского проекта ежемесячных митапов. Мы проводили встречи в Яндексе, Badoo, Tutu: приходили эксперты и читали три доклада. В общей сложности с командой сделали 15-20 таких митапов. Это сообщество живо до сих пор, но я к нему уже отношения не имею.

Третье — организовал бесплатную конференцию Moscow Frontend Conference в Телеграфе, где Design Prosmotr проходил еще.

Подожди, я еще не закончил. Я начал читать курсы в Moscow Coding School. При этом не прерывал все это время менторство в HTML Academy. Потом меня позвали в MosCoding заниматься всей образовательной программой: я придумывал курсы, организовывал их, находил кураторов.

Временами мне надоедало, но это проходило. Во всех этих проектах у меня были «корыстные» цели: пока я занимался организацией митапа или готовился к уроку, я развивал свои навыки, систематизировал знания и расширял нетворк. Самым мотивирующим во всем этом для меня были ситуации, когда люди приходили с нулевыми знаниями, а уходили, приобретя какие-то умения.

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

Я никогда не верил в слово «выгорание». Мне казалось, что люди просто очень сильно себя жалеют. Я называю такое состояние усталостью. Так вот, в какой-то момент в таком темпе от Москвы я устал, стал скучать по Питеру и написал ребятам из HTML Academy, что собираюсь вернуться в город. Спросил, есть ли у них вакансия, но не разработчика: мне хотелось попробовать что-то другое. И они дали на выбор две идеи: первая — свой авторский курс на определенную тему, а вторая звучала так — «Давай дадим выпускникам пару проектов сверстать, соберем маленькую команду, будем помогать им набираться опыта».

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

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

Академия поставляет нам именно джуниор-программистов, а другие грейды и специальности мы берем с рынка. Из 150 человек у нас около 40 — бухгалтерия, аккаунты, менеджеры, тестировщики, а остальные — разработчики. Из них больше половины — джуны.

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

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

Ну, наверное, импровизация полная — я не учу по бумажке. Рассказываю только то, что на своем опыте прошел. Я особо не делаю фокуса не теории, скорее показываю людям, как то, что они прочитали, применяется на реальных задачах.

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

Такой подход мне близок, и именно из-за него я согласился делать интенсив с wannabe — тут практика лежит в основе программы. Должен быть не просто преподаватель или куратор, который домашку проверяет, а наставник настоящий — он и свои примеры из работы расскажет, и с мотивацией поможет, если надо.

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

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

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

Хочется, чтобы этого не было. Вот ты смотрела «Стражей галактики»? Как нет? Там, короче, Енот говорит: «Ну умрет эта галактика и хрен с ней». А ему отвечают «Я вообще-то в ней живу». У меня ровно такая же ситуация: мне не все равно, как устроена отрасль, в которой я работаю. Хочешь что-то изменить — иди и меняй.

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

Я связываю это с тем, о чем говорил раньше. У Миши в голове была теория, но он не понимал, как переложить ее на рабочие задачи. Когда ты снимаешь у людей этот барьер, сразу становится все просто: «А! Так вот оно, оказывается, для чего нужно было». Оторванная от реальности теория, она ничего не дает, если ты ее не закрепил в реальной жизни. Я так думаю, что, наверное, дело было в этом.

Я не верю в гибридные профессии. Часто встречаю людей, которые год отучились на дизайне, год покопались в коде и говорят, что они эксперты и в том, и другом. Так и хочется ответить: «Не верю!».

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

Тут как раз таки появляется no-code. Он избавляет от всего, что я раньше перечислил: развертки, деплой, система контроля версии. Ты собрал базовые блоки, добавил туда кастомных фичей, застилизовал это по-своему, и у тебя получился готовый продукт без участия разработчика.

Ты можешь интернет-магазин собрать запросто, грубо говоря. Понятно, что есть огромная сфера разработки, которая сложная: банки, сервисы, медиа, и тут далеко на no-code не уедешь.

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

Да, для того, что подключить на сайт онлайн-оплату, сделать аккордеоны, слайдеры, табы, калькулятор, переключатели — нужно минимальное знание кода. Ты пишешь его, вставляешь в Webflow, и значительно расширяешь тем самым возможности платформы.