Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:
Серёжа Захаров: «Между дизайном и разработкой — выученный антагонизм»

Веб-разработчик о важности коннекшена, силе опенсорса и разнообразии кодинга.

card-photo
card-photo
Маша Короткевич

автор в SKVOT

Серёжа Захаров — веб-разработчик, который любит, чтобы крутой дизайн круто работал. 

Раньше он создавал сайты для проектов Института «Стрелка», а сейчас вместе со своей partner in crime, дизайнером Таней Ермолаевой, начали вести свою независимую практику. Их тандем доказывает: художники и разрабы могут отлично коннектиться.

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

 

Как ты выбирал специальность?

Информатика и программирование нравились мне ещё в школе. Там быстрый отклик: пишешь программу, она тут же выполняется — видишь результат. Меня это бодрило и мотивировало.

Плюс мне оказался близок подход нашего преподавателя информатики, который просто давал базовую теорию, ставил задачу и говорил: «Решайте, как хотите». Можно было искать готовое решение в интернете или списывать у соседа (если ты понял, как он это сделал) — лишь бы задача была решена. Очень похоже на реальную жизнь.

После школы я поступил на факультет «Бизнес-информатики» в НИУ ВШЭ. Тогда я не планировал заниматься разработкой профессионально, но хотел, чтобы мое образование было связано с информационными технологиями и не было сугубо техническим.

Мне больше всего нравились предметы, связанные с программированием. Были интересные курсы по дискретной математике, теории вероятности, эконометрике и теории систем — все они находят прикладное применение в IT. Управленческая и экономическая часть меня почти не интересовала.

Какой была твоя первая работа?

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

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

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

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

А когда ты начал заниматься веб-разработкой?

После работы в НИИ меня наняла частная музыкальная школа — сделать CRM-систему для учета клиентов, занятий, договоров и оплат. Это и был мой первый веб-проект.

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

Как ты начал работать со «Стрелкой»?

В 2017 году мне нужно было срочно устроиться на работу. Выбор быстро сузился до двух мест: кипрская компания, связанная с биржевой торговлей, и институт «Стрелка». Делать веб для биржи было гипотетически интересной задачей (много данных, графики, real-time), но идеологически не близкой. А «Стрелка» подходила по духу — и я выбрал ее.

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

Еще для школы разработки мобильных приложений Vector и Samsung мы создали промосайт. Это был наш первый эксперимент, который мы сделали за две недели — он получился визуально интересным и по-хорошему интерактивным:

Почему многие сайты выглядят одинаково?

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

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

Сказывается и доступность готовых решений. Я говорю о конструкторах сайтов вроде Tilda, которые в своём дефолтном состоянии подталкивают использовать шаблонные варианты. Но не буду порочить добрые имена тех, кто делает конструкторы сайтов: на Readymag, Cargo или Tilda можно собрать красивые и необычные сайты. Всё это — отличные инструменты со своими достоинствами и ограничениями.

Что для сайта первично — дизайн или веб-разработка?

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

Так было в нашем с Таней последнем проекте — Ornamika.live. На основе генеративной айдентики мы программно создали полуслучайные плакаты, которые потом помогали Тане принимать композиционные решения:

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

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

Расскажи, как выстроена ваша с Таней работа.

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

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

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

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

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

Что важно во взаимодействии дизайнера и разработчика?

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

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

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

Тебе нравится, когда «веб-разработка соприкасается с математикой». Когда это бывает?

Математика закрадывается в мою работу редко. Бывает, нужна базовая тригонометрия: нарисовать синусоиду, рассчитать наклон стрелки, расстояние от точки до точки. Но даже эти редкие моменты — большое удовольствие.

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

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

Чтобы нарисовать в WebGL что-то интересное, математика практически не нужна. Но чем лучше ты её знаешь, тем больше возможностей и свободы. Например, чтобы сделать эффект плавно текущего тумана для нашего с Таней проекта Automatic Writing, нужно было написать шейдер (программу на языке GLSL, выполняемую на видеокарте с помощью WebGL) и разобраться в том, как работает fractional brownian motion:

Параллельно с шейдерами я осваиваю создание 3D в браузере — оно тоже работает на WebGL.

То есть ты создаешь 3D программными средствами, без 3D-редактора?

