Бывает так: заказчику нужен лендинг еще вчера. К фронтендеру обращаться не хочется — долго, дорого, дизайнеру не понравятся отступы, а вся задача превратится в череду долгих согласований.
Привет, меня зовут Соня! Я – UX/UI дизайнер в hh.ru. В этой статье мы разбираем популярные мифы о конструкторе сайтов и рассказываем, можно ли сделать классный сайт на Тильде и почему это доступнее, чем кажется.
У этой статьи есть видеоверсия для тех, кто захочет посмотреть на фишечки Тильды в динамике.
Миф 1. В Тильде ограниченные возможности, и вообще конструктор — несолидно
Пару лет назад в Тильде можно было собрать простой и заурядный лендинг “как у всех”. Но сейчас она может стать идеальным инструментом для самых разных задач, особенно в маркетинге. Проект развивается в техническом и эстетическом плане, и если раньше Тильдой пользовались в основном малый бизнес и ИП, то сегодня сервисом не брезгуют даже крупные игроки.
Миф 2. Подгонять, настраивать и переносить элементы в Тильду долго и муторно. То ли дело фронтенд!
Не совсем. Раньше на создание достойного лендинга тратили пару-тройку недель — требовался дизайнер, фронтендер и тестировщик. Работа превращалась в постоянные ревью и согласования: не тот отступ, не так друг друга поняли. Сейчас об этом можно забыть.
Теперь можно импортировать дизайн по слоям сразу себе в код в два клика. Шрифты, картинки в SVG, кнопки и чтобы всё это было “по сеточке”, без замеров отступов между элементами. И потом не придется ловить страйки от дизайнера, мол, здесь всё поехало.
Теперь из Фигмы можно напрямую импортировать дизайн в Тильду. Останется только доделать адаптивчик, а еще залинковать ссылки и кнопки. И всё – можно выпускать!
Копируем ссылку на конкретный фрейм в Фигме. Открываем вкладку «Импорт» в зеро-блоке, вставляем ссылку и ждем. Чем меньше исходный фрейм, тем быстрее импортируется, поэтому длинный фрейм лучше делить на части — так быстрее и надежнее.
Ваш лендинг в Тильде. Вы великолепны!
Миф 3. В Тильде всё статично, а мне нужны анимация и микро-взаимодействия
В Тильду зашито много разных анимационных эффектов от простых до довольно сложных, типа Step-by-Step Animation, параллакса по скроллу или движению мыши и разных эффектов появления элементов.
Step-by-Step Animation позволяет гибко настраивать положение объекта при определенных условиях и активировать в зависимости от заданных параметров: появление элемента на экране при скролле, клике и наведении.
Настройка Step-by-Step Animation выглядит так: активируем анимацию, когда элемент появляется на экране. Выставляем параметры, положение, масштаб, шаги. Применяем к нужным элементам и получаем подмигивающий глаз.
Миф 4. Конструктор не справится с Lottie-анимацией
В Тильду легко встроить и lottie-анимацию. Лайфхак года: нужно экспортировать анимацию из After Effects в JSON, добавить небольшой код в Тильду, и всё сработает. Причем lottie не тормозит и отлично работает на всех устройствах.
Создаем анимацию в After Effects через встроенные инструменты редактора. Конвертируем в формат JSON через специальное расширение Bodymovin. Открываем сайт lottie и импортируем JSON. Работает!
Теперь выставляем необходимый параметр: высоту, ширину, выключаем панель Controls. Копируем наш код и идем в Тильду. Открываем зеро-блок и вставляем этот код через специальный html-элемент. Располагаем его в нужном месте, сохраняем, публикуем и наслаждаемся анимацией.
Миф 5. Без навыков и дизайнера всё обречено
Тоже нет. В Тильде более 140 разных блоков на все случаи жизни. Причем их можно легко кастомизировать под свой брендбук — никто не поймет, что это Тильда без подглядываний в код.
Плюс готовых блоков в том, что их легко редактировать и масштабировать. В Тильде очень удобная админка — не нужно каждый раз звать фронтендера, чтобы добавить или изменить блок. А еще можно создать шаблоны с разным набором уникальных блоков для ваших продактов и бренд-менеджеров — своеобразную дизайн-систему в Тильде под ваши нужды. Они легко смогут собирать свои странички уже без вашего участия.
Миф 6. Мне нужна seo-оптимизация, а еще теги и события, чтобы собрать статистику. Бездушный конструктор так не умеет
Умеет! И с этим тоже всё просто: в Тильде есть внутренняя статистика, можно подключить Google Analytics и Яндекс.Метрику. На каждую кнопку формируется своя ссылка события, которая добавляется внутрь аналитики. А с помощью тег-менеджера вашему аналитику и вовсе не нужно лезть в код сайта.
В заключение
Короче говоря, Тильда не так примитивна, как мы привыкли о ней думать. Рабочий проект реально создать за два-три дня — с дизайном, адаптивом и анимацией. А на сэкономленные деньги можно купить “плойку” или еще пару мониторов вашему фронтендеру, чтобы смотрел наш канал на Ютубе.
Комментарии (20)
Doublesharp
03.02.2022 15:24+10Более чем уверен, что мне моментально прилетят от вас минусы, но не могу не сказать, что сайт HH по функционалу и внешнему виду —
филиал адазастрял в начале нулевых и не меняется ГОДАМИ. Это ненормально.
Использование вами стиля «корпоративный мемфис» в иллюстрациях — и вовсе отдельная песня. Фейсбуку, который его продвинул в 2017(!) этот стиль был нужен, потому что компания работает по всему миру, а вам то он зачем, только потому что «все так делают»?
Довольно таки странно при таком подходе выходить на Хабр со статьей на тему дизайна.
Zenitchik
03.02.2022 19:24застрял в начале нулевых и не меняется ГОДАМИ. Это ненормально.
Статистически - да, ненормально. Но с точки зрения эксплуатации - это просто великолепно.
Matisumi
03.02.2022 15:44+3Только мне кажется странным, что автор сравнивает конструктор сайтов и некий "фронтенд"?
hp6812er
03.02.2022 16:18+1Если посчитать, то стоимость содержания сайта на Тильде не слишком ниже стоимости собственного хостинга + какой нибудь качественный шаблон wordpress (например Avada)... раз уж речь зашла про нетребовательный дизайн и скорость создания . И как правильно сказали выше - это будет все ваше, от начала и до конца.
haldagan
03.02.2022 16:27+11 ...
Реклама тильды чтоль? Вроде как есть конструкторы, которые и пару лет назад были достаточно гибки в этом плане - шаблоны, темы, вот это вот всё.
2 ... Теперь из Фигмы можно напрямую импортировать дизайн в Тильду
В тильду можно, а просто в хтмл нельзя?
5 Без навыков и дизайнера всё обречено
Нонсенс. Конструкторы с самого начала выставляют это именно как конкурентное преимущество: "ходи к нам - дизайнер не нужен, фронтендер не нужен, манагер кнопочку тык-тык и сайт готов!"
Ну и вообще почему не рассматриваются посерединистые решения: в том же вордпрессе насколько мне известно, уже давно существуют темы, которые предоставляют подобный функционал типа конструктора: ты кнопочку тык-тык, на страничке - визивиг. С сетками и адаптивностями. И даже бесплатно.
mSnus
03.02.2022 16:54+3В Тильде всё плохо с:
Адаптивностью
Ограничениями компонентов
Переиспользованием дизайна
Документацией
Как только дизайн выходит за рамки типового, элементы начинают разъезжаться по странице, и приходится их расставлять заново для каждого брейкпоинта
Как только нужны возможности чуть шире, чем представляет стандартный компонент - например, 12 пунктов в опросе, а не 10 - все, зовите разработчиков, которые сумеют докопаться, где это исправить.
Шаблоны нормальные сделать невозможно. Просто header и footer сложно нормально прицепить.
Документация по компонентам.. её, считай, нет.
Поэтому пока Тильда остаётся для прототипирования и лёгких типовых лендингов.
Gedeonych
03.02.2022 16:56-1Кроме всех вышеуказанных возражений к статье, приведу ещё одно. Знаю людей (и не одного и не двух), которые для проверки всех новых контрагентов, ещё даже раньше чем в картотеки Арбитража или госреестры, первым делом идут к ним на сайт с любой "пробивалкой" типа Whats Runs. И если сайт сделан на каком либо конструкторе, то с этим контрагентом они даже не начнут работать. И заметьте, это обычные предприниматели, не обязательно из IT-сферы. Поэтому каким бы "хорошим" конструктор не был, всегда лучше использовать свой (не типовой) продукт. Хотя бы частично свой. Если нет времени и денег на полноценную разработку, то хотя бы CMS. Хоть что то, над чем реально необходимо работать. Это скажет пусть не о высокой IT-культуре компании, но хотя бы о серьёзности её намерений на рынке.
aliencash
03.02.2022 18:10Сомнительный посыл - лендинг с анимацией и прочими рюшечками нужен еще вчера. Бизнесу наплевать с анимациями оно или без, лишь бы продавало. Вряд ли существует статистические данные о том, что добавление анимации на лендинг увеличило конверсию.
SEO для лендинга - так же сомнительно. Конечно, любой каприз за ваши деньги, но в принципе - это бред.
BlackStar1991
03.02.2022 23:27+1Почему когда какому-то конструктору надо пропиариться, неважно Тильда, Викс, Промо... то ни кто не рискует придоставить на общий осмотр что-то из своей продукции ? Ну покажите, хороший сайт на конструктори, где всё хорошо с анимациями, нету лишних элементов, все в зеленой области Лайтхауса.... Расказывают какими-то абстракциями.... "Вот у нас всё было плохо, но потом, мы начитались Хабр, и всё резко похорошело..." Могу про конструктор из личного сказать только одно, если вы подсели на конструктор, то когда до вас дойдет, что это - шляпа, стоимость за переработку будет 2х, чем изначально делать у какой-то студии.
Bone
04.02.2022 09:41+2На мой взгляд Тильда хороша, когда её применяешь по прямому назначению - используешь готовый шаблон для быстрого и простого запуска mvp. А когда начинаешь делать на конструкторе сайт так, чтобы он не выглядел сделанным на конструкторе, то это глупо и противоречит идее. Это все равно, что делать из холодильника телевизор, так чтобы он не выглядел сделанным из холодильника.
KinsleR
04.02.2022 10:54браво :)
Сам такое пытался изобразить за неимением времени, вышел телевизор из холодильника, еще и с подтекающим фреоном )
Ingushka
04.02.2022 17:46Для своих целей Тильда - прекрасный инструмент. Нет, мы не говорим о каком-то грандиозном проекте. Но симпатичный малостраничный сайт какой-нибудь хендмейдер (мыловар/свечевар) может по урокам запилить за несколько дней с минимальным бюджетом и знаниями. Если раньше была проблема у конструкторов с СЕО, сейчас тут стало все гораздо лучше. Был опыт вывода в топ небольшого специализированного сайта. А вот с адаптивом под мобилку, особенно, зеро-блоков это, конечно, жесть.
nuclearland
04.02.2022 17:50Тильда хороша конечно в этом плане, но проблемы возникают как только заказчик захочет какую-то "кастомную хотелку", которую реализовать в тильде не получится. Вот тогда и возникают проблемы, так как исходный код малочитаем и внедрять в него что-то новое то еще удовольствие.
StudioWest
04.02.2022 18:02Самый интересный минус - при расширении сайта всегда встает вопрос о переносе на cms . В бизнесс аккаунте есть возможность переноса на HTML и вроде-бы на WordPress но страницы имеют такой "загаженный код" что проще переписать заново.
Zhbert
Я всегда видел во всех таких «конструкторах» только один минус — оно не твое. Что будет с твоим сайтом, лендингом или онлайн-магазином, если тильда вдруг закроется, поднимет цены в четыре раза или.. да не важно что?
В случае, когда ты держишь свое у себя, ты всегда можешь быстро и безболезненно поднять копию на другом хостинге.
То же самое, кстати, касается и хранения личных и не только данных в «облаках», и примером тому стало недавное объявление гугла о закрытии воркспейса с посылом «делайте че хотите» для тех, кто пользовал его бесплатно. И хорошо, что они вроде бы пошли на поводу у пользователей и согласились передумать, но а если нет?
leotada
Из тильды можно выгрузить сайт в html/css и выложить его куда хочется. Это только на старших тарифах, но всё же.
Hystrider
Сталкивался с экспортом. Код там к сожалению сжат, что-то поменять даже зная верстку практически нереально.
При этом шрифты и кое-какие js все еще подгружаются с CDN тильды, а как и куда формы отправляются, я так и не понял. Кажется тоже на какой-то бекенд на тильде.
И еще эти ресурсы могут не подгружаться, выдавая статус 402 Payment Required. Не разбирался правда в каких случаях.
Поэтому даже если скачать себе, не все так просто ????
ArtPlotnikov
"В случае, когда ты держишь свое у себя, ты всегда можешь быстро и безболезненно поднять копию на другом хостинге. "
Не фанат Тильды, но у них есть API для размещения контента на своём сервере. Можно отредактировать страницу в Тильде, затем нажать "Опубликовать", затем отправляется вебхук на свой сервер, при получении вебхука можно целиком скачать исходник страницы и хостить у себя (см Настройки сайта → Экспорт → API). Такой сценарий описан в их документации.