Образование

Стоит ли проходить курс Skillbox «Дизайнер сайтов на Tilda»: о чем он и кому подойдет

Всем привет!

Меня зовут Даша, я уже писала тут про курс «Профессия Интернет-маркетолог» от Скиллбокса. Чтобы углубить свои знания в какую-то конкретную область, я выбрала следующий курс — создание страниц на Тильде. Думаю, это жизненно необходимый навык практически для кого угодно, кто хочет продвигать свои собственные услуги, решать задачи бизнеса, тестировать гипотезы.

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

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

Вот содержание, которые университет приводит на странице описания:

  • Знакомство с Tilda: основные блоки и работа с контентом
  • Начинаем работу с Tilda
  • Оформление сайта
  • Обложки и слайдеры
  • Меню
  • Формы и кнопки
  • ZERO-блок: базовая анимация и мобильная версия
  • ZERO-блок: пошаговая анимация
  • Кастомный код
  • Блоги и новости, лонгриды
  • Интернет-магазин
  • Мобильная версия (адаптивная вёрстка)
  • Аналитика
  • Приём данных форм, CRM
  • Подготовка к запуску
  • Работа с клиентами

Пройдемся по всем пунктам, посмотрим, что внутри.

Содержание курса

Знакомство с Tilda: основные блоки и работа с контентом

Большую часть курса ведет Святослав Трипольский, CEO веб-студии We Make Digital. В первом блоке он рассказывает, что вообще представляет из себя Tilda, какие задачи можно решить с ее помощью, а так же — какие в ней есть блоки для контента и в как в целом проходит процесс их настройки.

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

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

Начинаем работу с Tilda

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

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

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

Оформление сайта

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

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

В рамках темы «Оформление» Святослав разбирает следующие пункты:

  • Заголовки
  • Разделители
  • Отступы
  • Шрифты и Типограф
  • Текстовый редактор
  • Галереи
  • Иконки
  • Подготовка и обработка изображений для сайта
  • Анимация блоков

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

В самом конце — оформление сайта фитнес-студии с использованием всего ранее показанного.

Работа с заголовками
Что из себя представляет Типограф и как в нем оформлять тексты
Процесс выбора подходящей иконки
Оформление реальной страницы фитнес-клуба для заказчика

Обложки и слайдеры

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

И ДЗ — сделать пару страниц, на которых все это будет реализовано.

Выбираем тип обложки или слайдера
Учимся настраивать и делать градиент на обложку
Оформляем обложку для фитнес-клуба

Меню

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

Настраиваем полноценное меню для сайта
Оформляем «Вкладки» и привязываем к ним блоки страницы
Проверяем, как наше меню выглядит на разных мобильных телефонах
Настраиваем меню на боевом проекте — сайте фитнес-клуба

Формы и кнопки

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

Настройка полей формы захвата
Создание опроса
Создание квиза и его вариантов ответа
Настройка вида, в котором заявки будут отправляться на почту или в CRM-систему
Делаем форму для фитнес-клуба

ZERO-блок

ZERO-блок — блок в Тильде, который не ограничивает вас заданным функционалом стандартных блоков конструктора и позволяет реализовать «полет фантазии» в размещении картинок, текста, ссылок и анимации. Нужен в тех случаях, когда стандартных блоков вам не хватает для реализации задуманного. Инструмент сложный, поэтому ему выделено два блока в курсе.

Работа с сеткой Зеро-блока
Настройка параллакс-эффекта
Как сделать, чтобы Зеро-блок корректно отображался на мобильных
Делаем двухшаговую анимацию
А теперь все то же самое, но на сайте фитнес-студии

Кастомный код

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

Куда и как вставляется кастомный код
Работа со сторонним календарем, чтобы в дальнейшем интегрировать его на сайт
Вот что получилось после интеграции
Работа с пользовательскими CSS-стилями
Внедряем календарь в расписание на сайте фитнес-студии

Блоги и новости, лонгриды

Очень интересный и полезный раздел — не про технические моменты, а про подходы к визуальному оформлению различных типов контента. Спикер блока — Филипп Соломин, руководитель студии OKTÂEDER.

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

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

Интернет-магазин

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

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

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

Мобильная версия (адаптивная вёрстка)

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

Что надо учитывать при проектировании мобильной версии сайта
О мелких элементах, кнопках и изображениях, с которыми будет неудобно взаимодействовать мобильным пользователям
Увеличиваем конверсию мобильных пользователей, делая для них удобно

Аналитика

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

В блоке Филипп рассказывает про разные способы проанализировать происходящее на сайте — встроенные функции Тильды по отслеживанию заявок и их источников, подключение сторонних сервисов (Гугл Аналитики и Яндекс.Метрики) и использование их нестандартных возможностей, размещение пикселя VK и FB (то есть как отследить аккаунты Вконтакте и Фейсбука, которые заходили к вам на сайт, чтобы потом можно было потом догонять их рекламой).

Тильда умеет считать пришедшие заявки с сайта
Еще Тильда понимает источники заходов
А Яндекс.Метрика видит, куда пользовать нажимал на странице, как ее скролил и вообще позволяет пристально последить за его поведением
Ловим пользователей VK у себя на сайте, потом в самом VK настраиваем на них ретаргет — догоняющую рекламу

Приём данных форм, CRM

Если все прошло удачно, человек пришел к вам на сайт, оценил предложение и сконвертировался в заявку — с этой заявкой что-то должно дальше произойти. В блоке — обзор способов ее обработать.

Тильда предлагает свою собственную CRM-систему — она умеет собирать заявки с настраиваемыми полями и отправлять вам об этом оповещение на почту. Для начала работы или малого количества заявок вполне подойдет. Для более сложных задач нужно будет подключить свою CRM-систему к сайту или Google-таблицу.

Пути вывода и обработки заявок
Так работает встроенная CRM самой Тильды
Увели заявку в Гугл-таблицу

Подготовка к запуску

Как признается сам автор блока, Филипп, это та часть работы — скучная, но необходимая — на которую уйдет до 20% времени от всей работы на сайте.

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

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

Работа с клиентами

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

Как посчитать стоимость часа своей работы
Что необходимо сделать ДО того, как начать разрабатывать сам сайт

Мое мнение о курсе: плюсы и минусы

После прохождения курса я хорошо поняла, кому он подойдет, а кому его брать не стоит.

Сам Skillbox на странице курса очень точно описывает, для кого этот курс и чему вы научитесь в процессе:

Но я тоже подчеркну, чтобы у вас не возникало неоправданных ожиданий к курсу — курс технический, он про то, как работать с конкретным конструктором сайтов, Tilda.

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

Если же вы не испытываете трудностей с интерфейсами, способны разобраться во всем методом тыка, вам понятны термины «кастомный код» или «DNS» и вы умеете с ними работать — курс не будет вам слишком полезен. Если ваше ожидание — научиться создавать впечатляющий и конверсионный дизайн страниц — тут про это не рассказывают, к такому запросу больше подойдет курс по непосредственно веб-дизайну.

2 Comments

  1. Неплохие курсы в Skillbox. Еще одна школа хорошая на уровне, но по цене дешевле — EasyUM https://it.easyum.ru/ Заканчивала там курсы дизайна. Отличные преподы и программа хорошая!

    Reply
  2. По Тильде хороший бесплатный курс есть у школы дизайна Contented https://live.contented.ru/tilda-free-course, подойдет для знакомства с инструментом. Но если все-таки хочется зарабатывать именно дизайном сайтов, то лучше полноценный курс по веб-дизайну пройти (можно у них же, отличная школа)

    Reply

Post Comment