# Menu digital em TV: telas que vendem em cafeterias e bares

[Canonical HTML page](https://gradiently.design/pt-br/guide/menu-board-design)

A tela do cardápio é lida do fim da fila, em poucos segundos, por quem está decidindo quanto gastar. Isso muda quase todas as escolhas de design. Veja como criar uma que seja legível, venda e ainda tenha a cara do seu lugar.

## The short version

- A maioria dos menus digitais são TVs comuns, então crie em 1920×1080 para uma tela horizontal ou em 1080×1920 para uma instalada na vertical.
- O texto de um menu digital deve ser avaliado de onde os clientes realmente ficam, geralmente o fim da fila, e não no editor da tela.
- Fundos escuros com texto claro combinam com telas de cardápio porque reduzem o reflexo e fazem as palavras serem o que há de mais brilhante à vista.
- O movimento em um menu digital deve ficar no fundo; preços e nomes de itens devem ficar parados.
- Dividir um cardápio longo em várias telas, ou alternar as telas devagar, lê melhor do que encolher tudo em uma só.

Um **menu digital** é um cardápio pensado para uma tela, em geral uma TV comum de 1920×1080, lido a vários metros de distância por pessoas que decidem rápido. Crie-o como uma placa, não como um cardápio impresso: menos itens por tela, texto maior, um fundo escuro e calmo, preços alinhados numa só coluna e movimento apenas atrás das palavras. A tela vende melhor quando o cliente encontra a bebida e o preço antes de chegar ao caixa.

Tela horizontal de cardápio de cafeteria com o título Cafés e uma lista curta de bebidas e preços

Uma categoria por tela em 1920×1080. O título é o maior elemento; os preços ficam alinhados.

## Tamanhos de menu digital

Quase toda tela de cardápio é uma TV ou um monitor comercial com o mesmo painel 16:9. Crie na resolução nativa da tela para que nada seja redimensionado, o que mantém o texto pequeno nítido. Uma tela 4K exibe um design de 1920×1080 com clareza em dobro do tamanho, embora criar em 3840×2160 dê um texto mais fino se a sua tela e o seu player aceitarem.

- Tela horizontal 1920×1080: 1920 × 1080
- Tela vertical 1080×1920: 1080 × 1920
- Três telas lado a lado 5760×1080: 5760 × 1080

A horizontal combina com a parede acima do balcão; a vertical combina com um pilar ou uma vitrine. Uma fileira de três é criada como uma tela larga e dividida em três arquivos.

Se você instalar uma tela na vertical, confira se a tela ou o player consegue girar a saída. Se não conseguir, exporte o design em retrato e gire o arquivo um quarto de volta antes de carregá-lo.

## Como deixar a tela do cardápio legível a partir da fila

Não existe um mínimo universal, porque depende do tamanho da tela e da distância. O teste confiável é físico: coloque o design na tela de verdade, vá até o fim da fila e leia. Se você precisar apertar os olhos, está pequeno ou apertado demais. Como ponto de partida para um design de 1920×1080 numa tela de balcão comum:

| Elemento | Tamanho inicial em 1080 px de altura | Observações |
| --- | --- | --- |
| Título da categoria | 96 a 140 px | Um por tela, ou no máximo dois |
| Nome do item | 56 a 72 px | Maiúscula só na inicial lê mais rápido que caixa-alta |
| Preço | Igual ao nome do item | Alinhado à direita numa coluna, sem símbolo de moeda se for óbvio |
| Descrição | 32 a 40 px | Uma linha curta ou nenhuma |
| Etiquetas de alérgenos ou dieta | 28 a 32 px | Use letras como V ou SG, explicadas uma vez na tela |

Pontos de partida para testar na sua própria tela, não regras. Telas maiores e filas mais curtas aceitam texto menor.

- **De oito a doze itens por tela** é bastante. Mais do que isso e ninguém encontra nada.
- **Escolha uma fonte com números bem claros.** Os preços são mais lidos do que os nomes. [Fontes para redes sociais](https://gradiently.design/pt-br/guide/fonts-for-social-media) lista fontes que continuam claras à distância.
- **Deixe uma margem generosa.** Algumas TVs cortam um pouco as bordas; mantenha o texto a pelo menos 60 px de cada lado.
- **Agrupe, não encaixote.** O espaço entre as categorias faz mais do que linhas e molduras.

## Cores e fundos para telas de cardápio

Uma tela é uma fonte de luz. Um fundo branco com brilho total reluz pelo ambiente, apaga as palavras e cansa a vista. Um fundo profundo e escuro com texto claro faz do cardápio o que há de mais brilhante na parede, que é onde você quer a atenção. [Design em modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design) trata do mesmo princípio para apps.

- Torrefação: marrom café, canto quente: `radial-gradient(circle at 85% 15%, #7a3b1d 0%, #2a140b 45%, #120906 85%)`
- Bar: verde-garrafa, luz baixa: `radial-gradient(circle at 15% 85%, #1f5f55 0%, #0e2b27 45%, #071311 85%)`
- Fim de noite: da tinta à ameixa: `linear-gradient(160deg, #1b1830 0%, #2d2350 55%, #4a2a52 100%)`

Fundos escuros com uma área quente mantida longe dos preços. Cada um pode ser copiado para o design de uma tela ou para um cardápio na web.

- Fundo espresso: #120906
- Torra: #7a3b1d
- Texto leite: #f3e7d8
- Destaque crema: #e9a23b
- Etiqueta sálvia: #a7b8a0

Uma paleta completa de menu digital: fundo, um tom médio, off-white quente para o texto, um destaque para as promoções e uma cor discreta para as etiquetas de dieta.

Use o destaque para uma coisa só, normalmente a promoção ou o item que você mais quer vender. Se tudo é destaque, nada é. Confira o contraste contra as partes mais escuras e mais claras do fundo, não só contra o meio; [contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica como.

## Movimento em um menu digital

O movimento é o que as telas fazem e o papel não, e ele chama a atenção de quem levanta os olhos do celular. Mantenha-o no fundo: uma deriva lenta de cor, uma luz que passa pela superfície, uma promoção que entra uma vez por ciclo. Nomes de itens e preços nunca devem se mover, porque as pessoas os leem ao longo de vários segundos.

### Evite

- Preços que rolam ou deslizam
- Cortes rápidos entre telas a cada poucos segundos
- Selos de “Promoção” piscando
- Um vídeo tão carregado que o texto precisa ficar numa caixa

### Faça

- Um loop lento de fundo sob palavras paradas
- Telas que ficam 15 segundos ou mais, se alternarem
- Uma promoção que anima na entrada e depois descansa
- Um loop que emenda sem salto visível

Um fundo com movimento suave também tem um benefício prático: uma imagem totalmente estática ligada doze horas por dia pode deixar uma marca fantasma em algumas telas, principalmente em painéis OLED. Exporte o loop em MP4, que quase toda TV e todo player de sinalização aceitam por pen drive ou app. [Vídeo em loop contínuo](https://gradiently.design/pt-br/guide/seamless-loop-video) mostra como tornar a emenda invisível, e [fundos em degradê animados](https://gradiently.design/pt-br/guide/animated-gradient-background) traz ideias para o próprio movimento.

## Como montar um menu digital do começo até a tela

1. **Escreva o cardápio primeiro** Corte o que não vende. Agrupe em categorias de oito a doze itens, uma categoria por tela.
2. **Escolha o layout uma vez** Título no alto à esquerda, itens em uma coluna, preços alinhados à direita. Use o mesmo layout em todas as telas para que as pessoas o aprendam.
3. **Crie no tamanho da tela** 1920×1080 ou 1080×1920, com margem de 60 px e fundo escuro.
4. **Teste a partir da fila** Coloque na tela de verdade, no brilho de verdade, e leia de onde os clientes ficam.
5. **Exporte e carregue** PNG para telas estáticas, MP4 para as com movimento. Nomeie os arquivos por tela e data para que o certo vá ao ar.

## Mantendo preços e promoções em dia

O ponto de uma tela é que ela pode mudar. Mantenha um design-mestre por tela e troque só as palavras, para que um reajuste ou uma nova bebida sazonal leve minutos e o visual nunca se desvie. Cardápios de café da manhã e de noite podem ser duas versões de um mesmo design, trocadas por um timer se o seu player aceitar programação. Cardápios impressos, cartões de mesa e a vitrine devem usar as mesmas fontes e o mesmo fundo; [design de cardápio de restaurante](https://gradiently.design/pt-br/guide/restaurant-menu-design) trata do lado impresso.

Tela horizontal de cardápio com o título Café da manhã, servido até as 11h30, com dois pratos e preços

A versão da manhã do menu.

Tela horizontal de cardápio com o título Hora do spritz a partir das 17h, com três bebidas e preços

O mesmo layout à noite, com outro fundo.

O Studio da Gradiently tem templates de cardápio que vestem o seu próprio Mark, então o fundo é único do seu lugar e abre espaço para as palavras sozinho. Com o Pro, você exporta menus em movimento como MP4 de até 4K e mantém os preços numa planilha: a [criação em lote](https://gradiently.design/pt-br/guide/bulk-create-from-spreadsheet) preenche o texto e as tabelas de cada tela a partir dela, o que serve a um grupo que roda o mesmo cardápio em várias unidades.

## FAQ

### Qual deve ser o tamanho de um menu digital?

Crie em 1920×1080 para uma TV horizontal ou em 1080×1920 para uma tela instalada na vertical. Use 3840×2160 só se a sua tela e o seu player aceitarem arquivos 4K.

### Qual o tamanho do texto numa tela de cardápio?

Depende do tamanho da tela e da distância, então teste do fim da fila. Num design de 1080 pixels de altura, nomes de itens de 56 a 72 pixels são um bom ponto de partida.

### Um menu digital deve ter fundo escuro ou claro?

O escuro costuma funcionar melhor. Ele reduz o reflexo no ambiente e faz o texto claro ser o que há de mais brilhante na tela.

### Qual formato de arquivo as telas de cardápio usam?

PNG ou JPG para menus estáticos e MP4 para os com movimento. Quase toda smart TV e todo player de sinalização reproduzem MP4 por pen drive ou app.

### Um menu digital deve ser animado?

Um movimento suave no fundo ajuda a chamar a atenção, mas mantenha nomes e preços parados para que possam ser lidos.