Да, отличное определение. А бывает, что я отрисовываю модель, созданную дизайнером в 3D-редакторе, и анимирую ее или делаю интерактивной: чтобы пользователь мог взаимодействовать с ней в браузере.

Возникновение этих технологий — технический тренд или запрос рынка?

Сложно ответить однозначно. Браузеры эволюционируют, появляются новые технические возможности. Всё больше людей узнают, что в браузере можно делать интерактивное 3D, запускать нейросети, работать с VR/AR или запускать код из браузера на видеокарте.

Мы перестаем быть ограничены вебом как плоским медиумом. Хоть у веб-страниц «документная» история, сейчас всё чаще им добавляют третье измерение — чтобы пользователь мог взаимодействовать с 3D-объектами и пространствами.

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

Есть проекты, которые ты уже создал с использованием такого 3D?

Сайт для студии моих друзей Electric Red. Я сделал его вместе с моим другом Ваней Гришиным. 3D-модель на главной странице можно крутить мышкой или свайпом на телефоне. Сейчас там промо нового шрифта, а вообще можно поставить любую модель:

Крутящийся объект посередине сайта — достаточно шаблонный прием использования 3D в вебе, хотя даже это мне нравится визуально. Многое зависит от самой модели. Например, модель Electric Red с новым шрифтом создаёт эффект того, что ты полностью окружен ею, находишься в ней и можешь осмотреть ее изнутри. Это выглядит классно.

Сейчас я работаю над другим проектом, где помимо самих 3D объектов будет симулироваться их физика: на объекты действует гравитация, они сталкиваются друг с другом.

Какой проект был для тебя самым большим челленджем?

Самым сложным был сайт для конференции In the city. Его делали Таня, я, Ваня Гришин, а менеджером был Максим Родионов. На тот момент это был самый экспериментальный сайт, который мы создавали. Его зафичерили все агрегаторы странных сайтов (например, hoverstat.es или hallo.inter). 

In the city — конференция о пересечении урбанизма и информационных технологий. Поэтому дизайн сайта концептуально основан на навигации, картах и атласах — это урбанистическая составляющая, а бегущие стены текста, декоративные графики — это про данные и технологии:

 

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

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

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

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

Есть проекты, чьим разработчикам ты позавидовал?

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

Например, сайт Neuhaus студии Moniker, book.land студии Twomuch и Color Push, который делал Зак Либерман. Как видно из этого списка, мне интересны проекты, основанные на коллаборации между пользователями и связанные с творчеством.

Есть разница между российскими и международными заказчиками?

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

Я делал один проект для зарубежного заказчика — шрифтовой студии из Франции Black Foundry. Это промосайт для вариативного шрифта, созданного в их студии. Работа была трудоемкая, и они захотели сделать для шрифта запоминающийся, необычный сайт с анимированной типографикой. Даже заказали музыку для каждой темы на сайте. 

Веб-тренды в мире и на постсоветском пространстве отличаются?

В IT обмен информацией происходит очень быстро, поэтому глобальные и локальные тренды не сильно разнятся. Best practices перенимаются очень быстро. Выгодно постоянно учиться, потому что в итоге это облегчает работу.

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

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

Где ты ищешь идеи и вдохновение?

В твиттере. Я подписан и на лидеров индустрии, и просто на людей, которые делают что-то интересное — в основном занимаются creative coding. По сути, это любая творческая практика, в которой используется программирование: что-то визуальное, музыка или манипуляции с текстом — даже генеративные 3D-модели для печати. Лично мне больше всего интересна компьютерная графика, рисование с помощью алгоритмов.

Посмотреть курс

В каких направлениях ты сам развиваешься?

Я уже упоминал WebGL. В прошлом месяце я участвовал в двух онлайн-воркшопах по шейдерам, время от времени читаю книгу The Book of Shaders.

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

Какому человеку стоит идти в веб-разработку?

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

Индустрия очень хорошо развита, в вебе есть куча материалов. В сообществах (больших, как dev.to, и узконаправленных) можно задать вопрос, показать свою работу и получить поддержку.

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

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

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

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

Поделиться материалом
РАССЫЛКА SKVOT

Раз в две недели мы отправляем новые публикации и анонсы курсов на почту