Realizacje /

podnod

podnod

Jeden odtwarzacz podcastów na wszystkie twoje urządzenia: podcasty, kolejka i miejsce w każdym odcinku zsynchronizowane wszędzie i przejmowane w pół zdania.

Marka

podnod

Zakres

, ,

Rok

Logo podnod, „pod” na biało nad „nod” na szaro, na czarnym tle, z „pod” kapie pomarańczowa galaretka

01 – Historia

Zaczynasz na jednym. Kończysz na drugim.

Nikt nie słucha tylko na jednym urządzeniu. Dojazd to telefon, popołudnie to laptop, wieczór to to, co akurat leży najbliżej. Większość aplikacji do podcastów żyje na jednym z nich, a wszędzie indziej zaczynasz od nowa: szukasz podcastu i przewijasz do momentu, na którym stanęło.

podnod to jeden odtwarzacz na wszystkie: web, macOS, Windows, Linux i Android, a iOS jest w drodze. Zbudowany na jednym design systemie i jednej bazie kodu, więc wszędzie wygląda i działa tak samo. Zaloguj się, a wszystko pójdzie za tobą: podcasty, kolejka, miejsce w każdym odcinku, to, co już przesłuchane, nawet ustawienia. Działa też bez konta – logowanie jest tylko do synchronizacji.

Każde urządzenie. Jedna kolejka. Ta sama sekunda.

02 – Przekazywanie

Przekaż w pół zdania.

podnod na telefonie: nad nawigacją wiersz informuje, że odcinek gra w Safari na macOS, obok przycisk do przejęcia odtwarzania

Każde urządzenie, na którym się logujesz, pokazuje, co grają pozostałe. Jedno kliknięcie przejmuje odtwarzanie od tej samej sekundy: laptop cichnie, telefon gra dalej, a ty nie słyszysz dwa razy tego samego zdania i żadnego nie gubisz.

Trzy ruchome paski znaczą, że coś gra właśnie teraz; nieruchoma kropka – że zostało zapauzowane. Ta różnica ma znaczenie, bo przejęcie aktywnej sesji zatrzymuje drugie urządzenie, a przejęcie zapauzowanej niczego nie zatrzymuje. Wiersz pojawia się tylko wtedy, gdy jest co przejmować: zapauzowana sesja znika po pięciu minutach, a skończonego odcinka podnod nigdy nie proponuje.

03 – Liczy się jako przesłuchany

Reklamy na końcu się nie liczą.

Mnóstwo odcinków kończy się kilkoma minutami reklam i podziękowań, a mało kto dotrwa do końca. W większości aplikacji odcinek zostaje przez to na zawsze w połowie i zapycha kolejkę oraz listę nowości. podnod i tak oznacza go jako przesłuchany, kiedy zatrzymasz go wystarczająco blisko końca, więc sam znika z nowości i z kolejki – na wszystkich urządzeniach naraz.

Jak blisko – to już zależy od ciebie: tylko na samym końcu albo gdy zostaje 10 sekund, 30 sekund, minuta, dwie lub pięć. Odtwarzanie nigdy nie jest ucinane; słuchaj dalej, a odcinek zagra do prawdziwego końca. W podcastach z długim intro lub outro możesz też pomijać stały fragment, a okno liczy się od tego miejsca, więc nic nie liczy się podwójnie.

Ustawienia odtwarzania w podnod: odtwarzanie ciągłe, cofanie przy wznawianiu i „uznaj za ukończony po” ustawione na 30 s. Do wyboru są też „tylko na końcu”, 10 s, 1 min, 2 min i 5 min
Ustawienia → odtwarzanie, na podnod.eu

04 – Pomysł

Zero koloru marki.

podnod jest monochromatyczny celowo: czerń, biel i kilka szarości, ani jednego koloru marki. W logo pod leży nad nod, a drugie słowo jest lekko przechylone, jak głowa kiwająca w rytm. Nazwę wszędzie pisze się małą literą, nawet na początku zdania, a check w buildzie wywala się na każdej innej pisowni.

Pod spodem system jest soft-brutalistyczny. Głębię daje rampa czterech płaszczyzn, każda o stopień jaśniejsza od poprzedniej – nigdy cień. W całym produkcie nie ma ani grama rozmycia, a test wywala build, jeśli wkradnie się jakakolwiek powierzchnia z efektem matowego szkła. Każda kontrolka to pigułka. Każde słowo niesie Inter z ciasnym odstępem między literami, a cały kolor wnoszą okładki.

Logo podnod na czarnym tle
Na czerni
Logo podnod na jasnoszarym tle
Na jasnej szarości

Płótno

#0B0B0B

Papier

#F1F1F1

Jasny pudrowy róż

#F3CCCB

Jasna morela

#F5D5B4

