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