Dcoded Longlife
Landing page komór normobarycznych
O projekcie
Landing page dla marki DCLL powstał po to, aby w atrakcyjny i nowoczesny sposób zaprezentować produkty komór normobarycznych.
Moim celem było stworzenie nowoczesnej strony z fajną komunikacją wizualną w oparciu o tzw. storytelling, który prowadzi użytkownika przez stronę w sposób naturalny i angażujący.
Cała struktura serwisu została oparta na analizie flow użytkownika i zasadach hierarchii treści, co pozwoliło osiągnąć wyraźny, logiczny rytm przeglądania. W efekcie odbiorca płynnie przechodzi przez kolejne sekcje, stopniowo odkrywając kluczowe informacje, by na końcu dotrzeć do oferowanych produktów: komór normobarycznych oraz sypialni normobarycznych.
Kręcący się obiekt 3D – Key Visual marki
Centralnym elementem hero section jest interaktywny model 3D, który wizualnie definiuje markę. Rotujący obiekt działa jako Key Visual, od razu budując kontekst technologiczny i przyciągając uwagę. To element, który „sprzedaje” innowacyjność od pierwszej sekundy, bez konieczności czytania treści.
Projekt łączy dobre praktyki UX i przejrzysty UI z interaktywnymi elementami, które przyciągają uwagę użytkownika i wspierają jego decyzje. Strona została zaprojektowana od podstaw – od struktury informacji, przez layout i animacje, aż po finalne wdrożenie. Efekt końcowy można zobaczyć na działającej wersji witryny dcll.us.
Interaktywny slider
Aby ułatwić szybkie skanowanie kluczowych cech produktu, zaprojektowałem interaktywny slider z płynnymi mikroanimacjami. Slider zwiększa dynamikę strony i pozwala użytkownikowi eksplorować informacje w sposób kontrolowany i intuicyjny. Jego modularna konstrukcja ułatwia dalszy rozwój i edycję treści.
Zamiast długiego bloku tekstu zastosowałem modułowy system slajdów, dzięki któremu treści są łatwiejsze do przyswojenia i zachęcają do eksploracji. Każdy slajd posiada płynne mikroanimacje wspierające odbiór oraz budujące poczucie lekkości i nowoczesności.
Projekt slidera został dopasowany do różnych rozdzielczości, aby zachować pełną funkcjonalność na urządzeniach mobilnych, gdzie gesty przesuwania są najbardziej intuicyjne. Celem było zwiększenie zaangażowania użytkownika i skrócenie czasu potrzebnego na zapoznanie się z najważniejszymi informacjami.
Komponent typu before/after
Aby pokazać realną wartość technologii DCLL, wprowadziłem slider typu before/after. Pozwala użytkownikowi samodzielnie porównać efekty działania produktu w czasie rzeczywistym. To proste, ale wyjątkowo silne narzędzie wizualne, które zwiększa zrozumienie produktu i podnosi ogólne zaangażowanie.
Interaktywne karty / Motion design
Aby ułatwić szybkie skanowanie kluczowych cech produktu, zaprojektowałem interaktywny slider z płynnymi mikroanimacjami. Slider zwiększa dynamikę strony i pozwala użytkownikowi eksplorować informacje w sposób kontrolowany i intuicyjny. Jego modularna konstrukcja ułatwia dalszy rozwój i edycję treści.
Interaktywne karty pełnią kluczową rolę w prezentacji funkcji i korzyści produktu. Każda karta została zaprojektowana tak, aby „podpowiadać” użytkownikowi dalszą interakcję — poprzez subtelne efekty hover, zmianę głębi i animowane akcenty.
Takie podejście ułatwia skanowanie treści i poprawia ergonomię przeglądania. Użytkownik w naturalny sposób porusza się między sekcjami, a strona staje się bardziej dynamiczna i angażująca. Zastosowana struktura modularna pozwala również na szybkie rozbudowanie sekcji o kolejne elementy w przyszłości, co stanowi ważny aspekt skalowalności rozwiązań UX.
Wersja mobilna
Duży nacisk położyłem również na pełną responsywność serwisu. Wszystkie animacje, interakcje oraz slidery zostały od podstaw dostosowane do urządzeń mobilnych — zarówno pod kątem płynności działania, jak i czytelności treści.
Dzięki temu storytelling, który na desktopie buduje narrację poprzez dynamiczne przejścia i sekwencyjne odkrywanie informacji, został w pełni zachowany także na mniejszych ekranach.
To istotna przewaga projektu, ponieważ opracowałem zestaw animacji i mechanik narracyjnych, jakich nie oferuje żadna inna strona w tej branży. Użytkownik niezależnie od urządzenia doświadcza tej samej, angażującej historii prowadzącej od zdefiniowania problemu aż po finalne rozwiązanie.