Jasny błękit

#C4DCF2

05 – Jedyny kolor

Wybierasz ty. Albo wybiera się sam.

Jedyny kolor, jaki podnod wpuszcza, to ten, który wybiera słuchacz: akcent wypełniający przycisk odtwarzania, pasek postępu i kropkę nieprzesłuchanego odcinka. Odcieni jest siedem i wszystkie są blade celowo. Akcent to zwykle wypełnienie z prawie czarnym tekstem, a ciemniejszy odcień przestałby się wyróżniać jako jedyny podświetlony kształt na czarnym ekranie.

Domyślnie ustawiony jest mix, który przy każdym otwarciu aplikacji podnod losuje świeży odcień – ale nigdy zwykły papier, bo to wyglądałoby, jakby funkcja się wysypała. Kontrast każdego odcienia względem każdej powierzchni, na której ląduje, sprawdzają testy, a nie oko.

Ustawienia podnod: kursor wybiera po kolei każdy odcień akcentu, a zaznaczona próbka i przełączniki poniżej zmieniają się na ten kolor
Ustawienia → akcent, na podnod.eu

06 – Pasek menu

Mały ciekawski kumpel.

Na desktopie podnod mieszka w pasku menu jako malutka postać: kółko z logo z dwojgiem wysokich oczu. Kiedy pracujesz, zerka na twój kursor – tylko zerka, nigdy się nie gapi. Kiedy nic nie gra, czeka jako sam kontur. Wciśnij play, a wypełnia się i kiwa głową w rytm odcinka.

Jest rysowany, nie wczytywany. Każda klatka powstaje w Ruście z kółek i kapsuł, piętnaście razy na sekundę, gdy kiwa, i trafia do macOS jako szablon, więc wygląda dobrze na jasnym pasku menu, na ciemnym i pod podświetleniem menu. Linux dostaje oba nastroje, ale bez ruchu: jego tray zapisuje każdą klatkę na dysk, a kiwanie oznaczałoby piętnaście zapisów pliku na sekundę przez cały odcinek. Poproś komputer o mniej ruchu, a kumpel siedzi nieruchomo i patrzy prosto przed siebie. Wypełniony nadal znaczy, że coś gra.

Zbliżenie paska menu: towarzysz podnod, kółko z dwojgiem oczu, wodzi wzrokiem za krążącym kursorem; gdy rusza odtwarzanie, kółko się wypełnia i kiwa w rytm
Patrzy, a potem kiwa w rytm

07 – Dymek

Oderwij odtwarzacz od paska menu.

Kliknij buźkę, a zwisa z niej mały odtwarzacz: okładka, miejsce w odcinku i trzy przyciski. Złap i pociągnij. Na początku stawia opór. Odtwarzacz odrywa się od ikony, a jego dzióbek zostaje do niej przypięty, rozciąga się i przechyla, gdy ciągniesz. Po 34 pikselach puszcza i zamienia się w małe okienko, które unosi się nad wszystkim innym, jak długo chcesz.

Przyciągnij go z powrotem, a najpierw zapyta. W promieniu 110 pikseli od domu z jego krawędzi zaczyna wybrzuszać się dzióbek w stronę ikony, najpierw powoli, potem nagle, więc wygląda to na przyciąganie, a nie przeskok. Puść, a odtwarzacz leci do domu, podczas gdy dzióbek odrasta. Odtwarzacz, jego dzióbek i kontur to jeden kształt, a przyczepianie to jedna liczba idąca od jedynki do zera, za którą podążają kontur, zawartość i przycisk, więc nigdy nie ma klatki z dwoma kształtami na ekranie.

Kilku rzeczy brakuje tu celowo: nie ma prędkości, wyłącznika czasowego ani przewijania. To szybki podgląd i trzy kliknięcia, a przyciski przeskoku pokazują długości przeskoku ustawione przez ciebie.

Pulpit: kliknięcie twarzy podnod na pasku menu otwiera mały ciemny odtwarzacz ze wskaźnikiem skierowanym na ikonę; odciągany odtwarzacz rozciąga wskaźnik, aż ten się odrywa, a odtwarzacz unosi się nad oknem; przeniesiony z powrotem wypuszcza wskaźnik w stronę ikony i wraca na swoje miejsce
Oderwany, noszony po ekranie, z powrotem w domu

08 – Ruch

Okładka podróżuje. Reszta nie musi.

Skoro cienie i rozmycie odpadają, ruch zostaje jedynym sposobem, żeby powiedzieć, że to, co wciskasz, zmieniło się w to. Dlatego jest dawkowany ostrożnie. Otwórz odtwarzacz, a jedna okładka przelatuje z miniodtwarzacza do dużej ramki, podczas gdy cała reszta stoi w miejscu; zamknij go, a wraca tą samą drogą, z miejsca, do którego zdążyła dolecieć. Przełączanie zakładek, czyli to, co ludzie robią najczęściej, nie ma żadnej animacji.

