Подборка сайтов из галереи лучших проектов на Тильде

#madeontilda — галерея проектов пользователей Тильды, где можно найти примеры современного веб-дизайна. Каждый день нам присылают десятки работ, дизайнеры отбирают лучшие из них и публикуют в открытом доступе. Мы выбрали для вас девять проектов из галереи и расскажем об интересных визуальных решениях, которые заметили.

В статье: сайт онлайн-курсов по гуманитарным наукам от медиа-проекта «Страдающее Средневековье», сайт и интернет-магазин сети салонов для кудрявых, лендинг выставки, посвящённой Алексею Балабанову, лонгрид об игре-головоломке Тетрис и другие проекты. Это вторая подборка для вдохновения читателей VC: сайты можно сохранить как референсы, или познакомиться и поддержать новый проект. Первую подборку смотрите по ссылке.

Так и ходи

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

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

Балабанов — выставка-путешествие

Лендинг выставки в пространстве «Севкабель Порт», посвящённой Алексею Балабанову. Акцидентный шрифт с засечками Camerton и «шумный» фон создают на сайте атмосферу архива. На странице представлены не только фотографии с выставки, но и кадры из фильмов режиссёра.

Обложка, сделанная из нескольких слоёв текста и изображений, выглядит как плакат. Шапка при скролле фиксируется вверху страницы. В меню выделен пункт с целевым действием — покупкой билетов. Жёлтый цвет сразу бросается в глаза, позволяет быстро найти ссылку и оплатить посещение выставки. В бегущей строке посетитель сайта может прочитать о ключевых особенностях экспозиции: её площадь, наличие аудиогида, количество тематических зон. Организационную информацию о выставке и правила посещения тематически вынесли в конец лендинга — в блок «Титры». Выставка проходит до 15 января 2023 года.

Страдариум

Сайт онлайн-курсов по гуманитарным наукам от медиа-проекта «Страдающее Средневековье». Сайт выполнен в контрастных цветах с отрисованными границами модулей и изогнутыми линиями в оформлении. Анимация по ховеру с инверсией цвета добавляет дизайну динамики и интерактивности.

На главной странице для каждого курса используются авторские иллюстрации, символизирующие тему. Страницы образовательных программ также оформлены по-разному: на лендинге «Пять разговоров о Данте» преобладают красный и бежевый цвета, а на странице курса про Босха — зелёный и чёрный. На каждом лендинге можно найти программу курса, узнать, как проходить обучение, а если ведётся набор на курс — сразу оплатить его.

Monday4me

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

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

Светлячок

Сайт центра раннего развития детей в Нижнем Новгороде. Дизайн сайта напоминает детскую книжку, которую читают перед сном. Анимация помогает погрузить пользователя в историю и подталкивает пролистать блоки ещё раз. Пастельные цвета, фетровые игрушки и облачка передают атмосферу детства. Пунктирные линии в иллюстрациях, логотипе и в оформлении блоков объединяют элементы, делая дизайн сайта гармоничным и цельным.

RisePack

Сайт производства вакуумных и термоусадочных пакетов. Основной цвет сайта — молочный, а жёлтый и синий используют для акцентов и интерактивных элементов, например, для кнопок. На сайте можно оформить заказ продукции. Для этого нужно кликнуть на кнопку «сделать заказ» и заполнить форму.

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

Клиника «Апельсин»

Сайт стоматологической клиники Санкт-Петербурга. Тёплая палитра, нетипичная для сайта медицинского учреждения, создаёт ощущение комфорта и уюта. Фотографии клиники и команды сделаны в единой стилистике, хорошо вписываются в дизайн сайта, располагают к себе и вызывают доверие.

В блоке «Услуги и цены» при наведении карточка меняет цвет: фон становится оранжевым, а шрифт белым. Этот приём с инверсией цвета по ховеру помогает пользователю понять, на какой услуге он сейчас находится, и выделяет её среди других. При клике на карточку появляется поп-ап со стоимостью и кнопкой записи на приём.

Ano-identity

Минималистичный сайт образовательного курса для студентов. Выполнен в чёрно-белых тонах. Заголовок в обложке залит градиентом. В качестве декоративных элементов используют фигуры и акцидентный шрифт, который задаёт характер. Заявки на курс принимались до 20 октября. Количество дней до окончания срока показывал таймер с обратным отсчётом.

Тетрис

Лонгрид об игре-головоломке Тетрис. Игровую тему подчёркивают шрифты и сочетание чёрного и зелёного цветов. Текстовые блоки повторяют вид фигур из игры. По всему лендингу появляются анимированные формы и гифки, отсылающие к Тетрису. А если нажать на кнопку Start, можно сыграть в игру прямо на сайте.

Больше вдохновляющих проектов, созданных на Тильде, смотрите в галерее #madeontilda.

5656
13 комментариев

Больше половины посетителей сайтов с мобильных устройств. Все эти "креативные" дизайны выглядят нелепо на смартфонах и затрудняют поиск нужной информации.

9
Ответить

И в чем ваша проблема?

4
Ответить

классная подборка, мне вот сайт с средством для волос понравился больше всего

5
Ответить

Внезапно, но попадание в подборку madeontilda приводит еще и трафик.
Сделали клиенту новый сайт, он попал в подборку лучших сайтов в категории Бизнес, и сразу же пошел прямой трафик. Более 2000 визитов.
Понятно, что не совсем целевой трафик, но он поисковикам показывает, что новый сайт нормальный. Отказов мало, роботности нет, время на сайте приличное.
Как итог переход с Битрикса на Тильду произошел безболезненно для SEO (задача была сделать новый сайт и не потерять в трафике из поиска).

2
Ответить

Сайт детского центра "Светлячок" — это моя работа ^-^
Как приятно!
За дизайнами обращайтесь >> https://taplink.cc/nnatalie_g

2
Ответить

Очень мило

1
Ответить

Ой, наш проект (термоусадочная плёнка) добавили. Спасибо

Ответить