Как стать автором
Обновить
3
0
Виктор Кадников @followsummer

UI/UX дизайнер

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

Проблема на видео возникла из-за отрицательного правого отступа (margin) у прямоугольника. Когда у маленького элемента большой отрицательный отступ, то браузер считает его ширину слишком маленькой, и не получается его выделить. Во второй части вашего видео пунктирной линией показана зона, которую создают отступы.

А корень проблемы действительно растет в UX. Если элемент в сетке выбран, то при наведении на его стороны появляется полоска, которая позволяет редактировать отступ. Если элемент выровнян влево (по умолчанию прямоугольник и кнопка имеют такое выравнивание), то направление ресайза именно правого отступа инвертируется, и можно незаметно для себя сделать отступ отрицательным. В наших дальнейших планах – улучшения опыта ресайза, которые позволят избежать таких ситуаций.

И ответы на вопросы:

– Адаптивность в сетке настраивать просто – элементы сами подстроятся под брейкпоинты, остается донастроить отступы и размеры. Абсолютно спозиционированные элементы нужно подвигать руками, но благодаря привязкам к разным сторонам (аналог Constratints из Фигмы) можно упростить себе жизнь. Здесь можно увидеть настройку мобильной версии, с 2:53. Осторожно, видео ускорено, макет в начале.

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

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

– Текстовые стили можно создавать и применять.
Выход пока только под веб. О мобильных приложениях задумывались, но в совсем далеких планах. Под Vue.js пока не планируем.
Если говорить про сайты, то мы сильно больше ориентированы на production код и специфику сайтостроения. Тут несколько важных моментов:
– мы предоставляем комплекс инструментов, которые упрощают жизнь веб-дизайнеру и позволяют делать быстрее рутинные вещи
– на выходе мы отдаем статические страницы, которые сразу готовы к загрузке на хостинг и индексации поисковиками, не нужно тратить время на их дополнительную подготовку
– наши nocode инструменты ближе к динамической и адаптивной природе веба, и дают дизайнерам воспользоваться возможностями CSS во всей полноте

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

Но если говорить про сложные и крупные веб-приложения или мобильные приложения, над которыми работают кросс-функциональные команды, то здесь Framer будет полезнее.
С точки зрения конечного результата – да.
Процесс будет отличаться, потому что инструмент проектировался в первую очередь для дизайнеров и дает им более комфортную среду.

API для скачивания пока что не предусмотрено.
Спасибо что сообщили! Баг пофиксим.
Сейчас рекомендуем пробовать редактор на десктопе, потому что опыт сборки проектировали прежде всего под него. На всякий случай уточню, публикуемые сайты будут адаптироваться под все девайсы.
Результат работы можно опубликовать на предлагаемый нами хостинг и прикрепить свой домен. Или сохранить как HTML/CSS файл и разместить на своем хостинге.
Спасибо за пожелания проекту! :)
Привет! К тильде мы относимся с большим уважением (и к webflow, как я писал в комментарии выше, да и к другим редакторам тоже), они сильно изменили отношение к дизайну в конструкторах в лучшую сторону.

Из того на что стоит обратить внимание у нас:
– Весь сайт редактируется на одном холсте, целиком. Не нужно переходить в отдельный интерфейс, чтобы отредактировать конкретный блок.
– Помимо абсолютного позиционирования по координатам, у нас есть позиционирование в сетке, которе напоминает Auto-layout в Figma, только с большими возможностями. Изменение размеров элементов, их позиции или контента влияет на все нижележащие элементы – их не нужно двигать руками, макет подстроится сам. Делать адаптивные макеты, использую сетку, получается проще и быстрее.
– Как продолжение функций сетки, есть виджет Container (похож на микс Frame из Figma и CSS модели flexbox). В контейнер можно добавить несколько элементов, и одной кнопкой менять направление их расположения (колонка/строка), горизонтальное и вертикальное выравнивание. Контейнеры можно вкладывать друг в друга, что позволяет создавать сложные адаптивные конструкции.
– Инструменты управления дизайн-системой. Можно создавать и редактировать в одном месте переменные цветов, темы, шрифтовые стили, скругления и бордеры.
– Функция Variants позволяет менять внешний вид кнопок (и любых других элементов) сразу и одновременно на всем сайте.
Привет! Webflow – безусловно, отличный продукт, и позволяет закрыть очень многие боли дизайнеров и разработчиков.

