Trabalho /

podnod

podnod

Um só leitor de podcasts para todos os dispositivos que usas: os teus programas, a tua fila e o ponto onde ficaste em cada episódio sincronizados em todo o lado, e passados de um para o outro a meio da frase.

Marca

podnod

Disciplinas

, ,

Ano

O logótipo do podnod, «pod» a branco por cima de «nod» a cinzento, num fundo preto, com gelatina laranja a pingar do «pod»

01 — A história

Começa num dispositivo. Acaba noutro.

Ninguém ouve num só dispositivo. A viagem para o trabalho é no telemóvel, a tarde é no portátil, a noite é no que estiver mais à mão. A maioria das apps de podcasts vive num deles e, em todos os outros, começas do zero: à procura do programa e a arrastar a barra até onde estavas.

O podnod é um só leitor para todos: web, macOS, Windows, Linux e Android, com iOS a caminho, feito a partir de um só design system e de uma só base de código para ter o mesmo aspeto e o mesmo comportamento em cada um. Inicia sessão e tudo vai contigo: os teus programas, a tua fila, onde vais em cada episódio, o que já acabaste, até as tuas definições. Também funciona sem conta; iniciar sessão serve só para sincronizar.

Todos os dispositivos. Uma fila. O mesmo segundo.

02 — Passagem

Muda de dispositivo a meio da frase.

O podnod num telemóvel: acima da navegação, uma linha indica que um episódio está a tocar no Safari em macOS, com um botão para retomar

Cada dispositivo com sessão iniciada mostra o que os outros estão a tocar. Um toque retoma exatamente no mesmo segundo: o portátil cala-se, o telemóvel continua, e nunca ouves a mesma frase duas vezes nem perdes nenhuma.

Três barras em movimento querem dizer que está a tocar agora; um ponto parado quer dizer que o deixaste em pausa. A diferença importa, porque retomar uma sessão ativa faz parar o outro dispositivo e retomar uma em pausa não faz parar nada. A linha só aparece quando há algo que valha a pena retomar: uma sessão em pausa desaparece ao fim de cinco minutos, e um episódio terminado nunca é sugerido.

03 — Conta como terminado

Os anúncios no fim não contam.

Muitos episódios acabam com uns minutos de anúncios e créditos, e quase ninguém os ouve até ao fim. Na maioria das apps, isso deixa o episódio a meio para sempre, a entupir a fila e a lista de novos. O podnod marca-o como ouvido na mesma quando paras perto o suficiente do fim, por isso sai sozinho de «Novos» e da fila, e em todos os dispositivos ao mesmo tempo.

Quão perto, decides tu: só mesmo no fim, ou quando faltam 10 segundos, 30 segundos, um minuto, dois ou cinco. Nunca corta a reprodução; se continuares a ouvir, toca até ao fim verdadeiro. Para programas com intro ou outro longos, também podes saltar um troço fixo, e a margem conta a partir daí, para nunca ser contada duas vezes.

Definições de reprodução do podnod: reprodução contínua, recuar ao retomar e contar como terminado quando faltam 30 s, com as opções só no fim, 10 s, 1 min, 2 min e 5 min
Definições → reprodução, no podnod.eu

04 — A ideia

Zero cor de marca.

O podnod é monocromático de propósito: preto, branco e uns quantos cinzentos, e nem um único tom de marca. O logótipo empilha pod sobre nod, com a segunda palavra ligeiramente inclinada, como uma cabeça a acenar ao ritmo. O nome escreve-se em minúsculas em todo o lado, mesmo no início de uma frase, e uma verificação no build falha com qualquer outra grafia.

Por baixo, o sistema é soft-brutalista. A profundidade é uma escala de quatro placas, cada uma um passo mais clara do que a anterior, nunca uma sombra. Não há desfoque em lado nenhum do produto, e um teste faz falhar o build se uma superfície fosca se infiltrar. Todos os controlos são pílulas. A Inter leva todas as palavras, com espaçamento apertado, e as capas trazem a cor toda.

