Desarrollo

Diseño web para restaurantes: qué debe incluir

Manos preparando una carta de papel junto a cerámica y lino azules durante una sesión de fotografía de restaurante

Has cuidado la carta, la vajilla y hasta la luz que cae sobre las mesas. Luego alguien busca el restaurante en Google y se encuentra una foto oscura, un menú que ya no sirves y un botón de reserva que lo manda a un sitio distinto. La experiencia empieza bastante antes de que le pongas el plato delante.

Una buena página web tiene que transmitir cómo se come en tu restaurante y facilitar el siguiente paso. A veces será reservar para el sábado. Otras, comprobar el menú de hoy, organizar una comida de empresa o encargar un arroz. El diseño debe acompañar esas decisiones sin convertirlas en una excursión por siete pestañas.

Vamos a verlo con dos webs de muestra que hemos diseñado en Nereida Studio, Casa Albada y Garbell. Son restaurantes ficticios, creados para explicar decisiones de diseño con ejemplos propios. Sus fotos proceden de bancos de imágenes; los nombres, precios y datos son ilustrativos. Las reservas y los pedidos muestran el recorrido propuesto, sin gestionar operaciones reales.

Dos ejemplos de diseño web para restaurantes con necesidades distintas

Casa Albada es nuestra propuesta para una casa de comidas de barrio. Imaginamos un local en Benimaclet, con menú del día y una carta más corta por la noche. Su web tiene que ayudar a quien está decidiendo dónde comer y permitir que el restaurante mantenga esa información al día.

Para Garbell planteamos otra situación. Una arrocería con dos locales, encargos para llevar y comidas de grupo. Aquí, además de apetecer ir, hay que entender a qué local vas y qué quieres hacer. Esa diferencia cambia la navegación, los formularios y el contenido que merece una página propia.

Portadas de Casa Albada y Garbell, dos maquetas de Nereida con una estética luminosa y otra oscura
Dos muestras diseñadas por Nereida. Casa Albada se apoya en la luz y la mesa; Garbell, en el fuego y la cocina abierta. La información práctica sigue visible en ambas.

Al diseñarlas, partimos de dos ambientes reconocibles. Casa Albada combina manteles claros, una tipografía con aire de carta impresa y rojo tomate. Garbell utiliza fondos oscuros, tonos azafrán y fotografías de cocina. Las dos pueden resultar cuidadas sin parecer el mismo restaurante con otro logotipo.

La fotografía ayuda a construir esa identidad. Para un negocio real, prepararíamos imágenes propias de los platos, la sala y el equipo. Conviene enseñar también cómo es una mesa o cuánto espacio hay entre ellas. Quien reserva una cena de aniversario y quien busca un sitio para ir con un carrito necesitan imaginar cosas distintas.

Qué información debe tener la página de inicio de un restaurante

La primera pantalla debería situarte. Tipo de cocina, zona y una forma clara de consultar la carta o reservar. Después hay espacio para contar la historia de la casa, enseñar el producto y explicar qué hace especial al restaurante.

En Casa Albada elegimos «Cocina de casa en Benimaclet». Es una frase sencilla, pero ya cuenta más que «Una experiencia gastronómica inolvidable». Debajo aparecen el horario y el precio del menú. En Garbell, «Arroces a la leña» se acompaña de los dos barrios donde hemos situado los locales.

Hay un detalle que nos interesa especialmente de estas propuestas. La información práctica forma parte del diseño. No la hemos relegado a una franja diminuta al final de la web para que la foto quede más limpia. Reservar, ver el menú y saber dónde estás tienen sitio desde el principio.

La estructura puede ser bastante contenida. Para un restaurante como Casa Albada, empezaríamos por inicio, carta, menú del día, reservas y contacto. En Garbell añadimos una página por local, pedidos para llevar y grupos, porque representan necesidades diferentes. Crear páginas solo para que la web parezca más grande acaba dando más trabajo que utilidad.

Cómo mostrar la carta y el menú del día en la web

La carta merece el mismo cuidado que le das en sala. Necesita secciones claras, platos que se entiendan, precios y las condiciones que afectan al pedido. Si un arroz se cobra por persona y tiene un mínimo de dos raciones, conviene decirlo al lado del precio. El cliente no debería tener que hacer una investigación para saber cuánto va a comer y cuánto va a pagar.

En Casa Albada damos al menú del día un bloque propio, con fecha, importe y lo que incluye. Así se distingue de la carta de la noche y evita una duda muy razonable cuando encuentras un menú en internet: si todavía está vigente.

Menú del día de Casa Albada con fecha, precio, platos e indicaciones de alérgenos
El menú de Casa Albada reúne fecha, precio y contenido. En escritorio se ve también la leyenda de alérgenos; el recorte móvil permite leer los platos sin ampliar.

