[{"data":1,"prerenderedAt":1383},["ShallowReactive",2],{"menu-project-count":3,"work-pl":4},11,[5,279,355,657,736,809,1062,1138,1190,1262,1311],{"id":6,"title":7,"caseStudy":8,"category":249,"client":250,"cover":251,"coverTall":255,"demo":256,"disciplines":257,"extension":262,"filters":263,"intro":267,"live":255,"meta":268,"order":269,"published":121,"role":270,"scope":271,"shortPage":255,"slug":272,"stem":273,"summary":274,"timeline":275,"type":276,"year":277,"__hash__":278},"workPl\u002Fwork-pl\u002Faporia-pro.yml","Aporia Pro",{"phase":9,"lead":10,"whatIDid":14,"problem":19,"problemDetail":20,"constraints":21,"decisions":27,"gallery":103,"scale":153,"system":170,"result":240},"UX · UI · Design system · Wdrożenie",[11,12,13],"Aporia Pro to wewnętrzne narzędzie do pracy dla małego zespołu. Zadania, projekty klientów i plan tygodnia są w jednym miejscu, więc nikt nie musi ręcznie pilnować, żeby się ze sobą zgadzały.","Zrobiłem w nim wszystko: koncepcję, UX i UI oraz kod. Była to też moja praca inżynierska, a wiele rzeczy zbudowałem w nim po to, żeby się uczyć. Najlepiej widać to na kolorze, o którym piszę niżej.","Projekt jest prywatny i nikt spoza zespołu się do niego nie zaloguje. Dlatego dane na ekranach są zmyślone, od ludzi i klientów po liczby, a wielu funkcji narzędzia w ogóle tu nie pokazuję.",[15,16,17,18],"Koncepcja i UX: zadania, projekty klientów, sesje pracy","UI: wszystkie ekrany, na komputerze i na telefonie","Design system: zmienne, komponenty, generator koloru","Wdrożenie: Nuxt, Tailwind i Supabase","Jedno zadanie pojawia się w tabeli, na tablicy i w kalendarzu tygodnia. Musi pozostać jednym zadaniem i dać się zmienić wszędzie, gdzie się na nie trafi.","Zadanie ma status, priorytet, osoby, termin, etykiety, podzadania, checklistę i dyskusję. Może należeć do projektu klienta albo istnieć osobno, być wspólne albo prywatne, może też być przypięte do bloku czasu. Każdy widok pokazuje inny wycinek tego samego rekordu i ma na to inną ilość miejsca.",[22,23,24,25,26],"Trzy widoki tych samych zadań: tabela, tablica, kalendarz","Zadania w projektach klientów i poza nimi","Praca zespołu i praca prywatna obok siebie","Te same ekrany na telefonie","Każdy workspace ma jeden kolor marki, a pozostałe kolory zachowują swoje znaczenie",[28,41,57,72,87],{"title":29,"context":30,"decision":31,"tradeoff":32,"figures":33},"Jeden kolor przemalowuje całe narzędzie","Każdy workspace ma jeden kolor marki. Chciałem zrozumieć, jak działają skale kolorów, więc nie sięgnąłem po gotową paletę. Tę część zbudowałem celowo, jako eksperyment.","Generator napisałem ręcznie. Wchodzi jeden hex, wychodzi dziesięć odcieni: barwa zostaje, jasność schodzi po stałej krzywej z 97% do 15%, a nasycenie jest przygaszone na obu końcach. Pięć charakterów, od żywego po prawie szary, stroi ten sam kolor. Zabarwienie panelu bocznego, aktywna pozycja, przyciski, zakładki, liczniki i poświata w tle korzystają z tych dziesięciu wartości, więc niczego nie trzeba przerysowywać.","Kolor marki nie może niczego znaczyć. Status, priorytet, przekroczone terminy, błędy i fokus mają własne, stałe kolory, więc bordowy workspace nie sprawi, że zadanie po terminie będzie wyglądać, jakby wszystko było w porządku.",{"ratio":34,"items":35},"4 \u002F 3",[36],{"src":37,"alt":38,"caption":39,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd1-workspaces.webp","Ta sama tablica zadań w czterech workspace'ach: indygo, szmaragdowym, bordowym i pomarańczowym","Ten sam ekran w czterech workspace'ach. Zmienił się tylko kolor marki.","contain",{"title":42,"context":43,"decision":44,"tradeoff":45,"figures":46},"Zadanie powstaje w jednej linijce, a edytuje się je w miejscu","Zadanie ma około dziesięciu pól, ale zaczyna się od kilku słów.","Do dodania zadania wystarcza jedna linijka: w stopce grupy w tabeli, na górze kolumny na tablicy albo w pełnym formularzu. Pole zostaje otwarte, więc listę można wpisać jednym ciągiem. Wszystko inne ustawia się tam, gdzie jest pokazane. Tytuł zmienia się dwukrotnym kliknięciem, a status, osoby, termin i priorytet w małych okienkach wyboru w wierszu albo na karcie. Pola w widoku zadania zapisują się same.","Nie ma przycisku zapisu, więc nie ma też czego anulować. Pasek zapisu został tylko w ustawieniach projektu.",{"ratio":47,"items":48},"6 \u002F 5",[49,53],{"src":50,"alt":51,"caption":52,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd2-add.webp","Jednolinijkowe pole nowego zadania nad kartą zadania","Nowe zadanie to jedna linijka. Enter zapisuje, Escape anuluje.",{"src":54,"alt":55,"caption":56,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd2-edit.webp","Karta zadania z otwartym menu, w którym są trzy statusy i trzy akcje","Status zmienia się w menu samej karty.",{"title":58,"context":59,"decision":60,"tradeoff":61,"figures":62},"Zamknięcie pyta raz i da się je cofnąć","Zadanie zamyka się jednym kliknięciem w kółko obok tytułu. O jedno kliknięcie łatwo też przez pomyłkę.","Kliknięcie otwiera krótkie pytanie dokładnie w tym samym miejscu, w zielonym kolorze tej akcji. Po zamknięciu na osiem sekund zostaje pasek z przyciskiem Cofnij. Później zadanie nadal można otworzyć ponownie jednym kliknięciem, tym razem bez pytania.","Każde zamknięcie to o jedno kliknięcie więcej. Usuwanie, którego cofnąć się nie da, ma własne potwierdzenie.",{"ratio":47,"items":63},[64,68],{"src":65,"alt":66,"caption":67,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd3-close.webp","Karta zadania z małym zielonym pytaniem, czy zamknąć zadanie","Pytanie pojawia się przy kółku, które zostało kliknięte.",{"src":69,"alt":70,"caption":71,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd3-undo.webp","Pasek cofania nad zamkniętą, wyszarzoną kartą zadania","Pasek cofania zostaje na osiem sekund.",{"title":73,"context":74,"decision":75,"tradeoff":76,"figures":77},"Pilne może być tylko jedno zadanie","Priorytet ma cztery poziomy. Najwyższy z nich, Pilne, jest przeznaczony dla jednego zadania naraz.","Pilne to fuksja z koroną, nigdy czerwień: czerwień zostaje przy wysokim priorytecie i przekroczonych terminach. Zanim zadanie dostanie koronę, narzędzie pyta, przy jej zdejmowaniu pyta również, a drugiego pilnego zadania nie przyjmie, dopóki pierwsze nie zostanie zamknięte.","Kiedy dwie rzeczy wydają się pilne, ktoś musi wybrać jedną. Narzędzie nie pozwala odkładać tego wyboru.",{"ratio":47,"items":78},[79,83],{"src":80,"alt":81,"caption":82,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd4-urgent.webp","Karta pilnego zadania z koroną i pytaniem w kolorze fuksji, czy koronować zadanie","Koronowanie zaczyna się od pytania.",{"src":84,"alt":85,"caption":86,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd4-fixed.webp","Znaczniki statusów, oznaczenia priorytetów, przekroczony termin, przełącznik i pole z fokusem","Kolory, które coś znaczą, są te same w każdym workspace'ie.",{"title":88,"context":89,"decision":90,"tradeoff":91,"figures":92},"Sesje: kiedy się pracuje, a nie tylko na kiedy ma być gotowe","Termin mówi, na kiedy coś ma być gotowe. Nie mówi, kiedy ktoś do tego usiądzie.","Sesja to blok czasu w kalendarzu, zwykle powtarzany co tydzień. Rysuje się ją, przeciągając po wolnym czasie, ze skokiem co 15 minut. Zadania i pojedyncze podzadania przypina się do niej razem z szacowanym czasem, a wskaźnik pokazuje, ile bloku jest już wykorzystane. W kalendarzu blok wymienia to, co do niego przypięto, a czas, który jeszcze został, oznacza paskiem w przerywanej ramce.","Sesje mogą na siebie nachodzić. Formularz nazywa konflikt, a przycisk zmienia napis, ale nic nie jest zablokowane.",{"ratio":93,"items":94},"16 \u002F 21",[95,99],{"src":96,"alt":97,"caption":98,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd5-plan.webp","Dzień w kalendarzu z rysowanym właśnie blokiem oraz blok sesji z dwoma przypiętymi zadaniami i 45 wolnymi minutami","Sesję rysuje się przeciągnięciem. Przypięta praca mieści się w bloku, a pasek w przerywanej ramce to czas, który jeszcze został.",{"src":100,"alt":101,"caption":102,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd5-session.webp","Okno sesji z przypiętymi podzadaniami, wskaźnikiem wykorzystania, długością, kolorem i dniami, w które się powtarza","Sesja: co jest przypięte, ile jej wykorzystano, kiedy się powtarza.",[104,112,120,127,133,143],{"type":105,"ratio":106,"items":107},"figures","11 \u002F 8",[108],{"src":109,"alt":110,"caption":111,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fkanban.webp","Tablica zadań z trzema kolumnami: do zrobienia, w trakcie i zrobione","Zadania jako tablica. Karta pokazuje tylko to, co dane zadanie ma.",{"type":113,"title":114,"body":115,"ratio":116,"media":117},"detail","Tabela","Te same zadania pogrupowane według statusu. Podzadania są pod swoim zadaniem, a każdą komórkę edytuje się w miejscu: tytuł dwukrotnym kliknięciem, resztę w małym okienku wyboru.","10 \u002F 9",{"src":118,"alt":119,"fit":40},"\u002Fwork\u002Faporia-pro\u002Ftable.webp","Tabela zadań z grupami w trakcie i do zrobienia oraz podzadaniami pod pierwszym zadaniem",{"type":113,"reverse":121,"title":122,"body":123,"ratio":116,"media":124},true,"Zadanie","Po lewej opis, podzadania, checklista i dyskusja, po prawej pola. Zadanie otwiera się nad listą, więc po zamknięciu wraca się tam, gdzie się było.",{"src":125,"alt":126,"fit":40},"\u002Fwork\u002Faporia-pro\u002Ftask.webp","Zadanie otwarte nad listą, z opisem, podzadaniami, checklistą, komentarzami i kolumną pól",{"type":105,"ratio":106,"items":128},[129],{"src":130,"alt":131,"caption":132,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fcalendar.webp","Tydzień w kalendarzu z powtarzającymi się sesjami, przypiętymi do nich zadaniami i spotkaniami","Tydzień. Sesje się powtarzają, a każda pokazuje przypięte do niej zadania i czas, który jeszcze został.",{"type":105,"ratio":34,"items":134},[135,139],{"src":136,"alt":137,"caption":138,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fprojects.webp","Lista projektów klientów w grupach: aktywne, wstrzymane i zakończone","Projekty klientów pogrupowane według statusu.",{"src":140,"alt":141,"caption":142,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fmobile.webp","Dwa ekrany telefonu: tablica zadań z jedną kolumną i menu otwarte jako wysuwany panel","Na telefonie: jedna kolumna naraz, menu jako wysuwany panel.",{"type":105,"ratio":106,"items":144},[145,149],{"src":146,"alt":147,"caption":148,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fproject-discussion.webp","Strona dyskusji w projekcie klienta z czterema komentarzami","W projekcie: dyskusja.",{"src":150,"alt":151,"caption":152,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fproject-files.webp","Strona plików w projekcie klienta z sześcioma plikami i wskaźnikiem zajętego miejsca","W projekcie: pliki.",{"label":154,"stats":155,"media":165,"ratio":169},"Cały plik",[156,159,162],{"value":157,"label":158},"21","ekranów",{"value":160,"label":161},"80","komponentów",{"value":163,"label":164},"139","ikon",{"src":166,"alt":167,"caption":168},"\u002Fwork\u002Faporia-pro\u002Fscale.webp","Dwanaście ekranów desktopowych z pliku Figmy w czterech równych kolumnach: zadania, sesje, projekt klienta oraz stany pusty, ładowania i błędu","Dwanaście z 21 ekranów w pliku Figmy, wszystkie ze zmyślonymi danymi. Prywatne części narzędzia nie są udokumentowane.","3758 \u002F 1879",{"typeface":171,"weights":172,"statement":173,"collections":174,"modes":196,"facts":222,"components":227,"figures":233},"Geist","Regular \u002F Medium \u002F SemiBold \u002F Bold","274 zmienne w sześciu kolekcjach. Trzydzieści z nich to kolor marki: wystarczy zmienić jeden hex, a całe narzędzie pójdzie za nim.",[175,179,183,187,190,193],{"name":176,"count":177,"modes":178},"Primitives",149,"Jedna wartość",{"name":180,"count":181,"modes":182},"Brand",30,"Pięć charakterów, trzy przykładowe kolory",{"name":184,"count":185,"modes":186},"Color",57,"Light \u002F Dark",{"name":188,"count":189,"modes":178},"Spacing",14,{"name":191,"count":192,"modes":178},"Radius",5,{"name":194,"count":195,"modes":178},"Typography",19,{"from":197,"to":198,"rows":199},"Indigo","Emerald",[200,204,208,212,216,219],{"label":201,"from":202,"to":203},"Odcień 50","#F5F5FA","#F3FBF9",{"label":205,"from":206,"to":207},"Odcień 500","#4136C9","#08F7AD",{"label":209,"from":210,"to":211},"Odcień 700","#2D2682","#099F71",{"label":213,"from":214,"to":215},"Odcień 900","#191736","#0D3F30",{"label":217,"from":218,"to":218},"Status i priorytet","Stałe",{"label":220,"from":221,"to":221},"Obrys fokusu","Stały",[223,224,225,226],"80 komponentów","139 ikon","45 stylów tekstu","18 stylów efektów",[228,229,230,231,232],"Przyciski, etykiety i pola formularzy","Zakładki, menu i nakładki","Wyszukiwanie i powiadomienia","Powłoka aplikacji","Wzorce zadań i projektów",{"ratio":234,"items":235},"25 \u002F 13",[236],{"src":237,"alt":238,"caption":239,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fsys-colour.webp","Pole koloru, dziesięć powstałych z niego odcieni z jasnością i nasyceniem oraz ta sama skala w pięciu charakterach obok przykładowych kontrolek","Jeden kolor na wejściu, dziesięć odcieni na wyjściu, w pięciu charakterach. Jasność i nasycenie każdego stopnia wyznacza krzywa.",{"statement":241,"delivered":242},"Jedno narzędzie, zaprojektowane i zbudowane przez jedną osobę: zadania w trzech widokach, projekty klientów, zaplanowany tydzień i interfejs, który bierze kolor z jednego pola.",[243,244,245,246,247,248],"Zadania jako tabela, tablica i kalendarz, z podzadaniami, checklistami i dyskusją","Projekty klientów z własną dyskusją, zadaniami, plikami i ustawieniami","Sesje pracy: tydzień zaplanowany w blokach czasu","Generator koloru: jeden hex, dziesięć odcieni, pięć charakterów","Design system w Figmie: 274 zmienne, 45 stylów tekstu, 80 komponentów","Dokumentacja w Figmie: 21 ekranów i 3 schematy","Narzędzie wewnętrzne","Produkt wewnętrzny",{"src":252,"alt":253,"tone":254},"\u002Fwork\u002Faporia-pro\u002Fcover.webp","Tablica zadań w narzędziu Aporia Pro, w oknie przeglądarki i na telefonie, na tle w kolorze indygo","deep",null,false,[258,259,260,261],"Product design","UI design","Design system","Front-end","yml",[264,265,266],"product","ui","development","Narzędzie do pracy dla małego zespołu: zadania, projekty klientów i plan tygodnia w jednym miejscu. Zaprojektowałem je i zbudowałem sam, była to też moja praca inżynierska. Projekt jest prywatny, dlatego dane na ekranach są zmyślone.",{},2,"Projektowanie UX\u002FUI, koncepcja i wdrożenie","Zadania w trzech widokach \u002F Projekty klientów \u002F Sesje pracy \u002F Design system \u002F Kolor workspace'u","aporia-pro","work-pl\u002Faporia-pro","Narzędzie wewnętrzne: zadania, projekty klientów i plan tygodnia w interfejsie, który bierze kolor z jednego pola.","Marzec do sierpnia 2026","case-study","2026","rKyTXuK-8dBS838Q-GKvkUNDFm5A63rF7U5v6akWJn4",{"id":280,"title":281,"caseStudy":255,"category":282,"client":281,"cover":283,"coverTall":255,"demo":256,"disciplines":287,"extension":262,"filters":289,"intro":291,"live":292,"meta":293,"order":294,"published":121,"role":295,"scope":296,"shortPage":297,"slug":350,"stem":351,"summary":352,"timeline":255,"type":353,"year":277,"__hash__":354},"workPl\u002Fwork-pl\u002Fbeczka.yml","Beczka","Strona internetowa",{"src":284,"alt":285,"caption":286,"tone":254},"\u002Fwork\u002Fbeczka\u002Fcover.webp","Strona główna Beczki w oknie przeglądarki, z plakatem koncertu, na którym muzycy stoją w kolorowym świetle sceny, i przyciskiem do biletów, oraz menu na telefonie, na ciemnoszarym tle","Strona główna, a na telefonie menu.",[288,259],"Strona WWW",[290,265],"web","Beczka to restauracja i pub w Elblągu, które są też sceną koncertową. Zaprojektowałem jej stronę internetową: stronę główną, która zaczyna od najbliższych koncertów, podstrony koncertów, które sprzedają bilety od ręki, menu do przeglądania i przeszukiwania oraz podstronę zamówień na wynos.","https:\u002F\u002Fbeczkaelblag.pl",{},6,"Projektowanie UI","Koncerty i bilety \u002F Menu \u002F Zamówienia online",{"notes":298,"pair":299,"details":308,"full":346},"Beczka to dwa miejsca w jednym: kuchnia, do której się wraca, i scena, na którą przychodzi się na jeden wieczór. Strona daje każdemu z nich własne tempo. Koncert dostaje duże zdjęcie, datę i jeden przycisk, bo sprzedaje się przez kilka tygodni, a potem znika. Restauracja dostaje menu złożone jak drukowana karta, bo to po nie ludzie otwierają stronę w każdy inny dzień.",{"a":300,"b":303,"caption":307},{"src":301,"alt":302,"fit":40},"\u002Fwork\u002Fbeczka\u002Fconcerts.webp","Lista nadchodzących koncertów w oknie przeglądarki, trzy karty z plakatem, datą, krótkim opisem i linkiem do biletów",{"src":304,"alt":305,"content":306,"fit":40},"\u002Fwork\u002Fbeczka\u002Fphone.webp","Nawigacja na telefonie z sześcioma linkami, numerem telefonu do rezerwacji, linkiem do logowania i trzema linkami do mediów społecznościowych","phone","Po lewej: nadchodzące koncerty. Po prawej: nawigacja na telefonie.",[309,327,336],{"title":310,"body":311,"figures":312},"Trzy ekrany od plakatu do biletu","Kupno biletu zajmuje trzy ekrany. Strona główna otwiera się najbliższymi koncertami, a każdy ma przycisk do biletów. Na stronie koncertu cena i ten przycisk zostają na dole ekranu telefonu, kiedy czytasz o zespole. Zamówienie to jedna strona: bilet, liczba sztuk, suma i jeden przycisk do zapłaty.",{"ratio":313,"items":314},"2 \u002F 3",[315,319,323],{"src":316,"alt":317,"caption":318,"content":306,"fit":40},"\u002Fwork\u002Fbeczka\u002Fpath-1.webp","Strona główna na telefonie, plakat koncertu z nazwą zespołu i przyciskiem „Kup bilety”","Strona główna otwiera się najbliższym koncertem.",{"src":320,"alt":321,"caption":322,"content":306,"fit":40},"\u002Fwork\u002Fbeczka\u002Fpath-2.webp","Strona koncertu na telefonie z datą, nazwą zespołu i opisem oraz paskiem na dole z ceną i przyciskiem kupna biletu","Cena i przycisk zostają na ekranie.",{"src":324,"alt":325,"caption":326,"content":306,"fit":40},"\u002Fwork\u002Fbeczka\u002Fpath-3.webp","Zamówienie na telefonie z koncertem, liczbą biletów, sumą, dwiema zgodami i przyciskiem zapłaty","Zamówienie: ile, suma, zapłać.",{"title":328,"body":329,"figures":330},"Menu, które czyta się jak kartę","Kuchnia i bar mają razem ponad dwieście pozycji, więc menu jest osobną stroną. Dzieli się na cztery części z licznikami, a każda ma listę sekcji i pole wyszukiwania. Każdy wiersz podaje danie, gramaturę i cenę, połączone cienką linią, tak jak w drukowanej karcie.",{"items":331},[332],{"src":333,"alt":334,"caption":335,"fit":40},"\u002Fwork\u002Fbeczka\u002Fmenu.webp","Menu w oknie przeglądarki z czterema częściami i ich licznikami, listą sekcji po lewej i daniami z cenami w dwóch kolumnach, a obok lista czterech części na telefonie","Menu na komputerze i jego cztery części na telefonie.",{"label":337,"title":338,"body":339,"figures":340},"Komponenty","Wypełniony przycisk, jedno zadanie","Każda podstrona jest zbudowana z tych samych kilku elementów. Wypełniony przycisk jest zarezerwowany dla jednego zadania, czyli kroku, który prowadzi dalej: bilet, menu, zamówienie, płatność. Lżejszą pracę wykonuje link tekstowy w tym samym kolorze. Karty, wiersze list i zasady koncertu z rysowanymi ikonami powtarzają się ze strony na stronę.",{"items":341},[342],{"src":343,"alt":344,"caption":345,"fit":40},"\u002Fwork\u002Fbeczka\u002Fcomponents.webp","Plansza z elementami strony, na której są karta koncertu, podsumowanie zamówienia z licznikiem biletów i przyciskiem zapłaty, wiersze nawigacji, cztery przyciski, dwa wiersze menu i trzy zasady koncertu z ikonami","Karta koncertu, podsumowanie zamówienia, przyciski, wiersze menu i zasady koncertu.",{"src":347,"alt":348,"caption":349,"fit":40},"\u002Fwork\u002Fbeczka\u002Forder.webp","Strona zamówień online w oknie przeglądarki, ze zdjęciem dania i kartą z przyciskiem zamówienia i numerem telefonu, a obok ta sama strona na telefonie","Zamówienia na wynos: jedno zdjęcie, jeden przycisk, jeden numer telefonu.","beczka","work-pl\u002Fbeczka","Restauracja, pub i scena koncertowa w Elblągu: strona, która sprzedaje bilety i składa menu z ponad dwustu pozycji.","short","7nPvCx4r4N2zVdzYmhWRD4jQALuDmRDfUOnZMYmmBaw",{"id":356,"title":357,"caseStudy":358,"category":638,"client":639,"cover":640,"coverTall":255,"demo":256,"disciplines":643,"extension":262,"filters":645,"intro":646,"live":647,"meta":648,"order":649,"published":121,"role":650,"scope":651,"shortPage":255,"slug":652,"stem":653,"summary":654,"timeline":655,"type":276,"year":277,"__hash__":656},"workPl\u002Fwork-pl\u002Fdrukksiazek24.yml","DrukKsiążek24",{"phase":359,"lead":360,"whatIDid":364,"workedWith":369,"problem":371,"problemDetail":372,"constraints":373,"approach":379,"approachFigures":392,"decisions":411,"gallery":493,"scale":545,"system":559,"result":629},"UX · UI · Design system",[361,362,363],"Mazowieckie Centrum Poligrafii to drukarnia cyfrowa z Marek pod Warszawą. DrukKsiążek24 to miejsce, w którym sprzedaje druk książek online: od 10 egzemplarzy, w sześciu oprawach, z ceną na ekranie, zanim ktokolwiek porozmawia z handlowcem.","Stary sklep działał na gotowym szablonie. Klient chciał takiego, który stanie obok największych drukarni internetowych w Polsce i wprowadzi firmę na rynki zagraniczne.","Zadaniem nie był więc nowy wygląd sklepu, tylko cała ścieżka zamówienia: wybór książki, płatność, przesłanie plików, produkcja i dostawa oraz panel, w którym drukarnia to wszystko obsługuje. W liczbach: 31 ekranów sklepu, 48 ekranów panelu, 12 e-maili i trzy języki.",[365,366,367,368],"UX: mapa strony, proces sprzedaży i statusy zamówienia","UI: sklep, konfigurator, checkout i konto klienta","Panel administracyjny: zamówienia, wyceny, cennik i treści","Design system: zmienne, style i komponenty w dwóch trybach",[370],"Programiści, którzy zbudowali sklep. Tego projektu nie kodowałem.","Druk książki ma dziesiątki parametrów. Klient spotyka je raz, drukarnia pracuje z nimi cały dzień.","Papier, druk, oprawa i folia ograniczają się nawzajem, a każde z nich zmienia cenę. Pliki przychodzą po zamówieniu i mogą zostać odrzucone. Termin zależy od dnia, w którym pliki zostaną przyjęte. Stary kalkulator wkładał to wszystko do jednego długiego formularza, a rozgryzienie tego zostawiał klientowi.",[374,375,376,377,378],"Sześć opraw, każda z własnym zakresem stron i opcjami","Cena zależy od każdego parametru, nakładu i terminu wysyłki","Pliki przychodzą po płatności i mogą wymagać poprawek","Trzy rynki z własnym językiem, walutą i zasadami podatkowymi","Te same komponenty muszą służyć klientowi i pracownikom",[380,383,386,389],{"title":381,"text":382},"Struktura","Mapa strony sklepu, konta klienta, panelu administracyjnego i stron z treściami.",{"title":384,"text":385},"Ścieżka","Proces sprzedaży od początku do końca i każdy status, jaki może mieć zamówienie.",{"title":387,"text":388},"System","Kolory, typografia, odstępy i komponenty jako zmienne i style w Figmie.",{"title":390,"text":391},"Ekrany","Sklep, konfigurator, checkout, konto i panel administracyjny.",[393,400],{"ratio":394,"items":395},"253 \u002F 163",[396],{"src":397,"alt":398,"caption":399},"\u002Fwork\u002Fdrukksiazek24\u002Fsales.webp","Schemat procesu sprzedaży w czterech torach, od znalezienia sklepu do odbioru książki","Proces sprzedaży: co robi klient, na którym jest ekranie, co robią system i drukarnia.",{"ratio":401,"items":402},"2550 \u002F 1180",[403,407],{"src":404,"alt":405,"caption":406},"\u002Fwork\u002Fdrukksiazek24\u002Fsitemap.webp","Mapa strony sklepu z sześcioma grupami stron","Mapa strony i adresy podstron.",{"src":408,"alt":409,"caption":410},"\u002Fwork\u002Fdrukksiazek24\u002Flifecycle.webp","Schemat statusów zamówienia i osi, którą widzi klient","Statusy zamówienia, od płatności do doręczenia.",[412,428,443,458,473],{"title":413,"context":414,"decision":415,"tradeoff":416,"figures":417},"Cena nigdy nie znika z ekranu","W druku cena za sztukę mocno spada wraz z nakładem, a zmienia ją prawie każdy wybór. Stary kalkulator pokazywał sumę w trzeciej kolumnie, na końcu długiego formularza.","Nakład i termin wysyłki stały się pierwszym krokiem i trafiły do panelu, który zostaje obok formularza. Panel pokazuje siedem nakładów z ceną netto, brutto i za sztukę oraz trzy terminy wysyłki podane jako konkretne daty. Pasek na dole trzyma sumę i przycisk koszyka na widoku. Gdy książki nie da się wycenić, w miejscu ceny widać powód i można poprosić o wycenę.","Na telefonie pasek mieści sumy i jeden przycisk. Rozbicie kosztów przenosi się do panelu ze szczegółami.",{"ratio":418,"items":419},"5 \u002F 4",[420,424],{"src":421,"alt":422,"caption":423,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd1-before.webp","Stary kalkulator z trzema kolumnami: parametry, nakład i podsumowanie zamówienia","Przed: parametry, nakład i podsumowanie w trzech kolumnach.",{"src":425,"alt":426,"caption":427,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd1-after.webp","Nowy konfigurator z formularzem po lewej, tabelą cen po prawej i paskiem ceny na dole","Po: formularz po lewej, ceny po prawej, suma w pasku.",{"title":429,"context":430,"decision":431,"tradeoff":432,"figures":433},"Pojęcia drukarskie wyjaśnione przy samym wyborze","Autor, który drukuje pierwszy raz, nie wie, co to 4+0, PUR ani spad. Stary formularz podawał je w gołych listach rozwijanych.","Opcje, które da się zobaczyć, są pokazane na zdjęciach. Pola i opcje mają podpowiedź: krótki tekst, czasem rysunek oraz odnośnik do właściwego rozdziału poradnika. Opcja, która nie pasuje do konfigurowanej książki, zostaje widoczna, ale wyłączona, z powodem pod spodem. Przy błędnej liczbie stron jest przycisk, który poprawia ją jednym kliknięciem. To, co wynika z innych wyborów, na przykład szerokość grzbietu, jest wyliczane, klient tego nie podaje.","Na każdy język przypada 105 podpowiedzi, które trzeba napisać i aktualizować, dlatego drukarnia edytuje je w panelu.",{"ratio":418,"items":434},[435,439],{"src":436,"alt":437,"caption":438,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd2-before.webp","Kolumna list rozwijanych ze starego formularza, podpisanych pojęciami drukarskimi","Przed: listy rozwijane z pojęciami drukarskimi.",{"src":440,"alt":441,"caption":442,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd2-after.webp","Krok drugi nowego konfiguratora z opcjami druku pokazanymi jako kafelki ze zdjęciami","Po: krok 2 z 4, opcje druku jako zdjęcia z wyjaśnieniem prostym językiem.",{"title":444,"context":445,"decision":446,"tradeoff":447,"figures":448},"Najpierw zamówienie, potem pliki i jasno, od kiedy biegnie termin","Zamówienie druku nie kończy się na płatności. Pliki muszą jeszcze dotrzeć i przejść weryfikację, a termin biegnie od tego dnia.","Checkout działa bez konta. Po płatności klient wgrywa pliki do opisanych pól: na środek, okładkę i pozostałe. Każde pole pokazuje swój stan: brak, wysyłanie, w weryfikacji, przyjęty, odrzucony. Odrzucony plik wraca z powodem, który wpisała osoba sprawdzająca. Jedno zdanie, „Termin liczymy od akceptacji plików”, wraca na każdym etapie, od konfiguratora po śledzenie. Każde zamówienie można śledzić po numerze i adresie e-mail.","Płatność przed sprawdzeniem plików wymaga zaufania. Dlatego do czasu akceptacji plików klient może anulować zamówienie i odzyskać pieniądze, a checkout o tym informuje.",{"ratio":418,"items":449},[450,454],{"src":451,"alt":452,"caption":453,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd3-files.webp","Trzy stany pola pliku: puste, w trakcie wysyłania i w weryfikacji","Pole pliku: brak, wysyłanie, w weryfikacji.",{"src":455,"alt":456,"caption":457,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd3-timeline.webp","Oś zamówienia z sześcioma etapami, od złożenia zamówienia do doręczenia","Oś zamówienia tak, jak widzi ją klient.",{"title":459,"context":460,"decision":461,"tradeoff":462,"figures":463},"Jeden system, dwie skórki: sklep i panel","Klient widzi jedno pole naraz i przychodzi raz. Pracownicy przez cały dzień patrzą na wiersze zamówień, wyszukiwarkę i trzy przyciski.","Panel korzysta z tych samych komponentów co sklep, w drugim trybie: mniejsze kontrolki, ostre rogi, obrysy zamiast cieni, neutralne szarości, bez animacji hover. W tabelach status to kropka i słowo, bo kolumna wypełnionych plakietek zamieniała się w ścianę koloru. Zamówienia przechodzą dalej same, gdy wpłynie płatność albo plik. Pracownikom zostają dwa ręczne kroki, a ręczna zmiana statusu i przycisk anulowania celowo nie rzucają się w oczy.","Każdy komponent musi działać w obu trybach, dlatego zanim trafi na ekran, jest sprawdzany w jednym i w drugim.",{"ratio":418,"items":464},[465,469],{"src":466,"alt":467,"caption":468,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd4-badges.webp","Plakietki statusu zamówienia w trzech formach: wypełniona z ikoną, stonowana oraz kropka ze słowem","Jeden status, trzy formy: z ikoną, stonowana oraz kropka ze słowem do tabel.",{"src":470,"alt":471,"caption":472,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fpanel-orders.webp","Lista zamówień w panelu administracyjnym z kropką i słowem przy każdym statusie","Zamówienia w panelu: ostre rogi, obrysy, status jako kropka i słowo.",{"title":474,"context":475,"decision":476,"tradeoff":477,"figures":478},"Trzy rynki, jeden sklep","Klient chciał sprzedawać w Niemczech i we Francji. Każdy rynek ma własny język, walutę, stawki podatku i zasady prezentowania cen.","Jeden sklep, rozpoznawany po adresie. Polski tekst jest domyślny, a każdy sklep podmienia tylko to, co się różni. W sklepie niemieckim i francuskim na pierwszym miejscu stoi cena brutto, pole numeru podatkowego nazywa się tak, jak w kraju kupującego, a adresy stron są przetłumaczone. Cennik jest przeliczany z polskiego po kursie, a panel pokazuje, w którym sklepie jest on aktualny.","Brakujące tłumaczenie pokazuje się jako polskie zdanie. To celowe: widoczna luka doczeka się poprawki, cichy fallback już nie.",{"ratio":479,"items":480},"5 \u002F 6",[481,485,489],{"src":482,"alt":483,"caption":484,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd5-pl.webp","Tabela nakładów w polskim sklepie z cenami netto w złotych","Polska: na pierwszym miejscu cena netto, w złotych.",{"src":486,"alt":487,"caption":488,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd5-de.webp","Ta sama tabela w niemieckim sklepie z cenami brutto w euro","Niemcy: na pierwszym miejscu cena brutto, w euro.",{"src":490,"alt":491,"caption":492,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd5-fr.webp","Ta sama tabela we francuskim sklepie","Francja: ten sam panel po francusku.",[494,508,514,520,530],{"type":105,"ratio":34,"items":495},[496,500,504],{"src":497,"alt":498,"caption":499},"\u002Fwork\u002Fdrukksiazek24\u002Fhome.webp","Strona główna sklepu ze sliderem na górze i początkiem sekcji opraw","Strona główna.",{"src":501,"alt":502,"caption":503},"\u002Fwork\u002Fdrukksiazek24\u002Fbindings.webp","Sześć kart opraw, każda ze zdjęciem, zakresem stron i najniższą ceną","Sześć opraw, każda z zakresem stron i najniższą ceną.",{"src":505,"alt":506,"caption":507},"\u002Fwork\u002Fdrukksiazek24\u002Fpresets.webp","Karuzela gotowych zestawów, z kartą powieści na pierwszym planie","Drugi sposób wejścia: od rodzaju książki.",{"type":113,"title":509,"body":510,"media":511},"Tabela nakładów","Siedem nakładów z ceną netto, brutto i za sztukę, dzięki czemu klient widzi, jak spada cena jednostkowa. Nad tabelą są trzy terminy wysyłki, oznaczone jako „Najszybciej”, „Zalecana” i „Najtaniej”.",{"src":512,"alt":513,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fvolume.webp","Panel „Wysyłka i nakład” z trzema terminami wysyłki i tabelą siedmiu nakładów",{"type":113,"reverse":121,"title":515,"body":516,"media":517},"Podpowiedź","Znak zapytania obok pola otwiera krótkie wyjaśnienie, rysunek i odnośnik do poradnika. Na telefonie podpowiedź otwiera się jako panel od dołu, bo dymek z odnośnikiem nie sprawdza się pod palcem.",{"src":518,"alt":519,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fhint.webp","Dymek podpowiedzi, który wyjaśnia format gotowej książki rysunkiem i listą wymiarów",{"type":105,"ratio":34,"items":521},[522,526],{"src":523,"alt":524,"caption":525},"\u002Fwork\u002Fdrukksiazek24\u002Fphone.webp","Telefon na drewnianym stole ze stroną główną sklepu na ekranie","Sklep na telefonie.",{"src":527,"alt":528,"caption":529,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fmobile.webp","Dwa ekrany konfiguratora na telefonie: strona produktu i krok pierwszy z paskiem ceny","Konfigurator na 390 px: pasek ceny zostaje na dole.",{"type":105,"ratio":531,"items":532},"13 \u002F 15",[533,537,541],{"src":534,"alt":535,"caption":536,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fpanel-order.webp","Zamówienie w panelu administracyjnym z plikami do sprawdzenia, terminem produkcji, statusem i notatkami","Zamówienie: pliki do przyjęcia albo odrzucenia, termin i następny krok.",{"src":538,"alt":539,"caption":540,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fpanel-quote.webp","Nowa wycena w panelu administracyjnym z konfiguracją, cenami dla kolejnych nakładów, kosztem produkcji i marżą","Wycena: koszt produkcji, marża i cena dla klienta.",{"src":542,"alt":543,"caption":544,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fpanel-pricelist.webp","Cennik w panelu administracyjnym z zaokrągleniami, limitami, opcjami do wyboru dla klienta i tymi, których nie można łączyć","Cennik: co klient może wybrać i czego nie można łączyć.",{"label":154,"stats":546,"media":554,"ratio":558},[547,549,551],{"value":548,"label":158},"79",{"value":550,"label":161},"159",{"value":552,"label":553},"12","e-maili",{"src":555,"alt":556,"caption":557},"\u002Fwork\u002Fdrukksiazek24\u002Fscale.webp","Szesnaście ekranów desktopowych z pliku w Figmie w pięciu równych kolumnach, ekrany sklepu po lewej, ekrany panelu administracyjnego po prawej","Szesnaście z ekranów w Figmie: sklep po lewej, panel drukarni po prawej.","3600 \u002F 2276",{"typeface":560,"weights":561,"statement":562,"collections":563,"modes":582,"facts":607,"components":612,"figures":618},"DM Sans","Regular \u002F Medium \u002F SemiBold","243 zmienne w siedmiu kolekcjach. Po zmianie 21 z nich sklep staje się panelem: te same komponenty, inne narzędzie.",[564,566,569,572,574,577,579],{"name":176,"count":565,"modes":178},58,{"name":184,"count":567,"modes":568},66,"Shop \u002F Panel",{"name":188,"count":570,"modes":571},37,"Desktop \u002F Mobile",{"name":191,"count":573,"modes":568},9,{"name":575,"count":576,"modes":568},"Size",24,{"name":194,"count":578,"modes":571},32,{"name":580,"count":581,"modes":178},"Motion",17,{"from":583,"to":584,"rows":585},"Shop","Panel",[586,590,593,596,600,603],{"label":587,"from":588,"to":589},"Promień przycisku","Pigułka","2 px",{"label":591,"from":592,"to":589},"Promień karty","20 px",{"label":594,"from":595,"to":589},"Promień pola","12 px",{"label":597,"from":598,"to":599},"Wysokość pola","44 px","40 px",{"label":601,"from":602,"to":599},"Wysokość przycisku","42 px",{"label":604,"from":605,"to":606},"Szarości","Slate, lekko niebieskie","Neutralne",[608,609,610,611],"159 komponentów","84 ikony","30 stylów tekstu","16 stylów efektów",[613,614,615,616,617],"Przyciski i plakietki","Formularze","Nawigacja","Nakładki i treść","Sklep: koszyk, zamówienia, konto",{"ratio":619,"items":620},"3 \u002F 2",[621,625],{"src":622,"alt":623,"caption":624,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fbuttons.webp","Plansza komponentów z przyciskami, przyciskami z samą ikoną i plakietkami we wszystkich wariantach","Przyciski i plakietki: warianty, rozmiary i stany.",{"src":626,"alt":627,"caption":628,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fforms.webp","Plansza komponentów z kontrolkami formularza i ich stanami","Kontrolki formularza i ich stany.",{"statement":630,"delivered":631},"Jeden system, który prowadzi książkę od ceny do paczki: sklep, konfigurator, checkout, weryfikacja plików, śledzenie i stojący za nimi panel, w trzech językach.",[632,633,634,635,636,637],"Sklep i konfigurator dla sześciu opraw i sześciu gotowych zestawów","Checkout, wgrywanie plików, śledzenie bez konta, konto klienta","Panel: zamówienia, pliki, płatności, wyceny i cennik z wersjami","Narzędzia do treści: edytor bloga, biblioteka mediów, SEO, strony miast, edytowalne podpowiedzi","Design system w Figmie: 243 zmienne, 30 stylów tekstu, dwa tryby","Trzy działające sklepy: polski, niemiecki i francuski","E-commerce","Mazowieckie Centrum Poligrafii",{"src":641,"alt":642,"tone":254},"\u002Fwork\u002Fdrukksiazek24\u002Fcover.webp","Konfigurator książki DrukKsiążek24 w oknie przeglądarki i na telefonie, na ciemnym tle",[638,644,259],"UX design",[290,264,265],"Internetowa drukarnia książek zaprojektowana jako jeden system: konfigurator, przez który przejdzie autor drukujący pierwszy raz, ścieżka zamówienia, która tłumaczy się sama, i panel, w którym drukarnia pracuje cały dzień. Całość zaprojektowałem w Figmie, od sklepu po panel administracyjny.","https:\u002F\u002Fdrukksiazek24.pl",{},1,"Projektowanie UX\u002FUI","Sklep i konfigurator \u002F Checkout, pliki i śledzenie \u002F Panel administracyjny \u002F Design system \u002F Polski, niemiecki, francuski","drukksiazek24","work-pl\u002Fdrukksiazek24","Drukarnia: sklep internetowy z konfiguratorem książek i panel, w którym pracuje jej zespół.","2 do 3 miesięcy, 2026","8-BbRMVk6HqWXhzGK-ujBRvM0TBuIVJkcoEnZA6DnKM",{"id":658,"title":659,"caseStudy":255,"category":282,"client":659,"cover":660,"coverTall":255,"demo":256,"disciplines":664,"extension":262,"filters":665,"intro":666,"live":667,"meta":668,"order":669,"published":121,"role":670,"scope":671,"shortPage":672,"slug":732,"stem":733,"summary":734,"timeline":255,"type":353,"year":277,"__hash__":735},"workPl\u002Fwork-pl\u002Ffinansowanie-firm.yml","Finansowanie Firm",{"src":661,"alt":662,"caption":663,"tone":254},"\u002Fwork\u002Ffinansowanie-firm\u002Fcover.webp","Strona główna Finansowania Firm w oknie przeglądarki i historie klientów na telefonie, na niebieskim tle","Strona główna, a na telefonie historie klientów.",[288,259],[290,265],"Finansowanie Firm pomaga przedsiębiorcom uzyskać kredyt, leasing albo pieniądze na rozwój, także wtedy, gdy bank już odmówił. Zaprojektowałem stronę internetową firmy: landing page, który prowadzi od problemu do pierwszej rozmowy, podstronę, która wyjaśnia proces, i historie klientów opowiedziane z podaniem kwot.","https:\u002F\u002Ffinansowaniefirm.pl",{},4,"Digital design","Landing page \u002F Formularz kontaktowy \u002F Historie klientów",{"notes":673,"pair":674,"details":682,"full":728},"Właściciel, który potrzebuje pieniędzy dla firmy, nie szuka broszury. Strona odpowiada na pytania, które padają jako pierwsze: czy pomożecie w mojej sytuacji, ile to potrwa i kto przeszedł przez to przede mną. Dlatego strona główna zaczyna od spraw, którymi doradcy się zajmują, strona procesu otwiera się jedną liczbą, czyli piętnastoma minutami, a każda historia klienta zaczyna się od kwoty.",{"a":675,"b":678,"caption":681},{"src":676,"alt":677,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fprocess.webp","Strona procesu w oknie przeglądarki, która otwiera się dużą liczbą 15 i zdaniem o tym, że pierwsza rozmowa trwa piętnaście minut",{"src":679,"alt":680,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fphone.webp","Menu na telefonie z sześcioma linkami, godzinami, w których doradca odbiera telefon, i przyciskiem do umówienia rozmowy","Po lewej: strona procesu otwiera się jedną liczbą. Po prawej: menu na telefonie.",[683,701,719],{"title":684,"body":685,"figures":686},"Trzy pytania zamiast formularza","Strona obiecuje rozmowę, a nie papiery, i formularz tej obietnicy dotrzymuje. Pyta o trzy rzeczy, po jednej naraz: na co mają być pieniądze, ile i gdzie oddzwonić. Pasek pokazuje, jak daleko jesteś, a dane kontaktowe przychodzą na końcu, kiedy najtrudniejsze jest już za tobą.",{"ratio":687,"items":688},"4 \u002F 5",[689,693,697],{"src":690,"alt":691,"caption":692,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fform-1.webp","Pierwszy krok formularza z pytaniem o cel finansowania, z trzema odpowiedziami, z których wybrana jest druga","Najpierw: na co mają być pieniądze.",{"src":694,"alt":695,"caption":696,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fform-2.webp","Drugi krok formularza z pytaniem o potrzebną kwotę, z czterema przedziałami, z których wybrany jest drugi","Potem: ile.",{"src":698,"alt":699,"caption":700,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fform-3.webp","Ostatni krok formularza z prośbą o imię, numer telefonu, NIP firmy i e-mail","Na końcu: gdzie oddzwonić.",{"label":702,"title":703,"body":704,"figures":705},"Proces","Trzy otwarcia przed jedną liczbą","Strona procesu miała trzy wersje otwarcia, zanim dostała swoją liczbę. Jedna zaczynała od piętnastu minut, druga rysowała ścieżkę od telefonu do przelewu, a trzecia zestawiała pracę zdalną z wizytą w oddziale banku. Na stronę trafił licznik, a ścieżka stała się jej następną sekcją.",{"ratio":34,"items":706},[707,711,715],{"src":708,"alt":709,"caption":710,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fopening-a.webp","Pierwsza wersja otwarcia z dużą liczbą 15, słowem minut pod spodem i dwoma przyciskami","A: licznik. Ta wersja trafiła na stronę.",{"src":712,"alt":713,"caption":714,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fopening-b.webp","Druga wersja otwarcia z nagłówkiem nad linią czterech ponumerowanych kroków i czasem trwania każdego z nich","B: ścieżka od telefonu do przelewu.",{"src":716,"alt":717,"caption":718,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fopening-c.webp","Trzecia wersja otwarcia z nagłówkiem nad dwiema listami obok siebie, zwykłą drogą i drogą zdalną","C: zdalnie kontra oddział banku.",{"label":337,"title":720,"body":721,"figures":722},"Jeden przycisk, nazwany od tego, co robi","Każda podstrona jest zbudowana z jednego niewielkiego zestawu elementów. Przycisk jest jeden, w jednym rozmiarze, a jego warianty noszą nazwy od rangi akcji, nie od koloru: akcja główna jest niebieska na jasnej stronie i biała na granacie. Pola, etykiety i karta historii są narysowane raz i używane wielokrotnie.",{"items":723},[724],{"src":725,"alt":726,"caption":727,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fcomponents.webp","Plansza z elementami strony, na której są przyciski na białym i na granatowym tle, kroki i pola formularza, etykiety, ponumerowane kroki i karta historii klienta","Przyciski, pola, etykiety i karta historii ze strony.",{"src":729,"alt":730,"caption":731,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fsteps.webp","Cztery kroki procesu w oknie przeglądarki, każdy z czasem trwania, a obok strona procesu na telefonie z liczbą 15","Proces krok po kroku, z czasem trwania każdego etapu.","finansowanie-firm","work-pl\u002Ffinansowanie-firm","Doradcy finansowi dla firm: landing page zbudowany wokół piętnastominutowej rozmowy i formularza z trzech pytań.","Fc3ZbiOWoG1DFTqQkBYqzAHJ51Y8cb3kboEWKRLViQA",{"id":737,"title":738,"caseStudy":255,"category":282,"client":738,"cover":739,"coverTall":255,"demo":256,"disciplines":743,"extension":262,"filters":744,"intro":745,"live":746,"meta":747,"order":748,"published":121,"role":749,"scope":750,"shortPage":751,"slug":805,"stem":806,"summary":807,"timeline":255,"type":353,"year":277,"__hash__":808},"workPl\u002Fwork-pl\u002Fjantarhome.yml","JantarHome",{"src":740,"alt":741,"caption":742,"tone":254},"\u002Fwork\u002Fjantarhome\u002Fcover.webp","Strona główna JantarHome w oknie przeglądarki, rząd drewnianych domków wzdłuż brukowanej ścieżki pod nagłówkiem o rodzinnym komforcie blisko plaży, oraz strona małych domków na telefonie, na ciemnogranatowym tle","Strona główna, a na telefonie małe domki.",[288,259],[290,265],"JantarHome wynajmuje siedem domków letniskowych w Jantarze na Mierzei Wiślanej, 700 metrów od plaży. Zaprojektowałem jego stronę internetową: podstronę dla każdego rodzaju domku, galerię, przewodnik po jednodniowych wycieczkach w okolicy i stronę kontaktu z cennikiem.","https:\u002F\u002Fjantarhome.com",{},7,"Projektowanie stron","Strony domków \u002F Galeria \u002F Cennik",{"notes":752,"pair":753,"details":761,"full":801},"Domek na urlop wybiera się oczami, dlatego na każdej podstronie prowadzą zdjęcia, a tekst jest krótki. Po zdjęciach gość sprawdza trzy rzeczy: co jest w środku, jak daleko jest do plaży i ile kosztuje noc. Strona odpowiada w tej kolejności i podaje cenę czarno na białym, sezon po sezonie. Wygląd pozostaje spokojny: ciepły papier i morski granat z jednym rysowanym ozdobnikiem, tak żeby kolor wnosiły drewno i zieleń ze zdjęć.",{"a":754,"b":757,"caption":760},{"src":755,"alt":756,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fgallery.webp","Galeria w oknie przeglądarki, z trzema zakładkami na obiekt, domki małe i domki duże, oraz dwoma rzędami zdjęć drewnianych domków, placu zabaw i ogrodu",{"src":758,"alt":759,"content":306,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fphone.webp","Nawigacja na telefonie, sześć linków na ciemnej fakturze morza, a pod nimi numer telefonu i link do Instagrama","Po lewej: galeria podzielona na trzy zakładki. Po prawej: nawigacja na telefonie.",[762,779,792],{"title":763,"body":764,"figures":765},"Każdy przycisk prowadzi na jedną stronę","Właściciel przyjmuje rezerwacje przez telefon, więc każdy przycisk „Zarezerwuj pobyt”, w nagłówku, na stronie głównej i pod każdym domkiem, otwiera tę samą stronę. Są na niej numer telefonu, adres, godziny zameldowania i wymeldowania oraz cały cennik. Kiedy gość dzwoni, do ustalenia zostaje już tylko termin.",{"ratio":313,"items":766},[767,771,775],{"src":768,"alt":769,"caption":770,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fpath-1.webp","Koniec strony domku na telefonie, ciemny blok z hasłem „Zaplanuj swój pobyt już dziś”, przyciskiem rezerwacji i zdjęciem domków","Strona domku kończy się jednym przyciskiem.",{"src":772,"alt":773,"caption":774,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fpath-2.webp","Blok kontaktu na telefonie z adresem, godzinami zameldowania i wymeldowania, numerem telefonu, linkiem do Instagrama i dwoma przyciskami","Przycisk otwiera numer telefonu, adres i godziny.",{"src":776,"alt":777,"caption":778,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fpath-3.webp","Cennik na telefonie, tabela z dwoma rodzajami domków w dwóch sezonach, opłatami dodatkowymi i tym, co obejmuje cena","Cennik jest na tej samej stronie.",{"title":780,"body":781,"figures":782},"Dwa rodzaje domków, bliźniacze strony","JantarHome ma dwa rodzaje domków, a rodzina porównuje je, zanim zadzwoni. Każdy rodzaj ma własną stronę, zbudowaną w tej samej kolejności: domek z zewnątrz, pomieszczenia w środku, pas zdjęć, sześć rzeczy, które liczą się na urlopie, i rezerwacja. Wystarczy przeczytać jedną, żeby wiedzieć, gdzie patrzeć na drugiej.",{"ratio":47,"items":783},[784,788],{"src":785,"alt":786,"caption":787,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fsmall.webp","Strona małych domków w oknie przeglądarki, z nagłówkiem, krótkim opisem i zdjęciem dwóch drewnianych domków ze spiczastymi dachami","Domki małe: salon, kuchnia i sypialnie na piętrze.",{"src":789,"alt":790,"caption":791,"fit":40},"\u002Fwork\u002Fjantarhome\u002Flarge.webp","Strona dużych domków w oknie przeglądarki, z nagłówkiem, krótkim opisem i zdjęciem rzędu większych drewnianych domów za trawnikiem","Domki duże: więcej sypialni i większa część dzienna.",{"label":337,"title":793,"body":794,"figures":795},"Jeden ozdobnik i garść elementów","Strona jest zbudowana z garści elementów. Rysowany ozdobnik zamyka każdy nagłówek otwierający podstronę. Sześć liniowych ikon nazywa to, o co goście pytają najpierw, od spaceru na plażę po parking. Pracę wykonują dwa przyciski: wypełniony dla głównego kroku i obrysowany dla pozostałych. Opinie są na kartach w morskim granacie.",{"ratio":34,"items":796},[797],{"src":798,"alt":799,"caption":800,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fcomponents.webp","Plansza z elementami strony, na której są pasek nawigacji, sześć ikon udogodnień, nagłówek z rysowanym ozdobnikiem nad tabelą cen, trzy przyciski, blok rezerwacji na ciemnym granacie i karta z opinią gościa","Nawigacja, sześć ikon, nagłówek z ozdobnikiem nad tabelą cen, przyciski i opinia.",{"src":802,"alt":803,"caption":804,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fsurroundings.webp","Strona o okolicy w oknie przeglądarki, z nagłówkiem o jednodniowych wycieczkach i zdjęciem plaży, a obok sekcja o zamku w Malborku na telefonie","Strona o okolicy: jednodniowe wycieczki do Gdańska, Malborka i Fromborka oraz nad Zalew Wiślany.","jantarhome","work-pl\u002Fjantarhome","Siedem domków letniskowych nad Bałtykiem w Jantarze: strona, która pokazuje każdy z nich, podaje cenę i prowadzi do jednego numeru telefonu.","9h-UbsybCW-E_9SxSqSH5hgiy0D26GZ2OZr8h-krbLk",{"id":810,"title":811,"caseStudy":812,"category":249,"client":1043,"cover":1044,"coverTall":1047,"demo":256,"disciplines":1050,"extension":262,"filters":1051,"intro":1052,"live":255,"meta":1053,"order":1054,"published":121,"role":1055,"scope":1056,"shortPage":255,"slug":1057,"stem":1058,"summary":1059,"timeline":1060,"type":276,"year":277,"__hash__":1061},"workPl\u002Fwork-pl\u002Fmarketplace-panel.yml","Marketplace Panel",{"phase":359,"lead":813,"whatIDid":817,"problem":822,"problemDetail":823,"constraints":824,"decisions":829,"gallery":908,"scale":991,"system":1006,"result":1036},[814,815,816],"Sprzedawca wystawia meble na wielu marketplace'ach jednocześnie, z kilku kont. Każdy marketplace ma swój panel i swoje opłaty, po swojemu nazywa ten sam status zamówienia, a z panelem sprzedawcy łączy się przez własne API. Przy tylu integracjach nie było jednego miejsca, w którym dałoby się odpowiedzieć na najprostsze pytanie: jak nam poszło w tym miesiącu?","Zaprojektowałem panel, który odpowiada na nie w jednym miejscu: sprzedaż, opłaty i wynik po prowizjach dla każdego konta i każdej oferty, zamówienia ze wszystkich marketplace'ów na jednej liście i wiadomości od kupujących w jednej skrzynce. Odpowiadałem za UX i UI: za to, jak czyta się każdy ekran, czego wymaga od osoby, która z niego korzysta, i co mówi, kiedy brakuje liczby. Pomagałem też ustalić, jak panel jest zbudowany: jakie ma sekcje oraz co widzi właściciel, co menedżerowie, a co pracownicy.","Projekt jest prywatny i nikt spoza firmy nie może się do niego zalogować. Dlatego sklep, kupujący i liczby są tutaj zmyślone, a wielu części panelu nie pokazuję.",[818,819,820,821],"UX i UI 14 ekranów, na komputerze i na telefonie","User flows dla każdego ekranu, razem ze ścieżkami błędów","Design system Precyzja: 169 komponentów, 654 warianty","Struktura produktu, ustalona wspólnie z programistą: sekcje i role","Odpowiedź na jedno pytanie, czy ta oferta wciąż zarabia po opłatach i reklamach, była rozrzucona po osobnych panelach wszystkich marketplace'ów.","Prowizja jest naliczana w chwili opłacenia zamówienia, przychód liczy się dopiero po wysyłce paczki, reklamy są rozliczane kilka dni później, a sprzedaż, którą przynoszą, widać w jeszcze innym panelu. Każdy marketplace podaje to wszystko przez własne API, we własnym formacie i we własnym tempie. Niestarannie zestawione, te liczby kłamią: opłata pojawia się przed swoim przychodem, szacunek wygląda jak fakt, a brakująca liczba uchodzi za zero. Zanim panel mógł stać się przydatny, musiał uczciwie mówić o każdej liczbie, którą pokazuje.",[825,826,827,828],"Wiele marketplace'ów i wiele integracji API, jedno nazewnictwo","Każda liczba ma źródło i żaden szacunek nie udaje faktu","Trzy role: właściciel, menedżerowie i pracownicy, którzy nie widzą finansów","Każdy ekran działa też na telefonie",[830,849,864,876,891],{"title":831,"context":832,"decision":833,"tradeoff":834,"figures":835},"Przeczytane to jeszcze nie odpowiedź","Kupujący piszą o dostawach, brakujących elementach i fakturach, a zwłoka w odpowiedzi kosztuje ocenę. Stara skrzynka sama otwierała najnowszy wątek i oznaczała go jako przeczytany, więc wiadomość mogła stać się przeczytana, choć nikt jej nie przeczytał, a przeczytana wyglądała na załatwioną, nawet jeśli nikt na nią nie odpisał.","Nic już nie otwiera się samo. Wątek staje się przeczytany dopiero wtedy, gdy ktoś go otworzy, wątek oznaczony jako nieprzeczytany takim pozostaje, a otwarty wątek jest zapisany w adresie, więc link z pierwszego ekranu prowadzi prosto do niego. Obok nieprzeczytanych skrzynka liczy teraz także to, co czeka na odpowiedź: każdy wątek, w którym ostatnie słowo należało do kupującego, bez względu na to, czy ktoś już do niego zajrzał.","Jedno kliknięcie więcej przed pierwszą wiadomością. O tym, któremu kupującemu odpowiedzieć najpierw, zawsze decyduje teraz człowiek, nigdy skrzynka.",{"ratio":836,"mat":837,"items":838},"10 \u002F 7","tight",[839,844],{"src":840,"alt":841,"caption":842,"state":843,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd1-before.webp","Stara skrzynka, trzy przyciski filtra z czerwonym licznikiem przy nieprzeczytanych i lista wątków, na której najnowszy jest już otwarty i zaznaczony","Najnowszy wątek otwierał się sam i stawał się przeczytany. Jedynym filtrem były nieprzeczytane.","before",{"src":845,"alt":846,"caption":847,"state":848,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd1-after.webp","Nowa skrzynka, zakładki Wszystkie, Czeka na odpowiedź, Nieprzeczytane i Przeczytane, każda z licznikiem, lista, na której wątki czekające na odpowiedź są oznaczone, i pusty panel czytania z komunikatem Wybierz wątek","Nic się nie otwiera, dopóki ktoś tego nie wybierze, a to, co czeka na odpowiedź, ma własną zakładkę.","after",{"title":850,"context":851,"decision":852,"tradeoff":853,"figures":854},"Każdy kolor ma jedno zadanie","Stary pierwszy ekran kolorował prawie wszystko: opłaty na czerwono, zmiany w czerwonych i zielonych plakietkach, niebieski kafel pod każdą ikoną. Prowizja, koszt, którego nikt nie uniknie, była najbardziej czerwonym elementem ekranu, więc oko nauczyło się czerwień pomijać.","Każdy kolor znaczy teraz jedną rzecz. Zieleń i czerwień należą do jednej liczby, wyniku po prowizjach, i tylko wtedy, gdy pochodzi on z rozliczeń samych marketplace'ów. Bursztyn oznacza to, co na kogoś czeka. Niebieski kolor marki mówi, gdzie jesteś i co jest wybrane: bieżąca sekcja, aktywna zakładka, wybrany wątek, linia trendu. Opłaty mają znak minus zamiast koloru, a zmiany w okresie są szare.","Szacowany wynik pozostaje szary, nawet gdy wygląda dobrze. Panel woli powiedzieć mniej, niż powiedzieć coś, czego nie potrafi potwierdzić.",{"ratio":836,"mat":837,"items":855},[856,860],{"src":857,"alt":858,"caption":859,"state":843,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd2-before.webp","Duża karta ze starego pierwszego ekranu, wynik po prowizjach z niebieskim kaflem ikony, zielona plakietka zmiany, opłaty na czerwono i rabaty na zielono","Czerwień opłat, zielona plakietka i niebieski kafel na jednej karcie.",{"src":861,"alt":862,"caption":863,"state":848,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd2-after.webp","Cztery liczby nowego pierwszego ekranu w układzie dwa na dwa, wynik po prowizjach na zielono z małą niebieską linią trendu, przychód z linią trendu, opłaty jako liczba ujemna i rabaty","Jedna liczba w kolorze, a niebieski tylko dla trendu. W układzie dwa na dwa, tak jak pas składa się na wąskim ekranie.",{"title":865,"context":866,"decision":867,"tradeoff":868,"figures":869},"Brak liczby nigdy nie jest zerem","Sprzedaży z reklam nie ma w żadnym API, które panel potrafi odczytać. Jest w panelach reklamowych marketplace'ów i trzeba ją wpisywać ręcznie. Bez niej nie da się policzyć ROAS, a zero w tym miejscu wyglądałoby jak kampania, która się nie udała.","Tam, gdzie liczba nie ma źródła, panel pisze Brak danych i mówi, czego potrzebuje. ROAS jest liczony tylko z tych dni i kont, dla których wpisano sprzedaż, a samo puste miejsce otwiera formularz brakującego wpisu, ustawiony od razu na sprzedaż z reklam i na właściwe konto, zamiast kazać właścicielowi szukać go niżej na stronie.","W niektórych komórkach Brak danych widnieje całymi dniami, dopóki ktoś nie wpisze sprzedaży. To i tak bardziej przydatne niż liczba, której nie można ufać.",{"ratio":870,"mat":837,"items":871},"1000 \u002F 551",[872],{"src":873,"alt":874,"caption":875,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd3-missing.webp","Blok Wyniki reklam, w którym ROAS i sprzedaż z reklam mają oznaczenie Brak danych i notkę z informacją, co wpisać, oraz otwarty na nim formularz wpisu na zakładce sprzedaży z reklam, z kontem, sprzedażą brutto i okresem","Brak danych mówi, czego potrzeba, a formularz otwiera się na właściwym rodzaju wpisu.",{"title":877,"context":878,"decision":879,"tradeoff":880,"figures":881},"Ustawienie, które przelicza każdą liczbę, najpierw pyta","Mnożnik rentowności zamienia wynik po prowizjach w szacowany zysk netto całej firmy. Jego zmiana przelicza każdą kwotę zysku w panelu i w raportach PDF, łącznie z miesiącami już zamkniętymi, a pomyłka o jedną cyfrę przechodzi niezauważona.","Zapisanie nowej wartości otwiera potwierdzenie, które pokazuje ustawienie teraz i po zmianie oraz mówi wprost, co się stanie: każda kwota zysku netto spadnie o 75 procent. Sama wartość jest wypisana na przycisku: Ustaw 10%. Pierwszym wyborem jest Anuluj, a starą wartość można później przywrócić.","Jeden krok więcej przy zmianie, którą robi się kilka razy w roku. I właśnie o to chodzi.",{"ratio":836,"mat":837,"items":882},[883,887],{"src":884,"alt":885,"caption":886,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd4-setting.webp","Ustawienie mnożnika rentowności, pole z nową wartością 10 procent i przycisk Zapisz mnożnik","Ustawienie: jedno pole, które zmienia każdą kwotę zysku w panelu.",{"src":888,"alt":889,"caption":890,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd4-confirm.webp","Potwierdzenie, 40 procent teraz i 10 procent po zapisaniu, ostrzeżenie, że każda kwota zysku netto spadnie o 75 procent, przycisk Anuluj i przycisk z napisem Ustaw 10%","Pytanie przed zapisem: stan teraz i po zmianie, skutek opisany słowami, wartość na przycisku.",{"title":892,"context":893,"decision":894,"tradeoff":895,"figures":896},"Lista mówi, co zawiera, zanim ktokolwiek kliknie","Lista zamówień miała dziewięć zakładek statusu bez żadnych liczb, więc żeby sprawdzić, czy coś czeka na płatność, trzeba było otwierać zakładki jedną po drugiej. Katalog ofert otwierał się posortowany po cenie, z najdroższą ofertą na górze, bez względu na to, czy kiedykolwiek się sprzedała.","Każda zakładka statusu ma teraz swój licznik, także wtedy, gdy to zero, więc nikt nie otwiera pustej zakładki tylko po to, żeby sprawdzić, a rząd zakładek jest przy okazji podsumowaniem dnia. Katalog otwiera się posortowany po przychodzie z ostatnich 30 dni, więc pierwszy ekran pokazuje to, co się sprzedaje, a oferty, które nie sprzedały niczego, mają własną zakładkę, na której widać ich liczbę.","Dziewięć liczników zagęszcza rząd zakładek, a zero jest pokazane tak samo wyraźnie jak sto. Ukrycie pustych zakładek dałoby spokojniejszy widok, ale zakładek, które pojawiają się i znikają, trudniej się nauczyć.",{"stack":121,"mat":837,"items":897},[898,903],{"src":899,"alt":900,"caption":901,"state":843,"ratio":902,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd5-before.webp","Stara lista zamówień, dziewięć zakładek statusu bez liczb, przycisk daty, przycisk filtra i pole wyszukiwania w drugiej linii oraz trzy wysokie wiersze z datą, ofertą, kwotą i dwiema plakietkami statusu","Dziewięć zakładek statusu i ani jednej liczby.","1000 \u002F 464",{"src":904,"alt":905,"caption":906,"state":848,"ratio":907,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd5-orders.webp","Nowa lista zamówień, dziewięć zakładek statusu, każda z licznikiem, pole wyszukiwania, filtry i sortowanie oraz trzy pierwsze zamówienia z datą, kontem, statusem i kwotą","Każdy status ma swój licznik, także wtedy, gdy to zero.","1000 \u002F 423",[909,920,930,940,947,954,965,976],{"type":105,"ratio":910,"mat":837,"items":911},"1000 \u002F 687",[912,916],{"src":913,"alt":914,"caption":915,"state":843,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-finance-before.webp","Stary ekran finansów, wynik jako długa karta z wierszami jeden pod drugim i opłatami na czerwono, obok karta wyników reklam, a niżej szeroka tabela","Finanse czytało się jak paragon: jedna długa karta wierszy, z opłatami na czerwono.",{"src":917,"alt":918,"caption":919,"state":848,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-finance-after.webp","Nowy ekran finansów, pięć liczb w jednym pasie i tabela kont z kolumnami opłat, w której przy brakującej sprzedaży z reklam jest napis Brak danych","Pięć liczb, a pod nimi jedna tabela dla wszystkich kont. Tam, gdzie liczby brakuje, jest napis Brak danych.",{"type":105,"ratio":910,"mat":837,"items":921},[922,926],{"src":923,"alt":924,"caption":925,"state":843,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-catalogue-before.webp","Stary katalog ofert, rząd akcji nad listą, pole wyszukiwania i wysokie wiersze posortowane po cenie, z kolorowymi plakietkami statusu","Katalog: rząd akcji nad listą i oferty posortowane po cenie.",{"src":927,"alt":928,"caption":929,"state":848,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-catalogue-after.webp","Nowy katalog ofert, zakładki z licznikami, jeden pasek narzędzi z wyszukiwaniem, filtrami i sortowaniem ustawionym na przychód oraz więcej wierszy w widoku","Jeden pasek narzędzi, akcje zebrane w menu i oferty posortowane według tego, ile zarabiają.",{"type":105,"ratio":910,"mat":837,"items":931},[932,936],{"src":933,"alt":934,"caption":935,"state":843,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-orders-before.webp","Stary ekran zamówień, dwie duże karty przychodu nad listą i trzy wysokie wiersze w widoku","Dwie karty przychodu spychały listę w dół: w widoku mieściły się trzy zamówienia.",{"src":937,"alt":938,"caption":939,"state":848,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-orders-after.webp","Nowy ekran zamówień, jeden pas czterech liczb, zakładki statusów z licznikami i siedem zamówień w widoku","Jeden pas liczb, zakładki z licznikami i siedem zamówień w widoku.",{"type":113,"title":941,"body":942,"ratio":943,"media":944},"Opłaty bez alarmu","To, co pobierają marketplace'y, jest kosztem sprzedaży, a nie porażką, dlatego strukturę opłat pokazuje neutralny pasek z tabelą pod spodem: prowizje, reklamy i dostawa jako udziały w opłaconych zamówieniach. Przypis wyjaśnia, jak liczony jest każdy udział.","1000 \u002F 801",{"src":945,"alt":946,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fg-fees.webp","Struktura opłat, szary pasek podzielony według rodzaju opłaty i tabela z kwotą i udziałem każdego rodzaju, sumą i rabatami",{"type":113,"reverse":121,"title":948,"body":949,"ratio":950,"media":951},"Ctrl K","Do każdej sekcji i każdej oferty wystarczy kilka klawiszy. Paleta wymienia sekcje razem z ich skrótami, G i litera, a oferty zaczyna wyszukiwać od drugiego wpisanego znaku.","1000 \u002F 740",{"src":952,"alt":953,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fg-palette.webp","Paleta poleceń z polem wyszukiwania i listą sekcji, każda ze skrótem złożonym z G i litery",{"type":105,"ratio":955,"mat":837,"items":956},"1000 \u002F 823",[957,961],{"src":958,"alt":959,"caption":960,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fc-offers.webp","Karta najlepszych ofert, przełącznik między najlepszymi a stratnymi ofertami oraz pięć ofert z miniaturą, kontem, liczbą sprzedanych sztuk i wynikiem po prowizjach","Najlepsze i najgorsze oferty według wyniku, pod jednym przełącznikiem.",{"src":962,"alt":963,"caption":964,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fc-messages.webp","Karta ostatnich wiadomości, pięć wątków kupujących z loginem, jednowierszowym podglądem i godziną oraz link do skrzynki","Ostatnie wiadomości od kupujących, od razu na pierwszym ekranie.",{"type":105,"ratio":966,"mat":837,"items":967},"1000 \u002F 692",[968,972],{"src":969,"alt":970,"caption":971,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fc-orders.webp","Karta ostatnich zamówień, pole wyszukiwania i pięć zamówień z kropką statusu, produktem, kupującym i kwotą","Pięć najnowszych zamówień i wyszukiwarka, która prowadzi do dowolnego zamówienia.",{"src":973,"alt":974,"caption":975,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fc-appearance.webp","Ustawienie wyglądu, piętnaście kolorów akcentu jako przyciski opcji, z jednym zaznaczonym, i przełącznik segmentowy intensywności","Każdy wybiera kolor akcentu i jego intensywność, tylko dla swojej przeglądarki.",{"type":105,"ratio":977,"items":978},"7 \u002F 12",[979,983,987],{"src":980,"alt":981,"caption":982,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fphone-dashboard.webp","Pierwszy ekran na telefonie z czterema liczbami w dwóch rzędach i przychodem dzień po dniu pod nimi","Pierwszy ekran na telefonie.",{"src":984,"alt":985,"caption":986,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fphone-catalogue.webp","Katalog ofert na telefonie, każda oferta jako karta ze statusem, ceną, liczbą sprzedanych sztuk i wynikiem po prowizjach","Tabele zamieniają się w karty.",{"src":988,"alt":989,"caption":990,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fphone-messages.webp","Rozmowa z kupującym na telefonie, pytanie kupującego o brakujący element i odpowiedź sklepu","Jedna rozmowa naraz.",{"label":154,"stats":992,"media":1001,"ratio":1005},[993,996,998],{"value":994,"label":995},"14","ekranów, na komputerze i telefonie",{"value":997,"label":161},"169",{"value":999,"label":1000},"17","obszarów z user flows",{"src":1002,"alt":1003,"caption":1004},"\u002Fwork\u002Fmarketplace-panel\u002Fscale.webp","Dziesięć desktopowych ekranów panelu w dwóch rzędach po pięć, wszystkie ze zmyślonymi danymi","Dziesięć z ekranów panelu, wszystkie ze zmyślonymi danymi. Jego prywatnych części tutaj nie dokumentuję.","4 \u002F 1",{"typeface":171,"weights":561,"statement":1007,"collections":1008,"facts":1018,"components":1023,"figures":1029},"Strukturę buduje szarość Zinc. Czerwień, bursztyn i szmaragd pokazują stan, a niebieski kolor marki zaznacza, gdzie jesteś i co jest wybrane. Nic innego nie koloruje interfejsu, więc kolor na ekranie zawsze coś znaczy.",[1009,1011,1014,1015,1016],{"name":176,"count":1010,"modes":178},39,{"name":184,"count":1012,"modes":1013},51,"Light",{"name":188,"count":3,"modes":178},{"name":191,"count":669,"modes":178},{"name":575,"count":1017,"modes":178},22,[1019,1020,1021,1022],"169 komponentów","654 warianty","91 ikon","8 stylów tekstu",[1024,1025,1026,1027,1028],"Pole wyszukiwania, wybór okresu i przełącznik segmentowy","Zakładki statusu z licznikami","Przyciski, główne i drugorzędne","Notka z akcją","Tabela danych z wierszami grup i sumy",{"ratio":1030,"items":1031},"1000 \u002F 693",[1032],{"src":1033,"alt":1034,"caption":1035,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fsystem.webp","Elementy systemu na jednym arkuszu, pole wyszukiwania i kontrolki okresu, zakładki statusu z licznikami, przyciski, notka z akcją oraz tabela kont z wierszami grup i sumą","Elementy systemu w użyciu, ze zmyślonymi danymi.",{"statement":1037,"delivered":1038},"Jeden panel dla wielu marketplace'ów, który odpowiada na pytanie, jak idzie sprzedaż, i nigdy nie pokazuje liczby, której nie potrafi potwierdzić.",[1039,1040,1041,1042],"Siedem sekcji dla wielu marketplace'ów i kilku kont sprzedawcy, na komputerze i na telefonie","Jedno zadanie dla każdego koloru i jedna zasada dla brakujących danych, utrzymane na każdym ekranie","14 ekranów w Figmie, z user flows dla 17 obszarów i ich ścieżkami błędów","Design system Precyzja: 127 zmiennych, 169 komponentów, 654 warianty","Sprzedawca mebli",{"src":1045,"alt":1046,"tone":254},"\u002Fwork\u002Fmarketplace-panel\u002Fcover.webp","Pierwszy ekran panelu w oknie przeglądarki, z wynikiem po prowizjach, przychodem dzień po dniu na tle poprzedniego okresu i tabelą kont, oraz ten sam ekran na telefonie, na ciemnogranatowym tle",{"src":1048,"alt":1049,"tone":254},"\u002Fwork\u002Fmarketplace-panel\u002Fcover-tall.webp","Pierwszy ekran panelu w oknie przeglądarki i ten sam ekran na telefonie, pośrodku wysokiego ciemnogranatowego tła",[644,259,260,258],[264,265],"Wewnętrzny panel dla sprzedawcy mebli, który sprzedaje na wielu marketplace'ach jednocześnie. Około 800 ofert, kilka kont sprzedawcy i jedno pytanie zadawane co rano: czy po opłatach i reklamach to wciąż zarabia? Zaprojektowałem UX i UI panelu i pomagałem ułożyć jego strukturę. Projekt jest prywatny, dlatego sklep, ludzie i wszystkie liczby na ekranach są zmyślone.",{},3,"Projektowanie UX\u002FUI, struktura produktu","Siedem sekcji na komputerze i telefonie \u002F Design system \u002F User flows","marketplace-panel","work-pl\u002Fmarketplace-panel","Panel sprzedawcy mebli na wielu marketplace'ach: ile każda oferta zarabia po opłatach i reklamach.","Kwiecień do października 2026","oUozM0xE54wwkngtffhgwwYub1bKpTxKqUc9Mhbu1e8",{"id":1063,"title":1064,"caseStudy":255,"category":282,"client":1064,"cover":1065,"coverTall":255,"demo":256,"disciplines":1070,"extension":262,"filters":1072,"intro":1073,"live":1074,"meta":1075,"order":649,"published":121,"role":1076,"scope":1077,"shortPage":1078,"slug":1133,"stem":1134,"summary":1135,"timeline":1136,"type":353,"year":277,"__hash__":1137},"workPl\u002Fwork-pl\u002Fmeble-mibu.yml","Meble MiBu",{"src":1066,"alt":1067,"caption":1068,"tone":1069},"\u002Fwork\u002Fmeble-mibu\u002Fcover.webp","Strona główna Meble MiBu w oknie przeglądarki i strona realizacji na telefonie, na ciepłym szarym tle","Strona główna, a na telefonie realizacje.","mid",[288,259,260,1071],"Motion design",[290,265],"Pracownia Meble MiBu robi w Gdańsku meble na wymiar i robi je dobrze. Jej strona niewiele o tym mówiła, choć była wysoko w wynikach wyszukiwania: mocne portfolio było schowane, a mało kto z odwiedzających się odzywał. Zaprojektowałem nową stronę, która zaczyna od realizacji, a kolejny krok trzyma pod ręką.","https:\u002F\u002Fmeblemibu.pl",{},"Projektowanie UI, motion design","12 typów stron \u002F Design system \u002F Animacje",{"notes":1079,"pair":1080,"details":1088,"full":1129},"Dla takiej pracowni strona internetowa jest showroomem. Odpowiadałem za projekt: układy dwunastu typów stron, stojący za nimi system wizualny i animacje, które spinają całość. W tym samym czasie strona przechodziła z WordPressa na rozwiązanie robione na miarę, więc każda podstrona musiała działać jako szablon. Wszystkie dotychczasowe teksty zostały co do słowa, bo to one sprowadzają odwiedzających z wyszukiwarki, a teraz prowadzą przez nie realizacje.",{"a":1081,"b":1084,"caption":1087},{"src":1082,"alt":1083,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Foffer.webp","Strona oferty z nagłówkiem i siatką zdjęć mebli, po jednym zdjęciu na każdy rodzaj mebli",{"src":1085,"alt":1086,"content":306,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fphone-home.webp","Strona główna na telefonie z nagłówkiem na zdjęciu kuchni","Po lewej: oferta, w której każda kategoria jest zdjęciem. Po prawej: strona główna na telefonie.",[1089,1103,1116],{"title":1090,"body":1091,"figures":1092},"Niech meble mówią same za siebie","Na starej stronie głównej portfolio, najlepszy argument pracowni, było schowane pod nagłówkiem i długim wstępem. Nowa otwiera się jednym zdjęciem na całe okno i dotrzymuje tej obietnicy do samego dołu. Długie teksty, które pracują na pozycję w wyszukiwarce, nadal tam są, niżej na stronie, podzielone na sekcje.",{"ratio":1093,"items":1094},"11 \u002F 10",[1095,1099],{"src":1096,"alt":1097,"caption":1098,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd1-before.webp","Stara strona główna z wyśrodkowanym nagłówkiem na zdjęciu kuchni i blokiem tekstu pod spodem","Przed: stara strona główna, zarchiwizowana w szerokości 914 px.",{"src":1100,"alt":1101,"caption":1102,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd1-after.webp","Nowa strona główna z jednym zdjęciem kuchni na całe okno i dużym nagłówkiem po lewej","Po: jedno zdjęcie na całe okno.",{"title":1104,"body":1105,"figures":1106},"Galeria warta oglądania","Lista realizacji była zwykłym ciągiem wpisów w kolejności dodawania, a ponad połowa z nich miała numer zamiast nazwy. Dziś to galeria 50 realizacji, filtrowana według rodzaju mebli, z kartami w trzech wysokościach, które zamieniają stronę w ścianę zdjęć. Przy zmianie filtra siatka płynnie wygasa i pojawia się z powrotem.",{"ratio":1093,"items":1107},[1108,1112],{"src":1109,"alt":1110,"caption":1111,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd2-before.webp","Stara lista realizacji w dwóch kolumnach z długimi tytułami pod każdym zdjęciem","Przed: dwie kolumny, w kolejności dodawania.",{"src":1113,"alt":1114,"caption":1115,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd2-after.webp","Nowa strona realizacji z zakładkami kategorii i trzema kolumnami zdjęć","Po: filtry według rodzaju mebli i trzy kolumny zdjęć.",{"label":337,"title":1117,"body":1118,"figures":1119},"Dwa szablony zamiast 23 kopii","Każda usługa i każde miasto miały własną, ręcznie składaną stronę, więc każdą poprawkę trzeba było wprowadzać dwadzieścia trzy razy. Strony usług i miast to teraz dwa szablony zbudowane z jednego zestawu sekcji: zdjęcia, realizacje danego rodzaju, długi tekst, proces, opinie i pytania. Dodanie miasta jest dziś kwestią treści, a nie projektu.",{"ratio":1093,"items":1120},[1121,1125],{"src":1122,"alt":1123,"caption":1124,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd3-service.webp","Strona kuchni z nagłówkiem po lewej, zdjęciem po prawej i ciemnym pasem z czterema faktami","Strona usługi: kuchnie.",{"src":1126,"alt":1127,"caption":1128,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd3-city.webp","Strona Gdyni w tym samym układzie co strona kuchni, z innym tekstem","Strona miasta: Gdynia. Te same sekcje, inna opowieść.",{"src":1130,"alt":1131,"caption":1132,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fpanel.webp","Panel do treści z bocznym menu siedmiu sekcji i listą realizacji z ich statusem","Strona działa na robionym na miarę panelu do treści, utrzymanym w tej samej palecie, w którym klient dodaje realizacje, usługi, miasta i wpisy. Pokazane tu konto jest zmyślone.","meble-mibu","work-pl\u002Fmeble-mibu","Świetne meble, świetna pozycja w wyszukiwarce, mało zapytań: nowa strona zaczyna od realizacji i trzyma kolejny krok pod ręką.","Czerwiec do września 2026","DeEoQsC2t-gfvoecXKogmiAq8kOzZdyarwkPV0pBPjc",{"id":1139,"title":1140,"caseStudy":255,"category":282,"client":1141,"cover":1142,"coverTall":255,"demo":256,"disciplines":1146,"extension":262,"filters":1147,"intro":1148,"live":1149,"meta":1150,"order":269,"published":121,"role":749,"scope":1151,"shortPage":1152,"slug":1186,"stem":1187,"summary":1188,"timeline":255,"type":353,"year":277,"__hash__":1189},"workPl\u002Fwork-pl\u002Forchowscy.yml","Orchowscy","Biuro Podróży Orchowscy",{"src":1143,"alt":1144,"caption":1145,"tone":254},"\u002Fwork\u002Forchowscy\u002Fcover.webp","Strona główna biura Orchowscy w oknie przeglądarki i katalog wycieczek na telefonie, na ceglastoczerwonym tle","Strona główna, a na telefonie katalog wycieczek.",[288,259],[290,265],"Biuro Podróży Orchowscy od 1996 roku zabiera grupy szkolne i firmowe na wycieczki po Polsce i Europie. Strona internetowa przestała za biurem nadążać, więc zaprojektowałem ją na nowo, od podstaw i według wskazówek klienta: nowy układ i spokojniejszy wygląd katalogu, strony wycieczki i drogi do zapytania.","https:\u002F\u002Forchowscy.pl",{},"Katalog wycieczek \u002F Strona wycieczki \u002F Design system",{"notes":1153,"pair":1154,"details":1162,"full":1182},"Redesign zaczął się od tego, co biuro już miało. Każdy z ponad osiemdziesięciu programów, razem z tekstem i zdjęciami klienta, został przeniesiony ze starej strony na WordPressie, więc nowy wygląd musiał pasować do treści, które już istniały. Zadaniem było zaprojektowanie szablonów, w których ten materiał wygląda najlepiej: kafla, strony wycieczki i programu rozpisanego dzień po dniu.",{"a":1155,"b":1158,"caption":1161},{"src":1156,"alt":1157,"fit":40},"\u002Fwork\u002Forchowscy\u002Fcatalogue.webp","Katalog wycieczek w oknie przeglądarki, z filtrami po lewej, wyszukiwarką i sortowaniem u góry oraz trzema kaflami wycieczek w rzędzie",{"src":1159,"alt":1160,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Forchowscy\u002Fphone.webp","Menu na telefonie z siedmioma linkami, przyciskiem zapytania oraz numerem telefonu i adresem e-mail na dole","Po lewej: katalog z filtrami. Po prawej: menu na telefonie.",[1163,1176],{"title":1164,"body":1165,"figures":1166},"To samo logo, spokojniejszy ton","Szkoły rezerwują u Orchowskich od 1996 roku i nadal powinny rozpoznawać biuro na pierwszy rzut oka. Dlatego logo zostało, a razem z nim czerwień i granat. Zmienił się ton wokół nich: stara strona główna krzyczała wersalikami, nowa mówi zwykłymi zdaniami, a sprzedaż zostawia zdjęciu.",{"items":1167},[1168,1172],{"src":1169,"alt":1170,"caption":1171,"fit":40},"\u002Fwork\u002Forchowscy\u002Fbefore.webp","Stara strona główna biura Orchowscy w oknie przeglądarki, z granatowym paskiem, menu złożonym wersalikami, pomarańczowymi przyciskami i nazwą wycieczki w ciemnej ramce na zdjęciu norweskiego fiordu","Przed: stara strona główna.",{"src":1173,"alt":1174,"caption":1175,"fit":40},"\u002Fwork\u002Forchowscy\u002Fafter.webp","Nowa strona główna biura Orchowscy w oknie przeglądarki, z jasnym paskiem, menu bez wersalików, jednym ceglastoczerwonym przyciskiem i dużą nazwą wycieczki na tym samym zdjęciu fiordu","Po: ta sama wycieczka i to samo zdjęcie.",{"title":1177,"body":1178,"media":1179},"Jeden kafel dla każdej wycieczki","Większość programów jest wyceniana dla grupy, a kilka ma termin i cenę za osobę. Jeden kafel obsługuje każdy przypadek: rodzaj wyjazdu i dostępność są na zdjęciu, transport pod tytułem, a w ostatniej linii stoi cena albo informacja, że wyjazd jest wyceniany dla grupy.",{"src":1180,"alt":1181,"fit":40},"\u002Fwork\u002Forchowscy\u002Ftiles.webp","Trzy kafle wycieczek obok siebie, dwa z wyceną dla grupy i jeden z terminem, plakietką o małej liczbie miejsc i ceną za osobę",{"src":1183,"alt":1184,"caption":1185,"fit":40},"\u002Fwork\u002Forchowscy\u002Fprogramme.webp","Program wycieczki w oknie przeglądarki i na telefonie, jako trzydniowa oś czasu z pierwszym dniem rozwiniętym na karcie","Program wycieczki dzień po dniu, na laptopie i na telefonie.","orchowscy","work-pl\u002Forchowscy","Biuro podróży: przeprojektowana strona z katalogiem wycieczek, zbudowana wokół treści, które klient już miał.","8jqQsMGnoD6pSCP9adF694pvDfi_EgNvsOJ4zps8hEk",{"id":1191,"title":1192,"caseStudy":255,"category":282,"client":1192,"cover":1193,"coverTall":255,"demo":256,"disciplines":1197,"extension":262,"filters":1198,"intro":1199,"live":1200,"meta":1201,"order":1202,"published":121,"role":670,"scope":1203,"shortPage":1204,"slug":1258,"stem":1259,"summary":1260,"timeline":255,"type":353,"year":277,"__hash__":1261},"workPl\u002Fwork-pl\u002Fpolskie-innowatorium.yml","Polskie Innowatorium",{"src":1194,"alt":1195,"caption":1196,"tone":254},"\u002Fwork\u002Fpolskie-innowatorium\u002Fcover.webp","Strona główna Polskiego Innowatorium w oknie przeglądarki, z kartą Innowacje na zdjęciu pojazdu na targach, oraz podstrona Instytucje na telefonie, na ciemnobordowym tle","Strona główna, a na telefonie podstrona dla instytucji.",[288,259],[290,265],"Polskie Innowatorium to warszawski zespół, który filmuje, fotografuje i promuje działania innowatorów, polskich marek i instytucji publicznych. Zaprojektowałem jego stronę internetową: osobną podstronę dla każdej z tych trzech grup, z projektami na filmie, krótkimi rolkami, fotorelacjami i formularzem kontaktowym, w sześciu językach, od polskiego po arabski.","https:\u002F\u002Fpolskie-innowatorium.pl",{},8,"Strony dla odbiorców \u002F Filmy z projektów \u002F Sześć języków",{"notes":1205,"pair":1206,"details":1214,"full":1254},"Zespół pracuje dla trzech bardzo różnych grup klientów, więc strona każdej z nich otwiera osobne drzwi. Strona główna zaczyna się od trzech dużych kart: Innowacje, Polskie Marki i Instytucje. Każda ma własne zdjęcie i własną obietnicę i każda prowadzi do podstrony z własnymi projektami. Sama praca zespołu to film, więc projekty odtwarzają się jako wideo, rolki stoją w ramkach telefonów, a za nimi idą fotorelacje. Interfejs pozostaje cichy i zostawia kolor nagraniom.",{"a":1207,"b":1210,"caption":1213},{"src":1208,"alt":1209,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fprojects.webp","Projekty z działu innowacji w oknie przeglądarki, ciemne karty z tagami tematów, czerwoną plakietką z datą i miniaturą filmu, pierwsza z targów technologicznych w Dubaju",{"src":1211,"alt":1212,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fphone.webp","Menu na telefonie z czterema linkami, rzędem sześciu języków z wybranym angielskim oraz numerami telefonów i adresem e-mail poniżej","Po lewej: każdy projekt odtwarza się jako film, a każda karta ma datę. Po prawej: menu na telefonie, ze wszystkimi sześcioma językami pod ręką.",[1215,1232,1245],{"title":1216,"body":1217,"figures":1218},"Dwa razy więcej na ekranie telefonu","Na trzech podstronach zespół pokazuje dwadzieścia cztery projekty, a w jednej kolumnie telefon zamieniłby je w długie przewijanie. Dlatego na wąskim ekranie karty projektów, usługi i opinie klientów stoją po dwie w rzędzie, a każdy ekran mieści dwa razy więcej.",{"ratio":313,"items":1219},[1220,1224,1228],{"src":1221,"alt":1222,"caption":1223,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fcolumns-1.webp","Projekty dla instytucji na telefonie, sześć ciemnych kart projektów w dwóch kolumnach, każda z tagami, datą i miniaturą filmu","Projekty dla instytucji, po dwa w rzędzie.",{"src":1225,"alt":1226,"caption":1227,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fcolumns-2.webp","Sekcja specjalizacji na telefonie, usługi z grup Strategia i Zasięg w dwóch kolumnach, każda z czerwoną ikoną i krótkim opisem","Usługi obok siebie, Strategia przy Zasięgu.",{"src":1229,"alt":1230,"caption":1231,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fcolumns-3.webp","Sekcja referencji na telefonie, cztery karty opinii w dwóch kolumnach, każda z pięcioma gwiazdkami, logo klienta i nazwiskiem","Opinie klientów, po cztery na ekranie.",{"title":1233,"body":1234,"figures":1235},"Ta sama strona, czytana od prawej","Zespół relacjonuje targi i szczyty od Emiratów po Koreę i Wietnam, więc strona mówi w sześciu językach. Po arabsku cały układ się odwraca: logo i tekst przechodzą na prawą stronę, formularz zajmuje lewą, a liczby zmieniają się na cyfry pisma arabskiego, podczas gdy adresy e-mail nadal czyta się od lewej do prawej.",{"items":1236},[1237,1241],{"src":1238,"alt":1239,"caption":1240,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fenglish.webp","Sekcja kontaktu angielskiej wersji strony w oknie przeglądarki, tekst po lewej, formularz po prawej, pola e-mail i telefonu obok siebie","Angielski: tekst po lewej, formularz po prawej.",{"src":1242,"alt":1243,"caption":1244,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Farabic.webp","Ta sama sekcja kontaktu po arabsku, w lustrzanym odbiciu, z tekstem po prawej, formularzem po lewej i numerami telefonów zapisanymi cyframi pisma arabskiego","Arabski: ta sama sekcja w lustrzanym odbiciu.",{"label":337,"title":1246,"body":1247,"figures":1248},"Elementy do pokazywania filmu","Strona jest zbudowana z garści elementów. Ciemna karta projektu mieści tagi, czerwoną plakietkę z datą i film. Rolki stoją w ramkach telefonów, opinie są na białych kartach z szarym logo klienta, czerwone geometryczne ikony nazywają usługi, a menu języków wymienia wszystkie sześć razem z flagami.",{"ratio":34,"items":1249},[1250],{"src":1251,"alt":1252,"caption":1253,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fcomponents.webp","Plansza z elementami strony, na której są pasek nawigacji, ciemna karta projektu, dwie karty opinii, dwie rolki w ramkach telefonów, osiem czerwonych ikon usług, menu języków i pola kontaktu po angielsku i po arabsku","Nawigacja, karta projektu, opinie, rolki, ikony usług, menu języków i formularz w obu kierunkach.",{"src":1255,"alt":1256,"caption":1257,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Freels.webp","Sekcja krótkich form w oknie przeglądarki, cztery pionowe rolki w ramkach telefonów pod nagłówkiem o treściach, które przyciągają uwagę, a obok fotorelacje na telefonie","Krótkie rolki w ramkach telefonów, a na telefonie fotorelacje.","polskie-innowatorium","work-pl\u002Fpolskie-innowatorium","Warszawski zespół, który filmuje i promuje innowatorów, polskie marki i instytucje publiczne: strona z osobnym wejściem dla każdego z nich, w sześciu językach.","VP_UtJ0bUbucFe20H3Qv4h4s5_S39bvAfH-KMmF4-5I",{"id":1263,"title":1264,"caseStudy":255,"category":282,"client":1264,"cover":1265,"coverTall":255,"demo":256,"disciplines":1269,"extension":262,"filters":1270,"intro":1271,"live":1272,"meta":1273,"order":1054,"published":121,"role":749,"scope":1274,"shortPage":1275,"slug":1307,"stem":1308,"summary":1309,"timeline":255,"type":353,"year":277,"__hash__":1310},"workPl\u002Fwork-pl\u002Fpomorskie-horyzonty.yml","Pomorskie Horyzonty",{"src":1266,"alt":1267,"caption":1268,"tone":254},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fcover.webp","Strona główna Pomorskich Horyzontów w oknie przeglądarki, z molem i plażą widzianymi z lotu ptaka, oraz lista ofert na telefonie, na granatowym tle","Strona główna, a na telefonie lista ofert.",[288,259],[290,265],"Pomorskie Horyzonty to rodzinne biuro nieruchomości, które sprzedaje i wynajmuje mieszkania i domy w Gdańsku, Sopocie i Gdyni. Zaprojektowałem jego stronę internetową: stronę główną, która otwiera się widokiem wybrzeża z lotu ptaka, katalog ofert z filtrami i stronę oferty zbudowaną wokół zdjęć.","https:\u002F\u002Fpomorskiehoryzonty.pl",{},"Strona główna \u002F Lista ofert \u002F Strona oferty",{"notes":1276,"pair":1277,"details":1285,"full":1303},"Strona zaczyna od miejsca. Za nagłówkiem płynie film z drona nad wybrzeżem, każda oferta otwiera się dużymi zdjęciami, a interfejs wokół nich pozostaje cichy. Każda oferta kończy się jednym formularzem zapytania.",{"a":1278,"b":1281,"caption":1284},{"src":1279,"alt":1280,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Flistings.webp","Lista ofert w oknie przeglądarki, z zakładkami rodzaju nieruchomości, panelem ośmiu filtrów i pierwszym rzędem trzech ofert",{"src":1282,"alt":1283,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fphone.webp","Granatowe menu na telefonie z siedmioma linkami, przyciskiem kontaktu oraz kaflami z numerem telefonu i adresem e-mail","Po lewej: lista ofert z filtrami. Po prawej: menu na telefonie.",[1286],{"title":1287,"body":1288,"figures":1289},"Do zapytania zawsze jedno dotknięcie","Nikt nie kupuje mieszkania na stronie internetowej, tylko pisze do agenta. Dlatego oferta trzyma ten krok w zasięgu ręki. Po przewinięciu zdjęć na dole ekranu zostają nazwa mieszkania i jeden przycisk, a formularz, do którego prowadzą, otwiera się z już zaczętą wiadomością.",{"ratio":313,"items":1290},[1291,1295,1299],{"src":1292,"alt":1293,"caption":1294,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fenquiry-1.webp","Oferta na telefonie, która zaczyna się od nazwy apartamentu, wiersza z ceną i pierwszych zdjęć galerii","Oferta otwiera się zdjęciami.",{"src":1296,"alt":1297,"caption":1298,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fenquiry-2.webp","Ta sama oferta niżej na telefonie, z kartami szczegółów i paskiem na dole, na którym są nazwa mieszkania i przycisk zapytania","Niżej na ekranie zostają nazwa mieszkania i jeden przycisk.",{"src":1300,"alt":1301,"caption":1302,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fenquiry-3.webp","Formularz zapytania na telefonie, z polami na imię, numer telefonu i e-mail oraz wiadomością, w której jest już nazwa apartamentu","Formularz zaczyna wiadomość od nazwy mieszkania.",{"src":1304,"alt":1305,"caption":1306,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fproperty.webp","Strona oferty w oknie przeglądarki i na telefonie, z nazwą apartamentu, wierszem z ceną i galerią trzech zdjęć","Strona oferty na laptopie i na telefonie.","pomorskie-horyzonty","work-pl\u002Fpomorskie-horyzonty","Biuro nieruchomości: strona z katalogiem ofert i spokojnym, nadmorskim wyglądem dla rodzinnej firmy z Trójmiasta.","IWKl1i8SRLeFggKsx9DKV8mCQ9exqoNFDftVc6N84gk",{"id":1312,"title":1313,"caseStudy":255,"category":638,"client":1314,"cover":1315,"coverTall":255,"demo":256,"disciplines":1319,"extension":262,"filters":1320,"intro":1321,"live":1322,"meta":1323,"order":192,"published":121,"role":295,"scope":1324,"shortPage":1325,"slug":1379,"stem":1380,"summary":1381,"timeline":255,"type":353,"year":277,"__hash__":1382},"workPl\u002Fwork-pl\u002Fposypkowo.yml","Posypkowo","Posypkowo Kolorowo",{"src":1316,"alt":1317,"caption":1318,"tone":254},"\u002Fwork\u002Fposypkowo\u002Fcover.webp","Strona główna Posypkowo Kolorowo w oknie przeglądarki, z miseczkami lodów, oraz katalog produktów na telefonie, na ciemnobrązowym tle","Strona główna, a na telefonie katalog.",[638,259],[290,265],"Posypkowo Kolorowo od 2006 roku dostarcza lodziarniom posypki, sosy i dekoracje. Zaprojektowałem sklep internetowy firmy: katalog całego asortymentu, karty produktu ze sprzedażą na opakowania, koszyk, do którego zawsze jest jedno dotknięcie, i kasę, która mieści się na jednej stronie.","https:\u002F\u002Fposypkowokolorowo.pl",{},"Sklep internetowy \u002F Karty produktu \u002F Kasa",{"notes":1326,"pair":1327,"details":1335,"full":1375},"Zamawiają tu ludzie, którzy prowadzą lodziarnię i wiedzą, po co przyszli. Dlatego sklep nie przekonuje, tylko od razu prowadzi do półki: katalog otwiera się produktami z cenami, kategorie z boku mówią, ile produktów mieści każda z nich, a posypkę można włożyć do koszyka prosto z listy. Historia firmy ma własną stronę, dla tych, którzy chcą ją poznać.",{"a":1328,"b":1331,"caption":1334},{"src":1329,"alt":1330,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fcatalogue.webp","Katalog w oknie przeglądarki, z polem wyszukiwania i kategoriami z liczbą produktów po lewej oraz pierwszym rzędem produktów z cenami",{"src":1332,"alt":1333,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fphone.webp","Menu na telefonie z przyciskami logowania i rejestracji, pięcioma linkami i pierwszymi kategoriami produktów","Po lewej: katalog z kategoriami. Po prawej: menu na telefonie.",[1336,1353,1366],{"title":1337,"body":1338,"figures":1339},"Każde opakowanie ma swoją cenę","Lodziarnia nie kupuje posypki, tylko jej kilogram albo dziesięciokilogramowy karton. Dlatego opakowanie jest pierwszym wyborem na karcie produktu, a każda wielkość pokazuje swoją cenę, zanim cokolwiek trafi do koszyka. Katalog pokazuje, od jakiej kwoty zaczyna się cena, a koszyk obok sumy zlicza wagę zamówienia.",{"ratio":313,"items":1340},[1341,1345,1349],{"src":1342,"alt":1343,"caption":1344,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fpath-1.webp","Katalog na telefonie z przyciskiem filtrów, liczbą produktów i dwoma kaflami produktów, z których jeden ma cenę od 48,33 zł","Katalog pokazuje, od jakiej kwoty zaczyna się każda cena.",{"src":1346,"alt":1347,"caption":1348,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fpath-2.webp","Karta produktu na telefonie z ceną, dwiema wielkościami opakowania, każdą z własną ceną, polem ilości i przyciskiem dodania do koszyka","Karta produktu: wybierasz opakowanie, widzisz jego cenę.",{"src":1350,"alt":1351,"caption":1352,"content":306,"tone":254,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fpath-3.webp","Koszyk na telefonie z jednym produktem, wielkością opakowania i ilością, wagą koszyka, sumą i przyciskiem przejścia do kasy","Koszyk sumuje wagę i kwotę.",{"label":702,"title":1354,"body":1355,"figures":1356},"Zaczęło się od katalogu","Pierwsza wersja strony była katalogiem: karta produktu miała zdjęcie, nazwę i jeden przycisk, „Zapytaj o cenę”. Sklep zamienił to pytanie w odpowiedź. Dziś produkt zaczyna od ceny każdego opakowania, a zamówienie trafia do koszyka zamiast do skrzynki mailowej.",{"items":1357},[1358,1362],{"src":1359,"alt":1360,"caption":1361,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fbefore.webp","Pierwsza wersja karty produktu ze zdjęciem, nazwą Ruby Crunch, jedną linią opisu i przyciskiem „Zapytaj o cenę”","Przed: jeden przycisk, „Zapytaj o cenę”.",{"src":1363,"alt":1364,"caption":1365,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fafter.webp","Działająca dziś karta produktu ze zdjęciem, ceną, dwiema wielkościami opakowania, polem ilości i przyciskiem dodania do koszyka","Po: cena, opakowanie i koszyk.",{"label":337,"title":1367,"body":1368,"figures":1369},"Jeden kafel wszędzie, gdzie jest produkt","Sklep jest zbudowany z niewielkiego zestawu elementów. Produkt wygląda tak samo na stronie głównej, w katalogu i pod innym produktem: kategoria, nazwa, cena i mały przycisk koszyka. Przyciski pracują w parach: wypełniony służy do kroku, który posuwa zamówienie naprzód, a cichy do powrotu.",{"items":1370},[1371],{"src":1372,"alt":1373,"caption":1374,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fcomponents.webp","Plansza z elementami sklepu, na której są kafel produktu, cena z wielkościami opakowania i polem ilości, filtry kategorii, przyciski na białym i na ciemnobrązowym tle oraz pola kasy z dwiema opcjami dostawy","Kafel produktu, wybór opakowania, filtry, przyciski i pola kasy.",{"src":1376,"alt":1377,"caption":1378,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fcheckout.webp","Kasa w oknie przeglądarki, z danymi do dostawy i opcjami dostawy po lewej oraz podsumowaniem zamówienia po prawej, a obok ta sama kasa na telefonie","Kasa: jedna strona, z podsumowaniem zamówienia obok formularza.","posypkowo","work-pl\u002Fposypkowo","Sklep hurtowy dla lodziarni: posypki z ceną za każde opakowanie, od katalogu po kasę na jednej stronie.","a9CmjBdo777uAyfb4drudnJURBRRR5plYeGOCGE8OEA",1791205812534]