szczecinska.design - case study portfolio

UX/UI Design
Development
Web

Project overview

Wstęp

Portfolio to jeden z trudniejszych projektów, jakie mogę sobie zlecić. Jest jednocześnie produktem i wizytówką, a każda decyzja projektowa staje się od razu dowodem na to, jak myślę o designie. Zależało mi, żeby strona była minimalistyczna, z jasnym komunikatem i prostą nawigacją, ale jednocześnie nie była przy tym nudna. Miała pokazywać dużo treści bez przytłaczania, prowadzić przez projekty bez zmuszania do szukania i mieć kilka detali, które mówią coś o mnie zanim jeszcze ktoś przeczyta pierwsze słowo.

Cel projektu

Zaprojektować i wdrożyć portfolio, które:

prezentuje prace w sposób przejrzysty, mimo dużej ilości materiałów i informacji,
zachowuje minimalistyczny charakter z jasnym przekazem,
odzwierciedla podejście do designu na poziomie samego interfejsu,
działa równie dobrze na urządzeniach mobilnych i desktopowych.

Proces

Moodboard i inspiracje

Zanim powstał jakikolwiek wireframe, zebrałam moodboard z inspiracjami. Na tym etapie nie szukałam gotowych rozwiązań, a raczej próbowałam znaleźć kierunek, w którym chcę iść. Postawiłam na minimalistyczne designy, ale z charakterem. Zebranie wizualnych odniesień pozwoliło mi zdefiniować to, co chcę osiągnąć.

Lo-fi i architektura treści

Kolejnym krokiem były proste szkice i lo-fi wireframe'y. Na tym etapie skupiłam się przede wszystkim na architekturze treści i logice nawigacji, zanim w ogóle zaczęłam myśleć o tym, jak to wygląda.

Kluczową decyzją była struktura strony głównej. Zależało mi, żeby użytkownik nie musiał przeklikiwać się przez całą stronę w poszukiwaniu podstawowych informacji. Homepage miał zawierać wszystko, co najważniejsze: krótki header z buttonami do szybkiego przejścia na podstrony, najnowsze prace dostępne od razu, bez dodatkowych kliknięć oraz krótką informację o mnie.

Równie ważna była spójna struktura case study. Zależało mi, żeby każde case study było zbudowane według podobnego schematu. Użytkownik, który przeczyta jedno, od razu wie, gdzie szukać konkretnych informacji w kolejnym.

High-fidelity design

Typografia i whitespace - wybrałam font Satoshi jako główny krój pisma - nowoczesny, ale z osobowością. Dużo świadomiej podeszłam też do whitespace'u, traktując go nie jako brak treści, ale jako element layoutu. Duże odstępy między sekcjami, luźne rozmieszczenie elementów i unikanie wypełniania każdego miejsca sprawiają, że treść jest łatwiejsza do przyswojenia.

Zdjęcia bez tła - na stronie głównej i w sekcji z pracami zdecydowałam się usunąć tła ze zdjęć. Projekty "leżą" na stronie, a nie są zamknięte w kafelkach. Dzięki temu pomimo bardzo kolorowych zdjęć strona dalej pozostaje lekka.

Desktop i mobile jako równorzędne widoki - zaprojektowałam makiety zarówno na widok desktopowy, jak i mobilny, traktując oba jako równorzędne. Z perspektywy czasu wiem, jak ważna to była decyzja, ponieważ stronę odwiedzają użytkownicy korzystający zarówno z urządzeń mobilnych, jak i desktopowych.

Projekt high-fidelity portfolio - widok jasny

Projekt high-fidelity portfolio - widok ciemny

Identyfikacja wizualna - logo i ikona

Dwa elementy, które na pierwszy rzut oka mogą wyglądać jak detal, ale mają swoje drugie dno. W logo użyłam fontu Geist Pixel, a ikonę w footerze stworzyłam samodzielnie. Pikselowe podejście do obu elementów ma odzwierciedlać moją naturę "pixel perfect" - dbałość o każdy detal, precyzję i świadomość skali. To mały sygnał skierowany do tych, którzy patrzą uważnie.

Zdecydowałam się na klasyczne menu z lekkim twistem przy aktywacji danej podstrony. Aktywna zakładka nie zmienia koloru ani grubości, zmienia wielkość. Dzięki temu sama animacja przejścia na kolejne podstrony jest ciekawa, a dosyć prosta strona zyskuje trochę więcej życia. Zastosowałam je zarówno w wersji desktopowej, jak i mobilnej. Jest to na tyle subtelny zabieg, że nie rozprasza, ale na tyle nieoczywiste, że pozostaje w pamięci.