Aquí el trabajo importante continúa detrás de la pantalla. Si el menú cambia cada mañana, hay que acordar quién lo actualiza y dejarle un editor sencillo. Nuestra recomendación es que pueda cambiar platos, precios y disponibilidad sin tocar el diseño. Pedir acceso al maquetador completo para sustituir unas lentejas por una crema de verduras es complicar bastante las lentejas.

También preveríamos qué mostrar cuando todavía no se ha publicado el menú de hoy. Puede ser el horario habitual y un aviso de cuándo estará disponible. Mantener el de ayer bajo el título «Menú de hoy» es una pequeña forma de perder confianza.

Carta digital o PDF

Preferimos una carta integrada como texto en la web. Se adapta mejor al móvil, permite buscar un plato y facilita mantener precios e idiomas. El PDF puede quedarse como versión descargable o para imprimir.

El motivo no es que Google sea incapaz de leerlo. Google incluye los PDF entre los formatos que puede indexar. El problema habitual es mucho más cotidiano: una carta pensada para A4 acaba convertida en letra diminuta en el teléfono.

Carta de Casa Albada con idiomas, precios y leyenda de alérgenos
La carta de muestra permite ver cómo conviven nombres de platos, precios, idiomas e información alimentaria en una misma página.

Alérgenos e idiomas en la carta online

En la maqueta hemos asociado números a los platos y una leyenda que explica su significado. Es una opción de presentación; también pueden usarse nombres o iconos acompañados de texto. Lo esencial es que la información sea comprensible y que la valide quien conoce los ingredientes y la elaboración. El diseñador no puede deducir los alérgenos por la foto.

Si vendes comida por internet, la información exigible sobre alérgenos debe estar disponible antes de completar la compra y acompañar la entrega, conforme a las reglas de información alimentaria en la venta a distancia. Además, hay que revisar las normas de restauración de tu comunidad, que pueden añadir requisitos sobre cartas, precios o idiomas.

Para Casa Albada hemos previsto castellano, valenciano e inglés. En una web real, traducir implica mantener actualizadas las tres cartas. Un selector de idiomas no resuelve por sí solo ese trabajo, especialmente cuando cambia un ingrediente o un suplemento.

Reservas online para restaurantes: qué sistema elegir

El botón «Reservar» es la parte fácil. Antes de colocarlo hay que decidir quién recibe la petición, dónde se controla el aforo y cuándo puede darse la mesa por confirmada.

Para un restaurante pequeño puede bastar una solicitud por formulario o un canal de contacto bien atendido. En ese caso, el mensaje final debe indicar que falta la confirmación del restaurante. Si se quiere confirmar al instante, hace falta un sistema conectado a la disponibilidad real, con las reservas telefónicas incluidas en el mismo control.

En Casa Albada hemos planteado la primera opción. En Garbell, un recorrido con selección de local, día, personas y turno. Al revisar este segundo diseño, la elección del local nos pareció lo primero que debía quedar resuelto. Todo lo que viene después depende de esa respuesta.

Formulario de Garbell con elección de local, fecha, comensales, turno y resumen de la reserva
Garbell ordena la reserva por local, día, personas y hora. La maqueta ilustra la selección y el resumen; la disponibilidad y la confirmación requerirían conectar un sistema real.

En una implantación revisaríamos también cancelaciones, cambios, avisos y fallos de envío. Que aparezca un mensaje de éxito no demuestra que la petición haya llegado a sala. Es una de esas comprobaciones poco vistosas que sí conviene hacer antes del primer sábado.

¿Plataforma externa o sistema propio? Si ya tienes una herramienta que funciona, suele tener sentido integrarla. Hay que comparar cuotas, posibles comisiones, facilidad de uso, acceso a los datos y cómo se gestiona desde el restaurante. Un desarrollo propio también necesita mantenimiento. No se vuelve gratuito por llevar tu logotipo.

Pedidos para llevar y reservas de grupos desde la web

Pedir una mesa y encargar comida son recorridos diferentes. En Garbell los separamos desde la navegación para que quien quiere llevarse un arroz no tenga que rellenar primero una reserva de mesa.

En el pedido mostramos el producto, las raciones, el lugar y la hora de recogida. El resumen reúne el importe total y las condiciones antes de pagar. Hemos dado espacio a la información alimentaria porque también forma parte de la decisión de compra.

Pedido para llevar de Garbell con selección de arroz, raciones y resumen del encargo
Propuesta de pedido para llevar. El resumen agrupa el importe, la recogida y la información del encargo; los productos y precios son ilustrativos.

Llevarlo a producción exigiría conectar pagos y pedidos con la operativa del restaurante. Eso incluye limitar encargos por franja, impedir compras cuando la cocina ya no puede atenderlas y establecer quién tramita una cancelación. El formulario puede aceptar veinte paellas a las dos. La cocina quizá tenga otra opinión.

Para las comidas de grupo hemos elegido una página distinta. Explica menús, capacidad, espacios y qué datos hacen falta para preparar una propuesta. Una persona que organiza una comida para veinte compañeros necesita saber qué entra en el precio y cuándo debe confirmar asistentes. Un botón genérico de «Contactar» deja demasiado trabajo para la llamada posterior.

