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

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

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

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

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

Привет! Расскажи в паре слов о себе, своем опыте и о том, что тебя сподвигло к созданию Graphite?

Если коротко о себе, то занимаюсь дизайном около 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?

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

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

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

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

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

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

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

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

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

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

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

Если звучит фраза «конструктор сайтов», многие дизайнеры склонны «фекать». Это зашквар. «Шо, опять?», — как в том мультике советском про волка и собаку.

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

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

Кстати, неплохо звучит! Только уточни, No-Code или Low-Code? Насколько чистый код получается на выходе, если его не трогать самому?

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

Ну и человек потом не привязан к Графиту, получается? Собрал сайт, скачал, и ничто не обязывает больше поддерживать свой аккаунт?

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

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

Давай вернемся к фичам. Что есть помимо удобной сетки?

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

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

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

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

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

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

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

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

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

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

  1. Сетка как таковая, которую можно настроить под себя.

  2. Её интеграция с абсолютным позиционированием, то что мы сами называем гибридной сеткой.
  3. Flexbox-контейнеры, которые создаются прямо с холста, и у которых есть все те возможности, которые дает CSS и flexbox.

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

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

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

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

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

Это позволяет работать с пустым пространством. Для дизайнеров это важно. Именно контраст между пустым пространством и контентом формирует ощущение от макета.

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

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

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

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

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

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

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

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

Давай в конце ещё раз про общую концепцию. Запоминается, как известно, последнее. Зачем людям Графит?

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

Какие ближайшие продуктовые планы?

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

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

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

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

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

Забыл спросить, а сколько человек сейчас в команде помимо тебя?

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

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

3030
16 комментариев

Привет, Сергей, спасибо за вопрос!

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

Как сейчас мы представляем схему работы:
– собираем страничку на Графит и поднимаем Wordpess на домене
– подключаем WP к Графит и привязываем элементы сайта к полям данным WP
– будет несколько виджетов позволяющих создавать ленты новостей, блоги, категории и другие динамические списки
– когда вносим изменения в контент на WP, сайт на Графит будет переопубликован

Здесь Графит будет работать как генератор статических HTML страниц, а WP выступать в роли Headless CMS. То есть с базой ничего делать не нужно, нужен просто работающий сайт на WP. Но повторюсь, пока мы эту функцию только планируем и изучаем спрос на нее.

UPD промазал с ответом)

5
Ответить

Комментарий недоступен

Ответить

Не понятно для чего получать на выходе код, который потом неудобно редактировать? Как потом вёрстку с таким кодом на реальный функционал натягивать? Никак? Или функционал и не предусмотрен, потому что сайт чисто визитка?

2
Ответить

Привет! Спасибо за вопрос) Редактировать код руками – это то, от чего команде Графита хочется по возможности уйти, чтобы дизайнер делал то, что ему нравится, и не становился сам верстальщиком. При этом давал клиенту готовый сайт, а не макет.

Наверное так можно ответить на ваш вопрос, если в двух словах)

Ну и вторая сторона медали – такой код оптимизирован под супер-быструю загрузку.

p.s. для функционала по плану работа с Headless CMS

1
Ответить

Дизайн футболки уже все сказал за этого дизайнера.

Ответить

Cпасибо что обратили внимание! Там было продолжение, пришлось обрезать под формат фото)
Маленькая внутриотраслевая ирония.

5
Ответить

А почему из Фигмы сразу через плагин Anima вёрстку не получить? Это же удобнее. Или я чего-то не понял?

Ответить