Implementacja

Implementację prowadziłam iteracyjnie, przeplatając pracę w Figmie z kodowaniem. Nie czekałam, aż design będzie w 100% gotowy, zanim zacznę implementację. Na bieżąco sprawdzałam, jak decyzje projektowe działają w przeglądarce i wracałam do Figmy z wnioskami.

Do budowy strony zdecydowałam się użyć Astro, przede wszystkim ze względu na wspieranie funkcjonalność View Transitions. Zależało mi na tym, żeby przejścia między podstronami były płynne, bez mignięcia przy ładowaniu. View Transitions pozwalają animować przejście między podstronami tak, jakby cała strona była jedną aplikacją, a nie zbiorem osobnych podstron. Podczas developmentu używałam Claude Code, Codex i Cursor'a, a dzięki technologii MCP mogłam "pokazać" AI, jaki efekt chcę osiągnąć, bez pisania długich opisów tekstowych.

Wyzwania

Informacja bez przytłoczenia

Największym wyzwaniem było pokazanie bardzo dużej ilości informacji w sposób przejrzysty. Zdecydowałam się na layout z różnymi marginesami, który wprowadza oddech i rytm między sekcjami. Tekst przeplata się z grafikami, co rozbija długie treści i nadaje czytaniu naturalny rytm.

Animacje i layout

Przy pierwszych testach poprawy wymagały animacje View Transition oraz zachowanie layoutu w kilku miejscach. Animacje początkowo działały niespójnie między podstronami, a układ w niektórych widokach nie zachowywał się poprawnie. Wymagało to kilku iteracji, żeby doprowadzić całość do stanu, który w każdym miejscu zachowuje się tak jak powinien.

Wysuwanie menu podczas scrolla

Żeby użytkownik czytający długie case study nie musiał wracać na samą górę strony tylko po to, żeby zobaczyć nawigację, dodałam funkcjonalność wysuwania menu podczas scrolla w górę. Menu chowa się podczas przewijania w dół i pojawia ponownie, gdy użytkownik zaczyna scrollować w górę. Mały detal z dużym wpływem na komfort czytania.

Wydajność

Z racji dużej ilości zdjęć i filmów, które pojawiają się na stronie, skorzystałam z możliwości kompresji multimediów, żeby zachować jakość materiałów przy jednoczesnym utrzymaniu rozsądnych czasów ładowania.

Efekty

Cały projekt, od moodboardu do wdrożonej strony, zamknęłam w 3 tygodnie. Wyniki Lighthouse potwierdziły, że krótki czas realizacji nie poszedł kosztem jakości: 100/100 Performance, 100/100 Accessibility, 100/100 Best Practices, 100/100 SEO. Portfolio traktuję jako żywy projekt. Wracam do niego regularnie, aktualizuję projekty i rozwijam treści w miarę jak zmienia się moje doświadczenie.

Czego się nauczyłam?

Projektowanie własnego portfolio to zupełnie inne doświadczenie niż praca dla klienta. Brak zewnętrznych ograniczeń, które zwykle pomagają w podejmowaniu decyzji, sprawia, że łatwo wpaść w pułapkę nieskończonych iteracji. Dzięki temu projektowi nauczyłam się wyznaczać granice tam, gdzie nikt inny ich nie wyznaczy.

Ten projekt utwierdził mnie też w przekonaniu, że detal naprawdę ma znaczenie. Pikselowe logo i ikona, zmiana wielkości w menu, płynna animacja przejścia - to rzeczy, które na pierwszy rzut oka nie są zauważalne, ale razem budują charakter strony i mówią coś o podejściu do pracy. To samo dotyczy procesu: iteracyjne przeplatanie designu z implementacją okazało się bardzo efektywnym modelem. Kiedy decyzje podjęte w Figmie okazywały się trudne do zrealizowania w przeglądarce, bez problemu mogłam szybko wprowadzać zmiany.

Samodzielne przejście od moodboardu do działającej strony pokazało mi też, jak bardzo zmieniły się możliwości pracy designera. Technologia MCP i narzędzia AI pozwalają skrócić dystans między stworzeniem makiety a realizacją w sposób, który jeszcze kilka lat temu wymagałby wiedzy developerskiej lub współpracy z programistą. Przy aktualnej technologii jestem w stanie przeprowadzić cały proces samodzielnie.