#madeontilda — галерея проектов пользователей Тильды, где можно найти примеры современного веб-дизайна. Каждый день нам присылают десятки работ, дизайнеры отбирают лучшие из них и публикуют в открытом доступе. Мы выбрали для вас девять проектов из галереи и расскажем об интересных визуальных решениях, которые заметили.
10 444 просмотров
В статье: сайт онлайн-курсов по гуманитарным наукам от медиа-проекта «Страдающее Средневековье», сайт и интернет-магазин сети салонов для кудрявых, лендинг выставки, посвящённой Алексею Балабанову, лонгрид об игре-головоломке Тетрис и другие проекты. Это вторая подборка для вдохновения читателей VC: сайты можно сохранить как референсы, или познакомиться и поддержать новый проект. Первую подборку смотрите по ссылке.
Так и ходи
Сайт сети салонов для кудрявых. Дизайн выполнен в фирменном стиле бренда: яркие цвета и немного небрежный акцидентный шрифт напоминают о таких же кудрявых волосах. Анимированные по скроллу фигуры повторяют стиль иллюстраций с этикеток на косметике собственного производства. На странице о салоне можно посмотреть фотографии интерьера, список услуг, информацию о том, как подготовиться к визиту, и перейти к форме записи. Заходя на сайт, сразу чувствуешь поддержку и заботу о кудрявых.
На сайте также есть интернет-магазин с косметикой для волос и мерчем, которые можно купить с доставкой. В каталоге при наведении на карточки кондиционеров появляется фотография с типом волос, для которых это косметическое средство подходит.
Балабанов — выставка-путешествие
Лендинг выставки в пространстве «Севкабель Порт», посвящённой Алексею Балабанову. Акцидентный шрифт с засечками Camerton и «шумный» фон создают на сайте атмосферу архива. На странице представлены не только фотографии с выставки, но и кадры из фильмов режиссёра.
Обложка, сделанная из нескольких слоёв текста и изображений, выглядит как плакат. Шапка при скролле фиксируется вверху страницы. В меню выделен пункт с целевым действием — покупкой билетов. Жёлтый цвет сразу бросается в глаза, позволяет быстро найти ссылку и оплатить посещение выставки.
В бегущей строке посетитель сайта может прочитать о ключевых особенностях экспозиции: её площадь, наличие аудиогида, количество тематических зон. Организационную информацию о выставке и правила посещения тематически вынесли в конец лендинга — в блок «Титры». Выставка проходит до 15 января 2023 года.
Страдариум
Сайт онлайн-курсов по гуманитарным наукам от медиа-проекта «Страдающее Средневековье». Сайт выполнен в контрастных цветах с отрисованными границами модулей и изогнутыми линиями в оформлении. Анимация по ховеру с инверсией цвета добавляет дизайну динамики и интерактивности.
На главной странице для каждого курса используются авторские иллюстрации, символизирующие тему. Страницы образовательных программ также оформлены по-разному: на лендинге «Пять разговоров о Данте» преобладают красный и бежевый цвета, а на странице курса про Босха — зелёный и чёрный. На каждом лендинге можно найти программу курса, узнать, как проходить обучение, а если ведётся набор на курс — сразу оплатить его.
Сайт сервиса заботы о ментальном здоровье, работающего на базе телеграм-бота. Главная страница запоминается благодаря иллюстрациям с маскотом. Он и рукописные элементы дополняют лендинг, делая его дружелюбным. Видео с демонстрацией сервиса показывают, как работает бот и чем он будет полезен. Проблемы, с которыми помогает сервис, перечислены в виде карточек с анимацией по ховеру.
При наведении на них текст меняется и посетитель сайта может узнать, где искать помощь внутри бота.
Список психологов сервиса сделан в виде карточек в слайдере. На каждой указаны специализация, опыт работы и есть кнопка «Подробнее», кликнув на которую можно узнать больше об эксперте. Блок с ответами на часто задаваемые вопросы сделан в виде раскрывающегося списка. Такое оформление позволяет быстро найти нужный вопрос и открыть развёрнутый ответ.
Ниже привлекает внимание анимированный по скроллу блок из трёх рядов кнопок с призывами к действию: попробовать, завести дневник эмоций, помочь другим. При клике них открывается телеграм-бот.
Сайт центра раннего развития детей в Нижнем Новгороде. Дизайн сайта напоминает детскую книжку, которую читают перед сном. Анимация помогает погрузить пользователя в историю и подталкивает пролистать блоки ещё раз. Пастельные цвета, фетровые игрушки и облачка передают атмосферу детства. Пунктирные линии в иллюстрациях, логотипе и в оформлении блоков объединяют элементы, делая дизайн сайта гармоничным и цельным.
Сайт производства вакуумных и термоусадочных пакетов. Основной цвет сайта — молочный, а жёлтый и синий используют для акцентов и интерактивных элементов, например, для кнопок. На сайте можно оформить заказ продукции. Для этого нужно кликнуть на кнопку «сделать заказ» и заполнить форму.
На главной странице в слайдере изображены пакеты, которые производит компания. Ниже визуальная перебивка — пакет с акулой внутри во весь экран и бегущая строка на заднем фоне. Необычная крупная деталь привлекает внимание посетителя сайта, он прокручивает сайт дальше и попадает на блок с преимуществами продукта. Ключевая информация о компании выделяется анимацией цветного шейпа, который как будто перетекает с одного пункта в другой. География поставок изображена в виде интерактивной карты с цифрами, при наведении на которые подсвечивается название региона.
Клиника «Апельсин»
Сайт стоматологической клиники Санкт-Петербурга. Тёплая палитра, нетипичная для сайта медицинского учреждения, создаёт ощущение комфорта и уюта. Фотографии клиники и команды сделаны в единой стилистике, хорошо вписываются в дизайн сайта, располагают к себе и вызывают доверие.
В блоке «Услуги и цены» при наведении карточка меняет цвет: фон становится оранжевым, а шрифт белым. Этот приём с инверсией цвета по ховеру помогает пользователю понять, на какой услуге он сейчас находится, и выделяет её среди других. При клике на карточку появляется поп-ап со стоимостью и кнопкой записи на приём.
Ano-identity
Лонгрид об игре-головоломке Тетрис. Игровую тему подчёркивают шрифты и сочетание чёрного и зелёного цветов. Текстовые блоки повторяют вид фигур из игры. По всему лендингу появляются анимированные формы и гифки, отсылающие к Тетрису. А если нажать на кнопку Start, можно сыграть в игру прямо на сайте.
Больше вдохновляющих проектов, созданных на Тильде, смотрите в галерее #madeontilda.
Источник: vc.ru
Примеры сайтов на (Тильда)
В конструкторе Tilda можно сделать очень достойные сайты. Но если пользоваться только стандартными блоками и не экспериментировать, то каждый раз будет получаться примерно одно и то же: скучная последовательность прямоугольных форм. Итак, представляем подборку примеров по которых можно объективно судить о функциональных возможностях платформы.
Tilda — сервис, занимающий средние позиции в списке конструкторов сайтов. Движок оснащен визуальным редактором, в котором можно собрать лендинг, портфолио, небольшой интернет-магазин, блог и прочие медийные проекты: лонгриды, фотоистории, мультимедийные страницы.
Тильда предлагает разные способы отображения контента, поэтому иногда сложно выбрать, какие именно инструменты стоит использовать для реализации проекта. Если вы столкнулись с такой проблемой, то посмотрите нашу подборку сайтов на Tilda, которая может вдохновить на новые свершения в веб-дизайне и заодно покажет, как можно использовать возможности, которые предлагает сервис.
Примеры Tilda-сайтов:
- Kitchenceremony.com – магазин пряностей.
- Partner.tochka.com – одностраничник банка.
- Logomachine.ru – студия дизайна.
- Ptichka.me – сайт сети парикмахерских.
- Topproekt.com – портфолио компании.
- Wonder-circus.ru – сайт московского цирка.
- Turbosolution.ru – разработчики ПО.
- Fabrika-wood.ru – производитель деревянных изделий.
- Effee.ru – школа вязания.
- W.org.kz – сайт жилого комплекса.
- Ebukva.litres.ru – литературная премия «Электронная буква».
- Inc.hse.ru – бизнес-инкубатор
- Shop.diletant.media – книжный магазин
- Genteh.tsu.ru – геномные технологии
Источник: uguide.ru
Примеры сайтов, созданных на Tilda
С помощью пользователи могут создавать различные виды интернет-ресурсов, начиная от лонгридов и лендингов, заканчивая сайтами для бизнеса и небольшими магазинами. Стоит отметить, что в бесплатной версии возможности конструктора все же ограничиваются базовыми функциями, а для того, чтобы создать действительно что-то стоящее придется оформлять недешевую платную подписку. Рассмотрим несколько интернет-ресурсов, построенных при помощи конструктора Tilda.
2022-11-15 2671 Евгений Куликов Рейтинг: 3.0
№1. Сайт спортивного комплекса «Газпром Арена»
Gazprom-arena.com – одностраничник мощного стадиона, мультиязычный, с откровенно красивым дизайном. Выразительный хедер коротко и внятно указывает фактами на преимущества спортивной арены, предлагая арендовать площади под частные мероприятия. Афиша ближайших событий, возможность онлайновой покупки билетов на ивенты, качественные описания возможностей стадиона по пунктам в красивом оформлении – всё выполнено классно. Есть ссылки на социалки, аккуратная форма подачи заявки – больше ничего и не нужно. Отличный одностраничник по всем параметрам.
№2. Медицинское страхование «Best Doctor»
Bestdoctor.ru – сайт-визитка компании, которая занимается медицинским страхованием бизнеса и частных лиц. Помогают оптимизировать расходы бюджета на обеспечение страховками сотрудников. Дизайн отличный, приятно смотреть: чистый, яркий, выразительный. Шрифты внятные, читаются легко, а тексты – грамотные.
Есть раздел узнаваемых брендов-партнёров, ссылки на отзывы СМИ и отдельных клиентов. Такие примеры сайтов на тильде очень грамотно подают информацию. Футер изобилует контактными данными, содержит ссылки на дополнительные статические страницы, соцсети и юридическую информацию. Безупречная, лаконичная визитка.
№3. Агентство мобильного маркетинга «Мобио»
Mobio.ru – круто собранная визитка специалистов по маркетингу. Имеет английскую локализацию. Дизайн стильный, немного агрессивный, контрастирует тёмными и светлыми элементами, а также геометрическими скосами границ секций. Использует множество цветов, но при этом не выглядит глупо, излишне пёстро. Компания успешная, о чём говорят разделы с сотрудниками и вакансиями.
Внушает доверие. Есть академия с массой статей и внешних ссылок на полезные материалы по теме. Описания готовых кейсов тоже впечатляют. На сайте множество изображений, графики и видео высокого качества. Текстовая часть на том же высоком уровне.
Явно эффективный сайт, сделанный на Тильда, примеры лендингов такого образца качественны во всех отношениях.
№4. Официальный сайт школы брендинга «Орфографика»
Главная Orfografika.ru представляет собой квинтэссенцию лендинга и бизнес-сайта. Он выполнен в серых тонах, с выделением важной информации. Каждый экран имеет свою логику, а пользователи смогут получить информацию как об основателе школы, так и о всех курсах. Некоторые разделы сайта выполнены в формате лонгрида, где раскрываются как подробности отдельных курсов, так и предоставляется часть информации, чтобы пользователь легко понял направление деятельности школы. Orfografika.ru — это большой ресурс, совмещающий в себе все преимущества популярных типов интернет-ресурсов.
№5. Портал образовательных проектов IKRA
Open.ikraikra.ru представлен пользователям в форме продающего лендинга, выполненного в собственном фирменном стиле. Дизайнер выбрал красно-белую палитру для максимальной эффективности донесения информации до конечного пользователя. Каждый экран представляет собой описание преимуществ мастерской образовательных проектов, знакомит с ценовой политикой, а также кураторами. В нижней части ресурса находится форма обратной связи, по которой можно пройти регистрацию. Здесь же вы найдете фотоотчеты и отзывы выпускников.
№6. Институт биоинформатики
Целью создания сайта Bioinf.me является популяризация биоинформатики и повышения квалификации специалистов в данной области. Наряду с русской сайт имеет англоязычную локализацию. Фиксированная шапка содержит многоуровневое меню с основными направлениями деятельности заведения. Другие ссылки на полезную информацию и аккаунты в соцсетях можно найти в футере.
Сразу под приветственным первым экраном расположена форма email-подписки, ниже – новостная лента, слайдер с фотографиями образовательного процесса, блоки с информацией о партнерах института и контактными данными, интерактивная карта. Институт имеет чат сообщества в Telegram, ссылка на который «спрятана» в одном из пунктов меню. Сайт не является коммерческим проектом, поэтому какие-либо маркетинговые инструменты отсутствуют.
№7. Проект «Те самые»
Theones.ru – авангардный проект команды людей с мышлением предпринимателей, объединившихся для решения различных бизнес-задач. Сайт имеет нестандартную структуру и дизайн, разработанный профессиональной вебстудией SpansAgency. Он состоит из пяти блоков, при этом пользователь на экране видит только один из них.
Перейти к нужной информации можно по размещенным в блоках ссылкам или из меню, скрытом под кнопкой в правом верхнем углу экрана. Меню сайта также продублировано в футере, но увидеть его можно только в последнем блоке с контактами. Там же находится форма обратной связи. Нестандартная подача информации, оригинальные динамические эффекты, безусловно, выделяют сайт на фоне конкурентов. Но интерфейс и навигацию нельзя назвать интуитивно понятными.
№8. Sami Mta
Сайт Samimta.com посвящен конкретной точке на карте – шале на склонах гор Сванетии под названием Sami Mta. На сайте можно узнать историю местности, забронировать номер для отдыха или заказать индивидуальную программу досуга. Практически вся важная информация размещена на главной станице: о доме, вариантах размещения, сервисе, раздел FAQ, форма обратной связи.
Более детальную информацию можно получить, перейдя по ссылкам в блоках, фиксированном меню или подвале сайта. В футере также находятся контакты и ссылки на аккаунты в соцсетях. На сайте много интерактивных элементов, видеоролики, галерея фотографий, слайдеры. Сайт стильный, с логичной структурой и понятным интерфейсом, разработан на заказ профессиональным дизайнером.
№9. Бренд LYNA+
Интернет-магазин Lynaplus.com принадлежит дизайнеру Юлии Крестининой и команде единомышленников, занимающихся разработкой и пошивом трикотажных изделий под брендом LYNA+. По плашке в шапке видно, что на сайте представлено два направления – взрослое и детское. Также в хедере под кнопкой спрятано меню и расположен значок корзины.
Первый экран главной страницы рекламирует новую коллекцию и содержит ссылки на соцсети. Ниже можно увидеть слайдер с ручной прокруткой с моделями коллекции, галерею с разделами каталога, фотографии отдельных изделий. В подвале – форма email-подписки, контактные данные и меню. Присутствует онлайн-чат.
В каталоге магазина можно выбрать категорию, настроить фильтры поиска, отсортировать результаты, найти модель через строку поиска. Товарная карточка содержит только краткое описание и дополнительные параметры заказа. Приятный сайт без излишеств в дизайне и функционале.
№10. Мобильные приложения от Level App
Level-app.ru – сайт, на котором можно заказать разработку мобильных приложений. Сайт традиционно начинается с фиксированного хедера, в котором, кроме меню, расположена кнопка обратного звонка для получения консультации. На первом экране – коммерческое предложение и ссылка на заполнение анкеты для заказа аудита.
Ниже на главной странице описаны преимущества и особенности сотрудничества с компанией Level App, примеры работ и отзывы клиентов, презентация сотрудников, раздел FAQ. В подвале – форма обратной связи, контактные данные и ссылки на соцсети. Возможно, не хватает онлайн-чата для быстрой связи с администрацией. Сайт разработан в профессиональной вебстудии, поэтому имеет привлекательный уникальный дизайн с визуальными динамическими эффектами, соответствующий направлению деятельности компании.
№11. Студия брендинга
Tarnovski.com – независимая частная студия брендинга, расположенная в Бухаресте и специализирующаяся на стратегии и айдентики бренда. На главном экране под шапкой с фиксированным меню размещены кнопки перехода на страницы с готовыми проектами и перечнем предоставляемых компанией услуг.
Ниже расположены блоки со схемой разработки стратегии, галереей выполненных работ, лентой новостей, анонсами статей блога, картой с географией клиентов, перечнем услуг, ссылками на страницу с контактами и форму отправки брифа. Связаться с компанией также можно с помощью популярных мессенджеров и других способов связи через установленный на сайте виджет. В подвале имеется форма email подписки и ссылки на соцсети. Дизайн сайта с использованием интерактивных элементов выглядит стильно и креативно, соответствуя направлению деятельности компании.
№12. Блог редакции Rutube
Blog.rutube.ru – блог популярного видеохостинга Rutube с новостями из мира кино и шоубизнеса, статьями и подборками мультфильмов, тематическими тестами. Блог имеет максимально простую структуру. В шапке закреплено меню, ссылки на соцсети и сам видеохостинг, на первом экране – тематическое изображение с презентацией блога.
Все страницы сайта, в т.ч. главная, представляют собой галерею с анонсами публикаций. На страницах публикаций присутствуют кнопки Поделиться, Виджет для оценки материала, выведен блок с рекомендациями. Для оформления постов использованы фото и видео материалы. В подвале указан email-адрес для обратной связи. Хороший блог с интересным контентом.
Для удобства пользователей стоило бы добавить строку поиска по сайту.
№13. Приложение Delivery Club
App.delivery-club.ru – одностраничный сайт, созданный для продвижения мобильного приложения Delivery Club, которое предназначено для заказа товаров из ресторанов, магазинов и аптек. На первом экране размещен видеоролик, демонстрирующий работу приложения и QR-код для его мгновенного скачивания. Ниже расположены блоки с описанием видов товаров, доступных к заказу через приложение, преимуществ его использования, ссылками для скачивания приложения через App Store или Google Play, а также разделом FAQ, оформленным в виде раскрывающихся пунктов. Для удобства навигации установлена кнопка прокрутки «Вверх». Небольшой лендинг с приятным дизайном, при грамотном продвижении способен обеспечить высокую конверсию.
№14. Типография в Алматы
1media.kz – сайт компании «1Media», являющейся типографией полного цикла и оказывающей все виды полиграфических и типографских услуг с доставкой по Казахстану. В шапке сайта указан номер телефона и расположена кнопка заказа обратного звонка, ниже которых находится многоуровневое меню. На первом экране – форма для заказа расчета стоимости продукции.
Также на первом экране имеется галерея с популярными видами выпускаемой продукции, преимущества типографии, отзывы, форма для заказа консультации, блок с логотипами компаний-партнеров, текстовый блок с описанием компании, контакты и интерактивная карта. В углу станицы установлен виджет для обратной связи по WhatsApp. К сайту несколько замечаний по оформлению, в частности, фото с отзывами нагромождены друг на друга и выглядят нечитабельно. Подвал с длинным перечнем продукции и незаметным значком Instagram портит впечатление от неплохого, в принципе, дизайна.
№15. Ателье Rebecca Schoneveld
Rebeccaschoneveld.com – сайт дизайнерской студии по пошиву свадебных платьев. Первый экран занимает слайдер с красивыми фото изделий, над ним – фиксированное меню. По расположенной ниже кнопке можно записаться на прием в один из салонов.
На главной странице находятся блоки с фото и ссылками на популярные коллекции, описание и преимущества студии, отзывы клиентов, виджет с лентой Instagram, форма email-подписки. В подвале имеются ссылки на другие соцсети, раздел FAQ и основные страницы сайта. Каталог моделей разделен на коллекции, имеет систему фильтров и сортировки.
К изображениям в каталоге применен эффект перекатывания. На страницах с описанием моделей размещены дополнительные фото, ссылки на раздел FAQ, форму обратной связи и страницу записи на прием. Профессионально выполненный сайт с достойным дизайном и удобным функционалом.
Итог
– это простой и одновременно функциональный конструктор, который позволит создавать сложные и интересные интернет-ресурсы. Тильда имеет готовые шаблоны, однако, при оформлении специальной подписки фантазию можно ничем не ограничивать, так как возможности не будут ограничиваться стандартными блоками — пользователи смогут подключить свой собственный домен, разместить несколько сайтов, а по необходимости писать собственные блоки, позволяющие создать действительно уникальный и запоминающийся интернет-ресурс.
Источник: konstruktorysajtov.com