Web design selected
12 subscribers
44 photos
6 videos
79 links
Web / UI

Для связи: @janclopvandal
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Cosmos

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

https://www.cosmos.so/
🔥1
Jonite

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

https://www.jonite.com
Made With Gsap

Майкл Гарсиа и Флоран Ру-Дюррафур — два разработчика с суммарно 27 Awwwards SOTD — оформили каталог из 109 GSAP-эффектов как подписочный сервис: к каждому идёт разбор техники, готовый код и Webflow-версия, а новый эффект выходит каждую неделю. Все анимации держатся на JS и GSAP, без Canvas и WebGL — сложность здесь скорее в количестве вариантов, чем в тяжести рендера.

https://madewithgsap.com
This media is not supported in your browser
VIEW IN TELEGRAM
Image Flow Effect (GSAP MotionPath)

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

https://tympanus.net/codrops/2026/06/04/creating-a-thumbnail-flow-animation-with-gsap-motionpath/
This media is not supported in your browser
VIEW IN TELEGRAM
Cipher

Структура навигации у Cipher — works, talents, about — ставит имена авторов на один уровень с самими проектами: продакшн-студия Studio Jour показывает не только портфолио, но и конкретных постановщиков за ним. Для крео-продакшена, где клиент выбирает не агентство, а человека, это точнее обычной галереи кейсов.

https://cipher.tv/
Bemo

У Bemo диапазон работ — от инсталляций для Sphere и Sydney Opera House до роликов для Adidas и Beats — подан одним потоком, без разделения на «медиа-арт» и «коммерцию». Портфолио сделано на Webflow, и по нему не сразу считывается, что за витриной стоит продакшн-пайплайн, который дотягивает до полноформатных инсталляций такого масштаба.

https://www.bemo.studio/
🔥1
Mallard & Claret

Mallard & Claret держат команду в Лондоне и Брисбене — это не просто два офиса, а сплошное покрытие на 24 часа: пока один часовой пояс спит, второй ведёт проект дальше. Стек за фасадом — WordPress, Webflow, headless CMS (Contentful, Prismic, Sanity) и React/Next.js поверх — агентство закрывает и контентные сайты, и продуктовые интерфейсы одним составом.

https://mallardandclaret.com/
🔥1
Meta Ray-Ban Display

Управление у Meta Ray-Ban Display разнесено по трём каналам сразу: голос («Hey Meta»), касание оправы и жест через Neural Band, который считывает сигнал мышц запястья. Каждый канал по отдельности логичен, но вопрос на подумать — через сколько взаимодействий пользователь перестанет выбирать способ и начнёт путать команды между собой?

https://www.ray-ban.com/usa/l/discover-meta-ray-ban-display
Alec Tear

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

https://alectear.com/
Mooders

На Mooders единственный источник цвета на экране — фотография, вписанная маской внутрь буквы вордмарка; убери её — и макет останется чёрно-белым целиком. Приём совпадает с профилем студии: Mooders занимается саунд-дизайном и музыкой для брендов вроде Cartier и Rolls-Royce, а на сайте вместо плееров и волновых форм звук показан через типографику.

https://mooders.net/
This media is not supported in your browser
VIEW IN TELEGRAM
Race Condition

Race Condition — открытый код North Kingdom и Google — прогоняет больше тысячи независимых ИИ-агентов через симуляцию марафона в Лас-Вегасе: каждый бегун сам считает стратегию темпа и реагирует на обстановку через модели Gemma на Kubernetes. Вместо текстового ответа агенты отдают фронтенду готовые UI-компоненты по протоколу A2UI. Вопрос на подумать: если интерфейс теперь собирает сам агент, а не дизайнер, где проходит граница между дизайн-системой и поведением модели?

https://www.northkingdom.com/case/racecondition
This media is not supported in your browser
VIEW IN TELEGRAM
Alkares

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

https://alkares.com/
This media is not supported in your browser
VIEW IN TELEGRAM
Dear Freeda

Смотришь на Dear Freeda и не сразу понимаешь: это брендинговое агентство или эзотерическая практика. Сайт держит эту двойственность сознательно — рядом стоят два прайс-листа: Quantum Marketing (стратегия, айдентика, веб-разработка) и Business Energetics (сессии, «Business Chart Readings», «Business Constellations»), а плавающие 3D-глаза и лиановидные формы на чёрном фоне подходят обоим одинаково хорошо.

https://www.dearfreeda.com/
This media is not supported in your browser
VIEW IN TELEGRAM
Carrière Scène

Carrière Scène — сайт кампании SMAQ (Scènes de Musique Alternatives du Québec) о профессиях в независимой музыкальной индустрии Квебека. Заголовки набраны с перспективным искажением, будто отсканированы под углом, а портреты героев кампании — с грубым halftone-растром и заливкой в кислотный магента-розовый. Переход между секциями держится не на анимации, а на резкой смене цветовых блоков.

https://carrierescene.ca/
🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Aardvark Book Club

Aardvark позиционирует себя как «книжный клуб, который совсем не традиционный»: подписка от $17.99 в месяц, до трёх книг на выбор, коробка с иллюстрированной инструкцией на четыре шага распаковки. На сайте сами книги показаны как парящие 3D-объекты над холмистым ландшафтом из ярких плашек — витрина скорее для товара, чем для чтения. Вопрос на подумать: если процесс выбора и распаковки оформлен как отдельный продукт, что в итоге продают — книги или ритуал вокруг них?

https://aardvarkbookclub.com
This media is not supported in your browser
VIEW IN TELEGRAM
Custom Page Transitions in Astro

Икбал Мутаххари в туториале на Codrops показывает шесть вариантов переходов между страницами на Astro: Barba.js перехватывает навигацию и подменяет только контейнер с атрибутом data-barba, а GSAP, Three.js и SVG отвечают за сам эффект — от WebGL-шума до отрисовки SVG-пути. У каждого перехода свой жизненный цикл (before, leave, enter, after), и в этом ключевая деталь: можно управлять одновременно и уходящим, и новым контейнером, а не только одним из них.

https://tympanus.net/codrops/2026/04/08/creating-custom-page-transitions-in-astro-with-barba-js-and-gsap/
🔥1
Airborne Studio

На хиро Airborne нет логотипа в привычном смысле — вместо него слово сложено из объёмных 3D-предметов: боксёрская перчатка, скейт, рыцарский шлем, надувной блок. Студия называет себя «brand, creative and development partners» для tech- и культурных «changemakers», и в навигации это разложено буквально — Partnerships, Work, Playbook, Journal, без раздела «Услуги» с общими словами.

https://www.airborne.studio/
This media is not supported in your browser
VIEW IN TELEGRAM
Cantor8

Cantor8 строит инфраструктуру для институциональных цифровых активов на блокчейне Canton, а на хиро вместо продуктовых скриншотов — радиальный график: точки по окружности сходятся линиями в одну точку в центре, а подписи вокруг («Retrieval», «Decoding», «Tokenization», «Latent Flow», «Consolidation») по очереди сменяют друг друга, будто визуализируют работу системы в реальном времени. Вопрос на подумать: помогает ли абстрактная визуализация процесса читать продукт быстрее, чем схема архитектуры, если самой схемы на сайте нигде нет?

https://www.cantor8.io/
Inkwell

Inkwell продаёт «интеллектуальный слой» поверх чужих процессов — продукт, одинаково применимый к планировке пространств, моде, искусству, образованию и кибербезопасности. У такого горизонтального позиционирования есть стандартная ловушка: пять иконок в ряд, и продукт читается как ни для кого конкретно. Здесь вместо ряда — кольцо: превью всех сценариев висят по окружности вокруг пустого центра, где стоит одна строка «The future is built on Artificial Intelligence». Широта подана как охват, а не как перечень, и порядок пунктов перестаёт что-либо значить — для продукта без главной отрасли это скорее плюс.

https://inkwell.tech/
This media is not supported in your browser
VIEW IN TELEGRAM
Falling 2D Objects (MatterJS)

Matter.js 0.19.0 с CDN, канвас вставляется в #canvas-target, по краям сцены — четыре статичных стены-границы. Объекты спавнятся с задержкой 100 мс и по очереди перебирают пять SVG-текстур; наружу вынесены количество, размер, restitution и гравитация мира. Дефолтный скролл-хайджек отключён, чтобы страница продолжала листаться поверх канваса. Разбор Денниса Снелленберга в Osmo, исходник — altgage.com. Физический движок делает здесь ровно одну работу: превращает декоративный блок в объект, который можно расшвырять курсором.

https://www.osmo.supply/resource/falling-2d-objects-matterjs
Truus

Амстердамское агентство Truus работает по всему спектру — от TikTok-контента до ТВ-роликов и наружки; в клиентах KFC, Netflix, HEMA, Jumbo. Дизайн Джордана Гилроя, код Денниса Снелленберга. Поверх полноэкранного кадра из кампании навешаны стикеры: смайлик, огонёк, блёстка, овальная обводка от руки — ровно тот словарь, которым размечают сторис в самих платформах, плюс гротеск и курсивная антиква в одной строке заголовка. Агентство, которое продаёт «advertising for the new mainstream», собрало хиро из родного языка этого мейнстрима: позиционирование отработано оформлением раньше, чем его успевают заявить текстом.

https://truus.co/