Logótipo do podnod sobre preto
Sobre preto
Logótipo do podnod sobre cinzento-claro
Sobre cinzento-claro

Fundo

#0B0B0B

Papel

#F1F1F1

Tom blush

#F3CCCB

Tom alperce

#F5D5B4

Tom céu

#C4DCF2

05 — A única cor

Escolhes tu. Ou escolhe-se sozinha.

A única cor que o podnod deixa entrar é a que quem ouve escolhe: o destaque que preenche o botão de play, a linha de progresso e o ponto de não ouvido. Há sete tons, todos pálidos de propósito. O destaque é sobretudo um preenchimento com texto quase preto por cima, e um tom mais escuro deixaria de se ler como a única forma acesa num ecrã preto.

A predefinição é mix, que escolhe um tom novo sempre que o podnod abre, e nunca o papel simples, que daria a ideia de que a funcionalidade tinha falhado. O contraste de cada tom é medido com todas as superfícies onde aparece, nos testes e não a olho.

Definições do podnod: o cursor escolhe cada tom de destaque à vez, e a amostra selecionada e os interruptores por baixo ficam com essa cor
Definições → destaque, no podnod.eu

06 — A barra de menus

Um amiguinho curioso.

No computador, o podnod vive na barra de menus como uma personagem minúscula: o círculo do logótipo com dois olhos altos. Vai seguindo o teu cursor enquanto trabalhas, sempre de relance, nunca de olhos fixos. Sem nada a tocar, espera só em contorno. Carrega no play e ele enche-se e abana a cabeça ao ritmo do teu episódio.

É desenhado, não carregado. Cada frame é traçado em Rust a partir de círculos e cápsulas, quinze vezes por segundo enquanto abana a cabeça, e entregue ao macOS como template, para ficar bem numa barra de menus clara, numa escura e por baixo do destaque do menu. O Linux fica com os dois estados, mas sem o movimento: a área de notificação dele escreve cada frame em disco, e um aceno seriam quinze escritas de ficheiro por segundo durante um episódio inteiro. Pede ao computador menos movimento e o boneco fica quieto, a olhar em frente. Preenchido continua a querer dizer que está a tocar.

Grande plano de uma barra de menus: o boneco do podnod, um anel com dois olhos, segue com o olhar o cursor que anda às voltas; a reprodução começa e ele enche-se e abana a cabeça ao ritmo
Primeiro a espreitar, depois a abanar a cabeça

07 — A bolha

Tira o leitor da barra de menus.

Clica na cara e fica-lhe pendurado um pequeno leitor: a capa, onde vais e três botões. Agarra-o e puxa. Ao início, resiste. O leitor afasta-se do ícone enquanto o bico dele fica preso lá, a esticar e a inclinar-se à medida que puxas. Passados 34 píxeis, solta-se e passa a ser uma pequena janela que flutua por cima de tudo o resto, durante o tempo que quiseres.

Leva-o de volta e ele pede licença primeiro. A menos de 110 píxeis de casa, começa a sair-lhe da margem um bico em direção ao ícone, devagar e depois de uma vez, para se ler como um puxão e não como um encaixe seco. Larga-o e ele volta para casa a voar enquanto o bico cresce outra vez. O leitor, o bico e o contorno são uma só forma, e encaixar é um único número a ir de um para zero, que o contorno, o conteúdo e o botão seguem todos, por isso nunca há um frame com duas formas no ecrã.

O que fica de fora é de propósito: sem velocidade, sem temporizador de sono, sem barra para arrastar. É uma espreitadela e três toques, e os botões de saltar mostram os teus próprios intervalos de salto.

Um ambiente de trabalho: clicar na cara do podnod na barra de menus abre um pequeno leitor escuro com um bico apontado ao ícone; o leitor é puxado, o bico estica, solta-se e o leitor flutua por cima de uma janela; levado de volta, cresce um bico em direção ao ícone e o leitor volta para casa a voar
Arrancado, levado a passear, de volta a voar

08 — Movimento

A capa viaja. O resto fica quieto.

