Как сделать сайт на Тильде: пошаговая инструкция
Автор статей и SMM-специалист Svoemedia Ирина Сорогина рассказала о первом опыте создания сайта на Тильде, о том с какими сложностями столкнулась и сколько времени на это ушло.
Обучение в онлайн-университете: курс «Дизайн для начинающих»
Я занимаюсь контентом, но захотела сделать лендинг онлайн-курса на Тильде. Чтобы сайт получился сильным, я расспросила об этапах создания сайта коллегу Антона Чикова — главного дизайнера оперативной группы Svoemedia.
Перед созданием сайта я отвела день на подготовку: продумала структуру сайта, подобрала контент, сделала прототип, выбрала цвета и шрифт.
Структура сайта
Антон Чиков:
«Структура сайта зависит от задачи и типа сайта. Например, студии дизайна интерьера нужно показать готовые проекты, а организатору онлайн-курса — рассказать о программе.
У многостраничников и интернет-магазинов своя структура, а у лендингов есть традиционная: оффер на первом экране, описание компании или продукта, призыв к действию, преимущества, отзывы и контакты».
Сайты на Тильде состоят из блоков и страниц. Один блок — один экран.
Чтобы продумать структуру лендинга, я использовала шаблон с универсальными блоками и оставила только те, что решают мою задачу: обложка, команда, главные цифры, содержание курса, цены, FAQ, контакты.
.png)
Антон Чиков:
«Количество блоков на сайте неограниченно, всё зависит от задач. Чем сложнее задача, тем больше блоков нужно: для сайта пейнтбольного клуба хватит 6–7 блоков, а продавцу буровых установок может не хватить 15-ти».
Подготовка контента для сайта
Дальше я подготовила текст и фотографии. Несколько советов как подготовить текст для сайта:
- Текст должен быть простым и понятным. Представьте, что рассказываете клиенту о своей компании или продукте. Так все и запишите, а потом перечитайте вслух.
- Выделите главное и добавьте интересные подробности. Не старайтесь расписать на сайте всё, что возможно.
- Включите зануду: придирайтесь к словам, найдите неясные моменты, ответьте на свои вопросы.
В блоге Тильды есть статья, которая поможет написать полезный текст для сайта.
Я подобрала иллюстрацию для главной страницы, скачала фотографии авторов курса, сделала скриншоты страниц с уроками.
Антон Чиков:
«Используйте свои иллюстрации или покупайте на стоках. Мы берём фото с Энвато — недорого и с коммерческой лицензией. Обратите внимание на оптимальный размер фото для Тильды — 1680 px по большей стороне.
Если у вас много иллюстраций на сайте — сожмите их. Иначе у пользователя с нестабильным интернетом сайт не загрузится и он уйдет. Я сжимаю фото на бесплатном сервисе Optimizilla».
Прототипирование
Прототип — схема сайта, которая показывает, как будут располагаться кнопки, текст, картинки и другие элементы. Мне как новичку ребята советовали нарисовать прототип на бумаге или расписать структуру сайта в Гуглдок.
.jpg)
Вот такой прототип лендинга у меня получился
Антон Чиков:
«Мы делаем прототипы и согласовываем проекты сайтов в Фигме: в ней удобно работать командой и не приходится менять дизайн в Тильде».
Шрифты, цвета, иконки
Для новичка самый простой способ подобрать шрифт и цвет — подсмотреть на других сайтах по схожей тематике. Несколько ресурсов, где можно вдохновиться: One Page Love, Lapa Ninja, Land-Book.
Если у вас уже есть корпоративные цвета и шрифт, используйте их. Шрифт и цвета можно посмотреть с помощью расширения для Google Chrome CSS Pepper.
.png)
Основные цвета нашего сайта: черный, желтый, голубой. Цвет фона — белый и серый
Антон Чиков:
«Не используйте на сайте больше 2–3 цветов. Один цвет — основной, остальные — акцентные.
Советую не использовать больше двух разных шрифтов. Лучше пользоваться шрифтовыми парами, уже подобранными дизайнерами Тильды. Забудьте о курсиве и шрифте Roboto — он «состарит» сайт».
.png)
Тильда предлагает несколько пар шрифтов, этого более чем достаточно. Установить шрифт можно в настройках сайта
Я не стала искать иконки, решила ограничиться стандартными иконками Тильды. Мои коллеги-дизайнеры для поиска иконок пользуются сайтами Flaticon или Thenounproject. На первом сайте иконки бесплатные, их можно скачать в любом цвете и в формате SVG. На втором сайте — хорошие подборки, можно найти несколько разных иконок в едином стиле.
Верстка в Тильде
Верстка сайта заняла один день. Чтобы быстро собрать сайт на Тильде, я взяла готовый шаблон. Впоследствии от него осталось только три блока, остальное я добавляла из библиотеки блоков Тильды.
Собирать сайт из блоков было легко, интерфейс Тильды интуитивно понятный. Мне даже не пришлось обращаться к инструкциям на этом этапе. Если вам что-то будет неясно, в справочном центре Тильды — ответы на все вопросы.
Вот несколько блоков моего лендинга:
.png)
.png)
.png)
Антон Чиков:
«Все стандартные блоки Тильды хорошо сочетаются между собой. Не вносите много правок.
Проверьте, чтобы одинаковыми были цвета, формы кнопок, отступы, размер шрифта для заголовков разных уровней и основного текста.
Мысленно проведите две линии слева и справа, элементы сайта не должны выходить за эти линии. Отрегулировать ширину блока можно в его настройках. Мы устанавливаем ширину 12 колонок».
.png)
Дольше всего я провозилась с кнопками. В настройках каждого блока поправила цвет текста и фона, установила одинаковый радиус скругления
Чтобы сайт на Тильде не выглядел шаблонным, его можно кастомизировать. Есть несколько простых приемов, которые помогут сделать сайт непохожим на все остальные:
- Загрузите видео на обложку вместо фото. Это сделать просто, и сайт будет выглядеть эффектно.
- Подключите анимацию к блоку. Когда на сайте все движется, информацию тяжело воспринимать, поэтому лучше с ней не перебарщивать.
- Разбавьте стандартные блоки zero-блоками. С их помощью картинку или текст располагают в определенном месте, а не там, где они в стандартных блоках. Но потом этот блок придется отдельно адаптировать для мобильных устройств.
Антон Чиков:
«Я редко использую в работе стандартные блоки, все делаю в zero. Новичкам для кастомизации советую попробовать сторонние сервисы, которые легко интегрируются с Тильдой. Например, на сайт можно добавить фотогалерею из Instagram, калькуляторы, интерактивные картинки».
Действия перед публикацией сайта
Я собрала все в Тильде, но мне предстоит еще один важный этап: оптимизация и тестирование. У нас есть чеклист, который дизайнеры Svoemedia каждый день используют в работе. В нем все, что нужно сделать перед публикацией сайта с нашими лайфхаками. Еще у Тильды есть инструкции для каждого из этих действий.
Я перечислю только самое важное, без чего сайт не будет функционировать полноценно. Вот что нужно сделать:
- Проверить ссылки — в правильное ли место они ведут.
- Проверить, как сайт выглядит на мобильных, если вы использовали zero-блоки.
- Настроить и протестировать формы приема данных.
- Сделать базовое SEO.
Антон Чиков:
«Минимум, что нужно сделать по SEO — прописать заголовки: H1, H2, H3 и так далее. Заголовок H1 содержать ключевой запрос, по которому ваш сайт будут искать.
Еще пропишите title и description. Их видно в поисковике и когда отправляете ссылку на свой сайт. Тильда позволяет прописать разные варианты заголовка и описания для отображения в поисковой выдаче и при шеринге в социальных сетях».
- Добавить документы о защите персональных данных, если собираете информацию о пользователях: имя, e-mail, телефон и другое.
- Добавить фавикон и бейджик для соцсетей.
- Подключить домен.
- Включить индексацию в настройках сайта.
- Проверить оптимизацию для поисковиков через Тильда-панель вебмастера.
Итоги
Чтобы сделать сайт на Тильде, за который не будет стыдно, нужно продумать структуру, написать текст, подобрать картинки, собрать все в Тильде, оптимизировать, протестировать и опубликовать.
Чтобы сайт получился достойным, вдохновляйтесь сайтами из вашей ниши. Смотрите, что в них работает и почему, применяйте лучший опыт на своем сайте.
Создание лендинга заняло 2 дня: один на подготовку контента и прототип, и еще день на верстку в Тильде, оптимизацию и тестирование.
Читать еще: «Обзор конструктора сайтов Tilda: возможности, ограничения, советы»
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.
Полный текст статьи читайте на Нетология
