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

Как появилось ваше бюро, чем вы занимались до этого?

Четыре года назад я ушел с работы из Живого Журнала и открыл свое небольшое проектное бюро, Багет. Название совмещает мою любовь к Парижу и вкусному багету, с намеком на багет как обрамление для работы.

До ЖЖ я работал дизайнером с разными компаниями, выездным компьютерным мастером, писал новости в журнале «Огонёк», был менеджером в Студии Лебедева, и даже три дня волонтером в Гринпис.

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

За 4 года мы успели поработать с проектом по развитию велокультуры Let’s Bike It! (первый сайт сделали еще в 2010 году, а недавно выпустили редизайн), Местной едой, издателем и тренером по триатлону Михаилом Ивановым, фотографом Сашей Уткиным, редактором Сергеем Королем, дизайнером витрин Еленой Захаровой, конференцией «Серебро набора», шрифтовой студией Brownfox. Сейчас работаем над амбициозным опен-сорс загрузчиком файлов, Uppy (cute as a puppy), с берлинской компанией Transloadit.

Расскажите, как строится работа над проектом?

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

2. Дальше обсуждаем, что нужно сделать. На этом этапе важно быть максимально честным, но при этом не перегружать клиента выбором и лишней информацией. Мы рассказываем, что вообще-то вполне можно обойтись без того, зачем к нам пришли — свой блог сделать бесплатно на Медиуме, промо-страницу сверстать на Редимаге или Тильде, вместо приложения в Апп сторе запустить бота в Телеграме. Говорим, чем это хорошо: условно бесплатно, не нужно думать про хостинг, можно делать самому именно так, как хочется. И чем плохо: привязанность к сервису (может закрыться, поменять функции или тариф в любой момент), выше ежемесячная плата (чем у shared-хостинга или VPS за $5), можно упереться в потолок платформы — нельзя будет реализовать какие-то идеи и забрать с собой своей контент. Подробнее хорошо написала в своем обзоре Алёна Дорохина.

3. Составляем договор (на основе предыдущих, короткий, на 3 страницы), так, чтобы учитывались интересы обеих сторон, и юристы ни с какой стороны не пытались, как бы это мягче сказать, обмануть и провести свои интересы. За редким исключением не подписываем никакие NDA, указываем в договоре, что о проекте можно рассказывать и добавлять его в портфолио.

   Вся работа делится на этапы, в среднем их два-три, но зависит от сложности проекта. Мы берем полную предоплату по этапу — если проект стоит 150 000 рублей, то первый этап — 50, и оплачивается он до начала работы. Если все идет хорошо, этап признаем завершенным, переходим к следующему, тоже с предоплатой. Прописываем, что в стоимость включена возможность один раз существенно переделать дизайн, если он не подошел, но только на первом этапе.

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

4. Cобираем материалы. Распространенная ошибка — думать, что это можно «потом». На самом деле содержание — тексты, подписи, иллюстрации, логотип — определяет дизайн и структуру.

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

   Дизайнерам предоставляется свобода, но есть важные пожелания: выкинуть фотошоп и делать все в любом нормальном векторном редакторе (это самое сложное), предоставлять все логотипы и графику, которую нельзя сверстать в коде, в векторном формате SVG (а в крайнем случае PNG), не отрисовывать все страницы подряд, а проектировать блоки и элементы, которые могут быть использованы в любом месте интерфейса, и помнить, что эти элементы должны хорошо вести себя при любом разрешении экрана. Hover is Over — всегда думаем про смартфоны и планшеты.

6. Фронтенд разработка, верстка и бекенд. Для большинства сайтов в классическом понимании — блогов, визиток, информационных ресурсов — используем WordPress. Другой CMS, которая так же хорошо работает, устанавливается на любой недорогой хостинг и несложно расширяется, я не знаю. Для проектов сложнее бекенд пишется на Rails или Node.js (если бот, например, или API).

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

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

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

С кем вы обычно работаете?

Я люблю работать с инди- дизайнерами одежды, кулинарами, велоактивистами, блогерами и всеми, кому близок по духу фестиваль XOXO в Портленде (даже если они об этом еще не знают).

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

Расскажите про курс. Для кого он, чему удается научить за четыре дня? И классический вопрос: нужно ли дизайнерам уметь программировать?

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

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

Оказалось, да. Как я и хотел, записались разные люди, которые работают в индустрии, часто ставят задачи разработчикам, но не очень понимают, как все устроено. За четыре дня — по два выходных и рабочая неделя между ними, с домашними заданиями — мы разбираемся, что веб-страница состоит из компонентов — HTML, CSS и JavaScript — учимся разметке, говорим про семантику.

Пробуем «дизайн в браузере» — подход, который я сам использую в работе — вместо Фотошопа макет будущего сайта придумывается сразу в браузере. Это дает возможность запустить проект быстрее. Раз, раз — и в продакшен.

В итоге получается сделать несколько простых страниц (простите, «лендингов»), кнопку заказа товара, чат-робота и, например, страницу с расписанием рейсов аэропорта Рейкьявика.

Какие у вас хобби?

Не делю работу и хобби. Перед сном смотрю выступления с CSS Conf, читаю Допплера, Марсианина или код с Гитхаба — для меня это одинаково интересно.

Два года назад на День рождения друзья подарили мне коробку с Ардуино и сенсорами, так я увлекся умным домом (DIY) и чат-ботами. Автоматизировал свет, температуру, сделал сигнализацию на движение, кнопку звонка, которая отправляет сообщение в чат, когда приехала доставка пиццы. Выступил с рассказами на митапах Queens.js и Brooklyn.js в Нью-Йорке, и конференции Nation.js в Вашингтоне.

Кто вдохновляет, за чьими работами следите?

Нравится, что делает студия Charmer — Медуза, сайт Парка Горького (визуально). Jonnie Hallman (Destroytoday) — сайты для Pencil, Casper, личный блог. Camp Quite — портфолио и проекты. Paulo Zoom — The Manual, XOXO. Sara Soueidan — ее блог, выстпления и колонки про SVG.