Но одной из важных идей при создании Графит было – “а что если создавать сайты в конструкторе будет так же просто как в графическом редакторе?”. Мы хотели дать дизайнерам похожие инструменты для творчества, для быстрого создания и проверки итераций дизайна, и чтобы при этом не нужно было глубоко знать HTML/CSS.


Поэтому наше основное отличие в фокусе на визуальном редактировании и творчестве, а Webflow больше про верстку и код (на наш скромный взгляд):
– У нас невысокий порог входа и можно создавать сайты почти не зная HTML/CSS.
– Размеры элементов, их отступы, создание базовой структуры сетки доступны в Графит как визуальные инструменты, прямо на холсте.

– В Графит более простой и понятный интерфейс: у нас меньше настроек, чем в Webflow, но при этом можно создавать макеты похожей сложности. Мы постарались вынести на первый уровень интерфейса самые важные для дизайнера настройки.
– Графит предлагает более привычный для графических редакторов подход к дизайн-системе и визуализации в целом, а также позволяет использовать в работе уже знакомые инструменты и методики из популярных графических редакторов.

В целом, если вы дизайнер или вам больше нравится визуальное редактирование, чем работа с кодом, то вы точно найдете для себя интересные функции. По крайней мере, мы на это рассчитываем :)
Привет! Спасибо за интерес к нашему продукту, и в особенности – за то, что задали очень важный для этапа знакомства с продуктом вопрос.

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

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

Что касается «планируемых прайсов» – тут честно признаюсь, что на данном этапе мы так далеко стараемся не загадывать. Это не значит, что мы вовсе не имеем никаких долгосрочных планов, но на данном этапе развития продукта каких-то конкретных чисел я назвать, увы, не смогу. Сейчас для нас фидбек от реальных пользователей ценнее всего. Но повторюсь: если мы будем вводить платные тарифы, это не будет внезапной историей для наших пользователей.

Я не прошу верить мне на слово – позвольте нам завоевать ваше доверие постепенно :) Возможно, вам будет удобно перенести в Графит всего один своей проект, и со временем уже решить, стоит ли переезжать из Фигмы целиком. Вполне вероятно, что к тому моменту вопрос с платными тарифами уже станет для пользователей более прогнозируемым, и все опасения развеются.
Привет! Спасибо, что попробовали наш редактор и поделились комментарием.

Да, вы совершенно правы, некоторая избыточность в финальном коде сейчас присутствует, в основном как раз в виджете Текст. Обусловлено это тем, что данный код (в силу no-code специфики Графита) сейчас рассчитан в первую очередь не на прочтение людьми, а на улучшение его привлекательности в глазах поисковых роботов, ботов и прочих бездушных машин. Безусловно они тоже смотрят на размер и количество, но не ставят это в приоритет. Хочу сразу заверить, что руками править созданные в Графите странички не требуется: рендеру такая избыточность не мешает, и на качестве/производительности не сказывается.

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

UPD: промазал ответом к комментарию ниже)
Спасибо за интерес к проекту и обратную связь!

Действительно – контраст слишком сильным получился.
Мы сейчас активно работаем над тем, чтобы сделать интерфейс редактора не только удобным и функциональным, но еще и комфортным для глаз пользователя. В списке задач есть, в том числе, и настройка темы всего приложения (темная/светлая) и цвета отдельных частей интерфейса – например, фона холста или подсветки сетки.

Еще раз спасибо, что попробовали наш редактор и даже помогли его улучшить :)

Информация

В рейтинге
Не участвует
Откуда
Ростов-на-Дону, Ростовская обл., Россия
Дата рождения
Зарегистрирован
Активность