«Для дизайнера важна работа с пустым пространством», — интервью с Виктором Кадниковым, создателем Graphite

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

Короткая предыстория. Мы с Витей знакомы достаточно давно: без малого уже 7 лет работаем в одной компании, пусть и в разных городах — Витя территориально в Ростове, а я в Санкт-Петербурге. Текст ниже — выжимка из полуторачасового интервью, которое мы записали около трех недель назад.

Для полноты рассказа про предпосылки рождения проекта Graphite и задачи, которые он способен решать, мы заранее условились, что общаемся в формате «first met» — будто друг друга впервые видим.

Если коротко о себе, то занимаюсь дизайном около 12 лет. За это время поработал в разных компаниях. В самом начале пути это был аутсорс. Затем пришел в uKit.Group, а на тот момент uCoz. Можно сказать, это мой первый серьезный продуктовый опыт. Работаю здесь уже 7 лет, из которых последние 4 года — на позиции арт-директора. То есть, такой чувак, который сначала интересовался тем, как рисовать сайты, потом пришел к пониманию, что это не просто картинки, а вещи, которые должны работать. Когда появилось это понимание, стал прокачивать свои навыки и дорос до продуктового дизайнера и арт-директора. Как-то так получилось.

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

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

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

Да, это продукт для профессионалов, а вернее, он для тех, кто уже понимает в дизайне и имеет определенный опыт. Для таких людей он будет максимально полезен, скажем так. Остальным подходит тот же uKit или Tilda.

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

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

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

Да, соглашусь.

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

В целом, говоря про аудиторию, наш основной фокус сейчас — это дизайнеры-фрилансеры. Мы многое ещё не успели реализовать на текущий момент, но вот именно фрилансерам, создающим лендинги и небольшие сайты-визитки до 10-20 страниц, Графит подходит уже сейчас. Он способен удовлетворить многие их потребности в области Pixel Perfect, необычных дизайнов и нетривиальной верстки. Многие макеты из Фигмы можно сверстать один в один внутри Графита.

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

Здесь мы решили пойти путем, который вписывается в одно утверждение, не нами придуманное.

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

Изначально нами рисовалось так: это может быть аудитория графических редакторов — Фигма, Скетч, а также аудитория существующих конструкторов сайтов, которая сейчас стала агрегировать вокруг себя профессионалов. Мы тестируем различные варианты. Признаюсь, пока с графическими редакторами всё не так ясно и очевидно, как это нам казалось. Когда мы говорим человеку, что у нас получился графический редактор наподобие Фигмы с продакшн-реди кодом, нас не совсем понимают. Видимо, в настоящий момент мы ближе к аудитории конструкторов сайтов, поэтому явно противопоставлять себя Фигме не выглядит правильным. Но мы ещё в процессе выяснения (улыбается).

Среди конкурентов я бы обязательно выделил Editor X от Wix, Studio.design и Webflow. Если брать именно концепцию и весь набор фич, который мы хотим предложить, то конкурентов не так много. С одной стороны кажется, что это хорошо.

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

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

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

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

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

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

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

Начну, наверное, всё же с общего представления. Прежде всего, Graphite — это инструмент работы с сеткой. uKit в момент своего появления этим от многих отличался тоже. В Graphite мы переосмыслили многие моменты. Учли минусы, про которые узнали в процессе изучения пользовательского опыта.

Исторически так называемая сеточная верстка появилась давно: первые фреймворки это что-то в районе 10-х годов или даже раньше. Особенную популярность они приобрели с появлением Bootstrap, который включал один из таких сеточных фреймворков. Назывался он 960.gs. Этот набор CSS-классов позволял легко выстраивать структуры из нескольких строк и колонок и делать их адаптивными.

Если ещё чуть глубже копнуть, то есть такое свойство CSS, как position: static. Когда ты располагаешь элемент на странице, и он сразу вписывается в границы контейнера. При этом элемент, лежащий ниже в странице, будет сдвигаться при росте верхнего. В итоге все элементы на странице находятся в неком flow, и веб-страница рисует последовательно один элемент за другим.

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

А теперь к фичам. Рассказываю, чего мы сделали с сеткой в Графите.

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

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

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

Или, если хочешь, No-Code Pixel Perfect инструмент для дизайнеров.

No-Code, полученный html можно сразу заливать к себе на хостинг.

Этот вопрос для нас пока не совсем ясный. Сейчас это всё выглядит именно так, как ты описал: собираешь макет, сохраняешь html и можешь делать с ним всё что захочешь. Правда у нас этот html на данный момент не очень предназначен для ручного редактирования. Если захочешь что-то подверстать в редакторе, это будет проблематично. Зато этот код максимально оптимизирован.

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

Кстати, я же про сетку ещё не всё рассказал (смеется). Итак, у нас можно настроить все параметры сетки. Затем прямо на холсте дизайнер создает колонки и собирает их в строки. У колонок можно настраивать ширину и отступы, которые в свою очередь привязываются к параметрам сетки. После этого в колонки добавляется содержимое: текст, картинки, кнопки. Таким образом дизайнер формирует базовую структуру блока.

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

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

Отмечу, что этот подход, когда один элемент влияет на другой, представлен в Фигме и называется Auto Layout. Однако у нас этот Auto Layout сделан таким, каким он должен быть для веб-среды, и в соответствии с тем, как обычно верстаются веб-странички. Плюс адаптивные настройки: у нас это может жить на всех экранах.

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

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

Если резюмировать, то в Графите прямо сейчас есть:

Да, всё именно так. Есть полный контроль над адаптивным поведением.

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

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

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

Добавлю про мини-фичи. У нас есть панель слоев. Это уже близкая история для тех, кто работает в Фигме. Если не хочется таскать какие-то элементы через холст, можно это сделать с помощью панели слоев.

Есть интересное решение для управления кратностью отступов. Помимо того, что любой отступ можно задать в пикселях, дизайнер может настроить так называемый юнит или микромодуль. Обычно происходит как: для удобства верстальщика дизайнеры делают все отступы кратными четырем или двум, используют 8px, 16px, 24px, 48px, 96px и так далее. У нас помимо привязки к пикселю можно настроить свой микромодуль. Допустим, сделать его 10px. Тогда отступ в 40px будет равен четырем микромодулям. На холсте тоже всё будет ресайзиться с нужным шагом. Никаких тебе больше игр в пиксель-хантинг.

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

Ещё в дизайн-системе у нас есть такая штука как варианты. Это возможность синхронизировать внешний вид разных элементов.

Скоро выкатим анимации. Тут нет никакого инсайда, мы здесь делаем основные вещи, которые есть в других конструкторах. Однако все эти штуки будут жить в сетке, а это дает новые интересные возможности.

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

Из того, что для нас очень важно, это интеграция с Headless CMS. Надеюсь, что скоро мы это реализуем. Направление JAMstack сейчас популярно.

Пока точно не знаю, какую именно CMS мы подключим. Мы на стадии выбора. Может это будет Strapi, может старый добрый WordPress, который тоже может работать в режиме Headless CMS. Возможно, это будет какая-то штука вроде Airtable, или даже обычный Google Sheets.

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

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

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

У нас супер-мини-команда: помимо меня задействованы два разработчика и тестировщик. На всё рук, если честно, не хватает, но мы стараемся. Хотелось бы в дальнейшем расширить команду, но пока так.

На момент публикации этого материала ребята активно ищут фронтендера в свою команду. Если вы как раз такой, велкам в комментарии или в ЛС :)