Taptop vs Tilda: какую платформу выбрать?
Совсем недавно дизайн сайтов на Тильде был едва ли не эталоном в отрасли. Этот популярный конструктор предлагал все необходимые для создания запоминающегося, удобного и функционального сервиса инструменты, и разработчики с удовольствием отдавали ему предпочтение. Но так было до появления на рынке Taptop – не просто конструктора, а полноценного визуального редактора кода, который уже успел покорить сердца как профессионалов, так и тех, кто сталкивается с разработкой интернет–ресурса впервые.
Чтобы не быть пристрастными, мы попросили оценить в реальных условиях обе платформы независимого эксперта – дизайнера Алину Котылевскую. Алина пользуется Tilda несколько лет, а Taptop – чуть более года. Ее задачей было создать два одинаковых макета со сложными блоками – галереей, табами, слайдерами и другими фишками, требующими от дизайнера серьезных усилий. Она не просто выполнила перенос дизайна из Figma в Tilda и Taptop, а провела настоящие испытания в полевых условиях. В статье рассказываем, что из этого вышло, и выясняем, кто, все-таки, победил.
По каким критериям сравниваем?
Если опросить дизайнеров, чем они руководствуются при выборе инструмента для создания и верстки веб–ресурсов, ответы большинства специалистов будут схожи, и наш эксперт не оказалась исключением. В качестве параметров для сравнения были выбраны:
- Скорость верстки и возможность детально повторить макет сайта с помощью функционала платформы;
- Адаптация готового проекта под разные устройства;
- Внесение правок и регулярные обновления контента;
- Стоимость создания ресурса как для заказчика, так и для исполнителя;
- Удобство работы с платформой.
Важно отметить, что почти все профессионалы, создающие дизайн сайтов на Tilda, широко используют платные моды, расширяющие базовый функционал конструктора. Обычно Алина применяет Annexx и Нолим, которые облегчают работу с проектом. Поэтому было принято решение сравнить возможности Taptop не только с «Тильдой на минималках», но и с платформой с этими расширениями. Итак, поехали!
Самый главный ресурс – время
Оно ценно для всех и каждого, но для тех, кто выполняет работу по сдельной системе оплаты – особенно, ведь чем быстрее выполняешь заказ, тем скорее можно приступить к следующему. И в большинстве случаев, именно фактор времени оказывается для дизайнеров решающим при выборе инструментов для верстки. Сколько занимает полный цикл веб–дизайна на Tilda, Taptop и Тильде с модами?
Tilda
Чтобы ускорить верстку, в конструкторе можно использовать готовые блоки. Однако функционал платформы сильно ограничивает их кастомизацию, и повторить сложные задумки, заложенные в первоначальный макет, с помощью шаблонов практически невозможно.
На создание блока меню с кнопкой у дизайнера ушло 18 минут, однако полностью повторить ее размер не получилось.
Tilda+моды
Дополнения существенно расширили функционал платформы, однако процесс настройки аналогичного блока занял 40 минут. Зато его внешний вид полностью соответствует прототипу.
Taptop
Taptop открывает возможности для бесконечной кастомизации любых элементов дизайна: тех, что собраны в Коллекции платформы, и тех, что разрабатываются специалистом самостоятельно. Детальная настройка блока меню заняла у Алины 28 минут.
Есть у платформы и другой неоспоримый плюс в виде классов. Они позволяют настраивать внешний вид схожих блоков всего за несколько кликов мышью, что особенно важно при создании порталов, где много страниц с практически одинаковой структурой. Настроив классы один раз, вы просто применяете их к нужным группам элементов. Как переносить дизайн на Тильду при таких же вводных? Увы, но даже при наличии дополнительных плагинов придется настраивать параметры для каждой кнопки, формы и других элементов вручную, даже если они абсолютно одинаковы на всех страницах вашего портала.
Taptop выигрывает и при разработке сложных деталей. Так, на блок с табами при работе с платформой у Алины ушло 48 минут, в Тильде с модами – 2 часа 15 минут, а в Tilda со стандартным функционалом – 55 минут, при том, что повторить дизайн из макета до пикселя не удалось.
Казалось бы, разница в несколько минут не критична. Но в «общей сумме» – это ваши рабочие часы, которые можно потратить более продуктивно.
Адаптация сайта
Удобство любого портала для конечного пользователя во многом определяется и тем, насколько корректно сайт отображается на небольших экранах и сохраняет ли каждый элемент дизайна свою функциональность. Как решают вопрос адаптивности наши испытуемые?
Tilda
В большинстве случаев дизайнеры тратят часы, заполненные рутинной работой на то, чтобы решить задачу «как сделать дизайн в Тильде адаптивным». Алина отметила, что это – целая головная боль в ее повседневной работе, ведь выравнивать кастомные блоки приходится буквально по пикселю. С одной стороны, Tilda выровняет стандартные блоки сама, но в таком случае – о переносе своего дизайна из макета придется забыть.
Tilda+моды
Моды несколько упрощают ситуацию, позволяя экспериментировать с внешним видом сайта, но не с адаптацией. Алина потратила на создание адаптивной версии блока с табами около 2 часов, работая с каждым элементом по отдельности.
Taptop
В случае с визуальным редактором кода, сложностей с тем, как перенести дизайн из Figma, как в Tilda, не возникает. Платформа буквально творит собственную магию, используя автолейауты, которые знакомы разработчикам по функционалу Figma. Карточки самостоятельно выстраиваются в аккуратные ровные столбики при отображении на мобильных устройствах, а блоки – подстраиваются под экраны с разным расширением. Наглядный пример – адаптация блока с табами. В Taptop она заняла у Алины всего 16 минут: она просто настроила автолейауты один раз, и больше не возвращалась к рутине.
Таким образом, чтобы настроить адаптивы в Тильде, дизайнер в общем потратила 140 минут, но результат оказался далек от первоначального макета. Чтобы решить задачу, как перенести дизайн из Фигмы в Тильду с модами без потери деталей и адаптировать сайт под разные устройства, Алина потратила 250 минут. А в Taptop было затрачено всего 106 минут.
Ох уж эти правки!
Вы можете тысячу и один раз утвердить макет в Figma, но готовый проект все равно чем–то не устроит заказчика. Правки отнимают немало рабочего времени, а в будущем – необходимо обеспечить и регулярное обновление контента на ресурсе. И клиент явно захочет, чтобы новый блок текста соответствовал общему оформлению его сайта, а остальные элементы – остались на своих местах. В общем, чтобы все было быстро, просто и не требовало дополнительных знаний.
Мы решили взять максимально простые задачи – коррекцию шрифта заголовков на лендинге и добавление блока с текстом. Что показал наш эксперимент?
Tilda
Для того чтобы поменять заголовок на одной странице, дизайнеру потребовалось 11,5 минут. До того как переносить дизайн из Figma в Tilda, Алина уже выбрала стандартные блоки с минимальной кастомизацией, но заменить шрифт функционал платформы со стандартным функционалом все же позволяет. Добавления нового контента превратилось в целый квест: поехала вся настроенная ранее адаптация.
Tilda+моды
Здесь решение задачи заняло чуть больше времени: Алина уложилась в 15,5 минут: время увеличилось из–за необходимости вносить правки и в адаптивные версии портала. Аналогичная ситуация возникла и при добавлении нового блока текста.
Taptop
Правки заняли всего 3,5 минуты, ведь с адаптацией возиться не пришлось: достаточно было только загрузить новый шрифт и применить его к заголовку. При добавлении нового текста также не возникло сложностей – адаптивная версия изменилась автоматически, без «танцев с бубном».
Если применить эти цифры к 40–страничному порталу, то картина получится не слишком радостная. Правки в случае с обеими версиями Tilda займут около 8 часов. В случае с Taptop и его классами вы вряд–ли потратите больше 10 минут: настройка классов к одному заголовку изменит их на всем сайте. И вы экономите целый рабочий (или выходной) день, и любите свою работу еще больше!
Заработай и потрать! Во сколько обойдется сайт?
Стоимость готового портала для заказчика напрямую зависит от скилов дизайнера и того времени, который специалист потратил на работу над проектом. Однако почти никто не думает, что дизайнер вкладывается в реализацию творческих проектов своими средствами, покупая доступ к тем инструментам, которые использует в работе. Во сколько это обходится?
Tilda
Чтобы получить доступ к функционалу платформы, дизайнер должен оформить подписку. Ее стоимость – 750 рублей ежемесячно.
Tilda+моды
Расширения функционала – далеко не бесплатные. Если рассматривать моды, которые применяла Алина, то к базовой стоимости подписки в 750 рублей добавится еще и их цена. Итог – 1800 рублей ежемесячно.
Taptop
Уже на стартовом тарифе, бесплатном для каждого пользователя, доступен весь основной функционал нашей zero–code платформы. Подписка для расширения возможностей обойдется в 750 рублей ежемесячно.
Веб–дизайн на Tilda, Taptop или Tilda с модами: насколько это удобно?
Чтобы работа приносила исключительно положительные эмоции, творческий процесс должен доставлять удовольствие. Или, как минимум, не создавать дополнительных неудобств дизайнеру. Как в целом оценила свой опыт взаимодействия с разными платформами наш эксперт?
Tilda и Tilda + моды
Работа в конструкторе превращается в постоянный поиск обходных путей и регулярные «танцы с бубнами», даже несмотря на применение модификаторов и наличие расширенных возможностей. Так, обычное добавление шрифтов в Тильду потребовало использовать дополнительных «костылей». Пришлось поломать голову и над тем, как переносить дизайн из Figma в Tilda: стандартные блоки конструктора просто не позволяют повторить макет с точностью до пикселя.
Настройка одинаковых элементов заняла львиную долю работы над проектом, ведь с каждым из них пришлось возиться по отдельности. Сложности возникают и в процессе адаптации. Таким образом, создание единственного портала может затянуться на долгие недели, особенно если речь идет о многостраничных проектах, и из возможности для творческой реализации превратиться в банальную рутину. Не очень легко и поддерживать ресурс в будущем, если планируется регулярное обновление контента.
Taptop
Платформа сконцентрировала максимум возможностей для реализации любых креативных идей и практически избавила дизайнеров от необходимости выполнять рутинные операции. Классы и автолейауты позволяют за считанные минуты настраивать внешний вид одинаковых блоков на всех страницах ресурса, а автоматическая адаптация – значительно экономит время и силы на настройку готового сайта.
Проводить дополнительные манипуляции для того, чтобы добавить шрифты, здесь не пришлось: вся типографика из Google Fonts подтягивается автоматически, а открытый код позволяет добавить и кастомные наборы. В целом, ни перенос дизайна из Фигма, ни адаптация, ни правки не вызвали сложностей.
Алина отдельно отметила и производительность готовых проектов, собранных на разных платформах. Тест в Google PageSpeed показал рекордные результаты для портала на Taptop: 91%, тогда как сайт, созданный на Tilda, продемонстрировал 78%, а на конструкторе с модами – всего 63%.
Все дело – в чистоте кода, который генерирует Taptop: он загружается гораздо быстрее, тогда как в случае с Тильдой браузеру приходится обрабатывать массу дополнительной информации. Модификации в этом плане только усугубляют ситуацию, снижая скорость загрузки.
Конечно, вы можете сказать, что каждый разработчик будет хвалить свой продукт, но результаты говорят сами за себя. Tilda по-прежнему хороша для тех, кто работает с лендингами и предпочитает стандартные блоки: таких проектов на рынке предостаточно. Если вы уже знакомы с ограничениями этой платформы и хотите развиваться дальше, работая над более сложными проектами, имеет смысл изучить модификации.
Тем, кто хочет создавать действительно уникальные сайты, которые прекрасно ранжируются поисковыми системами и не испытывают сложностей с загрузкой, стоит отдать предпочтение Taptop. Визуальный редактор кода открывает безграничные возможности для воплощения в жизнь ваших творческих идей, позволяя экономить время на рутинных операциях и в целом работать быстрее. Окончательный выбор – зависит от вас, но Taptop – это та свобода от технических ограничений, которую может получить любой специалист в веб–дизайне, приложив совсем немного усилий для изучения всех возможностей платформы.
Смотрите видео с подробным разбором верстки на всех платформах: