Главное Свежее Вакансии   Проекты
Продвинуть свой проект
😼
Выбор
редакции
2 855 4 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как ускорить создание лендинга, не используя конструктор сайтов

Расскажем о том, как мы отказались от Тильды и ускорили процесс верстки нового сайта с помощью плагина Anima для Sketch.

b_5d232c7b29176.jpgТильда.

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

Мы работаем с Тильдой и многие заказчики просят сделать сайт именно на этой платформе.

Когда пришло время обновлять свой сайт furnas.ru, мы решили использовать Тильду в пользу сокращения времени на вёрстку (до этого он был вручную сверстан и сделан на React js).

Мы создали аккаунт, создали сайт и погнали. Всё шло хорошо, пока дело не дошло до формы обратной связи.

В Тильде нет возможности изменять шаблон формы, а мы отрисовали свой дизайн формы. Сначала это показалась странным, но мы не нашли, как это можно исправить внутри платформы. Также мы обнаружили еще один минус - максимальный размер картинок, которые можно загружать на сайт 1680px. Это означает, что большие картинки на ретина дисплеях, например, макбуков будут выглядеть немного размытыми.

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

b_5d2329e1dfa09.jpg

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

Sketch + плагин Anima.

Нам попался плагин Anima для Sketch. Данный плагин преобразует артборды сразу в html-код.

Всё было бы хорошо, но всё так просто не происходит :)

С самого начала плагин Anima отказывался работать. Мы быстро его установили, но он не создавал нужные файлы. Только после обновления MacOS до системы Mojave и обновления Sketch минимум до версии 51.3 Anima заработал.

На удивление всё заработало прям хорошо. Нужно было только отрисовать все варианты экранов (десктопы, планшеты, мобилки) и настроить переходы между данными экранами. Anima позволяет создавать ссылки, кнопки, поля ввода и можно настроить куда всё будет отправляться.

Для примера наш сайт furnas.ru весь сделан с помощью Anima.

Выводы.

Плюсы Тильды:

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

Минусы Тильды:

  1. Форма ввода — это блок с полями ввода и кнопкой. Блок статичный, либо горизонтальный, либо вертикальный. Я не могу разобрать его по частям и расположить как мне вздумается.
  2. Любые изображения не больше 1680 px. Это очень большой минус, потому что на экране Retina картинки будут в плохом качестве.
  3. Тильда не отображает расстояние между объектами. Я перевожу блок в ручную настройку (Zero Block) и не могу каждый экран выровнять в точных пропорциях. Всё делается на глазок.

Плюсы плагина Anima:

  1. Адаптивная вёрстка под все размеры экранов. Просто рисуешь все экраны (десктоп, планшет, мобилка) и связываешь между собой с помощью плагина.
  2. Размер экранов указываешь сам. Просматриваешь html-код в браузере и находишь на какой ширине ломается верстка. Открываешь sketch, создаешь новый артборд нужного размера и отрисовываешь экран. Или настраиваешь ширину элементов, которые ломаются.
  3. Настройка объектов. С элементами дизайна можно сделать всё что угодно. Растягиваться по всей ширине, или сохранять размер, не смотря на ширину экрана. Выравнивание блока по правому краю, или по левому. Всё это можно указать с помощью плагина.
  4. Скорость работы. Плагин позволяет делать превью в браузере в процессе работы, что удобно для поиска ошибок.

Минусы плагина Anima:

  1. Обучение. Много времени потратили, чтобы понять что и где настраивается. Но когда понимаешь, настраиваешь быстро.
  2. Редактирование. Если вёрстку уже загрузили на сайт, редактировать текст/объект тяжело.
+2
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Популярные за неделю
Показать следующие
Комментарии
Первые Новые Популярные
Бидюков Денис
Я понимаю когда всякие лопухи лезут на тильду, но когда всякие студии сначала туда лезут, а потом изобретают гамак из костыля и в нем пытаются совокупиться..... Ну возьмите вордпресс, у него как минимум два (известных мне) билдера есть. divi и elementor. Второй вообще бесплатный и по него есть темы заточеные (например futurio). Делайте че хотите, хоть картинки километровые, хоть формы какие угодно.
Ответить
Furnas
Делаем веб проекты для себя и для других
furnasteam
Думаю, что Тильда - отличное решение для тех, кто вообще не знаком с разработкой сайтов. Пользователи заказывают сайт, а потом сами его ведут. Anima - это отличное средство для дизайнера, который может сделать кликабельный прототип для команды или заказчика без привлечения разработчика. А поэкспериментировать над своим сайтом - это вообще самое веселое =)
Ответить
Александр Ведров
Если использовать, как прототип без привлечения web программистов, то можно использовать Тильду, но не публиковать, а использовать неопубликованный прототип новых страниц под новые проекты. Сам использую - Wordpress+Elementor или конструкторы Creatium и Platformalp, Тильда не зашла.
Ответить
Ekaterina Hindikaynen
Не пробовали этот плагин, но для проверки гипотез, думаю, самое то - быстро и с приемлемым качеством.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать
Комментарии