Сайт почтового клиента Tatem

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

tatem.com

Больше скриншотов: awdee.ru/tatem-email-client-website

#awd_web #awd_site

Коллекция годных примеров интерактивной анимации элементов сайта

На сайте Web Interactions Gallery собраны хорошие примеры реализации переходов между страницами, индикаторов загрузки, появления секций и меню сайта. Сейчас в коллекции порядка 120 примеров, они разбиты на типы и сопровождаются коротким видео

webinteractions.gallery

#awd_web #awd_site #awd_collection #awd_ui

На сайте daylightcomputer.com очень кайфово применили скролл, чтобы показать суть и пользу устройства

#awd_web #awd_site

Мини-тренд в веб-дизайне: гигантский логотип в подвале сайта

#awd_trend #awd_web

Как правильно реализовать эффект матового стекла на сайтах

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

Джош Комо написал кайфовую статью с разбором всех таких недостатков и, главное, с примерами его грамотной реализации в CSS

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

В статье есть фрагменты готового кода и интерактивные примеры

В общем, читайте, добавляйте в закладки и отправляйте своим технологам: joshwcomeau.com/css/backdrop-filter

#awd_article #awd_web

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

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

hourly-app.com

#awd_web #awd_ui

Зацените сайт Antimetal

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

antimetal.com

#awd_web #awd_site

И ещё один впечатляющий сайт из свежего: Adaline

Лендинг платформы для разработки и управления LLM‑приложениями. Нетривиальные анимации и эффектные трёхмерные пролёты

www.adaline.ai

#awd_web #awd_site

Frontify — сайт платформы для управления шаблонами и гайдлайнами бренда

Приятная типографика с крупными заголовками и ненавязчивая анимация по скроллу

frontify.com

#awd_web #awd_site

Azak — сайт компании, которая производит инновационные колёса

Колесо представляет собой модульную систему: мотор, аккумулятор и элементы управления встроены прямо в него. Такие устройства позволяют превратить в транспортное средство практически что угодно

Качественные 3D-модели на сайте, анимации, нейтральные цвета и лаконичный гротескный шрифт — всё подчёркивает технологичность и инженерную эстетику

azak.co

#awd_web #awd_site

Статья о самых эффективных приёмах на лендингах инструментов для разработчиков

Антон Ловчиков из «Злых марсиан» изучил сто сайтов для разработчиков, например Vercel и Supabase. В статье We studied 100 dev tool landing pages он выделил ключевые блоки и сформулировал принципы их оформления. Советы такие:

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

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

— Если нужно что-то выделить, к примеру дату запуска, используйте «бирки» над заголовком или узкие баннеры на всю ширину страницы в верхней её части

— В блоке доверия хорошо работают известные логотипы клиентов или цифры, такие как количество звёзд на GitHub

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

— Чтобы клиент быстро разобрался в продукте, добавьте видеоуроки и пошаговые инструкции, показывайте кейсы других пользователей

— После рассказа о продукте сделайте блок социального доказательства с отзывами клиентов и разделом FAQ

— В конце добавьте визуально выделяющийся полноразмерный блок с призывом к действию

На основе своего исследования «марсиане» сделали бесплатный шаблон лендинга, который поможет быстро запустить продукт или проверить бизнес-идею

evilmartians.com/chronicles/we-studied-100-devtool-landing-pages-here-is-what-actually-works-in-2025

#awd_article #awd_web

The New Industrials — стильный лонгрид дизайн‑студии Raw Materials

Это рассказ о промышленных компаниях нового поколения, которые создают технику для разных отраслей — от логистики до космической индустрии

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

thenewindustrials.com

#awd_site #awd_web

Intuition Design System — бесплатная дизайн-система для вёрстки цифровых продуктов, в основе которых лежат нарративы

Технически IDS — это шаблон настраиваемых CSS-классов и JS-компонентов для лендингов и онлайн-изданий. Разобраться можно даже без знания кода: для этого есть понятная инструкция

Мобильные и десктопные версии продукта получаются с флюидной типографикой, в которой размеры шрифта, полей и отступов зависят от ширины вьюпорта. Можно подключать свои шрифты или работать со встроенным PT Root UI

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

IDS сделана в дизайн-бюро «Интуиция»

Инструкция по работе: intuition-tech.github.io/ids/#intro

Репозиторий: github.com/intuition-tech/ids

#awd_tool #awd_web #awd_frontend