10 вдохновляющих дизайнов сайтов сентября

Делимся десятью сайтами из галереи лучших проектов на Тильде, добавленных в сентябре. Рассказываем, на что обратить внимание, какие приёмы взять на заметку и добавить в коллекцию референсов.

В подборке: сайт онлайн-школы иностранных языков, лендинг школы стендап-комедии, сайт 44-го Московского Международного кинофестиваля, интернет-магазин одежды из Сеула, лендинг курса об уходе за растениями и другие.

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

На главной странице анимация и цветной шейп привлекают внимание к ссылкам, ведущим в каталог. При наведении на них появляются фотографии товаров. В каталоге есть фильтры и сортировка. На карточках товара расположены плашки со статусом или характеристикой продукта: предзаказ, sold out, unisex и другие.

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

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

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

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

В блоке «Кому подходит Wolle» с помощью иллюстраций и цветов — красный, зелёный — наглядно показан эффект от продукта: до встречи ты раздражённый и злой, после — спокойный и довольный. Блок про лаборатории сделан в виде карточек с фиксацией при скролле. Эмоджи с анимацией акцентирует внимание на расписание митапа.

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

Лендинг двухдневного интенсива для продуктовых менеджеров от ScrumTrek и Ikra. Внимание привлекают авторские динамичные иллюстрации, которые за счёт теней и бликов кажутся объёмными. Плавная смена фона сайта передаёт эмоциональные ощущения от продукта: серость и плохое настроение сменяются яркими цветами.

Хороший пример современного сайта компании по разработке и производству корпоративной и специальной одежды. Сайт выделяется качественными фотографиями товаров, цехов и сотрудников.

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

Лендинг бегового клуба в Москве. Сайт привлекает рисованными деталями и фотографиями в движении. Фотографии спортсмена за счёт правильного ракурса и наложения на соседние блоки создают на сайте объём и динамику.

Росчерки используются как самостоятельные декоративные элементы и для взаимодействия с текстом, например, для зачёркивания старой цены в разделе «Стоимость».

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

Какой сайт вам понравился больше всего? Поделитесь в комментариях.

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