Naciskasz play i od razu widać, że coś się dzieje: w miejscu ikony odtwarzania pojawia się pierścień, a w miejscu czasu – „buforowanie · od 12:04”. Przycisk dalej reaguje, więc drugie naciśnięcie anuluje start, zamiast dorzucać kolejny do kolejki. Wiersz, którego słuchasz, pokazuje „Odtwarzane” z trzema małymi paskami i zachowuje długość odcinka. Skończony odcinek przez sekundę pokazuje znacznik odsłuchania, zanim jego wiersz się zwinie, więc to zniknięcie wygląda na skutek, a nie na błąd.

Ograniczenie ruchu działa stopniowo, a nie zero-jedynkowo: dekoracje znikają, przesunięcia zamieniają się w przenikanie, a wszystko, co niesie informację, zamienia pętlę na nieruchomy sygnał, który mówi to samo.

Aplikacja webowa podnod: po wciśnięciu odtwarzania w miniodtwarzaczu przy odcinku pojawia się „Playing”; miniodtwarzacz rozwija się w pełny odtwarzacz, a okładka rośnie na swoje miejsce, po czym odtwarzacz znów się zwija
Odtwórz, otwórz, zamknij. podnod.eu/app

09 – Obrazek na każdy dzień

Jutrzejsza strona główna powstaje tej nocy.

Strona główna otwiera się jednym wyróżnionym podcastem. Codziennie o 05:40 podnod wybiera nowy, a żaden podcast nie wraca przez 90 dni. W nocy podnod rysuje mu obrazek. gpt-image-2 od OpenAI dostaje okładkę podcastu, jego kategorię i opis, a do tego prośbę o szeroką scenę w kolorach, fakturach i motywach tej okładki: bez napisów i z lewą jedną trzecią kadru wolną pod nagłówek.

Potem animuje go Seedance 2.0 mini od ByteDance, z briefem, który prosi o powolny, miękki ruch: „nie powinno się dać rozpoznać, którą sekundę klipu oglądasz”. Model traktuje pierwszą i ostatnią klatkę jako dwa różne momenty, więc dostaje obrazek tylko raz, a pętlę domyka sam podnod, nakładając płynnie początek klipu na jego koniec. Podcast trafia na stronę dopiero wtedy, gdy jego obrazek jest gotowy. Jeśli w nocy coś się wysypie, zostaje wczorajszy wybór, a strona schodzi stopniowo z pętli na nieruchomy kadr, potem na rozmytą okładkę podcastu, potem na czystą czerń – nigdy na zepsuty obrazek.

Jedyna bezwzględna zasada: żadnych ludzi. Modele wideo odmawiają animowania kadru, w którym widzą prawdziwą osobę, a niektóre dają to znać tylko tym, że po cichu nie zwracają żadnego wideo – więc obrazek pełen prowadzących po prostu nigdy by nie ruszył. Uczciwość też jest wpisana w projekt: etykieta „grafika wygenerowana dla dzisiejszego wyboru” pojawia się tylko wtedy, gdy obrazek naprawdę jest wygenerowany, więc własna okładka wydawcy nigdy nie udaje dzieła maszyny.

Sekcja hero strony głównej podnod.eu: wygenerowany obraz tablicy taktycznej i piłki w morskim kolorze wyróżnionego podcastu, pionki na tablicy powoli się przesuwają; nad obrazem tytuł podcastu i etykieta z informacją, że grafikę animowano specjalnie dla dzisiejszego wyboru
Wybór z 29 września 2026, narysowany i zanimowany w nocy

10 – Okładki, które oddychają

Ludzie zastygają. Reszta może się ruszać.

Okładka wyróżnionego podcastu dostaje to samo, tylko jako cinemagraf: „zdjęcie, w którym ruszają się wybrane rzeczy, a każda osoba jest idealnie nieruchoma”. Ludzi i napisy na okładce traktujemy jak nadruk, więc prowadzący nigdy nie mrugają, a tytuły nigdy się nie rozpływają. Klip zamienia się w animowany WebP z ośmioma klatkami na sekundę, a pętla, która nie domyka się sama, dostaje pół sekundy swojego początku nałożone płynnie na koniec.

To czysty dodatek. Pojawia się na nieruchomym kadrze dopiero wtedy, gdy ten się załaduje, w ogóle się nie pobiera, jeśli ktoś poprosił o mniej ruchu, i nigdy nie trafia tam, gdzie ruchomy obrazek by coś zepsuł: do powiadomień, kart udostępniania ani na ekran blokady. Gdy wydawca zmienia grafikę, animacja od razu znika.

