Como ler. A copy dos ecrãs é es-ES informal (tu); as anotações são em português e não vão para o ecrã. Cada moldura declara largura e estado da loja. Todas as direcções assumem o número de WhatsApp preenchido no config.ts — desenhar sem ele seria desenhar à volta de um bug.
Não tenho a logótipo. Não consigo abrir caminhos do teu disco. O AD nos ecrãs é um marcador tipográfico, não a marca. Nomes e preços de produto são exemplos dentro dos limites medidos (1,00–3,90 €); os 13 reais saem do ficheiro.
Três movimentos que as três partilham, porque são resposta aos problemas e não a gosto:
1 · Os 37 sem preço saem do fluxo. Deixam de ser fichas de produto entre as compráveis e passam a um bloco único, no fim, com nome e sem botão. O catálogo futuro continua visível e nomeado; deixa de custar rolagem.
2 · A manchete nomeia comida. O h1 actual fala só de bebida; as três abrem com bebida e comida caliente e básicos.
3 · O laranja cheio só aparece quando já há pedido. Com a nota a 0 €, nenhum elemento leva preenchimento forte — o botão de enviar está desenhado desligado. O «+» é contorno. Isto põe o critério 3 (≤ 8 preenchimentos, todos clicáveis) em 0–6 por ecrã, sem esforço.
As três são escuras, e isso é uma decisão, não falta de imaginação: o ecrã é olhado a 20 cm da cara num quarto escuro. Um fundo claro a 390 px às 3h é uma lanterna. Ver «descartadas», em baixo.
La nota é a loja como o papel onde apontas o que falta; a decisão fica em somar linhas até chegar aos 7 €. O ecrã tem a forma do que sai dele: uma nota escrita que o cliente envia ao Juan.
Preto quente, não grafite. Tinta 4,5:1+; filete a 10–16% de opacidade da tinta.
Archivo 800 / 500 / 400 — h1 34 px/0.96 −0.028em; produto 15,5 px 500; secundário 12–14,5 px. Space Mono 700 para preços e números (16 px) e para etiquetas em caixa alta (10,5 px, +0.12em). Duas famílias, ~38 kB com display:swap.
As 13 com preço são o corpo da página. As 37 passam a um bloco de nomes no fim, sem imagem, sem ficha, sem botão (ver 1e). Nada se esconde: continuam nomeadas e legíveis. Estimativa: −4,7 ecrãs (37 fichas × ~110 px ≈ 4 070 px trocados por um bloco de ~340 px).
«Lo que te falte, a tu puerta.» A frase deixa de prometer uma categoria e promete a falta — cabe lá a lata, a pizza e o leite das 2h. O subtítulo é que nomeia as categorias todas.
~2 400 px ≈ 2,8 ecrãs (de 7,6). Além das 37 fichas, corta a navegação por corredor: com 13 linhas não há nada para procurar — os corredores viram etiquetas entre grupos, a custo zero.
A linha nova é nome · formato · preço · +, e o «formato» é o campo que absorve a comida quente («del horno, en caja») sem pedir outro componente. A lata e a pizza cabem na mesma linha porque a linha descreve o que chega, não o continente.
Perde os 58 packshots no corredor principal — a página fica sem imagem acima da dobra. É deliberado (velocidade e rolagem), mas é a maior perda das três: quem quer ver a comida não vê. Mitigação em 1e: miniatura de 44 px só nas linhas de comida quente.
Expendedora é a loja como a máquina que ficou acesa; a decisão fica em carregar no que está iluminado. A máquina aceita dinheiro, não tem conta e não faz perguntas — é a metáfora que já descreve o modelo de negócio.
Preto frio, ao contrário de 1a. A luz branca-quente é o único sinal de «ligado» e nunca é clicável — assim o laranja fica só para acção.
Bricolage Grotesque 800 no h1 (33 px/0.95) e 600 nos nomes de produto (13,5 px) — a largura variável dá o ar de rótulo industrial sem recorrer a condensada. Space Mono 700 nos preços e etiquetas. Archivo 400 no texto corrido. Três famílias: ~62 kB, a mais cara das três.
Resolve-se pela metáfora, sem regra escrita: o alvéolo aceso tem foto, preço e botão; o apagado é uma célula escura com o nome e um traço no lugar do preço. Ninguém confunde uma mola vazia com produto à venda, e a máquina continua a mostrar o que vai ter. Estimativa: −3,9 ecrãs.
«Sigue abierto. Elige y lo llevo.» Duas frases: a primeira é o estado (a máquina está ligada), a segunda é a promessa que inclui comida — «lo llevo» diz que há alguém, não só um catálogo.
~2 900 px ≈ 3,4 ecrãs. A grelha de 2 colunas mete 13 produtos em 7 filas em vez de 13, mas mantém os packshots — paga ~500 px a mais que 1a em troca de ver o que se compra.
Deixa de haver linha: há alvéolo. A comida quente ocupa a mesma célula sem esforço porque a célula é um contentor de foto, e a foto é o que distingue uma pizza de uma lata.
Depende de fotografia decente dos 13. Com packshots de embalagem funciona; para pizza e bocadillo não há foto real (§8) e a célula fica com um placeholder — que é precisamente onde a metáfora falha. É a direcção mais dependente de um dado que hoje não existe.
Guardia é a loja como a farmácia de guarda: a única luz acesa no bairro; a decisão fica em confiar que há alguém do outro lado. É a única das três que trata o risco real do cliente — dar a morada a um desconhecido de noite — como assunto de capa.
Um halo radial de #FF7417 a 20% no topo é a «luz» — a logótipo deixa de ser um selo e passa a ser a fonte de luz do ecrã. É a direcção que melhor justifica o laranja da marca.
Petrona 600 no h1 (37 px/1.04) e 500 nos nomes de produto (17,5 px) — serifa humanista, voz de pessoa e não de catálogo. Archivo 400/500 no resto, Space Mono 700 nos preços. Cantos arredondados só no «+» (44 px, círculo), o resto a filete recto.
Uma linha honesta em vez de um bloco: «Hay 37 cosas más en el catálogo. Todavía sin precio.» abre a lista completa a pedido. É o tratamento mais discreto — e o mais arriscado, porque quem não abre não sabe que o catálogo cresce. Estimativa: −4,4 ecrãs.
«Juan reparte hasta las 05:00.» A manchete deixa de ser sobre produto e passa a ser sobre presença — resolve (b) por outra via: nenhuma categoria fica de fora porque nenhuma é mencionada no h1. Precisa do OK do Juan para usar o nome dele.
~3 200 px ≈ 3,8 ecrãs. A mais gorda das três: as três linhas de confiança e o ar entre elementos custam ~250 px acima da dobra e empurram o quarto preço para fora. Compra com isso o argumento que faz a primeira encomenda acontecer.
Mesma anatomia de 1a mas com 14 px de respiração e nome em serifa: a comida quente lê-se como prato num menu, não como referência de armazém.
Só 3 preços na dobra — passa o critério 1 por uma unidade. E vive de uma promessa humana que, sem foto do Juan (§8), fica a cargo da tipografia. Se a resposta ao WhatsApp demorar, esta é a direcção que promete mais e é mais fácil de desmentir.
O laranja cheio aparece aqui pela primeira vez: é o único momento em que há alguma coisa para fazer. O consentimento nasce desmarcado e vive dentro do formulário, acima da barra fixa (§3.5).
«El pedido no está hecho hasta que Juan conteste» — nada no ecrã diz enviado ou recibido. Sem o número no config.ts o botão não pode existir; a alternativa de copiar texto fica como segunda via, não como caminho principal.
Os 37 continuam nomeados, legíveis e ordenados — só perdem ficha, foto e botão, que é o que os tornava indistinguíveis dos 13. Um bloco de ~340 px em vez de ~4 000 px de fichas: é aqui que estão os 4,7 ecrãs.
O rodapé mostra em mono os campos vazios do config.ts (titular, nif, direccion). São obrigatórios por LSSI art. 10 — deixá-los visíveis como buraco é melhor do que desenhar um rodapé que finge estar completo.
Fechado não é um aviso colado por cima: é a mesma página com a acção removida. Os preços ficam (são verdade a qualquer hora), os «+» desaparecem, a barra fixa deixa de ser pedido e passa a ser horário. Passa o critério 2 por construção — não há botão para desactivar nem palavra para esconder.
O desktop não estica a lista móvel: parte-a em duas colunas de linhas e põe a nota num painel fixo à direita, onde já está o olhar de quem usa rato. Com 13 produtos, a página inteira cabe praticamente numa dobra de 900 px — a decisão inteira sem rolar. O painel repete as três condições que a barra móvel mostra em baixo.
O argumento não é estético. É que a nota é a única das três cuja forma é igual à do que sai do site: o resultado de usar o Archena Delivery é uma mensagem escrita que o cliente envia ao Juan. Uma loja que se parece com uma grelha de produtos promete um checkout; uma que se parece com uma nota promete exactamente o que acontece a seguir. Às 3 da manhã, com uma mão, o cliente não quer navegar — quer apontar quatro coisas e mandar.
Somando: é a que corta mais rolagem (~2,8 ecrãs contra 7,6), a que põe mais preços na dobra (5), a única que não depende de fotografia que hoje não existe (§8), e a mais barata em kB — mantém o «zero framework JS» sem discussão: duas famílias, ~38 kB de webfont, sem imagem acima da dobra.
Se a preferires com imagem: a alteração mínima é miniatura de 44 px só nas linhas de comida quente. Custa ~5 imagens e nenhuma rolagem, e é onde a foto vende de facto.
Vale dizê-lo porque o brief o convida: o grafite e o laranja não são o que está a travar este site. O que trava são 37 fichas sem preço no meio das 13 que vendem, e 7,6 ecrãs de rolagem. Pintar por cima da estrutura actual não resolveria nada disso; arrumar a estrutura resolve mesmo sem tocar na paleta.
Ou seja: se só houver orçamento para uma coisa, é a mudança estrutural das três direcções partilham (os 37 fora do fluxo, a manchete que nomeia comida, o laranja cheio só quando há pedido). Aplicada à cara actual já dá quase todo o ganho medível. A escolha de direcção é o que decide o resto.
La nevera — a loja como o frigorífico do vizinho. Morre no problema (b): um frigorífico não explica pizza, café nem pão. Resolveria a manchete que já lá está, não a que o negócio precisa.
El reparto — a loja como a ronda do Juan, com mapa e chegada. Precisa de tempo de entrega, que é DESCONHECIDO (§8). Sem esse número seria um mockup bonito construído sobre um dado inventado.
Fundo claro — descartado como estado principal, não como ideia: 100% do tráfego chega entre as 21:00 e as 05:00, quase sempre num quarto escuro. Um ecrã branco a 390 px é agressivo e faz o utilizador baixar o brilho antes de ler o preço.
1 · Preço na dobra: 5 a 390×844 (1a), 4 (1b), 3 (1c). Mínimo exigido: 3.
2 · Não se contradiz: em 1f a palavra abierto não existe no ecrã — o estado fechado remove a acção em vez de a desactivar.
3 · Uma cor de acção, um emprego: 0 preenchimentos laranja com a nota vazia; 1 na cesta (1d); 4 em 1b, todos botões. Sempre ≤ 8, sempre clicáveis.
4 · Contraste: texto #F2ECE0 sobre #14120F ≈ 14:1; secundário #8C8479 ≈ 4,7:1; filetes e anel de foco desenhados a ≥ 3:1 (o filete a 10% é decorativo e nunca transporta informação sozinho). A única cor abaixo de 4,5:1 é #6E675E na etiqueta «Enviar» com a nota a 0 € — componente inactivo, isento pela WCAG.
5 · Alvos: «+», «−», voltar e caixa de consentimento a 44×44; a linha inteira do produto é área de toque.
6 · Estados: aberta (1a), fechada (1f), nota vazia (barra em 1a), próximamente (1e), incompleto (rodapé em 1e). Offline não está desenhado — ver «por resolver».
7 · Rolagem: a página encolhe, não cresce. Nenhuma direcção pede orçamento de rolagem.
8 · Uma mão: tudo o que decide está na metade inferior — a barra fixa, os «+» à direita, os steppers da cesta. A manchete e as condições são para ler, não para tocar.
Offline. Não desenhado. Fica a decisão a montante: um site sem JS não sabe que está offline sem se pedir um service worker — e isso é um custo em kB que não sei se queres pagar. Diz-me e desenho os dois casos (com e sem).
Os 13 reais. Não sei quais dos 50 têm preço. Os nomes e valores nos ecrãs são exemplos dentro do intervalo medido (1,00–3,90 €, mediana 2,00 €). A ordem dos grupos que propus — beber, picar, caliente, dulces, desayuno, básicos — é uma aposta sobre o que se pede às 3h; se tiveres qualquer registo de pedidos, é isso que deve mandar.
O nome do Juan na capa (1c). Precisa do consentimento dele. É o activo mais forte que o negócio tem — uma pessoa real, não um serviço — e o único que não se compra.
Fotografia. 1b só fecha com foto decente dos 13, e para pizza e bocadillo não existe (§8). Uma foto de banco de imagens partiria a regra 1 do brief.
A logótipo. Não a vi. As três vivem com o laranja #FF7417 sem o disputar: em 1a e 1b é a cor da acção, em 1c é a própria luz do ecrã. Nenhuma pede alteração à marca. Mostra-me o ficheiro e confirmo.
Os números de rolagem são estimativas, não medições: partem de ~110 px por ficha próximamente aplicados aos 6 391 px medidos. A medição a sério faz-se depois de aplicar, com o teu script.
A seguir: «aplica 1a mas com as miniaturas de comida quente» · «desenha o offline e o cartaz de obras em 1a» · «quero 1c com a densidade de 1a» · «mostra 1b com os alvéolos apagados»