Tilda — сервис, занимающий средние позиции в списке конструкторов сайтов. Движок оснащен визуальным редактором, в котором можно собрать лендинг, портфолио, небольшой интернет-магазин, блог и прочие медийные проекты: лонгриды, фотоистории, мультимедийные страницы.
Тильда предлагает разные способы отображения контента, поэтому иногда сложно выбрать, какие именно инструменты стоит использовать для реализации проекта. Если вы столкнулись с такой проблемой, то посмотрите нашу подборку сайтов на Tilda, которая может вдохновить на новые свершения в веб-дизайне и заодно покажет, как можно использовать возможности, которые предлагает сервис.
Kitchenceremony.com — интернет-магазин пряностей и кухонных аксессуаров, демонстрирующий продающие возможности Tilda. В каталоге перед каждым типом товаров располагается блок с коротким описанием. Из него можно узнать о составе продукта и о блюдах, к которым он подходит. У каждого товара есть отдельная страница с подробным описанием, несколькими фотографиями и кнопкой в «В корзину».
Сама корзина представлена в виде простой формы, в которой необходимо указать имя, e-mail, телефон и выбрать способ доставки. Оплаты онлайн нет, но это решение магазина, а не недостаток Tilda. Конструктор предлагает интеграцию с 12 платёжными системами, среди которых PayPal, Robokassa, «Яндекс.Деньги» и «Сбербанк». Подключаются они на одноимённой вкладке в настройках проекта. На главной странице располагаются самые популярные товары, а также ссылки на разделы каталога. На сайте есть журнал с тематическими материалами. Перейти в него можно через меню навигации или с помощью блока с последними статьями внизу главной страницы. Чистая, красивая и удобная вёрстка — на Tilda добиться этого не так уж и сложно.
Partner.tochka.com – сайт-одностраничник банка для предпринимателей, который бьёт в целевую аудиторию лаконичным и стильным дизайном без лишних эффектов. Главная цель страницы — рассказать о возможностях для бизнеса. Делается это с помощью пяти стандартных блоков Tilda и трёх основных цветов.
Правда, в некоторых случаях минимализм становится чрезмерным. На странице есть только одна кнопка «Заказать счёт». Она располагается на первом экране и не спускается вниз при скроллинге. Если, допустим, посетитель захочет сделать заказ после блока с тарифами, то ему придётся возвращаться наверх или спускаться вниз. Сама форма заявки содержит только поле для ввода номера телефона. Можно было добавить хотя бы имя, а так получается, что менеджеру приходится знакомиться с клиентом при звонке. Имя легко бы влезло на место, которое занимает номер телефона — там всё равно куча свободного пространства. Исправить этот недостаток можно стандартными инструментами Tilda, нужно лишь правильно отладить форму.
Logomachine.ru – если в предыдущем примере целевая аудитория вряд ли оценила бы большое количество эффектов, то в случае с сайтом дизайн-студии по созданию логотипов они как никогда кстати. Для создания блоков использовался редактор Zero Block с пошаговой настройкой анимации и разными триггерами. Например, на первом экране элементы реагируют на курсор, а при перечислении проектов ниже начинают движение при появлении блока на экране.
В мобильной версии сайта всё скомпоновано тоже очень круто: элементы аккуратно располагаются по вертикали, отступы везде одинаковые, блоки не давят друг на друга. Внизу постоянно висят кнопки чата и заказа обратного звонка, так что если после изучения очередного проекта у посетителя внезапно возникнет сильное желание обратиться в дизайн-студию, ему не придётся скроллить страницу в поисках контактов.
Ptichka.me — сайт сети парикмахерских, филиалы которой расположены в разных концах России. Для каждого города сделана собственная версия сайта, чтобы посетители получали корректную информацию о стоимости, которая заметно отличается. Для быстрого перехода к списку услуг в меню есть раздел «Цены», но работает он только для московской версии. Для других городов якорь не работает. Исправляется это правильной настройкой ссылки.
Новости добавляются в виде отдельных страниц и содержат много больших фотографий, так что их интересно просматривать. На сайте реализована возможность онлайн-записи, которую обеспечивает виджет от YCLIENTS. Он есть среди стандартных блоков конструктора в категории «Другое». Чтобы добавить его, достаточно создать виджет на сервисе YCLIENTS, а затем прописать в контенте блока номер формы онлайн-записи.
Topproekt — портфолио архитектурной компании, при создании которого использовано минимальное количество возможностей Tilda. Судя по домену, у разработчика был подключен тариф Personal, на котором копирайт конструктора в футере убирается. Однако лейбл Made on Tilda остался на своём месте. То же относится к значку конструктора, который отображается по умолчанию на вкладке рядом с названием сайта. Чтобы заменить его, достаточно зайти в настройки проекта и загрузить другое изображение.
При создании сайта использовались только стандартные блоки, поэтому страницы не очень интересно изучать. Всё-таки портфолио должно вызывать какие-то эмоции, а здесь представлены только четыре вида блоков: текст, врезка, отдельные изображения и галереи. Из положительных моментов отметим наличие полноценной англоязычной версии сайта. Переключатель языков находится в меню навигации, которое остаются закреплённым наверху при скроллинге. В остальном потенциал Tilda не раскрыт даже на треть — учитывая тематику, можно было сделать портфолио гораздо более привлекательным.
Wonder-circus.ru – одностраничник московского цирка. Является анонсом предстоящего открытия с программой и возможностью предзаказа билетов на предстоящие выступления. Продающая страница. Дизайн соответствующий: яркие цвета, сочные фотографии, описания представлений и эффекты. Выглядит броско, атмосферно, оформление выполнено довольно качественно. Есть возможность скачать приложение цирка для Android и iOS. В меню используются анкорные ссылки, но часть из них не работают — видимо, страница свежая, ещё не всё довели до ума.
Есть мелкие огрехи в структуре: например, в разделе контактов висит кусок пустого пространства перед картами проезда, не несущий никакой смысловой нагрузки. Описания постановок привлекательные, под каждую отведена отдельная страница на этом же домене. Есть расписание мероприятий с ценами и схемой площадок для выступления с обозначением уже выкупленных билетов. Купить билет онлайн нельзя, но можно заказать по телефону или приобрести в одной из касс города из списка. Шрифты обычные, без стилизации под развлекательный мотив. Хорошая работа с мелкими недочётами.
Turbosolution.ru – визитка компании-разработчика программного обеспечения для автоматизации бизнес-процессов малых и средних предприятий. Бухгалтерский, складской учёт, начисление зарплат, логистика и прочее — в арсенале движка много решений под разные направления хозяйственной деятельности. Программный комплекс удовлетворяет закону об импортозамещении, использует свою структуру баз данных. Сайт имеет англоязычную версию, выглядит вполне привлекательно. Присутствует корзина покупателя, но без возможности осуществления оплаты онлайн — все продукты нужно заказывать через форму заявки.
Дизайн адаптивный, страницы открываются быстро. Структура меню простейшая, ничего лишнего. Цветовая гамма приятна глазу благодаря зелёным акцентам и большому количеству белого пространства. Шрифты хорошо читаются, в меру крупные, но местами бледноваты. Форматирование текстовой части сайта выглядит хорошо. В шапке лаконично поданы контакты кнопкой доступа к форме обратной связи и телефоном. Также хорошо смотрятся анимации со схемами. Много цифр, преимуществ, графики, фотографий — визитка насыщена информацией, выглядит органично, современно. Есть возможность бесплатного тест-драйва приложений. Хороший бизнес-сайт во всех отношениях.
Fabrika-wood.ru – сайт фабрики по производству деревянных ящиков, подарочных упаковок и прочих вариантов фурнитуры под различные форматы. В десктопной версии присутствует боковое меню на четверть экрана, которое нельзя скрыть. Меню обширное, пунктов много, тем не менее, имеем дело с лендингом. При попытке перейти по любой из ссылок меню открывается одна и та же, единственная страница сайта – стартовая. Оформлена она нормально: перечислены виды изделий, есть галерея с примерами работ, форма для связи с изготовителем, онлайн-консультант Jivo и даже телефон.
Тем не менее, сайт явно не доделан. В нём нет страниц, указанных в главном меню, а той информации, что содержит главная явно недостаточно для принятия решения обратиться в компанию. Ни цен, ни портфолио по категориям продукции, ни описаний видов изделий, ни подробных контактных данных здесь нет. Нужен или более развёрнутый лендинг, или полноценный многостраничник со всеми необходимыми данными. Здесь даже профилей социалок не указано и локации производителя. В общем, на треть готовый проект, брошенный разработчиком.
Effee.ru – лендинг специалиста по вязанию, которая ведёт оффлайновые и записала множество онлайн-курсов. Страница содержит всё необходимое для принятия решения потенциальной аудиторией: информативную шапку с расписанием, условиями и особенностями курса, описание формата обучения, примеры работ, перечень навыков, которые получат ученики, подробное описание курса по всем 4 этапам и даже тарифную сетку с кнопками записи. Отзыв участника курса всего один – маловато, хотя бы 3 варианта не помешало бы поставить, увеличив охват информации, расширив представление о качестве обучения.
С точки зрения дизайна сайт симпатичный, есть даже рисованные иллюстрации в блоке преимуществ. Бордовые акценты элементов на белом фоне смотрятся почти празднично, бодро. Шрифты внятные, легко читаются, подача текстовой информации качественная. В десктопной версии фрейм с описанием получаемых навыков обрывается снизу, скрывая часть текста, - неаккуратно выглядит. В остальном порядок. Примеров готовых работ маловато, нужно раза в 2 больше, как минимум. Для обратной связи используются соцсети, форма для оставления заявки и телефонный номер – вполне достаточный набор. Неплохой лендинг, собранный, судя по всему, автором курсов.
Ebukva.litres.ru – сайт, посвященный литературной премии в области электронных и аудиокниг. Конкурс проводится как среди авторов, так и чтецов. Под фиксированной кнопкой-«бургером» прячется меню сайта и ссылки на страницы для подачи заявки на премию. Аналогичные ссылки размещены и на первом экране в виде кнопок и элементов дизайна.
На главной странице можно ознакомиться с призовым фондом конкурса, свежими новостями, оформленными в виде слайдера, расписанием, членами жюри, спонсорами. Внизу страницы размещены ответы на частые вопросы, структурированные в виде раскрывающихся пунктов. В подвале находится информация об организаторах, контактные данные, ссылки на соцсети и мобильные приложения.
Творчески выполненный сайт с ярким уникальным дизайном, анимацией появления виджетов и интерактивными элементами. Сайт полностью соответствует интересам целевой аудитории и поставленным целям.
Магазин Shop.diletant.media принадлежит культурно-просветительскому изданию Дилетант. Помимо печатных версий своего журнала издательство реализует комиксы и книги, в т.ч. коллекционные издания, не подлежащие вывозу из РФ. С первого взгляда возникают претензии к данному магазину. Шапка и первый экран не несут никакой информации о содержимом сайта, т.е., чтобы понять, на какой ресурс ты попал, необходимо проскроллить страницу.
Главная страница представляет собой товарную витрину, разделенную на отдельные блоки – категории товаров, при этом меню с категориями отсутствует. Над витриной расположена строка поиска и инструмент сортировки, но их действие распространяется только на первый блок (товары в наличии). Карточка товара с описанием и дополнительными фото открывается во всплывающем окне. Оплатить заказ можно банковской картой или через Яндекс.Pay. Внизу страницы размещен раздел FAQ в виде раскрывающихся пунктов, под ним реклама мобильного приложения издания. В подвале – ссылки на соцсети и сайт почты России для оформления подписки на журнал. Плохая реализация хорошей идеи, магазин нуждается в серьезной доработке.
В подборке мы постарались показать примеры использования Tilda для создания разных типов сайтов: портфолио, лендинга, интернет-магазина, блога, сайта компании. В них были использованы стандартные блоки и элементы, созданные через Zero Block.
Надеемся, что это помогло вам лучше понять, как использовать конструктор, и теперь вы самостоятельно создадите на нём привлекательный проект.