Com as sombras e o desfoque postos de parte, o movimento é a única forma que sobra de dizer que aquilo em que carregaste se transformou nisto. Por isso, é gasto com cuidado. Abre o leitor e uma capa viaja do mini leitor para a moldura grande enquanto tudo o resto fica parado; fecha-o e ela volta pelo mesmo caminho, a partir de onde tiver chegado. Mudar de separador, o que as pessoas mais fazem, não tem animação nenhuma.

Carrega no play e vês que está a trabalhar: um anel onde estava o ícone de play e «buffering · from 12:04» onde estava o tempo. O toque continua ativo, por isso um segundo toque cancela o arranque em vez de pôr outro em fila. A linha que estás a ouvir diz «Playing» com três barrinhas e mantém a duração. Um episódio terminado mostra a marca de já ouvido durante um segundo antes de a linha se recolher, para que a saída se leia como uma consequência e não como uma falha.

O movimento reduzido é gradual, não um interruptor: a decoração desaparece, as viagens passam a um fundido, e tudo o que transmite informação troca o loop por um sinal parado que diz o mesmo.

A app web do podnod: carrega-se no play no mini leitor e a linha do episódio passa a dizer «Playing»; o mini leitor abre-se no leitor completo enquanto a capa cresce até ao seu lugar, e depois volta a fechar
Play, abrir, fechar. podnod.eu/app

09 — Uma imagem por dia

A página inicial de amanhã desenha-se esta noite.

A página inicial abre com um programa em destaque. Todas as manhãs, às 05h40, é escolhido um novo, e nenhum programa volta antes de 90 dias. Durante a noite, o podnod faz-lhe um desenho. O gpt-image-2 da OpenAI recebe a capa do próprio programa, a categoria e a descrição, e é-lhe pedida uma cena larga na paleta, nas texturas e nos motivos da própria capa: sem letras, e com o terço da esquerda sossegado para o título.

Depois, o Seedance 2.0 mini da ByteDance anima-a, com um brief que pede movimento lento e suave: «deve ser impossível perceber que segundo do clip estás a ver». O modelo lê um primeiro e um último frame como dois momentos diferentes, por isso recebe a imagem uma só vez, e é o próprio podnod que fecha o loop, ao fundir o início do clip por cima do fim. Um programa só vai para o ar depois de a imagem existir. Uma noite que falhe deixa no lugar a escolha de ontem, e a página desce do loop para a imagem parada, para a capa do programa desfocada, para preto simples, nunca para uma imagem partida.

A única regra absoluta: nada de pessoas. Os modelos de vídeo recusam-se a animar um frame que leiam como uma pessoa real, e alguns só o dizem em silêncio, sem devolver vídeo nenhum, por isso uma imagem cheia de apresentadores simplesmente nunca se mexeria. A honestidade também vem de origem: o rótulo «artwork generated for today’s pick» só aparece quando a imagem é mesmo gerada, para que a capa do próprio editor nunca passe por feita à máquina.

O hero da página inicial do podnod.eu: uma imagem gerada de um quadro tático e uma bola de futebol no verde-azulado do programa em destaque, com as peças do quadro a mexer-se devagar, por baixo do título do programa e de um rótulo a dizer que a imagem foi animada para a escolha do dia
A escolha de 29 de setembro de 2026, desenhada e animada durante a noite

10 — Capas que respiram

As pessoas ficam quietas. O resto pode mexer-se.

A capa do programa em destaque recebe o mesmo tratamento, como cinemagraph: «uma fotografia em que algumas coisas escolhidas se mexem e todas as pessoas estão perfeitamente imóveis». As pessoas e as letras de uma capa são tratadas como tinta impressa, por isso os apresentadores nunca pestanejam e os títulos nunca derretem. O clip passa a WebP animado a oito frames por segundo, e um loop que não feche sozinho recebe meio segundo do início fundido por cima do fim.

É estritamente um extra. Só é desenhado por cima da imagem parada depois de esta carregar, nem sequer é descarregado para quem pediu menos movimento, e nunca é usado onde uma imagem em movimento estragaria alguma coisa: notificações, cartões de partilha, o ecrã de bloqueio. Quando um editor muda a imagem, a animação é retirada de imediato.

