2024/2025
Zakres prac
UI / UX design
Figma
FigJam
PHP + HTML/CSS/JS
Tailwind CSS
Przykładowa podstrona z projektem
Przegląd projektu
Projekt własnego portfolio UI/UX narodził się z potrzeby zaprezentowania projektów, umiejętności i doświadczenia w postaci strony WWW zrealizowanej od podstaw.
Stworzenie portfolio od zera dało nie tylko swobodę wizualną, ale przede wszystkim umożliwiło przedstawienie procesu twórczego oraz umiejętności z branż pokrewnych (np. grafika, frontend i backend). Autorskie portfolio odzwierciedla moją filozofię projektowania, która opiera się na użyteczności, estetyce i dostosowaniu do potrzeb użytkowników.
Cel projektu
Celem projektu portfolio było stworzenie atrakcyjnej wizualnie, intuicyjnej i funkcjonalnej strony www, która w przejrzysty sposób miała prezentować moje umiejętności, doświadczenie oraz projekty, które mogą mnie wyróżnić na rynku pracy.
Portfolio miało za zadanie nie tylko przyciągać uwagę potencjalnych pracodawców i klientów, ale również zaprezentować moje kompetencje w zakresie projektowania interfejsów.
Strona jest responsywna, zoptymalizowana pod kątem prędkości działania oraz dostosowana do potrzeb rekruterów, managerów projektów lub/i potencjalnych klientów.
Persony oraz makiety contentowe
Wizualizacja mapy strony
UX
Na potrzeby stworzenia własnego portfolio, powstały 4 persony: rekrutera (poszukuje pracownika na konkretne stanowisko z wizualnym portfolio, łatwo musi odnaleźć informacje o kandydacie, przejrzeć prace oraz dane kontaktowe), studentki (szuka inspiracji do swojego pierwszego portfolio), kobiety ok. 25 lat (poszukuje projektu do stworzenia moodboarda przy nowym designie, szuka inspiracji z konkretnej branży) oraz właściciela kilkuosobowego studio (poszukuje specjalisty do swojego zespołu designerów z konkretnymi umiejętnościami i doświadczeniem w zawodzie). Każda z tych osób powinna przejść user-flow w krótki i płynny sposób, zakończony ustaloną konwersją.
Zostały stworzone 2 proste makiety contentowe (strona główna i podstrona z projektem). Makiety pomogły w logicznym zaplanowaniu układu oraz funkcjonalnego ułożenia zawartości (zarówno tekstów jak i grafik). Pozwoliło to na wyeliminowanie błędnie zoptymalizowanych w treści modułów.
Mapa strony pozwoliła uniknąć chaosu w nawigacji oraz określić jakie treści powinny się znaleźć w poszczególnych sekcjach. Umożliwiła też lepsze zaplanowanie intuicyjnych ścieżek dla użytkowników.
Moodboard z inspiracjami wizualnymi, paletą kolorów oraz typografią
Przykładowa podstrona z prezentacją projektu
UI
Głównym zadaniem w zakresie UI, było nadanie minimalistycznego tonu portfolio: układ bazujący na gridzie, stonowana kolorystyka, prosty, nowoczesny font oraz użycie przestrzeni negatywnej. Priorytetem była treść, aby skupić uwagę użytkownika na projekty oraz kluczowe informacje, np. sekcja "O mnie" czy przebieg doświadczenia.
Do stworzenia projektu wizualnego została użyta 12-kolumnowa siatka. Dzięki elastycznym cechom takiego grida, pozwoliło to na zaprojektowanie w pełni responsywnego układu oraz zapewniło przejrzystość i czytelność dla użytkownika (co widać na załączonej grafice z makietą).
Przemyślany zbiór elementów UI w postaci moodboarda, pozwolił na wybór palety kolorów, odpowiedniej typografii (neo-groteskowego fontu, idealnego do minimalistycznego designu portfolio - Switzer) oraz sposobu prezentacji grafik w opisie projektów.
Makieta z siatką 12-kolumnową
Nagłówek w wersji mobilnej
Sekcja "O mnie" wraz z przebiegiem kariery
Re-design strony na potrzeby kursu Digital Designer
Projekt i realizacja strony-wizytówki dla krawcowej