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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подписывайтесь на наш телеграм-канал, чтобы узнавать больше о создании сайтов и веб-дизайне.