11 — Ouvintes

Sem fotos, sem caras, ninguém mal desenhado.

Não se carregam imagens em lado nenhum do podnod, por isso cada conta recebe um de 24 objetos de estúdio desenhados (uma cassete, um microfone, uma bobine, um megafone), ao calhas e para sempre. Cada um é uma só cor em três tons: uma base escura, um objeto suave e um tom intermédio para o detalhe, com os recortes a atravessar a base para que só a silhueta distinga duas pessoas a 24 píxeis.

Não há corpo a que dar género nem pele para errar, e nada é adivinhado a partir do teu nome. Tal como as capas, são imagens e não tinta da interface, e é só por isso que o sistema monocromático deixa entrar a cor delas.

Os 24 avatares de ouvinte do podnod, objetos de estúdio que vão de auscultadores, um rádio e um boombox a uma bobine, um megafone e um microfone de condensador, cada um desenhado num círculo escuro numa só cor suave
Os vinte e quatro

12 — A construção

Um sistema de design. Em todo o lado.

Telemóvel, computador e web partilham um layout e uma fila, e a app é escura de propósito para as capas falarem por si.

A folha

A folha

Todos os episódios novos de todos os programas que segues, numa só página. As apps de podcasts costumam arrumar os episódios por programa; o podnod começa antes pelo dia, porque o que há de novo é a pergunta com que as pessoas o abrem.

Pesquisa

Pesquisa

Programas, episódios e pessoas, encontrados enquanto escreves. Sem botão de pesquisa nem página de resultados: num telemóvel seguro com uma mão num elétrico, cada toque a mais é um motivo para desistir.

Biblioteca

Biblioteca

Subscrições, downloads e a fila, exatamente onde os deixaste. O ecrã menos entusiasmante de desenhar, e aquele pelo qual uma app é julgada: perde uma vez o sítio onde alguém ia e mais nada é perdoado.

O leitor fica discreto

O leitor fica discreto

Velocidade, saltos, capítulos e temporizador de sono, e lembra-se de onde paraste. Fica discreto porque a capa é que dá nas vistas, e um leitor que compete com a imagem perde.

Notificações

Notificações

Uma notificação no instante em que um podcast de que gostas lança algo novo. É a única boa razão para uma app de podcasts interromper alguém.

Novidades, todas as manhãs

Novidades, todas as manhãs

Os episódios do dia de todos os podcasts que segues, pela ordem em que chegaram. Sem rankings nem «Para ti»: a ordem de chegada é o único algoritmo que toda a gente já percebe.

Na web, a mesma folha abre-se em grande: um podcast em destaque no topo, o catálogo inteiro por baixo e tops atualizados todas as semanas.

Página inicial do podnod.eu com um podcast em destaque e a folha
podnod.eu — a folha
Tops de popularidade do podnod.eu
Os tops desta semana
O bloco «igual nas seis» no podnod.eu: ao carregar no botão de cada plataforma, entra a deslizar o banner dessa plataforma — iOS, Android, macOS, Windows, Linux e o browser

A página inicial acaba num só bloco: seis botões e um painel de imagem que faz deslizar, por baixo deles, o banner de cada plataforma.

Os banners foram reduzidos a entre 13 e 25 KB cada, 105 KB para os seis, por isso carregam todos logo à partida e nenhum botão abre um bloco vazio. Meio segundo em branco chega para que «em todos os dispositivos» soe a promessa e não a facto.

13 — O que ficou

Todos os podcasts, todos os dispositivos, uma só fila.

Cinco plataformas online e o iOS a caminho, uma só fila e o ponto onde ficaste em cada episódio a seguir-te em todas elas, e mais de 113 000 podcasts por onde escolher.

A marca não tem cor própria e deixa as capas tratarem do resto. O que vende o podnod é o momento em que uma frase continua no portátil no segundo exato em que parou no telemóvel. Quando é o produto que faz a magia, o trabalho da marca é sair-lhe da frente.

Anterior: