🟡 SENSE UX

#Transitions #Motion #Portfolio

Иногда хороший переход для сайта проще придумать, если на время забыть про веб и вспомнить After Effects.

У Warm & Fuzzy экраны двигаются так, будто вся композиция запарентена к одному Null Object. Типографика, изображения и мелкие графические элементы синхронно меняют положение, масштаб и направление движения, сохраняя связь между соседними экранами. Из-за этого переход ощущается как продолжение одной большой композиции. Сайт постоянно меняется, но движение остается цельным и предсказуемым.

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

warmnfuzzy.tv

#Process #Scroll #AI #Product #Benefits

Сегодня у нас просто впечатляющий способ показать возможности сложного AI продукта.

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

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

Конечно, можно было показать простым набором фич, но как видим, цельный рабочий процесс цепляет пижже ✨

Что могло быть лучше: я бы не прятал видосы под попап, потому что они содержат ключевое объяснение.

illoca.com

#Product #Interaction #3D

Просто шикарный сторител с интересными интерфейсными продуктовыми фишками.

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

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

seasats.com

#Portfolio #Accordion #Navigation

Лучшего портфолио вы сегодня уже не увидите.

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

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

Такой формат экономит клиенту массу времени и при этом не превращает портфолио в поверхностную галерею обложек.

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

Ну и гляньте на навигацию будущего, это уже стандарт индустрии 2026 года.

lamalama.com

#AI #Portfolio

У House of Honey часть интерьерных кадров работает как “живые stills”, на первый взгляд это обычная фотография, но внутри появляется очень аккуратное движение. Из-за этого пользователь начинает смотреть внимательнее: не листать проекты, а искать, где еще статичный кадр внезапно окажется живым.

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

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

houseofhoney.com

#PageScrolling #Transitions #Services

ЭНЕРГОБЛОКИ🧱💪⚡️

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

enerblock.net

#Motion #Scroll #Education

Хороший прием для страницы про UI-анимацию встраивать движение в саму механику лендинга.

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

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

А уж какой сочный шоурил получился🔥

srg.ava-digital.site/avanimation

#AI #Product

Консистентность

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

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

Хороший приём для медицинских, fashion, beauty, интерьерных и любых e-commerce проектов, где реальные материалы от поставщиков слишком разные, а переснимать всё дорого или невозможно.

Заценить мой полный кейс с айдентикой, AI исследованиями, AI прототипированием, дизайном сайта, AI продакшеном контента и Wordpress вайбкодингом для специализированного центра в Северной Америке, который помогает женщинам восстановиться после операций на груди можно на Dprofile и Behance

А реализация по ссылке

softtouchmastectomy.com

#clients

Я наконец-то отдохнул и вернулся, ура🙌

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

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

fromanother.love

#Benefits #Product

Пожалуй, первый сайт AI-комбайна за долгое время, который выглядит действительно достойно. Без тёмной темы по умолчанию, без неонового шума, без натужного эппл-вайба.
А самое классное здесь не стиль, а то, как продукт объясняют, каждый экран показывает фичи внятно и через интерактив: нодовая логика, различия моделей, примеры использования, готовые пайплайны.
В итоге получается не просто красивый сайт, а хороший ориентир, как можно подавать сложный продукт современно, ясно и без визуального мусора.

app.weavy.ai

#Navigation

Многослойность

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

expa.com

#Benefits

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

jobyaviation.com

#Portfolio #About

Команда, которой больше всех надо.

По другому про это архитектурное бюро и не скажешь, ведь они сделали целых ПЯТЬ (5) версий своего портфолио с объектами разной размерности, масштаба и уровня визуализаций.

А еще в разделе о команде они используют реальные фотографии из паспорта и разные штампы лучшим образом подчеркивают их многонациональность и разнообразие.

group8.ch

#Filter #ECOM

Да будет свет сказал монтер и яйца фосфором натёр!🌟🌟🌟

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

incommonwith.com

#PageScrolling #ECOM #Product

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

geste.co

#Navigation

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

Художник и скульптор из Studio Drez пошел дальше и сделал расходящиеся и перемешивающиеся пункты, которые сильнее выделяют активный раздел и передают динамику инсталляций прямо в интерфейс.

Такое мы сохраняем в закладки и ждем подходящего случая 👌

studiodrez.com

#Process

Еще один шедевр от легендарных How How Studio.

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

everbloom.bio

#Ecom #Product

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

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

В-третьих, надо брать конечно. Бежевый выглядит очень дружелюбным

1x.tech

#Ecom #Filter

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

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

Топ воще🔥

nudiejeans.com

#PitchDeck #Navigation

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

flabbergast.agency