Альтернатива Тильде и российский аналог Webflow: зачем мы делаем новый конструктор сайтов

Привет! Я Игорь Литвинцев, продакт менеджер Taptop — no-code платформы для создания сайтов. Мы делаем Taptop, чтобы веб-дизайнеры могли верстать сайты на уровне профи, а не просто собирать из блоков. Расскажу, зачем мы решили выпустить на рынок новый конструктор, как развиваем продукт и почему Taptop — эффективный инструмент для веб-студий и фрилансеров.

Альтернатива Тильде и российский аналог Webflow: зачем мы делаем новый конструктор сайтов

Как возникла идея

Всё довольно банально — Taptop вырос из внутреннего сервиса крупной веб-студии «Мегагрупп». В 2010-2018 рынок интернета был на взлете, и стало сложно справляться с потоком заказов. Стандартная схема «дизайнер – верстальщик – разработчик» съедала слишком много времени и ресурсов. А нам нужно было создавать где-то 1000 сайтов в месяц и поддерживать более 40 000 проектов. Хотелось ускорить процессы, разгрузить программистов и передать верстку дизайнерам.

Почему не взяли какой-нибудь готовый конструктор сайтов

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

Нам нужен был инструмент, который позволял:

  • быстро собирать сайты силами дизайнеров;
  • детально кастомизировать дизайн, делать pixel perfect и нормальный адаптив;
  • получать на выходе качественные и быстрые сайты с хорошим кодом.

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

Думаете, мы на этом успокоились? Нет, конечно😉 Пришла новая идея — а что если сделать подобный продукт для внешнего рынка — для веб-дизайнеров и студий. И понеслось…

Начало Taptop

Так появился проект конструктора сайтов Taptop. Его основа — наш внутренний сервис, но многое допиливали с учетом требований рынка и фидбека дизайнеров. Старались сделать удобный для дизайнеров интерфейс, использовали понятные им инструменты. Получилось даже немного похоже на Фигму. При этом мы максимально приблизили визуальное создание сайта к профессиональной верстке, используя терминологию из html и css.

В 2021 выпустили первую версию продукта и продолжали дорабатывать и тестировать внутри компании.

Одна из первых версий Taptop
Одна из первых версий Taptop

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

Выход на рынок

Разработав базовые фичи (шаблоны, библиотеки компонентов, экспорт кода и т.п.), мы поняли, что настало время для публичного доступа к продукту. Тем более, что в 2022 рынок no-code немного поредел — пользоваться зарубежными сервисами в России стало сложнее. Так что у нас появилось конкурентное преимущество по сравнению с Webflow.

Итак, в 2023 Taptop вышел в свет. Сначала с бесплатным доступом, потом добавили платные тарифы — для хостинга и для командной работы.

Короткий ролик о платформе Taptop

На этом этапе пул задач вырос — теперь это была не только разработка. Мы начали создавать обучающий контент, вести соцсети, проводить вебинары и помогать клиентам в работе. Сделали более информативный сайт и завели блог.

И конечно, мы продолжаем развивать функционал платформы. За последнее время сделали много нового: улучшение интерфейса, дополнительные виджеты, анимации, интеграции и другие полезности. Дальше расскажу, что сейчас представляет из себя Taptop.

В чем особенность платформы Taptop

Некоторые называют Taptop российским аналогом Webflow. И хотя Taptop гораздо моложе и еще отстает от Webflow по возможностям, у них действительно много общего. Главное — это похожий принцип создания сайтов — в основе четкие правила верстки и язык браузера, а не язык графики.

Taptop — это не обычный блочный конструктор с drag&drop, это скорее визуальная среда для разработки сайтов. Дизайнер не просто рисует на холсте редактора. Он собирает сайт по всем стандартам верстки, выстраивая структуру страницы и определяя css-стили элементов. Taptop напрямую переводит эти настройки в код, без добавления лишних структурных элементов и дополнительных наворотов.

Что это дает?

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

Главные фишки верстки в Taptop

