Case study
Studio graficzne z asymetrycznym portfolio
Portfolio prezentujące prace projektowe na pierwszym planie — design, który sam jest portfolio.
Wyzwanie
Z czym przyszedł klient
Studio graficzne z 6-osobowym zespołem (3 designerów + 3 dewelopów). Stara strona — szablon WordPress sprzed 5 lat — wyglądała jak każde inne studio: hero ze sloganem, portfolio w gridzie, contact. Studio chciało strony, która sama jest jego portfolio. Wyzwanie: design tak dobry, żeby klient potencjalny pomyślał 'jeśli ich strona tak wygląda, to moja może być co najmniej taka'.
Podejście
Jak to rozwiązaliśmy
Asymetryczny układ portfolio: każda realizacja ma własny rozmiar i pozycję, naprzemiennie left/right/full-width. Hero z animacją GSAP — tekst pojawia się letter-by-letter, obrazki slidują z przeciwnych stron. Strona każdej realizacji to długi scroll-experience: cover ze zdjęciem hero → opis projektu → moodboard → galeria assetów → typografia używana → paleta kolorów → logo wariacje → wdrożenie na realne nośniki (zdjęcia mockupowe). Każda strona realizacji to ~10 sekcji. Dla designerów zbudowaliśmy CMS w Sanity, gdzie mogą dodawać projekty bez kontaktu z dewelopami. Strona About z fotografią zespołu (czarno-biała) i krótkimi bio. Dark mode jako default — inny niż 95% stron studiów. Smooth scroll przez Lenis, hover-effects na miniaturach (paralaksa).
Rezultaty
Co udało się osiągnąć
5x
wzrost zapytań od klientów premium
+200%
czas spędzony na portfolio
Webby
nominacja w kategorii Best Visual Design
1,9s
LCP mimo animacji GSAP
Zakres prac
Co zbudowaliśmy
Asymetryczny układ portfolio
Każda realizacja ma własny rozmiar — left/right/full-width. Wygląda jak gazeta projektowa.
Animacje GSAP w hero
Tekst letter-by-letter, obrazki slidują z boków. Smooth bez lagów na mobile.
Strona realizacji jako scroll-experience
10 sekcji: cover, opis, moodboard, galeria, typografia, paleta, logo, wdrożenia. Klient widzi cały proces.
Sanity CMS dla designerów
Designerzy dodają projekty bez devów. Drag-drop assetów, podgląd na żywo, publikacja w 5 minut.
Dark mode default
Strona w trybie ciemnym (z opcją light) — inny niż 95% konkurencji.
Smooth scroll (Lenis)
Scroll z inercją + paralaksą — strona daje wrażenie premium designu.
Hover effects na miniaturach
Paralaksa, magnetic cursor, fade-in detali. Detale, które sprawiają, że klient pamięta stronę.
Schema.org CreativeWork na każdej realizacji
Każdy projekt to schema.org CreativeWork — Google indeksuje portfolio jako oddzielne dzieła.
Stack technologiczny
Z czego jest zbudowane
Czas realizacji
10 tygodni
Twój projekt może być następny. Wyślij brief — przygotujemy konkretną propozycję w jeden dzień roboczy.
Wyceń podobny projektInne realizacje
Może Cię zainteresować
Twój projekt może być następny
Masz pomysł? Zrealizujemy go.
Niezależnie czy potrzebujesz nowej strony, sklepu czy modernizacji — wyślij brief i porozmawiajmy.