szczecinska.design - case study portfolio
- UX/UI Design
- Development
- Web
- Motion Design
Podsumowanie projektu
Wstęp
Portfolio potraktowałam jak produkt: miało szybko pokazać sposób myślenia, projekty i poziom dopracowania, bez przeładowania treścią. Wybrałam minimalistyczny kierunek, prostą nawigację i kilka charakterystycznych detali, żeby strona była spokojna, ale nie anonimowa.
Najważniejsze
Projekt w skrócie
Problem
Portfolio miało pokazać dużo projektów, materiałów i decyzji bez przytłaczania odbiorcy.
Cel
Zaprojektować i wdrożyć minimalistyczną stronę z jasnym przekazem, prostą nawigacją i detalami pokazującymi moje podejście do designu.
Efekt
Wdrożone portfolio z płynnymi przejściami, dopracowanym responsive designem i wynikami Lighthouse 100/100 w każdej kategorii.
Proces
Moodboard i inspiracje
Zaczęłam od moodboardu, żeby zawęzić kierunek wizualny przed projektowaniem layoutu. Wybrałam minimalistyczny system z mocnym kontrastem, dużym whitespace'em i detalami pixel-artowymi, bo portfolio miało być spokojne, ale nie anonimowe.
Lo-fi i architektura treści
W lo-fi skupiłam się na architekturze treści, nie na estetyce. Najpierw ustaliłam, co użytkownik powinien zobaczyć od razu, a dopiero później szukałam formy wizualnej.
Strona główna miała działać jak skrót do najważniejszych informacji: jasny nagłówek, szybkie przejścia, wybrane projekty i krótki kontekst o mnie. Dzięki temu odbiorca nie musi szukać podstawowych informacji po całym portfolio.
Case studies oparłam na powtarzalnym schemacie, żeby po przeczytaniu jednego projektu użytkownik wiedział, gdzie szukać kontekstu, decyzji i efektów w kolejnym.
Design
Projekt high-fidelity
Wybrałam Satoshi, bo daje stronie nowoczesny, ale nie sterylny charakter. Whitespace potraktowałam jak element layoutu: duże odstępy prowadzą wzrok i dają odpocząć między kolejnymi fragmentami case studies.
Zamiast klasycznych kafelków usunęłam tła z wybranych mockupów. Projekty "leżą" bezpośrednio na stronie, więc nawet kolorowe materiały nie rozbijają minimalistycznego kierunku.
Desktop i mobile projektowałam równolegle, bo portfolio musi działać dobrze w obu kontekstach: szybkim przeglądaniu na telefonie i spokojnym czytaniu case studies na większym ekranie.
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 stopce stworzyłam samodzielnie w Figmie. 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.
Menu
Menu zostawiłam klasyczne, ale aktywną zakładkę wyróżniłam skalą zamiast kolorem. To prosty detal, który dodaje stronie ruchu i charakteru, a jednocześnie nie konkuruje z treścią projektów.
Development
Implementacja
Implementację prowadziłam równolegle z projektowaniem. Dzięki temu szybko sprawdzałam, które decyzje działają w przeglądarce, a które dobrze wyglądają tylko w makiecie.
Astro wybrałam głównie ze względu na View Transitions. Chciałam, żeby przejścia między podstronami były płynne i wspierały charakter portfolio, bez efektu przeładowywania kolejnych widoków.
Wyzwania
Informacja bez przytłoczenia
Problemem była ilość materiałów: case studies, obrazy, filmy i teksty. Zamiast zamykać wszystko w kartach, rozdzieliłam treść dużymi odstępami i rytmem obraz-tekst, żeby strona prowadziła przez projekty bez poczucia ciężaru.
Animacje i layout
View Transitions miały wzmacniać płynność strony, a nie odciągać uwagę. Iterowałam animacje i układ między podstronami, dopóki przejścia nie zaczęły działać jak naturalna część nawigacji.
Wysuwanie menu podczas scrolla
Długie case studies potrzebowały łatwego powrotu do nawigacji. Menu chowa się przy scrollu w dół i wraca, gdy użytkownik przewija w górę, dzięki czemu nie zabiera miejsca, ale jest pod ręką.
Wydajność
Duża liczba zdjęć i filmów mogła spowolnić stronę, więc od początku traktowałam kompresję multimediów jako część designu. Efektem jest bogata warstwa wizualna bez rezygnowania z szybkości.
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.
Czego się nauczyłam?
Największą lekcją było wyznaczanie granic w projekcie, w którym sama jestem klientem. Portfolio łatwo poprawiać bez końca, więc potraktowałam je jak produkt: z jasnym zakresem, priorytetami i miejscem na dalsze iteracje.
Potwierdziłam też, że detale budują charakter dopiero jako system: pikselowe logo, aktywne menu, przejścia i rytm sekcji osobno są małe, ale razem mówią o podejściu do pracy.
Przejście od moodboardu do działającej strony pokazało mi, jak bardzo AI skraca dystans między makietą a wdrożeniem. Designer może szybciej testować decyzje w realnym środowisku, nie tracąc kontroli nad efektem wizualnym.