Псс, дизайнер, хочешь ещё один конструктор для создания сайтов?
Всем привет! На самом деле я сторонюсь сравнений с конструкторами сайтов и ниже расскажу, почему это так. Наш проект — это скорее редактор, позволяющий динамически верстать макеты без кода и генерирующий на выходе оптимизированный продакшн-реди код. В остальном мы ближе к графическим редакторам. Этакий No-Code Pixel Perfect инструмент, где всё нужное под рукой, и где реализовано всё то, чего не хватало в Фигме.
За всё, что мы делаем, отвечаем тоже вместе ©
Для начала несколько слов про нашу команду. Она небольшая, что, конечно же, накладывает свои сложности, но даже в таком формате мы достаточно быстро реализуем наш план и с оптимизмом смотрим в будущее.
Самое время представиться. Меня зовут Витя, занимаюсь дизайном около 12 лет. За это время поработал в разных компаниях. В самом начале пути это был аутсорс. Затем пришел в uKit.Group, а на тот момент uCoz (честно напиши в комментариях, сколько сайтов кланов по контре собрал на юкозе, пока был юн и горяч). Можно сказать, что uKit — это мой первый серьезный продуктовый опыт.
Последние 4 года работаю на позиции арт-директора.
В команде проекта, о котором я сейчас буду говорить, помимо меня всего три человека: два программиста — Рома и Слава, и тестировщик Егор.
Для кого наш проект
Графит — это продукт для профессионалов, а вернее, он для тех, кто уже понимает в дизайне и имеет определенный опыт. Для таких людей он будет максимально полезен. Слишком сильно занижать порог входа мы не стали, потому что все фишки, которые позволяют делать красивые и необычные сайты, требуют скилла.
У нас несколько аудиторных фокусов, один из их — это небольшие дизайн-студии. Также можно выделить дизайнеров-фрилансеров. Мы многое ещё не успели реализовать на текущий момент, но вот именно фрилансерам, создающим сайты-визитки и небольшие сайты до 10–20 страниц, Графит подходит уже сейчас. Он способен удовлетворить многие их потребности в области Pixel Perfect, необычных дизайнов и нетривиальной верстки. Многие макеты из Фигмы можно сверстать почти один в один внутри Графита.
Хорошо там, где нас нет
При выборе рынка мы решили пойти путем, который вписывается в одно утверждение, не нами придуманное. Если ты начинаешь как российский продукт, тебе потом очень сложно вырасти в мировой, и наоборот — начиная с мирового рынка, тебе будет проще потом прийти и в Россию. Поэтому мы сейчас больше смотрим в сторону западной аудитории. Отсюда и выбор дефолтного языка интерфейса — он у нас английский. Наши первые тесты тоже были на западных пользователях.
Наши конкуренты: Фигма, Скетч, Editor X от Wix, Studio.design, Webflow, Readymag, SquareSpace. Аудитория каждого сервиса может найти для себя мотивацию юзать Графит. Наша задача — донести, почему стоит это сделать.
Допустим, человек использует Фигму и Скетч, но не пользуется сайтбилдерами. Такая аудитория для нас привлекательна. Многие дизайнеры не побоюсь этого слова страдают от необходимости работать с верстальщиками. На Хабре про боль дизайнеров было немало статей, и сколько их ещё будет!
Tell me Why
Если описывать наши фичи, то можно отметить, что почти каждая из них так или иначе уже будет знакома дизайнерам, но их синергия в одном инструменте в таком же наборе нигде не встречается, могу говорить об этом уверенно.
I. Сетка
Прежде всего, Графит — это инструмент сетки. Звучит не ново, согласен. Однако в нашем случае сетка представляет собой визуальный инструмент автоматической верстки, который ломает для дизайнера барьер между кодом и графикой. Сетка внутри Графита объединяет два способа расположения элементов: непосредственно по сетке и свободное позиционирование. Поэтому мы называем её гибридной.
Любая конструкция, собранная в Графите, по умолчанию адаптивна: добавляйте в контейнеры элементы по координатам, не думая о том, что случится при входе с мобильного устройства.
Дополнительную гибкость при сборке макетов дает стек. Конструкции любой вложенности создаются прямо с холста, при этом можно реализовать любые возможности современного CSS и Flexbox.
Наша сетка настраиваемая: самостоятельно устанавливайте количество колонок, межколонный интервал, ширину и отступы у контейнера. Элементы сайта сами адаптируются под изменения каждого параметра.
II. Панель слоев
Для удобства дизайнеров управлять структурой сайта можно с помощью панели слоев, реализованной по аналогии с привычными графическими редакторами.
Что мы привнесли от себя:
- в списке слоев отображается структура сетки
- элементы со свободной позицией помечаются специальной иконкой
- элементы сетки сортируются по правилам, позволяя сохранить правильную структуру сайта
III. Дизайн-система
В Графите она рождается, живет и развивается вместе с сайтом. Это позволяет поддерживать и развивать дизайн-систему с минимальными затратами.
Что это дает:
- можно перекрасить сайт целиком в один клик, либо изменить цвет отдельных элементов или контейнеров
- управление всей типографикой происходит в режиме одного окна
- есть возможность настроить собственные переменные и наследовать их в любой момент в любом проекте
- каждую часть дизайн-системы можно заменить, используя механизм пресетов
IV. Визуальные компоненты
Эта функция пока только находится в разработке. Она позволит создавать компоненты из комбинации элементов сайта и переиспользовать их в дальнейшем. Механизм работы будет похож на реализацию компонентов (или символов) в графических редакторах.
С помощью компонентов можно будет, например, создать шаблон шапки или карточки и редактировать их в одном месте.
Что ещё?
Я бы особенно выделил нашу концепцию работы с марджинами. Если ты кликнешь в элемент и наведешь на его край, там появится маленькая палочка. Потянув за неё, ты увеличишь или сократишь внешний отступ. Опция простая и далеко не новая, но в сеточной инфраструктуре она имеет важное значение. Это позволяет работать с пустым пространством. Для дизайнеров это важно. Именно контраст между пустым пространством и контентом формирует ощущение от макета.
Подкапотное пространство
На самом деле в Графите есть множество других мини-фич, но про них мы наверное расскажем в следующем посте, который будет техническим. А пока, для затравки, чтобы порадовать не только дизайнеров, но и технарей, напишу небольшой абзац про технологии, на которых работает Графит.
Фронт: Lerna, React, Redux, Emotion (SPA), Flow, Prettier, Unit testing, Gitlab CI, Babel, Webpack, Sentry.
Бэк: Node.JS, Nest.JS, MongoDB, Firestore, Nginx + LUA, PM2, RabbitMQ, Docker, Dockerswarm, Grafana, Fluentd, Kibana.
О том, как мы всё это готовим и с какими трудностями сталкиваемся — уже в следующем посте. Буду рад вашим вопросам!
