«Я поняла, что именно так должна выглядеть правильная верстка»: интервью с дизайнером о переносе сайта с Tilda на Taptop

Привет! Это команда конструктора сайтов Taptop. Нас иногда спрашивают — зачем делать сайт на вашем конструкторе, если уже привык работать на другом. Мы решили ответить на этот вопрос на примере. Для этого взяли интервью у веб-дизайнера Алины Котылевской, которая недавно перенесла клиентский сайт с Tilda на Taptop. Читайте об ее впечатлениях от Taptop, сравнении его возможностей с Tilda и оценке перспективы использования для клиентских проектов.

— Расскажите немного о том, чем занимаетесь, какие сайты делаете.

Я работаю на фрилансе. Делаю макеты сайтов в Figma и верстку на Tilda. Иногда делаю только дизайн, но 90% — готовые сайты от макета до верстки. В основном лендинги, корпоративные сайты и иногда интернет магазины.

— Почему решили делать сайт на Taptop?

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

* Сайты, над которыми работала Алина — слева на Tilda (https://alice-orlova.ru/), справа на Taptop (https://alice-yoga.taptop.site/)

— Какие общие впечатления от работы в Taptop по сравнению с Tilda?

Я поняла, что именно так должна выглядеть правильная верстка: на основе компонентов, стилей, классов, схожести с Figma. Tilda все-таки была создана больше для клиентов без знаний дизайна интерфейсов, и верстка на ней местами костыльная. Особенно разница чувствуется, когда есть навыки работы с Figma на продвинутом уровне (например, с вариантами, автолейаутами, компонентами и стилями). При переходе на Taptop многие вещи повторяются и интуитивно можно быстро сверстать свой первый сайт.

— Насколько быстро получилось адаптироваться к интерфейсу редактора Taptop?

В редакторе Taptop было проще работать в сравнении с Tilda. Сам интерфейс интуитивно понятен. Поэтому к сервису я привыкла намного быстрее, чем это делала с Тильдой в свое время.

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

Быстро адаптироваться к сервису удалось за счет схожести интерфейса и логики работы с Figma. Плюсом было и наличие хелп-центра с описанием и роликами по работе, куда я неоднократно обращалась. А через всплывающее окно в самом Taptop всегда могла написать Виктории или Игорю и получить быстрый ответ на любой свой глупый вопрос.

* Интерфейс редакторов — слева Tilda, справа Taptop

— Что можете сказать о времени, затраченном на создание сайта?

Если говорить о процессе дизайна, то работа заняла меньше времени даже с учетом того, что до этого я не работала с Webflow, Taptop и другими похожими редакторами, был опыт только с Tilda.

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

— Что было сложно в процессе работы?

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

— Чего не хватало для реализации задачи?

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

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

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

Еще вставка видео. Видела уже эту задачу в открытом roadmap — виджет для быстрой загрузки видео, но на момент верстки ее не хватало. Сейчас можно сделать только embed-кодом.

— В чем вы видите плюсы Taptop по сравнению с Tilda для дизайнеров и для клиентов?

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

Если сравнивать правки в zero-блоках Tilda и в блоках Taptop, то у последних любые внесенные изменения будут выглядеть аккуратнее. То есть меньше вероятность, что другие блоки и элементы «поедут» из-за добавленного абзаца текста в начале страницы, так как сам принцип верстки помогает аккуратно вносить правки в контент.

* Добавление еще одного абзаца в блок — слева в Tilda, справа в Taptop

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

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

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

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

— А какие минусы?

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

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

— Какие отличия у сайтов на Taptop и на Tilda?

На Taptop легче создать «резиновую» верстку, то есть сайт, который будет отлично выглядеть на разных экранах и адаптивах без дополнительных действий в работе. В Tilda, если не использовать специально autolayout, контент ограничен областью 1200px. Можно сделать дополнительные брейкпоинты бОльших разрешений, но вносить изменения в них часто неудобно.

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

Отдельно нужно заметить качество кода на Taptop и соответственно скорость загрузки сайтов на нем и SEO-продвижение.

Вот сравнение производительности и скорости загрузки двух моих сайтов:

— Чего сейчас не хватает в Taptop для перевода на него клиентов?

У некоторых нынешних клиентов привязано много интеграций со сторонними сервисами, такими как AmoCRM, Bitrix24, кассы и платежные сервисы. Поэтому буду ждать этих релизов на Taptop, чтобы переводить проекты туда и заодно проводить редизайн.

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

— Планируете делать новые клиентские сайты на Taptop? Для каких кейсов Taptop подойдет?

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

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

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

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

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