Коротко о возможностях верстки и их практической пользе:

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

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

  • Например, в Zero-блоке Тильды дизайнер может расставлять элементы в любых местах — они прикрепляются к абсолютным координатам по x и y.
  • В Taptop дизайнер создает блок с авто-лейаутом, добавляет туда элементы и настраивает параметры выравнивание, отступы, перенос и т.д. — расположение элементов происходит автоматически, без ручной расстановки.

Почему это эффективно? Меньше ручной работы, больше автоматизации — создавать и обновлять сайты можно гораздо быстрее. А еще сильно ускоряется процесс адаптации страниц — не нужно перетаскивать элементы руками, они перераспределяются в блоке автоматически при изменении размеров экрана. Кто пробовал адаптировать многостраничный сайт на Zero-блоках в Тильде, тот поймет, в чем разница😱

Пример адаптации блока

— Много полезных инструментов для автоматизации и ускорения верстки:

  • Классы — для многократного использования повторяющихся стилей и создания гибких дизайн-систем.
  • Компоненты и библиотеки — для хранения и переиспользования готовых элементов дизайна.
  • Относительные единицы измерения (%, em, rem, vw, vh) — для гибкой адаптации размеров и отступов в зависимости от ширины и высоты экрана, а также от браузерных настроек пользователя.
Пример классов у блока
Пример классов у блока

— Открытость кода — авторские права на код принадлежат пользователю, можно экспортировать код и использовать его по своему усмотрению.

Какие проекты эффективно делать на Taptop

Дизайнерские проекты любой сложности — лендинги, визитки, промо-сайты, портфолио, корпоративные сайты и т.п. Можно кастомизировать каждый элемент и реализовать нестандартные интерфейсы.

Многостраничные сайты с кастомным дизайном. За счет системы классов и компонентов можно собирать сайты с адаптивами в несколько раз быстрее, чем на стандартном конструкторе, например, на Тильде.

Динамично развивающиеся проекты. В Taptop можно эффективно поддерживать сайты и быстро вносить изменения как в контент, так и в дизайн. Повторяющиеся стили элементов можно поменять за пару кликов благодаря системе классов. При добавлении нового контента блоки не «поедут» — лейаут автоматически перестроится.

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

Что пока нельзя сделать в Taptop? Блоги или интернет-магазины в полном объеме сейчас создать не получится — эта возможность обязательно появится позже. Функционал CMS уже в работе, интернет-магазины — в планах.

Планы развития и связь с пользователями

Мы топим за открытость и прозрачность работы. Поэтому сделали публичный Roadmap Taptop, чтобы пользователи были в курсе развития продукта. Здесь размещаем все основные фичи — сразу видно, какие задачи в ближайших планах, над чем работаем и что уже сделали.

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

Публичный Roadmap Taptop
Публичный Roadmap Taptop

Так что если хотите следить за процессом нашей работы и даже в ней участвовать, — добро пожаловать!

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

Бонусы для дизайнеров в Taptop

Чтобы привлечь больше дизайнеров к работе на Taptop, мы недавно запустили бонусы для пользователей:

Грант на бесплатный хостинг для сайта-портфолио. Дизайнеры могут получить пожизненный хостинг личного сайта-портфолио, сделанного на Taptop. Нужно зарегистрироваться и пройти модерацию. Акция ограничена по количеству участников.

Партнерская программа. Пользователи получают 30% от всех оплат приведенных клиентов без ограничения по срокам. Дизайнеры могут зарабатывать на клиентских сайтах, размещаемых на хостинге Taptop.

Партнерская программа Taptop
Партнерская программа Taptop

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

Вопросы, предложения, пожелания успешного развития и даже критика в комментах — приветствуются) Всем спасибо!

3535
22
20 комментариев

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

7
Ответить

Спасибо, надеемся на успех)

Ответить

Идея хорошая, но пока шаблоны Тильда выглядят гораздо привлекательней.

2
1
Ответить

Тут больше аналог webflow, я даже рад его появлению, уже зарегался в триалке

3
Ответить

Статья не о шаблонах, уважаемый

1
Ответить

Немного тебя потроллю, только не обижайся) ты как будто в Тильде работаешь, ну либо не подкрутил вкусовые рецепторы на современный лад. Как можно шаблоны тильды сравнивать с шаблонами Uproсk)

Ответить