Site
Design de site para reservas em restaurante
Ember & Pepper combina pratos da casa e detalhes da visita com uma caixa de diálogo de reserva para clientes prontos para reservar.
LLM Arena Set 2026
Notas do caso- Modelo
- GPT 5.6 Sol
- Tarefa de design
- Landing page de restaurante local de hotpot com reserva
- Saída
- Site
Desenvolvido para
- Sites de restaurantesConecte comida, ambiente e informações práticas para a visita.
- Interfaces de reservaCrie um ponto de entrada para reservas sem ocultar o contexto do restaurante.
- Identidade visual para hospitalidadeTransmita uma identidade gastronômica regional por meio de títulos e imagens.
Principais destaques
- Dois pontos de entrada no heroReserve imediatamente ou explore o cardápio antes de se decidir.
- Três pratos da casaEntradas numeradas apresentam o caldo, a carne bovina e uma seleção de vegetais.
- Um bloco prático para a visitaHorários, último horário para sentar e dados de localização aparecem ao lado da reserva.
- Caixa de diálogo de reserva contextualColete a solicitação de visita sem navegar para outra página.
Explore o site do restaurante
1 / 4
Um site de restaurante com dois pontos de partida
Ember & Pepper começa com uma fotografia de hotpot e Heat with a heartbeat. A frase transmite um clima; o rótulo menor Chongqing Born · New York Fired explica o conceito de comida e localização. Separar essas funções permite que a página mantenha um título memorável sem deixar um novo visitante tentando adivinhar o que o restaurante serve.
Duas ações aparecem juntas no hero: Reserve your table e Explore the menu. Elas atendem a diferentes níveis de prontidão. Um cliente recorrente pode abrir imediatamente a caixa de diálogo de reserva, enquanto alguém que ainda está escolhendo um restaurante pode primeiro conhecer a comida. A mesma ação Reserve também aparece na navegação, e Book dinner reaparece perto das informações para a visita.
Apresente o cardápio sem fingir que ele está completo
Born for the broth apresenta três pratos da casa numerados, em vez de um cardápio completo para pedidos. Cada entrada explica uma função na refeição: uma base, um corte de carne ou uma seleção equilibrada de cogumelos e verduras. A seção pode ajudar alguém a entender o restaurante, mas não fornece informações suficientes para calcular o valor do jantar.
| Item do cardápio | Informações específicas | O que permanece sem resposta |
|---|---|---|
| 01 · Nine-Spice Red Broth | Sebo bovino, pimentas tostadas e grãos verdes de pimenta-de-Sichuan; identificado como House signature. | A página não especifica um nível de picância selecionável nem o preço da porção. |
| 02 · Hand-Cut Marbled Beef | Cortes finos e uma sugestão de cozimento por oito segundos; identificado como Market cut. | O cliente ainda precisa saber o tamanho real da porção e o preço. |
| 03 · Mountain Mushroom Basket | Cogumelos, raiz de lótus e verduras; identificado como From the market. | A descrição do prato, por si só, não determina a adequação a restrições alimentares ou alergias. |
Posicione os detalhes da visita perto do início da reserva
Meet us downtown passa da expressão da marca para a logística. O bloco da visita informa duas faixas de horário de funcionamento e uma regra separada para o último horário para sentar. O último horário para sentar, 45 minutos antes do fechamento, é importante porque o horário de funcionamento não equivale a um horário de reserva disponível. Posicionar essa distinção perto de Book dinner ajuda o cliente a fazer uma pergunta mais bem informada.
Repita uma ação quando o leitor tiver um novo contexto
A ação de reserva no hero aparece antes do cardápio. Book dinner aparece depois das seções de comida e ambiente, quando a pessoa já tem mais informações. Essa repetição é útil: a ação retorna em um ponto de decisão, em vez de exigir uma longa rolagem de volta à primeira tela.
Use uma caixa de diálogo para uma solicitação delimitada
A interface de reserva solicita dados da visita e de contato, mantendo a página do restaurante ao fundo. Um campo de data e seletores de horário e tamanho do grupo oferecem controles adequados para diferentes tipos de informação. Um design para produção também precisaria explicar a disponibilidade, a validação e o que acontece depois que a solicitação é enviada.
Faça as legendas do ambiente corresponderem às imagens reais
A seção The Room usa uma grade assimétrica de fotos e legendas sobre luz quente, reuniões à mesa e caldo vermelho. Várias fotos são closes de comida, em vez de mostrar literalmente o salão. O layout cria variedade, mas um estabelecimento real deve usar imagens que respondam à questão levantada por cada legenda. Um cliente que procura ver o salão precisa ver o salão, não outro prato atraente.
Protótipo de reserva, não um serviço de restaurante em operação
Ember & Pepper é uma identidade fictícia de restaurante. Seu endereço, telefone e detalhes operacionais são conteúdo de exemplo, como a própria página declara. A caixa de diálogo de reserva é uma demonstração local de front-end e não cria uma reserva, verifica a capacidade em tempo real nem envia um e-mail de confirmação. O rótulo GPT 5.6 Sol identifica a exportação de avaliação fornecida, não uma pontuação de desempenho verificada.
Como criar um design de site para reservas em restaurante no OpenDesign
Especifique a jornada do cliente e o ponto de entrada da reserva
Informe ao OpenDesign quais dados um cliente de primeira viagem precisa conhecer antes de reservar e qual ação um cliente recorrente pode realizar imediatamente. Este exemplo de prompt descreve um novo protótipo baseado no padrão visível.
Prompt sugeridoCrie o design de um site para reservas em um restaurante fictício de hotpot de Chongqing. Comece com uma fotografia de comida ocupando toda a largura, um rótulo curto de culinária e cidade e um grande título serifado em duas linhas. Posicione Reserve a Table ao lado de Explore the Menu para que os clientes possam escolher entre reservar e saber mais. Em seguida, apresente três pratos da casa numerados que descrevam o caldo, uma seleção de carne bovina e uma cesta de cogumelos. Adicione uma galeria assimétrica do ambiente usando fotografias que correspondam às respectivas legendas. Reúna horários de funcionamento, política de último horário para sentar, endereço e telefone perto de outra ação de reserva. Reserve deve abrir uma caixa de diálogo com um campo de data, um seletor de horário, um seletor de tamanho do grupo e campos de contato. Inclua estados vazio, inválido e enviado localmente. Identifique os dados do estabelecimento e o envio como conteúdo de demonstração; não dê a entender que há disponibilidade real ou que uma reserva no restaurante foi concluída.
Deixe explícitos os estados da reserva
Peça ao OpenDesign para mostrar um formulário vazio, um erro de campo obrigatório não preenchido e uma resposta de demonstração claramente identificada. Mantenha os valores inseridos quando houver falha na validação. Especifique o comportamento de fechamento com Escape e o retorno do foco ao botão que abriu a caixa de diálogo.
Revise as informações antes da ação de reserva
Verifique se o horário de fechamento e o último horário para sentar não contradizem os horários de reserva oferecidos. Substitua os dados comerciais de exemplo somente depois que forem confirmados. Use uma viewport estreita para garantir que a caixa de diálogo possa rolar e que seus controles de confirmação e fechamento permaneçam acessíveis.
Exportar e obter um link de compartilhamento
Exporte seu design finalizado e, em seguida, use Compartilhar no OpenDesign para obter um link de compartilhamento. Abra o link em uma janela separada do navegador e verifique se a versão desejada e seus assets estão disponíveis antes de enviá-lo.
Design de site para restaurante de hotpot
Yàn Huǒ apresenta o hotpot por meio de um menu de especialidades com preços, uma galeria do salão e informações para visita antes da reserva.
Site
Design de Site de Tour Noturno por Bianjing
Uma jornada noturna interativa por uma Bianjing imaginada da era Song, combinando uma cidade fluvial contínua, poesia, lanternas e ritmo de capítulos multilíngue.
Site
Design de Site de Carreiras
Um estudo de carreiras da Kimi construído a partir de oito cenas lunares, com transições vinculadas à rolagem e um processo de candidatura ilustrado.
Site
Design de Site de Portfólio Criativo
O portfólio fictício de Maya Rowan conecta cartões de projetos, prática e notas.
Site