11 – Słuchacze

Bez zdjęć, bez twarzy. Nikogo nie narysujemy źle.

W podnod nigdzie nie wrzucisz własnego zdjęcia, więc każde konto dostaje losowo i na stałe jeden z 24 narysowanych przedmiotów ze studia nagraniowego: kasetę, mikrofon, szpulę, megafon. Każdy to jeden odcień w trzech tonach: ciemna płytka, jasny przedmiot i średni ton na detale, a wycięcia przechodzą przez płytkę na wylot, więc już sam kontur odróżnia dwie osoby przy 24 pikselach.

Nie ma ciała, któremu trzeba by przypisać płeć, ani skóry, której kolor można źle trafić, a z imienia nic nie jest zgadywane. Tak jak okładki, to obrazki, a nie farba interfejsu – i tylko dlatego monochromatyczny system wpuszcza ich kolor.

24 awatary słuchaczy podnod: sprzęt studyjny, od słuchawek, radia i boomboxa po szpulę, megafon i mikrofon pojemnościowy, każdy narysowany na ciemnym kółku w jednym przygaszonym odcieniu
Cała dwudziestka czwórka

12 – Budowa

Jeden design system. Wszędzie.

Telefon, komputer i web mają jeden układ i jedną kolejkę, a aplikacja jest ciemna z założenia, żeby to okładki mówiły.

Arkusz z odcinkami

Arkusz z odcinkami

Każdy nowy odcinek każdego obserwowanego podcastu na jednej stronie. Aplikacje do podcastów zwykle segregują odcinki według audycji; podnod zaczyna od dnia, bo „co nowego?” to pytanie, z którym ludzie ją otwierają.

Wyszukiwanie

Wyszukiwanie

Podcasty, odcinki i ludzie – wyniki już w trakcie pisania. Bez przycisku wyszukiwania i bez strony wyników: gdy trzymasz telefon jedną ręką w tramwaju, każde dodatkowe stuknięcie to powód, żeby odpuścić.

Biblioteka

Biblioteka

Subskrypcje, pobrane odcinki i kolejka – dokładnie tam, gdzie je zostawiasz. Najmniej ekscytujący ekran do zaprojektowania i ten, po którym ocenia się aplikację: zgub komuś raz miejsce w odcinku, a reszty już ci nie wybaczy.

Stonowany odtwarzacz

Stonowany odtwarzacz

Prędkość, przeskakiwanie, rozdziały i wyłącznik czasowy, a do tego pamięta miejsce, w którym kończysz. Jest stonowany, bo okładka jest głośna, a odtwarzacz, który konkuruje z grafiką, przegrywa.

Powiadomienia

Powiadomienia

Ping w chwili, gdy podcast, na którym ci zależy, wypuszcza coś nowego. To jedyny dobry powód, żeby aplikacja do podcastów komukolwiek przeszkadzała.

Nowości co rano

Nowości co rano

Odcinki dnia od wszystkich obserwowanych, w kolejności, w jakiej wpadły. Bez rankingu i bez „dla ciebie”: kolejność pojawiania się to jedyny algorytm, który wszyscy już rozumieją.

W webie ten sam arkusz otwiera się szeroko: wyróżniony podcast na górze, cały katalog pod spodem i rankingi aktualizowane co tydzień.

Strona główna podnod.eu z wyróżnionym podcastem i wysuwanym panelem
podnod.eu – arkusz
Rankingi popularnych podcastów na podnod.eu
Rankingi tego tygodnia
Plansza „same on all six” na podnod.eu: kliknięcie plakietki każdej platformy wysuwa jej baner – iOS, Android, macOS, Windows, Linux i przeglądarka

Strona główna kończy się jedną płytką: sześć pigułek i panel z obrazkiem, który wsuwa pod nie baner każdej platformy.

Banery są skompresowane do 13–25 KB każdy, 105 KB za całą szóstkę, więc wszystkie ładują się od razu i żadna pigułka nie otwiera się na pustej płytce. Pół sekundy pustki wystarczy, żeby „na każdym urządzeniu” brzmiało jak obietnica, a nie fakt.

13 – Co zostało

Każdy podcast, każde urządzenie, jedna kolejka.

Pięć platform już działa, iOS w drodze, jedna kolejka i jedno miejsce w każdym odcinku, które idą za tobą na wszystkie z nich, a do wyboru ponad 113 000 podcastów.

Marka nie ma własnego koloru, resztę wnoszą okładki. Tym, co sprzedaje podnod, jest moment, gdy zdanie leci dalej na laptopie dokładnie od sekundy, w której zatrzymało się na telefonie. Kiedy sztuczkę robi produkt, zadaniem marki jest nie wchodzić mu w drogę.

Poprzedni: