# Ementas digitais: ecrãs que vendem em cafés e bares

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

Um ecrã de ementa é lido do fundo da fila, em poucos segundos, por alguém que decide o que gastar. Isso muda quase todas as escolhas de design. Eis como criar um que se lê, vende e continua a parecer o teu espaço.

## The short version

- A maioria das ementas digitais são televisões comuns, por isso desenha em 1920×1080 para um ecrã horizontal ou 1080×1920 para um montado de lado.
- O texto de uma ementa digital deve ser avaliado a partir do sítio onde os clientes realmente estão, normalmente o fundo da fila, e não no editor.
- Os fundos escuros com texto claro servem os ecrãs de ementa porque reduzem o brilho e fazem das palavras a coisa mais luminosa à vista.
- O movimento numa ementa digital deve ficar em segundo plano; os preços e os nomes dos itens devem estar parados.
- Dividir uma ementa longa por vários ecrãs, ou rodá-la devagar, lê-se melhor do que encolher tudo num só.

Uma **ementa digital** é uma ementa desenhada para um ecrã, normalmente uma televisão padrão de 1920×1080, lida a vários metros por pessoas que decidem depressa. Desenha-a como uma sinalética e não como uma ementa impressa: menos itens por ecrã, letra maior, um fundo escuro e calmo, preços alinhados numa coluna e movimento apenas por trás das palavras. O ecrã vende melhor quando o cliente consegue encontrar a sua bebida e o preço antes de chegar à caixa.

Ecrã horizontal de ementa de um café, intitulado Café, com uma lista curta de bebidas e preços

Uma categoria por ecrã em 1920×1080. O título é a coisa maior; os preços alinham.

## Tamanhos de ementas digitais

Quase todos os ecrãs de ementa são uma televisão ou um ecrã comercial com o mesmo painel 16:9. Desenha na resolução nativa do ecrã para que nada seja redimensionado, o que mantém o texto pequeno nítido. Um ecrã 4K mostra um design de 1920×1080 com limpeza em dobro, embora desenhar em 3840×2160 dê letra mais fina se o teu ecrã e leitor o suportarem.

- Ecrã horizontal 1920×1080: 1920 × 1080
- Ecrã vertical 1080×1920: 1080 × 1920
- Três ecrãs em fila 5760×1080: 5760 × 1080

O horizontal serve a parede por cima de um balcão; o vertical serve um pilar ou uma montra. Uma fila de três desenha-se como uma só tela larga e divide-se em três ficheiros.

Se montares um ecrã de lado, confirma que o ecrã ou o leitor consegue rodar a imagem. Se não conseguir, exporta o design vertical e roda o ficheiro um quarto de volta antes de o carregar.

## Tornar um ecrã de ementa legível a partir da fila

Não há um mínimo universal, porque depende do tamanho do ecrã e da distância. O teste fiável é físico: põe o design no ecrã verdadeiro, vai até ao fundo da fila e lê-o. Se franzes os olhos, está pequeno demais ou carregado demais. Como ponto de partida para um design de 1920×1080 num ecrã de balcão típico:

| Elemento | Tamanho inicial em 1080 px de altura | Notas |
| --- | --- | --- |
| Título da categoria | 96 a 140 px | Um por ecrã, ou dois no máximo |
| Nome do item | 56 a 72 px | Minúsculas com maiúscula inicial leem-se mais depressa do que maiúsculas |
| 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 alergénios ou dieta | 28 a 32 px | Usa letras como V ou GF, explicadas uma vez no ecrã |

Pontos de partida para testar no teu ecrã, não regras. Ecrãs maiores e filas mais curtas podem ir mais pequenos.

- **Oito a doze itens por ecrã** é muito. Mais do que isso e ninguém encontra nada.
- **Escolhe um tipo de letra com algarismos claros.** Os preços lêem-se mais do que os nomes. [Fontes para redes sociais](https://gradiently.design/pt-pt/guide/fonts-for-social-media) lista letras que se mantêm claras à distância.
- **Deixa uma margem larga.** Algumas televisões cortam ligeiramente as margens; mantém o texto a pelo menos 60 px de cada lado.
- **Agrupa, não encaixotes.** O espaço entre categorias faz mais do que linhas e molduras.

## Cores e fundos para ecrãs de ementa

Um ecrã é uma fonte de luz. Um fundo branco com brilho total resplandece pela sala, apaga as palavras e cansa a vista. Um fundo profundo e baixo com texto claro faz da ementa a coisa mais luminosa da parede, que é onde queres a atenção. [Design em modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-design) trata do mesmo princípio para aplicações.

- Torrefação: castanho 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: tinta a ameixa: `linear-gradient(160deg, #1b1830 0%, #2d2350 55%, #4a2a52 100%)`

Fundos escuros com uma zona quente mantida longe dos preços. Cada um pode ser copiado para um design de ecrã ou para uma ementa web.

- Fundo expresso: #120906
- Torra: #7a3b1d
- Texto leite: #f3e7d8
- Acento creme: #e9a23b
- Etiqueta salva: #a7b8a0

Uma paleta completa de ementa: fundo, um tom médio, branco sujo quente para o texto, um acento para os especiais e uma cor discreta para as etiquetas de dieta.

Usa o acento para uma só coisa, normalmente o especial ou o item que mais queres vender. Se tudo é destacado, nada é. Verifica o contraste contra as partes mais escuras e mais claras do fundo, não só o meio; [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica como.

## Movimento numa ementa digital

O movimento é o que os ecrãs podem fazer e o papel não, e apanha as pessoas a levantar os olhos do telemóvel. Mantém-no em segundo plano: uma deriva lenta de cor, luz a mover-se pela superfície, um especial que sobe uma vez por volta. Os nomes dos itens e os preços nunca devem mexer, porque as pessoas lêem-nos durante vários segundos.

### Evitar

- Preços a deslizar ou a rolar
- Cortes rápidos entre ecrãs a cada poucos segundos
- Selos “Especial” a piscar
- Um vídeo tão carregado que o texto tem de ficar numa caixa

### Fazer

- Um loop lento de fundo sob palavras paradas
- Ecrãs que ficam 15 segundos ou mais, se rodarem
- Um especial que entra animado e depois descansa
- Um loop que se junta sem salto visível

Um fundo com movimento suave tem também um benefício prático: uma imagem totalmente estática, deixada doze horas por dia, pode deixar um fantasma ténue em alguns ecrãs, sobretudo painéis OLED. Exporta o loop em MP4, que quase todas as televisões e leitores de sinalética aceitam a partir de uma pen USB ou aplicação. [Vídeo em loop sem emenda](https://gradiently.design/pt-pt/guide/seamless-loop-video) mostra como tornar a junção invisível e [fundos de gradiente animados](https://gradiently.design/pt-pt/guide/animated-gradient-background) tem ideias para o próprio movimento.

## Como montar uma ementa digital, do início ao ecrã

1. **Escreve primeiro a ementa** Corta-a até ao que vende. Agrupa-a em categorias de oito a doze itens, uma categoria por ecrã.
2. **Escolhe o layout uma só vez** Título em cima à esquerda, itens numa coluna, preços alinhados à direita. Usa o mesmo layout em todos os ecrãs para que as pessoas o aprendam.
3. **Desenha no tamanho do ecrã** 1920×1080 ou 1080×1920, com uma margem de 60 px e um fundo escuro.
4. **Testa a partir da fila** Põe-no no ecrã verdadeiro, com o brilho verdadeiro, e lê-o de onde os clientes estão.
5. **Exporta e carrega** PNG para ecrãs estáticos, MP4 para os que se movem. Dá aos ficheiros nomes por ecrã e data para que suba o certo.

## Manter preços e especiais atualizados

O objetivo de um ecrã é poder mudar. Guarda um design principal por ecrã e muda apenas as palavras, para que uma subida de preço ou uma nova bebida sazonal demore minutos e o visual nunca se desvie. As ementas de pequeno-almoço e de noite podem ser duas versões de um só design, trocadas por temporizador se o teu leitor suportar agendamento. As ementas impressas, os cartões de mesa e a montra devem usar os mesmos tipos de letra e fundo; [design de ementas de restaurante](https://gradiently.design/pt-pt/guide/restaurant-menu-design) trata do lado impresso.

Ecrã horizontal de ementa intitulado Pequeno-almoço, servido até às 11h30, com dois pratos e preços

A versão da manhã da ementa.

Ecrã horizontal de ementa intitulado Hora do spritz, a partir das 17h, com três bebidas e preços

O mesmo layout à noite, com um fundo diferente.

O Studio do Gradiently tem modelos de ementa que usam o teu próprio Mark, por isso o fundo é único do teu espaço e abre espaço às palavras sozinho. Com o Pro podes exportar ementas animadas em MP4 até 4K e guardar os preços numa folha de cálculo: a [criação em massa](https://gradiently.design/pt-pt/guide/bulk-create-from-spreadsheet) preenche o texto e as tabelas de cada ecrã a partir dela, o que serve a um grupo que usa a mesma ementa em vários locais.

## FAQ

### Que tamanho deve ter uma ementa digital?

Desenha em 1920×1080 para uma televisão horizontal, ou 1080×1920 para um ecrã montado de lado. Usa 3840×2160 só se o teu ecrã e leitor lidarem com ficheiros 4K.

### Que tamanho deve ter o texto num ecrã de ementa?

Depende do tamanho do ecrã e da distância, por isso testa a partir do fundo da fila. Num design de 1080 píxeis de altura, nomes de itens de 56 a 72 píxeis são um ponto de partida sensato.

### Uma ementa digital deve ter fundo escuro ou claro?

O escuro costuma funcionar melhor. Reduz o brilho na sala e faz do texto claro a coisa mais luminosa do ecrã.

### Que formato de ficheiro usam os ecrãs de ementa?

PNG ou JPG para ementas estáticas e MP4 para as animadas. Quase todas as smart TVs e leitores de sinalética reproduzem MP4 a partir de uma pen USB ou aplicação.

### Uma ementa digital deve ser animada?

O movimento suave no fundo ajuda a chamar a atenção, mas mantém os nomes dos itens e os preços parados para que as pessoas os consigam ler.