Estas funciones tienen sentido cuando el negocio las va a atender. Si apenas haces pedidos para llevar, puedes empezar con información y contacto, y añadir la compra online cuando exista un proceso que la sostenga.

Horarios, ubicación y SEO local para restaurantes

La página de contacto debería ayudar a llegar y a organizar la visita. Dirección, teléfono, horario de cocina, días de cierre y enlace al mapa. Según el local, también puede ser útil explicar accesos, aparcamiento, terraza o disponibilidad de tronas.

Cuando hay varias sedes, dedicaríamos una página a cada una. En Garbell, la de la Malva-rosa tiene su propio teléfono, horario y reserva. Así puede recibir directamente a quien busca ese restaurante concreto, sin obligarle a pasar por la portada del grupo.

Página del local de Garbell en la Malva-rosa con dirección, horario, teléfono e información de acceso
La página de cada local reúne la información necesaria para visitarlo. Direcciones, teléfonos y características de Garbell pertenecen a la muestra ficticia.

La web y el Perfil de Empresa de Google deben contar la misma historia. Si cambias el horario de verano o la carta, revisa dónde más aparece esa información. El enlace de un QR puede apuntar a la carta web y compartir sus actualizaciones; publicar cambios también en Google requiere su propio procedimiento o una integración disponible y comprobada.

Esta coherencia, junto con páginas que describan la cocina y la ubicación de forma natural, es parte del SEO local del restaurante. No hace falta convertir cada párrafo en «restaurante en Valencia». A estas alturas, el lector ya sabe dónde va a cenar.

Las reseñas reales pueden ayudar a decidir. Si las incorporas, identifica su origen, explica cómo se seleccionan y evita presentar una selección como si fuera la totalidad de opiniones. La historia de la casa también merece espacio, sobre todo cuando aporta detalles propios sobre el equipo, el producto o la forma de cocinar.

Cómo debe funcionar la web de un restaurante en el móvil

En el móvil se comprueba si el diseño aguanta una situación normal. Alguien abre la carta, vuelve atrás, intenta reservar y necesita llamar para consultar una duda. Todo debería poder hacerse sin ampliar letras ni pelearse con ventanas superpuestas.

Versiones móviles de Casa Albada y Garbell con accesos a llamada, reservas y pedidos
En Casa Albada destacamos llamar y reservar. En Garbell, pedidos y reservas. Elegimos las acciones según el planteamiento de cada restaurante.

Hemos usado accesos inferiores en las dos propuestas, pero no son una obligación. Funcionan si facilitan una acción y dejan espacio para leer. Hay que comprobar qué ocurre cuando se abre el teclado, aparece el aviso de cookies o se despliega la carta. Tres elementos fijos compitiendo por la misma esquina pueden ocupar media pantalla.

Las fotografías deben cargar a un tamaño adecuado. Antes que renunciar a una buena imagen, trabajaríamos su formato, peso y versiones por dispositivo. En nuestra guía de optimización de imágenes explicamos cómo hacerlo. El diseño responsive también debe cuidar textos, formularios y navegación, además de las fotos.

Qué incluir en el presupuesto de una web para restaurantes

Al pedir presupuesto, describe la operativa que necesitas. Una carta editable y un teléfono de reserva tienen un alcance distinto al de varios locales con disponibilidad, pagos, idiomas y pedidos conectados a cocina.

Conviene separar diseño y desarrollo, redacción, fotografías, traducciones, herramientas de reservas y costes recurrentes. Pregunta también por el dominio, el alojamiento, el mantenimiento y la formación para actualizar el contenido. En la guía sobre cuánto cuesta una página web explicamos cómo valorar esas partidas.

Puedes comenzar con una plantilla si el presupuesto es ajustado. Una plantilla bien adaptada admite una carta clara y una identidad cuidada; el trabajo está en elegirla y configurarla para tu restaurante. En los proyectos que necesitan recorridos como los de Garbell, estudiaríamos antes las integraciones disponibles para no desarrollar desde cero algo que ya resuelve una herramienta mantenida.

Antes de publicar, reservaríamos una revisión para los datos del negocio, la privacidad de los formularios, las condiciones de venta si las hay y las cookies que realmente se utilizan. Después haríamos una prueba completa de carta, reserva, avisos y edición del menú, tanto en ordenador como en móvil.

Casa Albada y Garbell muestran dos maneras de abordar ese trabajo. Si estás preparando la web de tu restaurante, el primer paso es decidir qué debe poder resolver en ella tu cliente y qué puede gestionar tu equipo cada día. A partir de ahí, como diseñadores web en Valencia, podemos ayudarte a convertirlo en una web que dé gusto visitar y resulte sencilla de mantener.

Escrito en Nereida Studio, estudio de diseño web y posicionamiento en Valencia. Así trabajamos.