Wingin
UX Design / UI Design / Branding
Zobacz projekt
UI/UX Design
Strony internetowe
Branding
Projektuję marki i tworzę strony internetowe, które mają charakter, sens i zostają w pamięci.
Medycki Piotr Piotr Medycki, UX/UI Designer
// O mnie
W CZASACH AI NIE MA MIEJSCA NA POWTARZALNOŚĆ. DOBRZE O TYM WIESZ.
Ile jeszcze będziesz udawać, że to ciebie nie dotyczy?
// Realizacje
Wszystkie (40)
Cardina
Fintech / UX Design / UI Design
Zobacz projekt
Kala
Branding / Opakowania / Social media
Zobacz projekt
Porównywarka cen energii
Architektura informacji / Makiety UX / UI Design
Zobacz projekt
realizacje
// Usługi
ARCHITEKTURA INFORMACJI, MAKIETY, UI, WDROŻENIE
Projektuję portale, platformy B2B, aplikacje, e-commerce i strony www: od architektury informacji i makiet, przez interfejs, po wdrożenie.
KAMPANIA, FOTOGRAFIA, STORYTELLING
Nadaję projektom wizualny kierunek: od pierwszego konceptu po finalny język zdjęć, ruchu i komunikacji.
IDENTYFIKACJA, STRATEGIA, SYSTEM MARKI
Tworzę wyraziste tożsamości: od pozycjonowania i nazwy, przez znak, typografię i kolor, po spójny system marki.
ANALIZA, HEURYSTYKI, REKOMENDACJE
Sprawdzam, gdzie użytkownicy się gubią i co blokuje konwersję. Dostajesz listę problemów z priorytetami i konkretne rekomendacje zmian.
PRINT, DIGITAL, ILUSTRACJA
Projektuję materiały cyfrowe i drukowane, w których mocna typografia spotyka się z precyzyjną kompozycją.
// Liczby
10+
lat doświadczenia
Projektuję interfejsy, marki i strony od ponad dekady.
40
realizacji w portfolio
Portale, e-commerce B2B, strony firmowe i materiały marketingowe.
151
widoków w jednym projekcie
Tyle ekranów mobilnych i desktopowych powstało dla portalu Wingin.
25+
projektów logotypów
Znaki i identyfikacje zebrane w Logofolio.
// Branding · opakowania · social media
Kala
BrandingOpakowaniaSocial media
Nowe linie kreatywne marki zapachów do wnętrz
01 / 07
Odpowiadam za nowe linie kreatywne w Kala
W Kala, marce zapachów do wnętrz, odpowiadam za nowe linie kreatywne: od projektów opakowań kolejnych serii produktów, przez grafiki sprzedażowe, po komunikację w social media. Dbam o to, żeby każda nowa linia miała własny, czytelny charakter, a jednocześnie spójnie wpisywała się w portfolio marki na półce, w sklepie internetowym i w kanałach społecznościowych.
// Zakres prac
Projekty opakowań i etykiet
Grafiki i kampanie social media
Materiały sprzedażowe
// Opakowania
Fresh Blitz 300 ml
Seria odświeżaczy powietrza w aerozolu. Każdy zapach dostał własny kolor przewodni i ilustrację głównego składnika: różę, goździk, jaśmin, lawendę, bez i fale oceanu. Wspólny układ etykiety, czyli logotyp na jasnym pasie, duża nazwa zapachu i powtarzalne oznaczenia na dole, sprawia, że cała seria od razu wygląda na jedną rodzinę produktów.
// Opakowania
Power Shot
Neutralizator zapachów do dużych przestrzeni, takich jak hotele, biura, sale i obiekty sportowe. Górna część etykiety buduje mocny, rozpoznawalny znak Power Shot z ikonami zastosowań, a dolna to wymienne pole dla zapachu. W serii zapachów podróży (Tajski Lotos, Chorwacka Figa, Madagaskar Mango) postawiłem na ilustracje owoców i kwiatów na falistym wzorze, a Plum Noir dostał ciemną, elegancką wersję ze złotą typografią.
// Opakowania
Fresh Blitz 260 ml
Wkłady do automatycznych odświeżaczy. Tu zastosowałem jednolite, matowe kolory i delikatne ilustracje liniowe w tle: pole lawendy, magnolię, wybrzeże Morza Śródziemnego, kakao, fale czy diament. Dzięki temu dziesięć zapachów da się łatwo rozróżnić, a seria pozostaje spokojna i nowoczesna.
// Social media
Kampanie i posty
Projektuję też komunikację marki w social media: kampanie premier (np. Plum Noir), wakacyjną serię zapachów podróży, nowości takie jak Sense di Man i Lily of May, posty edukacyjne o zapachach i aromamarketingu oraz start nowego sklepu internetowego. Każda kampania powstaje w formatach 1:1, 4:5 i stories 9:16.
Od opakowania na półce po post w telefonie: jedna marka, wiele linii, spójny język wizualny.
Wingin
UX DesignUI DesignBranding
Portal ogłoszeniowy dla branży gastronomicznej
01 / 11
Portal z ogłoszeniami o pracę w gastronomii, hotelarstwie i turystyce
Stworzyłem platformę rekrutacyjną dedykowaną branży HoReCa, która pełni rolę mostu pomiędzy pracownikami a pracodawcami. Portal to przestrzeń stworzona z myślą o dynamicznym rynku gastronomii, hotelarstwa i cateringu, gdzie doświadczeni profesjonaliści oraz osoby stawiające pierwsze kroki w branży mogą z łatwością znaleźć pracę dopasowaną do swoich kompetencji i pasji.
// Zakres współpracy
Branding
UX Design
UI Design
// Wingin
Branding
Zaprojektowałem spójną identyfikację wizualną, obejmującą logotyp oraz materiały do social media. Celem było stworzenie nowoczesnego, czytelnego i przyjaznego w odbiorze wizerunku, który wpisuje się w dynamiczny charakter branży HoReCa. Identyfikacja oparta jest o ilustracje w stylu flat, które nadają marce świeżości i nowoczesności. Prostota formy, wyrazista kolorystyka oraz przejrzysta typografia sprawiają, że komunikacja wizualna Wingin jest spójna i skuteczna zarówno w mediach społecznościowych, jak i innych kanałach promocyjnych.
// Warstwa wizualna
UI oraz UX
Podczas projektowania interfejsu uwzględniłem specyfikę branży HoReCa - dynamiczne tempo pracy, szybkie rekrutacje i różnorodne potrzeby użytkowników. Kluczowe założenia to:
- Szybkość i intuicyjnośćprzejrzysty design i prosta nawigacja, aby użytkownicy mogli szybko przeglądać oferty i aplikować
- Dostosowanie do urządzeń mobilnychbranża HoReCa działa w biegu, dlatego platforma musiała być w pełni responsywna i łatwa w obsłudze na smartfonach
- Minimalistyczny, ale charakterystyczny designczysty interfejs oparty na flat design, który podkreśla nowoczesny charakter marki
- Podział na role użytkownikówdedykowane ścieżki dla pracodawców i pracowników, uwzględniające ich unikalne potrzeby i procesy.
Architektura informacji
Podczas warsztatów z klientem wspólnie zdefiniowaliśmy kluczowe cele i funkcjonalności platformy Wingin, co pozwoliło na stworzenie klarownej i intuicyjnej architektury informacji. Skupiliśmy się na optymalizacji ścieżek użytkowników, aby maksymalnie uprościć proces rekrutacji zarówno dla pracowników, jak i pracodawców.
Założenia powstałe po warsztatach architektury informacji:
- Dwutorowy podział użytkownikówdedykowane ścieżki dla kandydatów i pracodawców, dostosowane do ich specyficznych potrzeb
- Minimalizacja liczby krokówuproszczony proces rejestracji i aplikowania, eliminujący zbędne bariery
- Łatwy dostęp do kluczowych funkcjiszybkie filtrowanie ofert, intuicyjne zarządzanie ogłoszeniami i profilem
- Spójność na różnych urządzeniachresponsywna struktura umożliwiająca wygodne korzystanie z platformy na smartfonach i desktopach
- Jasna hierarchia informacjipriorytetyzacja treści tak, aby użytkownicy natychmiast znajdowali to, czego potrzebują.
Styleguide
Widoki desktop strony głównej oraz widoków oferty pracy i wyszukiwania
Widoki aplikacyjne
Część widoków panelu pracodawcy
Część widoków panelu pracownika
W ramach projektu wykonałem 151 widoków mobilnych oraz desktopowych.
// Strona www · spa i hotel
The Well
Strona wwwUX DesignUI DesignStyleguide
Strona internetowa kompleksu spa i hotelu pod Oslo
01 / 04
Serwis dla spa, hotelu i centrum konferencyjnego w jednym
Zaprojektowałem stronę internetową The Well, kompleksu spa i hotelu położonego tuż pod Oslo, który przedstawia się jako największe spa w krajach nordyckich. Serwis łączy kilka obszarów działalności: strefę spa, zabiegi, gastronomię, hotel oraz konferencje i wydarzenia. Moim zadaniem było uporządkowanie tej rozbudowanej oferty i podanie jej w spokojnej, premium formie, która oddaje charakter miejsca i prowadzi użytkownika do rezerwacji.
// Zakres prac
UX Design
UI Design
Styleguide
// Struktura
Architektura i nawigacja
Ofertę podzieliłem na sześć głównych sekcji: Spa, Treatments, Food & Beverage, Hotel, Conference & Events oraz About The Well. Rozwijane menu prowadzi do podstron każdej z nich, a w nagłówku stale widoczne są dwie kluczowe akcje (zakup karty podarunkowej i rezerwacja) oraz wyszukiwarka i przełącznik języka. Na wszystkich podstronach powtarza się ten sam układ: hero z kartą tytułową, okruszki nawigacyjne, treść sekcji i stopka z wyróżnieniami oraz danymi kontaktowymi.
Najważniejsze założenia, którymi kierowałem się przy projektowaniu:
- Rezerwacja zawsze pod rękąprzyciski „Book” i „Gift Card” w nagłówku oraz wezwania do działania w hero i sekcjach treści
- Fotografia na pierwszym planieduże zdjęcia wnętrz i zabiegów budują nastrój, a białe karty z tekstem zapewniają czytelność
- Powtarzalne modułykarty ofert, sekcje tekst + zdjęcie, karuzele i bannery CTA składają się na wszystkie podstrony
- Szablony podstronprzygotowałem uniwersalne szablony oferty spa, zabiegu, konferencji i podstrony tekstowej, które klient może wypełniać własną treścią
// Warstwa wizualna
Kluczowe widoki
Zabiegi
Podstrona zabiegów prezentuje kategorie w formie kart ze zdjęciami, z wyróżnioną ofertą specjalną. Ciepłe, piaskowe tło sekcji kategorii odróżnia ją od reszty strony i porządkuje dłuższą listę usług.
Pokój hotelowy
Widok pokoju łączy opis z kartą udogodnień i przyciskiem rezerwacji, a obok proponuje powiązane pakiety. Niżej znalazły się galeria zdjęć oraz opinie gości.
Przygotowanie do wizyty
Strona „Your Spa Visit” zbiera praktyczne informacje (ceny i godziny otwarcia, dojazd, program sauny, zasady dotyczące stroju) w jednym miejscu, w postaci przejrzystych kart prowadzących do szczegółów.
Szablon podstrony oferty
// Responsywność
Wersja mobilna
Dla każdego widoku desktopowego przygotowałem odpowiednik mobilny. Menu mobilne zawiera wyszukiwarkę, sekcje z rozwijanymi podkategoriami oraz przyciski karty podarunkowej i rezerwacji. Na stronie głównej przyciski te pozostają przypięte u dołu ekranu podczas przewijania.
// Fundamenty
Styleguide
Projekt oparłem na styleguidzie obejmującym typografię (szeryfowe nagłówki i bezszeryfowy krój tekstu, osobne skale dla desktopu i mobile), paletę kolorów z odcieniami głównymi i semantycznymi, przyciski we wszystkich stanach, elementy formularzy, cienie, odstępy, siatkę 1140 px oraz zestaw ikon.
W ramach projektu zaprojektowałem ponad 20 widoków desktopowych wraz z ich wersjami mobilnymi oraz styleguide dla całego serwisu.
Fast White Cat
RebrandingUI DesignUX Design
Odświeżenie logotypu, brandingu oraz strony internetowej
01 / 04
Odświeżenie logotypu
Nowa odsłona identyfikacji wizualnej FastWhiteCat stanowi znaczący krok naprzód w ewolucji marki. Wprowadzony krój pisma o bardziej technicznym charakterze doskonale odzwierciedla nowoczesne trendy projektowe, jednocześnie podkreślając profesjonalny wizerunek firmy. Kluczowym elementem nowej identyfikacji jest charakterystyczny romb, który pełni funkcję motywu przewodniego. Ten geometryczny kształt pojawia się konsekwentnie w różnych elementach identyfikacji wizualnej, zapewniając spójność i rozpoznawalność marki. Romb symbolizuje precyzję, nowoczesność i dynamikę - wartości, które są fundamentem działalności FastWhiteCat. W porównaniu z poprzednią wersją, nowy logotyp emanuje większą dynamiką. Techniczny charakter fontu doskonale współgra z aktualnymi trendami w projektowaniu graficznym, jednocześnie zapewniając długotrwałą aktualność. Odświeżony wizerunek nie tylko odpowiada na bieżące potrzeby rynku, ale też wyprzedza je, tworząc solidną podstawę dla przyszłego rozwoju marki.
// Fast White Cat
Nowe materiały wizualne w social mediach
Element rombu jako motyw przewodni nowej identyfikacji wizualnej FastWhiteCat znajduje swoje zastosowanie w różnorodnych materiałach marketingowych, tworząc spójny i rozpoznawalny wizerunek marki. Konsekwentne wykorzystanie rombu w różnych materiałach komunikacyjnych pozwala na budowanie rozpoznawalności marki, jednocześnie zapewniając nowoczesny i spójny wizerunek FastWhiteCat we wszystkich kanałach komunikacji.
Nowy system typograficzny FastWhiteCat nie jest jedynie elementem estetycznym, ale funkcjonalnym narzędziem komunikacji, które wzmacnia przekaz marki i buduje jej rozpoznawalność na wszystkich platformach i materiałach.
// Fast White Cat
Nowa odsłona strony internetowej
Strona internetowa Fast White Cat przeszła kompleksową modernizację, oferując użytkownikom znacznie udoskonalone doświadczenie. Nowy interfejs wyróżnia się minimalistyczną estetyką z subtelnymi animacjami reagującymi na interakcje, co nadaje całości technologicznego charakteru przy jednoczesnym zachowaniu eleganckiej prostoty. Zoptymalizowaliśmy nawigację wprowadzając kontekstowe menu i inteligentne grupowanie treści, eliminując problem przeciążenia informacyjnego, który często dotyka strony firm technologicznych
Styleguide
// Fintech · karta kredytowa
Cardina
FintechUX DesignUI Design
Serwis i panel klienta dla pozabankowej karty kredytowej
01 / 06
Serwis i panel klienta dla pozabankowej karty kredytowej
Zaprojektowałem kompletne doświadczenie cyfrowe dla Cardina, pozabankowej karty kredytowej Mastercard dla klientów indywidualnych i jednoosobowych działalności gospodarczych. Projekt obejmuje serwis sprzedażowy, wniosek o kartę składany w 100% online, logowanie z weryfikacją SMS oraz panel klienta do zarządzania limitem, spłatami i dokumentami. Każdy widok przygotowałem w wersji desktopowej i mobilnej.
// Zakres prac
UX Design
UI Design
Responsive Web Design
// Cardina
Serwis sprzedażowy
Serwis prowadzi dwie równoległe ścieżki: dla klienta indywidualnego i dla firm (JDG). Przełącznik segmentu umieściłem na samej górze nagłówka, dzięki czemu użytkownik od pierwszego ekranu widzi treści, wymagania i warunki dopasowane do siebie. Nad nawigacją znalazł się pasek z godzinami pracy infolinii oraz numerem do zastrzegania karty 24/7, czyli informacją, która w produkcie finansowym musi być zawsze pod ręką.
Strona główna została zbudowana wokół decyzji o złożeniu wniosku. Kluczowe założenia:
- Kalkulator w pierwszym ekraniesuwak wnioskowanego limitu, główne CTA i rozwijane szczegóły kosztów z RRSO są widoczne od razu, bez przewijania
- Przejrzystość kosztówopłaty, oprocentowanie i reprezentatywny przykład są podane wprost, zgodnie z wymogami dla produktów kredytowych
- Proces w czterech krokachod wniosku przez potwierdzenie danych i decyzję do aktywnej karty, więc użytkownik wie, czego się spodziewać
- Odpowiedzi na obiekcjesekcje korzyści (m.in. FastCash, 3D Secure, weryfikacja przez Kontomatik), wymagania dla klienta i najczęstsze pytania
Poza stroną główną zaprojektowałem podstrony O karcie, O nas, FAQ, Dokumenty, Blog z widokiem wpisu, Kontakt, stronę promocji oraz strony informacyjne wymagane od instytucji płatniczej: ład korporacyjny i strukturę organizacyjną.
// Proces
Wniosek o kartę online
Wniosek podzieliłem na krótkie kroki z czytelnym paskiem postępu: dane osobowe, adres, dochody i zobowiązania, parametry karty oraz potwierdzenie rachunku bankowego. Zaprojektowałem także warianty ścieżki: pierwotną, siedmiokrokową wersję z weryfikacją przez Kontomatik, uproszczoną ścieżkę alternatywną oraz wariant dla klientów trafiających z serwisów partnerskich przez Broker API. Każdy wariant ma osobne wersje dla klienta indywidualnego i firmy.
W kroku z parametrami karty skupiłem się na tym, żeby decyzje finansowe były zrozumiałe:
- limit wybierany suwakiem lub gotowymi kwotami, z kontekstową podpowiedzią o możliwości zawnioskowania o wyższą kwotę
- wybór sposobu uruchomienia limitu (FastCash lub całość na kartę) i wizualny podział kwoty między konto bankowe a kartę
- tabela kosztów aktualizowana dla wybranego limitu oraz szybki dostęp do formularza informacyjnego, tabeli opłat i wzoru umowy
Zaprojektowałem również stany brzegowe procesu: błędy walidacji, oczekiwanie na decyzję, odmowę oraz błąd techniczny, tak aby użytkownik w każdej sytuacji wiedział, co się wydarzyło i co może zrobić dalej.
// Bezpieczeństwo
Logowanie dwuetapowe
Logowanie do panelu odbywa się w dwóch krokach: dane logowania i pięciocyfrowy kod SMS z licznikiem ponownej wysyłki. Dla obu kroków przygotowałem stany walidacji, błędnych danych, błędnego kodu i blokady dostępu. Prawa kolumna ekranu przypomina, co klient zyskuje w panelu.
// Panel klienta
Karta i limit w jednym miejscu
Dashboard odpowiada na najważniejsze pytania posiadacza karty: ile limitu zostało, ile i do kiedy trzeba spłacić oraz co ostatnio działo się na karcie. Dostępny limit pokazałem jako pasek postępu, a kwoty kluczowe (limit całkowity, wykorzystany i spłatę minimalną) w osobnych kafelkach. Pod nimi umieściłem szybkie akcje (spłata zadłużenia, pobranie wyciągu, blokada karty), ostatnie transakcje i najbliższe terminy.
Panel ma osobne warianty dashboardu dla różnych sytuacji klienta: aktywnej karty, wyboru jednej z kilku kart, karty Business, zaległej spłaty, karty zamkniętej, braku karty, niedokończonej weryfikacji oraz oczekiwania na decyzję. Przy zaległości najważniejszą informacją staje się wyraźny komunikat z bezpośrednim przejściem do spłaty.
Spłaty, wyciągi i pozostałe sekcje
W sekcji Spłaty i wyciągi zebrałem dane do przelewu, dwa warianty płatności (kwota minimalna lub całość) oraz archiwum miesięcznych wyciągów PDF. Panel uzupełniają historia transakcji z filtrowaniem po dacie, typie, kwocie i odbiorcy, dokumenty, wiadomości oraz ustawienia konta.
// Responsywność
Widoki mobilne
Na smartfonach boczną nawigację panelu zastąpiłem dwoma polami wyboru (karty i sekcji), tak aby treść zaczynała się możliwie wysoko. Kafelki układają się w jedną kolumnę, a w serwisie menu mobilne łączy przełącznik segmentu, nawigację, wyszukiwarkę i dane kontaktowe.
W ramach projektu przygotowałem ponad 130 widoków desktopowych i mobilnych: od serwisu sprzedażowego, przez wniosek i logowanie, po panel klienta.
// Aplikacja webowa B2B
Portal dostawcy B2B
UX DesignUI DesignAplikacja B2B
Portal rozliczeń dla dostawców sieci handlowej: projekt UX/UI na podstawie analizy wymagań
01 / 10
Jedno miejsce na płatności, obroty i dokumenty dostawcy
Zaprojektowałem UX i UI portalu webowego, w którym dostawcy dużej sieci handlowej sprawdzają płatności, saldo, obroty, noty debetowe, zwroty czy braki w dostawach, a pracownicy sieci zarządzają kontami dostawców, okresami rozliczeniowymi i komunikatami. Analizę biznesową i funkcjonalną przygotował analityk. Na jej podstawie, w ścisłej współpracy z nim, przełożyłem wymagania na architekturę informacji ekranów, przepływy użytkownika, kolejne iteracje, komponenty i finalne widoki interfejsu.
// Zakres prac
UX design: struktura ekranów i przepływy
UI design i komponenty
Współpraca z analitykiem
// Etap 1 · Wymagania
Analiza przygotowana przez analityka
Punktem wyjścia była dokumentacja przygotowana przez analityka: wymagania funkcjonalne opisane w formie diagramów UML dla każdego modułu, od listy płatności, przez obroty i faktury marketingowe, po braki w dostawach i kary. Przechodziłem przez nią moduł po module razem z analitykiem, dopytując o szczegóły i wyjaśniając wątpliwości, aby ustalić, jakie obiekty, statusy i akcje musi obsłużyć interfejs oraz jak są ze sobą powiązane (np. reklamacje, komentarze i załączniki wspólne dla wielu dokumentów).
Z analizy i rozmów z analitykiem wynikały kluczowe założenia dla projektu:
- Dwie role użytkownikówzewnętrzni dostawcy widzą własne dokumenty i rozliczenia, a pracownicy sieci dodatkowo zarządzają kontami, okresami i konfiguracją
- Kontekst kontajedno konto może być przypisane do wielu partnerów biznesowych i vendorów, więc użytkownik musi świadomie wybierać, w czyim imieniu pracuje
- Duże zbiory danychwiększość modułów to rozbudowane tabele, które wymagają wygodnego filtrowania, eksportu i szybkiego przejścia do szczegółów
- Komunikacja przy dokumentachnieprawidłowości i reklamacje zgłaszane bezpośrednio przy płatności lub nocie, w formie wątków z komentarzami i załącznikami
// Etap 2 · Architektura informacji
Struktura i nawigacja
Strukturę portalu opisywał diagram nawigacji opracowany przez analityka: ścieżka logowania (z blokadą konta, resetem i ustawieniem nowego hasła), wybór kontekstu partnera i vendora, pulpit jako punkt startowy oraz moduły dostępne z menu, z których każdy prowadzi do widoku szczegółów i dalszych akcji, np. reklamacji noty debetowej czy zwrotu. Moim zadaniem było przełożenie tej struktury na konkretne ekrany: ustalenie, co i w jakiej hierarchii pojawia się na każdym z nich oraz jak użytkownik przechodzi między widokami.
// Etap 3 · Przepływy
Ścieżki użytkownika
Na tej podstawie każdy moduł rozpisałem jako sekwencję ekranów połączonych przepływem. Na przykładzie płatności: lista transakcji rozliczeniowych → szczegóły płatności z listą dokumentów → wątek nieprawidłowości lub zgłoszenie nowej, a równolegle rozwijane zestawienie miesięczne prowadzące do płatności z wybranego miesiąca. Przepływy omawiałem z analitykiem, dzięki czemu na wczesnym etapie było widać, gdzie użytkownik może utknąć, jakie stany ekranów trzeba zaprojektować i czy projekt obejmuje wszystkie wymagania.
// Etap 4 · Iteracje
Od pierwszej wersji do finalnej
Koncepcję rozwijałem w kolejnych wersjach roboczych (V1-V3), wprowadzając poprawki po wspólnych przeglądach z analitykiem. Pierwsza wersja pulpitu obejmowała osiem modułów z ikonami w stonowanej formie. W kolejnych iteracjach struktura urosła wraz z doprecyzowaniem wymagań, kafle otrzymały wyraźniejszą hierarchię, a nazwy modułów ujednoliciłem z menu bocznym. Przy niektórych widokach, np. fakturach marketingowych, przygotowywałem warianty rozwiązań do wyboru.
// Etap 5 · UI design
Komponenty i warstwa wizualna
Interfejs zbudowałem na powtarzalnych komponentach: nawigacji bocznej w wariantach dla obu ról, kaflach modułów, pozycjach menu ze stanami, nagłówkach stron, tabelach z sortowaniem, filtrami i paginacją oraz oknach modalnych. Warstwa wizualna jest celowo spokojna: jasne tło, jeden kolor akcentu i czytelna typografia, tak aby przy dużej ilości danych to treść pozostawała na pierwszym planie.
// Etap 6 · Finalne widoki
Kluczowe ekrany portalu
Transakcje rozliczeniowe
Lista płatności łączy filtrowanie po identyfikatorze, dacie i numerze dokumentu z eksportem wyników. Kolumny tabeli można dowolnie przestawiać i przywrócić do układu domyślnego, a nad listą można rozwinąć zestawienie miesięczne z ostatnich 12 miesięcy.
Zgłaszanie nieprawidłowości
Rozbieżności w płatności dostawca zgłasza bezpośrednio z widoku jej szczegółów. Każde zgłoszenie to wątek z historią wiadomości, autorami, datami i załącznikami. Dzięki temu cała korespondencja dotycząca dokumentu zostaje w jednym miejscu.
Obroty i konfiguracja
Moduł obrotów podzieliłem na zakładki: listę obrotów z rozszerzonymi filtrami oraz widoki konfiguracyjne, takie jak statusy kontraktów czy okresy obrotowe, dostępne dla pracowników sieci.
Konta i uprawnienia
Najbardziej złożonym widokiem była edycja konta dostawcy. Konto można przypisać do wielu partnerów biznesowych, a w ich ramach do kolejnych vendorów, z osobnym zestawem ról dla każdego z nich. Zastosowałem zagnieżdżone, rozwijane sekcje, aby administrator widział strukturę uprawnień bez przytłoczenia wszystkimi danymi naraz.
Widok dostawcy
Dostawca korzysta z tego samego układu, ale z węższym menu dopasowanym do swojej roli. W nagłówku widzi, w kontekście którego vendora pracuje, i może go zmienić bez wylogowania. Pulpit pokazuje też komunikaty globalne, np. o planowanych przerwach technicznych.
Na podstawie analizy przygotowanej przez analityka i w stałej współpracy z nim zaprojektowałem komplet widoków dla dwóch ról użytkowników, wraz z przepływami, stanami ekranów i biblioteką komponentów.
Sound Core Hero
RedesignUI DesignUX Design
Redesign strony internetowej SoundCoreHero
Nowy wygląd, ten sam produkt
Podczas rozmów z klientem podczas warsztatów dokładnie przeanalizowałem potrzeby potencjalnych kupców urządzenia oraz aktualnych użytkowników SoundCoreHero. Skupiłem się na tym, aby nowa strona była nie tylko estetyczna, ale przede wszystkim funkcjonalna i intuicyjna. Postawiłem na świeży, technologiczny design, dynamiczne wideo pokazujące realizacje oraz opinie użytkowników. Dodaliśmy dynamiczne wideo opisujące funkcjonalności i szczegółowe przedstawienie kluczowych funkcji w formie tabulatorów takich jak zarządzanie strefami dźwięku czy integracja z innymi systemami.
// Stara strona
// Redesign
// Gra quizowa · teleturniej
Quiz Live
Game UIUX DesignUI Design
Gra quizowa w stylu teleturnieju, rozgrywana na trzech ekranach
01 / 12
Teleturniej na żywo, rozgrywany na kilku ekranach jednocześnie
Zaprojektowałem interfejs gry quizowej Quiz Live, inspirowanej telewizyjnymi teleturniejami. Do sześciu graczy zasiada przy własnych stanowiskach, a rozgrywka toczy się równolegle na trzech rodzajach ekranów: na ekranie gracza, na dużym ekranie prezentera oraz na minimonitorach przy stanowiskach. Moim zadaniem było zaprojektowanie wszystkich tych widoków tak, aby tworzyły jedno spójne widowisko: od dołączenia do gry, przez kolejne rundy, aż po ogłoszenie zwycięzcy.
// Zakres prac
UX Design
UI Design
Projekt widoków gry
// Koncepcja
Trzy ścieżki widoków
Projekt podzieliłem na trzy ścieżki, czyli osobne zestawy ekranów, które w trakcie rozgrywki działają jednocześnie i uzupełniają się. Każdy ekran odpowiada na inne pytanie: co mam teraz zrobić, co dzieje się w grze i jak mi idzie.
Trzy ścieżki, na których oparłem projekt:
- 01Ścieżka graczaekran na stanowisku każdego uczestnika. Służy do dołączenia do gry (nazwa wpisywana na ekranowej klawiaturze z polskimi znakami), udzielania odpowiedzi i śledzenia własnego wyniku. Gdy akcja przenosi się na ekran główny (np. podczas filmu albo sekwencji w trybie Memory), gracz dostaje komunikat „Patrz na ekran prezentera”.
- 02Ścieżka prezenteraduży, wspólny ekran, który prowadzi widowisko: pokazuje lobby z dołączającymi graczami, pytania, materiały wideo i dźwiękowe, odsłonięcie poprawnych odpowiedzi oraz tabele wyników po każdym pytaniu i rankingi.
- 03Minimonitorymałe ekrany przy stanowiskach, które poza rozgrywką wyświetlają logo gry, a w jej trakcie imię gracza, liczbę punktów i aktualne miejsce.
// Rozgrywka
Przebieg gry
Całą rozgrywkę rozpisałem jako ciąg stanów, dla których przygotowałem osobne widoki na każdej ze ścieżek:
- 01Dołączeniegracze wpisują swoje nazwy, a ekran prezentera na bieżąco zapełnia się kafelkami uczestników.
- 02Odliczanie do startugdy wszyscy dołączą, pojawia się licznik sekund do rozpoczęcia, a następnie film objaśniający zasady.
- 03Pytaniekategoria, treść pytania i 15 sekund na odpowiedź odliczane na okrągłym timerze.
- 04Odsłonięciezaznaczona odpowiedź gracza i odpowiedź poprawna wyróżnione kolorem, a na ekranie prezentera informacja, kto odpowiedział dobrze.
- 05Wyniki pytaniatabela z pozycją, wynikiem w danej konkurencji i zdobytymi punktami, a pomiędzy rundami plansza „Następne pytanie”.
- 06Finałranking ogólny, a na koniec podium z trzema najlepszymi graczami.
Stany odpowiedzi oparłem na prostym kodzie kolorów: zielony oznacza odpowiedź poprawną, czerwony błędną, a niewybrane opcje zostają wygaszone. W pytaniach wielokrotnego wyboru poprawne odpowiedzi, których gracz nie zaznaczył, otrzymują przerywany obrys, dzięki czemu od razu widać, czego zabrakło.
// Konkurencje
Tryby gry
Aby rozgrywka miała tempo i różnorodność prawdziwego teleturnieju, zaprojektowałem kilka typów konkurencji, od klasycznych pytań po zadania zręcznościowe wykonywane przyciskami na stanowiskach:
- Pytanie ABCDklasyczny wybór jednej z czterech odpowiedzi, także w wariantach z dźwiękiem („Jak nazywa się ten instrument?”) i z filmem („Co wydarzy się dalej w tym filmie?”).
- Uszeregujułożenie odpowiedzi we właściwej kolejności.
- Wybór pasującychzaznaczenie wszystkich poprawnych odpowiedzi z siatki kafelków, z podsumowaniem liczby trafień.
- Hasło i rebus emojiodgadnięcie hasła na podstawie opisu lub ciągu emoji i wpisanie go na klawiaturze; litery hasła mogą być stopniowo odkrywane.
- Memoryzapamiętanie sekwencji kolorów pokazanej na ekranie prezentera i odtworzenie jej przyciskami na stanowisku.
- Turbo klikjak najszybsze klikanie czerwonego przycisku w wyznaczonym czasie.
- Odliczanie w pamięciodliczenie w myślach zadanej liczby sekund i zatrzymanie czasu przyciskiem. Liczy się precyzja.
// Warstwa wizualna
Styl teleturnieju
Oprawę oparłem na estetyce telewizyjnego studia: granatowa scena, złote i fioletowe reflektory oraz neonowe logo Quiz Live. Treść umieściłem na ciemnych, półprzezroczystych panelach z subtelnym obrysem, aby pozostała czytelna na bogatym tle. Duża, pogrubiona typografia w wersalikach i mocne akcenty kolorystyczne sprawiają, że pytania i wyniki są czytelne z odległości, co jest kluczowe na ekranie, który ogląda cała sala. Przygotowałem też składowe do animacji, m.in. flary świetlne i warstwy światła, które ożywiają ekrany startowe.
W ramach projektu przygotowałem 75 widoków Full HD dla trzech ścieżek: gracza, prezentera i minimonitorów.
Platforma B2B
Architektura informacjiMakiety UX
Proces warsztatowy z efektem w postaci makiet funkcjonalnych
01 / 04
Potrzeba nowej odsłony e-commerce dla B2B
Dla jednego z wiodących producentów i dystrybutorów elementów złącznych w Polsce opracowałem makiety UX nowej platformy B2B. Na podstawie warsztatów przeprowadzonych z klientem zidentyfikowaliśmy kluczowe wymagania dla intuicyjnej, bogatej w funkcje platformy, która usprawni proces zamawiania i poprawi doświadczenie klienta. Nazwa klienta i dane firmy zostały ukryte.
// Praca warsztatowa
Warsztat i jego efekt
Projekt obejmował opracowanie kompleksowej architektury informacji w celu zapewnienia intuicyjnej nawigacji i logicznej organizacji treści. Poprzez ćwiczenia sortowania kart i analizę przepływu użytkowników, stworzyliśmy strukturę, która jest zgodna ze sposobem, w jaki profesjonalni nabywcy wyszukują i kupują przemysłowe elementy złączne.
Jako finalny efekt warsztatu z klientem - stworzyliśmy listę funkcji które są najważniejsze w MVP platformy:
Karta produktu
- Kompleksowy widok wszystkich wariantów produktu
- Zaawansowane opcje filtrowania
- Funkcja wyszukiwania w karcie dla szybkiej nawigacji między wariantami
Konto klienta
- ZamówieniaŚledzenie statusu zamówienia z aktualizacjami w czasie rzeczywistym
- Ulubione produktySzybkie ponowne zamawianie z zapisanych ulubionych
- Użytkownicy i roleKontrola administracyjna do zarządzania uprawnieniami
- ZapytaniaSekcja do zarządzania zapytaniami o produkty
- Twoje daneZarządzanie informacjami o kliencie
- Historia produktówRejestr wcześniej przeglądanych/zamawianych produktów
- KontraktySzczegółowe informacje i zarządzanie umowami
Rozszerzone możliwości wyszukiwania
- Wyszukiwarka wspierana przez AI pomagająca klientom znaleźć określone śruby
- Inteligentne filtrowanie na podstawie specyfikacji technicznych
Koszyk zapytań
- Dedykowana sekcja do wysyłania zapytań dotyczących potencjalnych zamówień przed złożeniem zamówienia
Część widoków strony głównej i wyszukiwarki
Koszyk, checkout
Widok product page oraz category page
Panel klienta
// Przebudowa systemu
System dla sieci serwisów opon
Przebudowa systemuUX DesignUI Design
Propozycja przebudowy systemu do obsługi wizyt, warsztatu i depozytów opon
01 / 07
Jeden system dla managera, serwisanta i biura
Przygotowałem propozycję przebudowy wewnętrznego systemu dla sieci serwisów opon. System obsługuje cały cykl wizyty klienta: od rezerwacji, przez pracę na stanowisku warsztatowym, po przechowywanie opon w depozycie. Celem projektu było uporządkowanie struktury aplikacji i zaprojektowanie kluczowych widoków tak, aby każda rola w serwisie widziała przede wszystkim to, czego potrzebuje w danej chwili.
// Zakres prac
Architektura informacji
UX Design
UI Design
// Punkt wyjścia
Dlaczego przebudowa
Projekt powstał jako propozycja przebudowy systemu, z którego korzystają jednocześnie osoby o bardzo różnych zadaniach: manager planujący dzień, serwisant pracujący przy samochodzie i biuro obsługujące klientów. Każda z tych osób potrzebuje innych informacji, a dane o kliencie, pojeździe, wizytach i oponach w depozycie są ze sobą ściśle powiązane.
Przy projektowaniu nowej wersji skupiłem się na kilku obszarach:
- Czytelna struktura modułówjedna główna nawigacja: Pulpit, Rezerwacje, Pojazdy, Depozyty, Warsztat, Serwisy i Biuro
- Widoki dopasowane do rólmanager dostaje podgląd całego dnia, a serwisant moduł skupiony na bieżącym zleceniu
- Depozyt jako część procesuinformacje o przechowywanych oponach pojawiają się tam, gdzie są potrzebne: w zleceniu i na karcie pojazdu
- Praca na warsztacieduże pola dotykowe i proste kroki, które da się obsłużyć na tablecie przy stanowisku
// Pulpit
Dzień serwisu na pierwszym ekranie
Pulpit managera zbiera najważniejsze informacje o bieżącym dniu: liczbę wizyt, pojazdy w serwisie, zakończone zlecenia i średni czas obsługi. Pod spodem znajduje się plan najbliższych wizyt ze statusami, obłożenie poszczególnych stanowisk oraz alert o depozytach wymagających uwagi, np. kompletach z bieżnikiem poniżej 4 mm. Dzięki temu manager może zareagować bez przechodzenia między modułami.
// Moduł serwisanta
Zlecenie w czterech krokach
Moduł warsztatowy zaprojektowałem w układzie dwóch kolumn. Po lewej serwisant ma listę dzisiejszych pojazdów z wyszukiwarką po numerze rejestracyjnym i przyciskiem dodania klienta bez rezerwacji. Po prawej prowadzi bieżące zlecenie krok po kroku: uwagi, usługi, depozyt i podsumowanie. Stepper pokazuje, na jakim etapie jest praca, a przyciski akcji są zawsze w tym samym miejscu.
Na starcie serwisant widzi zestawienie danych pojazdu, klienta, wizyty i przypisanego stanowiska. Może od razu rozpocząć zlecenie albo zgłosić, że klient nie pojawił się na wizycie.
W kroku depozytu system podpowiada komplet znaleziony w bazie: sezon, model opon, rozmiar i miejsce w magazynie. Serwisant potwierdza go po demontażu, wpisuje zmierzony stan bieżnika za pomocą prostego licznika i może dodać zdjęcie kompletu. Na podsumowaniu sprawdza całość przed zamknięciem zlecenia, a ekran końcowy jasno komunikuje, że pojazd jest gotowy do odbioru.
// Pojazdy
Karta pojazdu
Karta pojazdu łączy w jednym miejscu dane klienta, aktualny depozyt opon z lokalizacją w magazynie, historię wizyt z kosztami, najbliższą zaplanowaną wizytę oraz notatki zespołu. Z tego widoku można od razu umówić kolejną wizytę lub edytować dane.
// Tablet
Widoki na tablet
Ponieważ moduł warsztatowy ma być używany bezpośrednio przy stanowisku, przygotowałem również wersje widoków na tablet. Nawigacja zwija się do ikon z etykietą tylko dla aktywnego modułu, sekcje pulpitu przechodzą w układ jednokolumnowy, a w module serwisanta przycisk dodania klienta bez rezerwacji trafia na górę listy pojazdów.
Propozycja obejmuje 14 widoków desktop i tablet dla kluczowych procesów: planowania dnia, obsługi zlecenia na warsztacie i pracy z depozytem opon.
// Strona instytucji kultury
Muzeum Drozdowo
Strona internetowaUX DesignUI DesignDostępność
Strona internetowa Muzeum Przyrody (Dwór Lutosławskich) w Drozdowie
01 / 03
Muzeum, które łączy historię dworu z przyrodą regionu
Zaprojektowałem stronę internetową Muzeum Przyrody (Dwór Lutosławskich) w Drozdowie. Placówka prowadzi jednocześnie wystawy historyczne poświęcone rodzinie Lutosławskich i Romanowi Dmowskiemu, ekspozycje przyrodnicze oraz zajęcia edukacyjne dla szkół. Zadaniem strony było uporządkowanie tych trzech obszarów w jednej, czytelnej strukturze i nadanie im spokojnej, muzealnej oprawy wizualnej.
// Zakres prac
UX Design
UI Design
Styleguide
// Architektura informacji
Trzy filary oferty muzeum
Treści muzeum podzieliłem na trzy główne działy (Historia, Przyroda i Edukacja), które w menu rozwijają się do konkretnych wystaw i podstron. Obok nich w nawigacji znalazły się sekcje, których odwiedzający szukają najczęściej: Aktualności, Wydawnictwa, Cennik i Kontakt. Na stronie głównej ten sam podział powtarza blok „Na skróty”, który prowadzi bezpośrednio do wystaw, artykułów i oferty zajęć.
Kluczowe założenia struktury:
- Spójny szablon działówstrony Historia i Przyroda korzystają z tego samego układu: nagłówek ze zdjęciem, okruszki i kafelki prowadzące do podstron
- Wymogi instytucji publicznejw nagłówku zaplanowałem stałe miejsce na BIP, deklarację dostępności i ochronę danych oraz zadania realizowane ze środków publicznych
- Powiązane treścina dole podstron powtarzają się odnośniki do cennika, wydawnictw i pozostałych działów, dzięki czemu użytkownik nie trafia w ślepy zaułek
// Warstwa wizualna
UI oraz UX
Oprawę wizualną oparłem na ciepłej, beżowej palecie, brązowych przyciskach i botanicznych ilustracjach, które pojawiają się na marginesach stron. Nawiązują one do przyrodniczego charakteru muzeum i dworskiego wnętrza, a jednocześnie pozostawiają pierwszy plan dla zdjęć eksponatów. Układ treści jest oszczędny: duże fotografie, wyraźne nagłówki i dużo światła między sekcjami.
Strona wystawy
Dla pojedynczych wystaw przygotowałem układ, w którym naprzemiennie zestawione zdjęcia i bloki tekstu prowadzą przez historię ekspozycji. Stronę zamyka galeria zdjęć oraz sekcja z odnośnikami do pozostałych działów muzeum.
Oferta edukacyjna
Lekcje i warsztaty pogrupowałem w bloki tematyczne z informacją o czasie trwania i listą zajęć wraz z grupą wiekową. Pod ofertą umieściłem galerię z zajęć oraz wyraźną sekcję rezerwacji z telefonem i adresem e-mail, bo to właśnie kontakt jest kolejnym krokiem nauczyciela planującego wizytę.
Wydawnictwa, cennik i kontakt
Wydawnictwa muzeum zaprezentowałem jak katalog: okładka, tytuł, dane wydania, cena i przycisk przejścia do szczegółów, a nad listą informację o sposobie zamawiania. Rozbudowany cennik podzieliłem na kategorie biletów i usług w formie czytelnych wierszy z ceną wyrównaną do prawej. Strona kontaktowa zbiera w jednym miejscu dane adresowe, kontaktowe, identyfikacyjne i numer konta.
// Dostępność
Strona dla każdego odwiedzającego
Jako strona instytucji publicznej serwis musi być dostępny dla jak najszerszego grona odbiorców. Na górze każdej podstrony zaprojektowałem pasek z przełącznikiem kontrastu i regulacją wielkości czcionki, a w nawigacji stały dostęp do deklaracji dostępności. Wszystkie podstrony mają okruszki ułatwiające orientację w strukturze serwisu.
// Styleguide
Fundamenty interfejsu
Projekt oparłem na uporządkowanym styleguidzie. Skalę typograficzną zbudowałem na bazowym rozmiarze 16 px i skali Major Second (1.125), z interlinią 1.3. Przyciski i pola formularzy mają zdefiniowane wszystkie stany: od domyślnego, przez hover i aktywny, po wyłączony oraz komunikaty błędu i sukcesu.
W ramach projektu zaprojektowałem 20 widoków desktopowych: od strony głównej, przez działy i wystawy, po aktualności, wydawnictwa i podstrony dostępności.
// Serwis aukcyjny
Christiania Auksjoner
UX DesignUI DesignDesign System
Serwis aukcyjny dla norweskiego domu aukcyjnego
01 / 06
Serwis aukcyjny dla norweskiego domu aukcyjnego
Zaprojektowałem serwis internetowy dla Christiania Auksjoner, domu aukcyjnego z Oslo, który sprzedaje sztukę, antyki, biżuterię i przedmioty kolekcjonerskie. Moim celem było połączenie dwóch potrzeb: eleganckiej, spokojnej prezentacji obiektów, która pasuje do charakteru domu aukcyjnego, oraz sprawnego, przejrzystego procesu licytacji online.
// Zakres prac
UX Design
UI Design
Design System
// Struktura
Od aukcji do pojedynczego obiektu
Serwis oparłem na prostej ścieżce: strona główna → lista aukcji i kategorii → kategoria z listą obiektów → karta obiektu z licytacją. Na każdym poziomie użytkownik ma pod ręką wyszukiwarkę, koszyk, listę obserwowanych, logowanie oraz przełącznik waluty i języka, a główna nawigacja dzieli aukcje na najlepsze, nadchodzące i zakończone.
Na stronie głównej zebrałem najważniejsze punkty wejścia:
- Wyróżnione aukcjeduży baner z przełączanymi zakładkami, który eksponuje aktualne wydarzenia aukcyjne
- Nadchodzące aukcjekarty z datą, miejscem i licznikiem czasu do rozpoczęcia
- Popularne kategorieszybki skrót do najczęściej przeglądanych działów
- Historyczne wynikikaruzela obiektów pokazująca, co już zostało sprzedane i za ile
- Sprzedaż i wycenasekcje zachęcające do oddania przedmiotów na aukcję i skorzystania z bezpłatnej wyceny.
// Przeglądanie
Lista obiektów w kategorii
Kategorie mogą zawierać bardzo dużo obiektów, dlatego widok listy zaprojektowałem wokół szybkiego zawężania wyników. Po lewej stronie umieściłem panel filtrów z rozwijanymi grupami, nad listą sortowanie (np. według czasu zakończenia) oraz pole przejścia bezpośrednio do numeru obiektu, przydatne dla osób, które przychodzą z katalogu aukcji.
Każda karta obiektu pokazuje w jednym miejscu to, co jest potrzebne do decyzji: numer katalogowy, estymację, aktualną ofertę, czas do końca licytacji z datą zakończenia oraz przycisk dodania do obserwowanych.
// Licytacja
Karta obiektu
Na karcie obiektu najważniejsza jest licytacja, więc panel ofert umieściłem obok galerii, w pierwszym widoku ekranu. Aktualna oferta jest wyróżniona kolorem, obok widać odliczanie do końca aukcji i liczbę złożonych ofert. Pod wyborem maksymalnej kwoty znajduje się główne wezwanie do działania, a tuż pod nim informacja o opłacie aukcyjnej, żeby koszt nie był dla kupującego zaskoczeniem.
Niżej znalazły się szczegółowy opis z tabelą parametrów, historia licytacji z ponownym formularzem oferty oraz karuzela podobnych aukcji, która zachęca do dalszego przeglądania.
// Mobile
Widoki mobilne
Każdy z kluczowych widoków zaprojektowałem również w wersji mobilnej. Filtry w kategorii zwijają się do jednego przycisku, a na karcie obiektu przycisk licytacji przesunąłem wyżej, bezpośrednio pod opis, aby był dostępny bez długiego przewijania.
// Spójność
Design system
Projekt oparłem na spójnym design systemie. Kolorystykę zbudowałem wokół ciepłego, złoto-brązowego koloru podstawowego, uzupełnionego skalą szarości i paletami komunikatów. Typografia korzysta ze skali Major Second (1,125) z bazowym rozmiarem 16 px i osobnymi stopniami nagłówków dla desktopu i mobile.
Komponenty interaktywne mają rozpisane wszystkie stany: od domyślnego, przez hover i wciśnięcie, po stan nieaktywny, a w formularzach także sukces i błąd. W design systemie znalazły się również cienie, odstępy, etykiety, zestaw ikon oraz siatki dla 1440 px, 1920 px i 360 px.
Projekt obejmuje cztery kluczowe widoki desktopowe, ich mobilne odpowiedniki oraz kompletny design system.
// Redesign serwisu aukcyjnego
Skanfil
RedesignUX DesignUI Design
Nowa odsłona domu aukcyjnego i sklepu dla kolekcjonerów
01 / 04
Redesign serwisu aukcyjnego i sklepu dla kolekcjonerów
Skanfil to norweski dom aukcyjny i sklep dla kolekcjonerów: znaczków, monet, banknotów, medali i innych przedmiotów kolekcjonerskich. Zaprojektowałem nową odsłonę serwisu, która łączy w jednym miejscu dwie ścieżki zakupu: licytację na aukcjach i zakup w sklepie. Chciałem uporządkować bardzo szeroką ofertę i nadać marce nowoczesny, spójny wygląd.
// Zakres prac
UX Design
UI Design
Styleguide
// Kontekst
Aukcje i sklep w jednym serwisie
Skanfil działa w dwóch modelach sprzedaży. Na aukcjach każdy obiekt ma numer lotu, estymację, aktualną ofertę i czas do końca licytacji. W sklepie produkty mają stałą cenę. W redesignie zależało mi na tym, żeby obie części korzystały z tej samej struktury i tych samych komponentów, a użytkownik w każdej chwili wiedział, czy licytuje, czy kupuje.
Najważniejsze założenia projektu:
- Wspólna nawigacjamenu główne podzielone na dwie grupy: Auctions (najlepsze i nadchodzące aukcje) oraz Shop (znaczki, monety i medale, bestsellery, wyprzedaż), plus osobny link „Selge” dla osób, które chcą sprzedać swoje zbiory
- Kluczowe dane na karcie obiektunumer lotu, estymacja, aktualna oferta i czas do końca aukcji widoczne już na liście, bez wchodzenia w szczegóły
- Odbiorcy z różnych krajówprzełącznik waluty i języka w nagłówku, obok koszyka, logowania i listy ulubionych
- Ciepły, kolekcjonerski charakterczerwień marki, dużo światła i fotografie obiektów w organicznych kształtach zamiast ciężkiej, katalogowej estetyki
// Widoki desktop
Od strony głównej do licytacji
Strona główna
Strona główna od razu kieruje użytkownika na dwie ścieżki: do aukcji i do sklepu. Pod hero z karuzelą tematów umieściłem najpopularniejsze obiekty na aukcji, nadchodzące aukcje z odliczaniem czasu, popularne kategorie oraz bestsellery sklepu.
Lista kategorii
Widok „Discover Treasures” dzieli ofertę na czytelne kategorie, od monet, banknotów i medali, przez rzadkie skandynawskie znaczki, po dawne mapy i militaria. Pod nimi pokazuję nadchodzące aukcje.
Kategoria
Lista obiektów w kategorii ma panel filtrów, sortowanie (domyślnie według czasu zakończenia) i pole do szybkiego przejścia do konkretnego numeru lotu. Karty obiektów mają stały układ informacji, więc łatwo porównać kilka ofert naraz.
Karta obiektu i licytacja
Na karcie obiektu wyeksponowałem informacje potrzebne do decyzji: aktualną ofertę, dokładny czas do końca aukcji, liczbę ofert i estymację. Licytuje się przez pole maksymalnej oferty i przycisk „Place bid”. Obok opisu jest historia licytacji z drugim formularzem oferty, a pod spodem informacja o dodatkowych kosztach i podobne aukcje.
// Responsywność
Widoki mobilne
Wszystkie kluczowe widoki zaprojektowałem też w wersji mobilnej. Na małym ekranie filtry chowają się pod jednym przyciskiem, karuzele mają paginację, a na karcie obiektu formularz licytacji jest zaraz pod nazwą i opisem, przed szczegółami lotu.
// Design system
Styleguide
Projekt oparłem na uporządkowanym styleguidzie. Skala typograficzna (Major Second, baza 16 px) ma osobne warianty nagłówków dla desktopu i mobile. Paleta obejmuje kolor główny, szarości i kolory komunikatów, każdy w odcieniach od 50 do 900. Odstępy opierają się na wielokrotnościach 8 px, a przyciski, pola formularzy, wyszukiwarka, checkboxy, radio i etykiety mają rozpisane wszystkie stany.
Projekt obejmuje cztery kluczowe widoki serwisu w wersjach desktop i mobile oraz kompletny styleguide.
// Sklep internetowy z meblami
Archerior
E-commerceUX DesignUI Design
Sklep internetowy z meblami z litego drewna i inspiracjami wnętrz
01 / 07
Sklep internetowy z meblami z litego drewna
Archerior to marka mebli z litego drewna: krzeseł, stołów, biurek i mebli do jadalni. Zaprojektowałem dla niej sklep internetowy, który łączy sprzedaż produktów z treściami inspiracyjnymi i osobną ścieżką dla klientów biznesowych. Zależało mi na tym, żeby serwis był spokojny i oszczędny w formie, z dużymi zdjęciami i ograniczoną paletą barw, a jednocześnie sprawnie prowadził od inspiracji do zamówienia.
// Zakres prac
UX Design
UI Design
Styleguide
// Struktura
Sklep, inspiracje i strefa dla profesjonalistów
Nawigację oparłem na czterech pozycjach: Produkty, Inspiracje, Dla profesjonalistów i Kontakt. W nagłówku znalazły się wyszukiwarka, ulubione, konto klienta i koszyk, a także przełącznik języka DE / PL. Nad nagłówkiem umieściłem cienki pasek komunikatów, np. z zachętą do zapisu na newsletter.
Najważniejsze założenia projektu:
- Produkt na pierwszym planiejednolite zdjęcia packshot na jasnym tle, duże kadry aranżacji i minimum ozdobników w interfejsie
- Inspiracje jako droga do zakupuaranżacje wnętrz uzupełnione sekcją podobnych produktów, tak aby z inspiracji można było od razu przejść do oferty
- Osobna ścieżka B2Bzakładka „Dla profesjonalistów” w menu, link w stopce i baner nad stopką na większości podstron
- Dwie wersje językoweprzełącznik DE / PL i ceny w euro przygotowują sklep do sprzedaży także poza Polską
// Strona główna
Kategorie, bestsellery i inspiracje
Stronę główną otwiera duże zdjęcie aranżacji z hasłem i przyciskiem do całej oferty. Niżej użytkownik trafia do kafelków kategorii, karuzeli bestsellerów z wybranej kolekcji, siatki najpopularniejszych produktów i karuzeli inspiracji. Stronę zamyka sekcja o marce z rozwijaną listą jej zalet oraz stopka z dużym logotypem.
// Nawigacja
Mega menu i wyszukiwarka
Rozbudowaną ofertę uporządkowałem w mega menu: po lewej kategorie główne, w środku podkategorie w dwóch kolumnach, a reszta strony zostaje przyciemniona. Wyszukiwarka otwiera się jako okno nad bieżącą stroną, więc użytkownik nie traci kontekstu.
// Oferta
Lista i karta produktu
Lista produktów ma okruszki, nagłówek kategorii z krótkim wstępem, zakładki podkategorii i siatkę w trzech kolumnach. Karta na liście pokazuje kategorię, nazwę i cenę, a w stanie aktywnym pokazuje zbliżenie produktu, dostępne kolory drewna i przycisk ulubionych. Do zawężania wyników zaprojektowałem filtry: rodzaj, cena, kolor, seria, styl i sortowanie.
Na karcie produktu zdjęcia ułożyłem jedno pod drugim po lewej stronie, a po prawej wszystkie informacje potrzebne do decyzji: cenę, dostępność, kod produktu, krótki opis, wybór rodzaju drewna, wymiaru i liczby sztuk. Obok głównego przycisku dodania do koszyka jest szybki zakup przez Apple Pay i PayPal. Opis, specyfikację oraz informacje o dostawie i zwrotach schowałem w rozwijanych sekcjach, a pod spodem pokazuję produkty podobne.
// Inspiracje
Aranżacje, które prowadzą do produktów
Lista inspiracji to naprzemienny układ zdjęcia i tekstu z filtrem stylu. Pojedyncza inspiracja zaczyna się od dużego zdjęcia wnętrza, potem prowadzi przez kilka sekcji opisowych ze zdjęciami, galerię realizacji w formie karuzeli i listę podobnych produktów.
// Zakup
Od mini koszyka do płatności
Po dodaniu produktu z prawej strony wysuwa się mini koszyk z listą produktów, zmianą liczby sztuk i sumą zamówienia. Pełny koszyk ma dwie kolumny: produkty z wariantem i ceną oraz podsumowanie z polem na kod rabatowy. Podsumowanie zamówienia zebrałem na jednym ekranie: dane do wysyłki, wybór metody dostawy, płatność (Apple Pay, PayPal, BLIK, karta), zgoda na regulamin i przycisk „Kupuję i płacę”.
Kontakt
Stronę kontaktu zbudowałem symetrycznie: dane kontaktowe i firmowe po obu stronach centralnego zdjęcia, bez zbędnych elementów.
// Warstwa wizualna
Spokojna, ciepła estetyka
Kierunek wizualny oparłem na kilku prostych zasadach:
- Typografiageometryczny krój Archia w nagłówkach pisanych wersalikami w lekkiej odmianie oraz Satoshi w tekstach i elementach interfejsu
- Kolorystykazłamana biel jako tło, ciepły beż do wyróżniania sekcji i niemal czarny kolor w stopce oraz głównych przyciskach
- Komponentycienkie obramowania, proste kąty i przyciski z tekstem pisanym wersalikami, które nie konkurują ze zdjęciami
- Fotografiaduże kadry aranżacji w ciepłych, naturalnych barwach i jednolite zdjęcia produktów na jasnym tle
Całość opisałem w styleguide: skala typograficzna dla desktopu i urządzeń mobilnych, paleta kolorów razem z kolorami komunikatów, przyciski, pola formularzy, ikony oraz siatki 1440 i 1920 px, a także siatka 360 px dla wersji mobilnej.
Projekt obejmuje osiem podstron sklepu w wersji desktop oraz nakładki: mega menu, wyszukiwarkę i mini koszyk.
Porównywarka cen energii
Architektura informacjiMakiety UXUI Design
Porównywarka ofert energii i innych produktów dla Twojej firmy i domu
01 / 04
// Zakres współpracy
Architektura informacji
UX Design
UI Design
Pomysł na portal Energomat wynikał z rosnącej potrzeby rynku - firmy i klienci indywidualni coraz częściej szukają narzędzi pozwalających kontrolować koszty energii. Wahania cen prądu i gazu pokazały, że odbiorcy potrzebują prostych i wiarygodnych sposobów na porównywanie ofert dostawców. MVP systemu miało odpowiedzieć dokładnie na tę potrzebę.
Zakres i skład
Wersja MVP Energomatu została zrealizowana przez zespół wewnętrzny firmy (product owner, eksperci branżowi i zespół merytoryczny), analityka oraz mnie jako projektanta UX/UI. Naszym wspólnym celem było stworzenie porównywarki ofert energii elektrycznej i gazu, która stanie się fundamentem dla przyszłych funkcjonalności platformy.
Prace warsztatowe
Na początku zdefiniowaliśmy kluczowe grupy docelowe. Mimo że ich potrzeby nie były w 100% zbieżne, dało się zauważyć kilka powtarzalnych wzorców - szczególnie w sposobie wyszukiwania ofert i oczekiwanej prostocie procesu.
Równolegle powstały pierwsze mapy ścieżek użytkownika. Dwie z nich były kluczowe dla całego MVP:
- 01Wyszukiwanie podstawoweszybka możliwość sprawdzenia orientacyjnych cen bez konieczności podawania wielu danych.
- 02Wyszukiwanie zaawansowanekonfiguracja szczegółowych parametrów, które pozwalały uzyskać precyzyjniejsze wyniki, głównie dla firm i bardziej świadomych klientów.
Te ścieżki wyznaczyły strukturę całego serwisu.
Funkcjonalności i kolejne działania
Równocześnie z pracami UX koordynowaliśmy integracje techniczne niezbędne w pierwszej odsłonie systemu. Dotyczyły one m.in.:
- pozyskiwania danych od dostawców energii i gazu,
- budowy logiki porównywarek,
- konfiguracji filtrów i kryteriów ofertowych,
- modułów powiadomień i alertów,
- formularzy kontaktowych oraz zapytań.
Dzięki temu mogliśmy zaprojektować UI, który nie tylko dobrze wyglądał, ale też był spójny z realnym zakresem MVP - bez obietnic funkcjonalnych, których system nie jest w stanie dostarczyć. Projekt graficzny MVP miał przede wszystkim uporządkować sposób prezentacji danych ofertowych i zapewnić użytkownikom jasny, bezwysiłkowy przepływ przez cały proces porównywania. Interfejs został zaprojektowany modułowo, tak aby każda część systemu spełniała konkretną funkcję, a jednocześnie tworzyła spójną całość.
Przygotowany UI obejmował pełną strukturę strony głównej, która miała wprost komunikować wartość produktu i kierować użytkownika do dwóch głównych porównywarek. Landing page’e ofertowe zostały zaprojektowane tak, aby wprowadzać w temat energii elektrycznej i gazu, wyjaśniać różnice między ofertami oraz prowadzić do konfiguracji wyszukiwania.
Przykładowe ekrany UI
Poniżej znajdują się wybrane ekrany przygotowane w ramach MVP. Pokazują one strukturę informacji, hierarchię elementów i sposób prezentacji wyników porównania w kontekście rzeczywistych danych ofertowych.
// Portal
Škoda Bieranowski
UI/UX Design
Nowa odsłona serwisu dealera samochodów Škoda
Z kolekcji: Mixed UI
Serwis salonu, który prowadzi do auta
Serwis dla autoryzowanego dealera Škody, który łączy ofertę samochodów nowych i używanych z usługami salonu: serwisem, finansowaniem i odkupem aut. Prowadziłem proces od architektury informacji i ścieżek użytkownika, przez makiety, po finalny UI. Zaprojektowałem listing pojazdów z rozbudowanymi filtrami, kartę samochodu z galerią i szybkim kontaktem oraz kalkulator finansowania. Całość opiera się na czytelnym systemie kafli, który ułatwia przejście od inspiracji do zapytania o ofertę.
// Zakres prac
Architektura informacji i ścieżki użytkownika
Makiety i projekt UI
Listing, karta pojazdu i kalkulator kredytu
// E-commerce
The Body Shop Poland
UI/UX Design
Sklep internetowy marki kosmetycznej The Body Shop
Z kolekcji: Mixed UI
Zakupy kosmetyków bez zbędnych kroków
Projekt polskiego sklepu internetowego The Body Shop, marki kosmetyków naturalnych. Prowadziłem proces od architektury informacji i ścieżek zakupowych, przez makiety, po finalny UI. Zaprojektowałem stronę główną z sekcjami promocyjnymi, listing kategorii z filtrowaniem, kartę produktu z wyborem odcienia oraz checkout z lokalnymi metodami płatności, w tym BLIK. Interfejs zachowuje charakter marki, a jednocześnie pozostaje prosty w codziennym użyciu.
// Zakres prac
Architektura informacji i ścieżki zakupowe
Makiety i projekt UI
Karta produktu i proces zamówienia
// Portal + E-commerce
Zagłębie Lubin
UI/UX Design
Sklep kibica i serwis akademii piłkarskiej Zagłębia Lubin
Z kolekcji: Mixed UI
Klub, akademia i sklep w jednym miejscu
Projekt obejmował dwa powiązane obszary klubu: sklep internetowy z odzieżą i gadżetami kibica oraz serwis akademii piłkarskiej. Prowadziłem proces od architektury informacji i ścieżek użytkownika, przez makiety, po finalny UI. W sklepie zaprojektowałem listing produktów i kartę koszulki z wyborem rozmiaru, a w serwisie akademii między innymi terminarz meczów, aktualności i prezentację infrastruktury. Spójna, pomarańczowa stylistyka łączy obie części z identyfikacją klubu.
// Zakres prac
Architektura informacji obu serwisów
Makiety i projekt UI
Sklep kibica i strona akademii
// Portal + E-commerce
Optident
UI/UX DesignBrandingRebranding
Rebranding i serwis dostawcy sprzętu dla stomatologii
Z kolekcji: Mixed UI
Sprzęt, szkolenia i serwis w jednym miejscu
Optident oferuje gabinetom stomatologicznym sprzęt, szkolenia i obsługę serwisową. W ramach projektu odświeżyłem identyfikację marki, a następnie poprowadziłem projekt serwisu od architektury informacji i ścieżek użytkownika, przez makiety, po finalny UI. Zaprojektowałem między innymi kartę urządzenia z formularzem zapytania, podstronę szkolenia z programem i prowadzącymi oraz formularz zgłoszenia serwisowego. Struktura serwisu porządkuje szeroką ofertę według potrzeb gabinetu.
// Zakres prac
Rebranding i identyfikacja wizualna
Architektura informacji i makiety
Projekt UI serwisu i sklepu
// Portal
Dobosz Stomatologia
UI/UX Design
Strona gabinetu stomatologicznego w Szczecinie
Z kolekcji: Mixed UI
Elegancka strona gabinetu implantologii
Strona gabinetu stomatologicznego specjalizującego się w implantologii, chirurgii i protetyce. Prowadziłem projekt od architektury informacji i ścieżek pacjenta, przez makiety, po finalny UI. Zaprojektowałem przejrzyste podstrony zabiegów, sekcję opinii pacjentów, blog z wiedzą o leczeniu oraz FAQ. Granatowa kolorystyka i klasyczna typografia budują wrażenie spokoju i profesjonalizmu.
// Zakres prac
Architektura informacji i ścieżki pacjenta
Makiety i projekt UI
Podstrony zabiegów, blog i FAQ
// E-commerce
Lil’ things
UI/UX Design
Sklep z dekoracjami i wyprawką dla dzieci w stylu boho
Z kolekcji: Mixed UI
Minimalistyczny sklep z ciepłym charakterem
Lil’ things to sklep z minimalistycznymi dekoracjami i wyprawką dla dzieci w stylu boho. Prowadziłem proces od architektury informacji i ścieżek zakupowych, przez makiety, po finalny UI. Zaprojektowałem stronę główną z kategoriami, listing produktów z wyborem kolorów, kartę produktu z galerią i opiniami oraz przejrzysty proces dostawy i płatności. Stonowana paleta i duże zdjęcia pozwalają produktom grać pierwsze skrzypce.
// Zakres prac
Architektura informacji i ścieżki zakupowe
Makiety i projekt UI
Listing, karta produktu i checkout
// Portal
Beverly Aesthetic Clinic
UI/UX DesignBranding
Identyfikacja i strona kliniki medycyny estetycznej
Z kolekcji: Mixed UI
Spokojna elegancja w każdym detalu
Projekt obejmował identyfikację wizualną kliniki medycyny estetycznej oraz jej stronę internetową. Zaprojektowałem znak z monogramem BV i dobrałem stonowaną, beżową paletę z elegancką typografią szeryfową. Stronę poprowadziłem od architektury informacji i ścieżek użytkownika, przez makiety, po finalny UI. Układ oparty na dużych zdjęciach i swobodnej przestrzeni prezentuje obszary zabiegowe oraz wnętrza kliniki.
// Zakres prac
Identyfikacja wizualna marki
Architektura informacji i makiety
Projekt UI strony
// E-commerce
WePrint
UI/UX DesignBranding
Sklep internetowy drukarni z konfiguratorem produktów
Z kolekcji: Mixed UI
Zamawianie druku krok po kroku
WePrint to drukarnia internetowa z szeroką ofertą druku wielkoformatowego i offsetowego. Zaprojektowałem identyfikację marki, a następnie poprowadziłem projekt sklepu od architektury informacji i ścieżek zakupowych, przez makiety, po finalny UI. Kluczowym elementem jest konfigurator produktu, w którym klient w trzech krokach określa parametry, wybiera tryb produkcji i nakład, a potem składa zamówienie. Zaprojektowałem też czytelny katalog kategorii, koszyk i logowanie.
// Zakres prac
Identyfikacja wizualna marki
Architektura informacji i makiety
Konfigurator, koszyk i projekt UI
// E-commerce
SurgHero
UI/UX DesignBranding
Sklep z trenażerami laparoskopowymi i konfiguratorem zestawów
Z kolekcji: Mixed UI
Profesjonalny sprzęt szkoleniowy online
SurgHero sprzedaje trenażery laparoskopowe dla szpitali, centrów symulacji medycznej i uczelni. Przygotowałem identyfikację marki i poprowadziłem projekt sklepu od architektury informacji i ścieżek zakupowych, przez makiety, po finalny UI. Najważniejszym elementem jest konfigurator, w którym klient kompletuje własny zestaw trenażera z dostępnych modułów. Zaprojektowałem również kategorię produktów z filtrami, rozbudowaną kartę produktu i podsumowanie zamówienia.
// Zakres prac
Identyfikacja wizualna marki
Architektura informacji i makiety
Konfigurator zestawów i projekt UI
// Portal
Pasjonaci Felg
UI/UX Design
Serwis dla miłośników felg premium
Z kolekcji: Mixed UI
Ciemna, motoryzacyjna estetyka
Pasjonaci Felg to serwis z ofertą felg premium i doradztwem w ich doborze. Prowadziłem proces od architektury informacji i ścieżek użytkownika, przez makiety, po finalny UI. Zaprojektowałem szybką wyszukiwarkę felg na stronie głównej, kartę produktu z wyborem koloru, rozmiaru i rozstawu oraz sekcję marek. Ciemna kolorystyka i duże zdjęcia aut podkreślają charakter oferty premium.
// Zakres prac
Architektura informacji i ścieżki użytkownika
Makiety i projekt UI
Wyszukiwarka i karta felgi
// Portal
PożyczajTu
UI/UX DesignBranding
Porównywarka pożyczek i kredytów z rankingiem ofert
Z kolekcji: Mixed UI
Ranking, który łatwo porównać
PożyczajTu to porównywarka pożyczek i kredytów online. Zaprojektowałem logo i identyfikację marki, a następnie poprowadziłem projekt serwisu od architektury informacji i ścieżek użytkownika, przez makiety, po finalny UI. Sercem serwisu są rankingi ofert, w których kluczowe parametry, takie jak kwota, okres spłaty i czas wypłaty, ułożyłem w powtarzalny, łatwy do porównania układ. Uzupełnieniem są treści poradnikowe i karty informacyjne pożyczkodawców.
// Zakres prac
Logo i identyfikacja wizualna
Architektura informacji i makiety
Rankingi ofert i projekt UI
// E-commerce
E-huis Netherlands
UI/UX DesignArchitektura InformacjiBranding
Sklep z płytkami i meblami na rynek holenderski
Z kolekcji: Mixed UI
Szeroki asortyment w uporządkowanym sklepie
E-huis to holenderski sklep internetowy z płytkami i meblami. Przygotowałem identyfikację marki i zaprojektowałem rozbudowaną architekturę informacji, która porządkuje szeroki asortyment. Następnie poprowadziłem projekt od ścieżek zakupowych i makiet po finalny UI. Zaprojektowałem karty produktów z wyborem wariantów, ceną podaną za metr kwadratowy i plikami do pobrania, a także koszyk i podsumowanie zamówienia.
// Zakres prac
Identyfikacja wizualna marki
Architektura informacji asortymentu
Makiety i projekt UI sklepu
// Portal
Nalewki Kresowe
UI/UX Design
Strona marki nalewek opartych na staropolskiej tradycji
Z kolekcji: Mixed UI
Tradycja przełożona na ekran
Strona marki nalewek wytwarzanych według wielowiekowych receptur. Prowadziłem proces od architektury informacji i ścieżek użytkownika, przez makiety, po finalny UI. Zaprojektowałem podstronę o historii marki, prezentację linii produktów oraz kartę nalewki z opisem i tabelą wariantów. Ciemne tło, szeryfowa typografia i ozdobne ramki nawiązują do staropolskiego charakteru produktów.
// Zakres prac
Architektura informacji i ścieżki użytkownika
Makiety i projekt UI
Prezentacja produktów i historii marki
// E-commerce
Hasmed
UI/UX Design
Sklep ze sprzętem medycznym i rehabilitacyjnym
Z kolekcji: Mixed UI
Szeroki asortyment w czytelnej strukturze
Hasmed to sklep ze sprzętem medycznym, rehabilitacyjnym i szkoleniowym, w tym z fantomami do nauki. Prowadziłem proces od architektury informacji i ścieżek zakupowych, przez makiety, po finalny UI. Zaprojektowałem stronę główną z przeglądem kategorii, listing kategorii z rozbudowanymi filtrami oraz kartę produktu z wyborem wariantów i listą elementów zestawu. Struktura sklepu pomaga szybko dotrzeć do właściwej grupy produktów.
// Zakres prac
Architektura informacji i ścieżki zakupowe
Makiety i projekt UI
Filtry, listing i karta produktu
// Portal + E-commerce
Currenda
UI/UX DesignArchitektura Informacji
Serwis dostawcy oprogramowania dla sądów i komorników
Z kolekcji: Mixed UI
Złożona oferta w przejrzystej strukturze
Currenda dostarcza oprogramowanie dla sądów, kancelarii komorniczych i instytucji publicznych. Kluczowym etapem była architektura informacji, która uporządkowała rozbudowaną ofertę programów, modułów i usług według grup odbiorców. Następnie poprowadziłem projekt od ścieżek użytkownika i makiet po finalny UI. Zaprojektowałem między innymi podstrony programów i modułów oraz moduł zamawiania produktów i usług z podziałem na pakiety.
// Zakres prac
Architektura informacji oferty
Ścieżki użytkownika i makiety
Projekt UI i zamawianie produktów
// Logofolio
Logofolio
LogotypyBranding
Projekty logotypów
Znaki dla marek z różnych branż
Wybór logotypów, które zaprojektowałem dla firm z różnych branż: finansów, prawa, zdrowia, gastronomii, nieruchomości, energetyki i rozrywki. Każdy znak powstawał z myślą o charakterze marki i jej odbiorcach, od dynamicznych sygnetów po spokojne, typograficzne logotypy. Każdy projekt pokazuję w wersji kolorowej i monochromatycznej, która sprawdza się w druku jednobarwnym i na trudniejszych tłach. Dla marek działających na kilku rynkach przygotowałem również spójne warianty dla poszczególnych krajów.
// Zakres prac
Koncepcje i projekt znaków
Wersje kolorowe i monochromatyczne
Warianty dla różnych rynków
// Ads
CreditYes
Google and Meta Ads
Kampanie reklamowe pożyczek online na rynki zagraniczne
Z kolekcji: DTP / Online
01 / 02
Spójne kreacje na różne rynki
Seria kreacji reklamowych dla pożyczek online CreditYes, przygotowana na rynek hiszpańskojęzyczny i rumuński. Dla każdego rynku zbudowałem osobny, rozpoznawalny system wizualny: zielony dla ofert w euro i pomarańczowy dla ofert w lejach. Kreacje opierają się na dużej, wyrazistej kwocie, prostych komunikatach oraz zdjęciach ludzi i banknotów. Całość powstała z myślą o kampaniach w Google Ads i Meta Ads, w tym o postach na Instagramie.
// Zakres prac
Koncepcja kreacji reklamowych
Warianty na dwa rynki
Adaptacje formatów pod kampanie
// Katalog
Symbase Poland
DTP
Katalog produktów Coatings dla dostawcy surowców chemicznych
Z kolekcji: DTP / Online
Dane techniczne w czytelnej formie
Katalog produktów z linii Coatings dla firmy Symbase, dostawcy surowców chemicznych. Zaprojektowałem okładkę z gradientem w odcieniach błękitu i różu oraz układ rozkładówek, który porządkuje opisy produktów, wykresy i rozbudowane tabele parametrów. Spójny system kolorów i typografii ułatwia poruszanie się po kolejnych grupach produktów. Całość przygotowałem do druku.
// Zakres prac
Projekt okładki i makiety katalogu
Skład tabel, wykresów i treści
Przygotowanie do druku
// Szablony social media
Storm
Meta Ads
Szablony social media dla marki rowerowej Storm
Z kolekcji: DTP / Online
Rozpoznawalny styl w każdym poście
Zestaw szablonów postów i reklam dla marki rowerów Storm. Zaprojektowałem system, który obejmuje prezentacje modeli rowerów z kluczowymi parametrami, posty konkursowe oraz promocję darmowego e-booka. Wspólny układ z wyrazistym nagłówkiem, zdjęciem i logo w dolnej części pozwala szybko tworzyć kolejne publikacje z zachowaniem spójności. Szablony powstały z myślą o kampaniach Meta Ads.
// Zakres prac
System szablonów postów
Kreacje konkursowe i produktowe
Adaptacje pod kampanie Meta Ads
// Ads
Speedland 2024
Google and Meta Ads
Kampania reklamowa festiwalu motoryzacyjnego Speedland
Z kolekcji: DTP / Online
Energia driftu w jednej stylistyce
Seria kreacji reklamowych dla festiwalu motoryzacyjnego Speedland 2024. Zaprojektowałem czarno-zieloną stylistykę z dynamicznymi, ukośnymi pasami i poszarpanymi krawędziami zdjęć, która nawiązuje do energii driftu. Na jej bazie powstały komunikaty o biletach, harmonogramie, mapie festiwalu, koncertach i atrakcjach. Dzięki jednemu systemowi wszystkie kreacje są od razu rozpoznawalne jako część kampanii.
// Zakres prac
Koncepcja wizualna kampanii
Seria kreacji informacyjnych i promocyjnych
Adaptacje pod Google i Meta Ads
// Etykiety produktowe
Czysty Dom
DTP
Etykiety linii środków czystości Czysty Dom
Z kolekcji: DTP / Online
Jedna linia, wiele kolorów
Projekt etykiet dla linii środków czystości Czysty Dom. Każdy produkt otrzymał własny kolor przewodni powiązany z zapachem, a wspólny układ z dużą nazwą produktu, ilustracją zastosowania i logo utrzymuje spójność całej serii. Dzięki temu produkty łatwo odróżnić na półce, a jednocześnie wyraźnie widać, że należą do jednej marki. Etykiety przygotowałem do druku.
// Zakres prac
Projekt systemu etykiet
Warianty kolorystyczne produktów
Przygotowanie plików do druku
// E-book + książeczka
Storm i Polska Policja dla dzieci
DTPOnline
Poradnik dla uczniów przygotowujących się do karty rowerowej
Z kolekcji: DTP / Online
Przepisy ruchu podane przystępnie
Poradnik „Karta rowerowa dla każdego” powstał we współpracy marki Storm z Policją jako materiał dla uczniów. Zaprojektowałem okładkę oraz układ stron z kolorowymi akcentami i czytelnymi ilustracjami skrzyżowań i sytuacji drogowych. Lekka, przyjazna forma pomaga dzieciom przyswoić przepisy ruchu drogowego. Publikację przygotowałem w dwóch wersjach: jako e-book do pobrania i drukowaną książeczkę.
// Zakres prac
Projekt okładki i makiety stron
Skład treści i ilustracji
Wersja do druku i e-book
// Opakowanie produktowe
BodyMove
DTPOnline
Opakowanie indywidualnych wkładek ortopedycznych z druku 3D
Z kolekcji: DTP / Online
Opakowanie, które opowiada o produkcie
Projekt pudełka na indywidualne wkładki ortopedyczne BodyMove, wykonywane w technologii druku 3D. Na froncie zestawiłem wyrazisty nagłówek z wizualizacją wkładki i geometrycznymi akcentami, które podkreślają technologiczny charakter produktu. Na opakowaniu znalazły się też ciekawostka o procesie powstawania wkładek, odnośniki do mediów społecznościowych i kod QR zachęcający do wystawienia opinii. Projekt przygotowałem do druku.
// Zakres prac
Projekt graficzny opakowania
Skład treści i elementów informacyjnych
Przygotowanie do druku
// Katalog
Barabaś
DTP
Katalog produktów producenta kostki brukowej Barabaś
Z kolekcji: DTP / Online
Produkt pokazany w realnym otoczeniu
Katalog produktów dla Barabaś, producenta kostki brukowej działającego od 1993 roku. Zaprojektowałem okładkę i układ stron, w którym duże zdjęcia realizacji sąsiadują z czytelnymi kartami produktów: rysunkami formatów, specyfikacją techniczną i cennikiem według kolorów. Pomarańczowe akcenty z identyfikacji marki porządkują całość i prowadzą przez kolejne linie produktów. Katalog przygotowałem do druku.
// Zakres prac
Projekt okładki i makiety katalogu
Skład specyfikacji i cenników
Przygotowanie do druku
// Opakowania produktowe
Meta Pharmaceutical S.A
DTP
Opakowania linii suplementów diety Meta Pharmaceutical
Z kolekcji: DTP / Online
Spójna seria w pastelowych kolorach
Projekt opakowań dla linii suplementów Meta Pharmaceutical: etykiet na słoiki i kartonowych pudełek. Każdy produkt, od maślanu sodu przez kurkumę po kolagen, otrzymał własny pastelowy kolor, a wspólny układ z dużą nazwą, krótkim hasłem opisującym działanie i ziarnistymi akcentami graficznymi spaja całą serię. Projekt uwzględnia zarówno ekspozycję na półce, jak i czytelność informacji na mniejszej powierzchni etykiety. Pliki przygotowałem do druku.
// Zakres prac
Projekt etykiet i pudełek
System kolorystyczny serii
Przygotowanie plików do druku
