Abre diez páginas web de restaurantes en tu móvil y cuenta cuántas te obligan a aguantar una presentación de diapositivas, un banner de cookies y una ventana emergente del boletín antes de poder ver un solo plato. Normalmente son la mayoría. Un buen diseño web para un restaurante no tiene tanto que ver con causar una buena impresión como con conseguir que una persona con hambre pase de preguntarse «¿dónde vamos?» a hacer una reserva, un pedido o consultar cómo llegar con solo un par de toques. Muchas páginas galardonadas no superan esa prueba. Muchas otras, más sencillas y creadas con un creador web para restaurantes, la superan sin siquiera intentarlo.
El diseño sigue siendo importante, y mucho. La web suele ser la primera impresión que alguien tiene de tu local, tu comida y tus precios, y la gente se forma una opinión sobre los tres en cuestión de segundos. La clave está en centrar el esfuerzo en lo que los clientes realmente ven: la primera pantalla, el menú, las fotos y los botones. De todos ellos, el menú es el que más atención merece, y cuando es el mismo menú que gestiona tu carta QR y pedidos móviles, no puede quedarse desactualizado.
¿Qué hace que el diseño de la web de un restaurante sea bueno?
Las mejores páginas web de restaurantes no se parecen en nada entre sí. La página de una taquería y la de un restaurante de menú degustación no deberían parecerse. Sin embargo, en el fondo, las buenas aciertan en un puñado de cosas:
- La primera pantalla en el móvil indica qué sirves, dónde estás y si hoy tienes abierto.
- Un botón claro para lo que más te interesa que haga la gente, ya sea reservar, pedir o llamar.
- Un menú escrito en forma de texto en la página, con precios, en lugar de un PDF o una foto del menú impreso.
- Fotos de tus propios platos y de tu local, tomadas con una iluminación y un estilo uniformes.
- Como máximo dos tipos de letra, y un texto lo suficientemente oscuro como para leerlo en el móvil a plena luz del sol.
- Dirección, horario y número de teléfono en cada página, con indicaciones para llegar y la opción de llamar con un solo toque.
- Páginas que se carguen rápido con datos móviles, sin vídeos que se reproduzcan automáticamente ni sliders.
- Un aspecto que vaya a juego con la sala, para que nadie se lleve una sorpresa al entrar.
Nada de esto requiere un gran presupuesto. Solo hace falta alguien que tome decisiones y se mantenga firme en ellas.
La primera pantalla es la que se lleva la mayor parte del trabajo
Una pantalla típica de móvil mide unos 390 píxeles de ancho y quizá 650 de alto, una vez que el navegador se ha llevado su parte. Ese es todo el espacio que tienes para responder a tres preguntas: ¿qué tipo de sitio es este?, ¿está cerca de mí? y ¿puedo ir esta noche?
Así que esa primera pantalla necesita el nombre, una frase que un desconocido entienda («Pizza napolitana y vino natural en Leith», no «Un viaje culinario»), una foto llamativa, el horario de hoy y tu botón principal. Si las reservas te dan de comer, el botón dice «Reserva una mesa». Si te ganas la vida con pedidos para recoger, pone «Pide ahora». Dos botones están bien. Cinco ya es una barra de navegación que finge ser una llamada a la acción.
Hay cuatro cosas que lo echan a perder sin falta:
- Un vídeo a pantalla completa que se reproduce al cargar la página. Queda genial en el portátil del diseñador, pero se come los datos móviles, y los móviles en modo de bajo consumo a menudo ni siquiera lo reproducen.
- Sliders y carruseles. La mayoría de los visitantes nunca esperan a que aparezca la segunda diapositiva, así que lo que haya ahí pasa prácticamente desapercibido.
- Ventanas emergentes que piden una dirección de correo antes de que nadie haya visto la comida.
- Un logotipo tan grande que todo lo útil queda por debajo de la línea de折。
Aquí tienes una prueba rápida. Dale tu móvil a un amigo, abre la página de inicio y pídele que averigüe si abrís los domingos por la noche y cuánto cuesta más o menos un plato principal. Cuenta los toques. Si hace falta más de dos para cualquiera de las respuestas, algo está entorpeciendo la experiencia.
Diseña la página del menú antes que nada
En la mayoría de las páginas de restaurantes, el menú es la página que la gente busca, a menudo directamente desde Google, saltándose la página de inicio por completo. Sin embargo, suele diseñarse en último lugar, después de la imagen principal y la página «Acerca de», y se le dedica el tiempo que sobra. Cambia ese orden.
Empieza por la estructura. Agrupa los platos según cómo los elige la gente, lo que normalmente significa seguir el orden del menú impreso, y en un menú largo añade una fila de enlaces a las secciones en la parte superior (Entrantes, Platos principales, Pizzas, Postres, Bebidas) que se mantenga visible mientras la gente se desplaza por la página. Los menús separados para el almuerzo, la cena, el brunch y las bebidas funcionan mejor como pestañas en una sola página, no como cuatro enlaces a cuatro archivos distintos.
Luego, los platos. Descripciones breves que digan qué hay en el plato, precios visibles junto a cada uno y que no haya que buscar la moneda. Los indicadores de restricciones alimentarias y alérgenos deben ser iconos pequeños y uniformes con una leyenda en la parte superior de la página, y tienen que ser correctos, lo cual es una cuestión de proceso tanto como de diseño. La gestión de alérgenos en un restaurante abarca la parte del proceso. El orden de los platos, el plato «señuelo» y la ubicación del precio son las mismas herramientas que usarías en papel, según los principios de diseño de menús.
El texto importa más allá de la apariencia. Un menú escrito como texto real puede ser leído por Google, ampliado por alguien con problemas de visión, leído en voz alta por un lector de pantalla y traducido por el navegador de un turista con un solo toque. Un menú escaneado no puede hacer nada de eso.
Las fotos deben aparecer en la página del menú, pero no en cada línea. Seis u ocho imágenes de los platos que más te interesa vender servirán más que sesenta miniaturas, y además mantienen la página ligera.
El último problema es mantenerlo actualizado. El menú de la mayoría de las páginas web de restaurantes queda desactualizado en menos de un mes, porque cambiarlo implica enviar un correo a quien creó la web. Cuando el menú de la web es el mismo que el del punto de venta, ese problema desaparece. Con Instant Site de Tableview, los platos, los precios, las fotos y las etiquetas de alérgenos vienen directamente desde la oficina administrativa, y cuando la cocina retira un plato del TPV, también desaparece de la web.
Tipografía y color: inspírate en el local
Ya tienes una marca, aunque nadie la haya llamado así nunca. Está en el letrero de la puerta, en el menú impreso, en los azulejos, en las servilletas y en los delantales del personal. La web debería dar la sensación de que pertenece al mismo sitio. Un cliente que reserve desde una elegante web en negro y dorado y entre en una alegre trattoria familiar se habrá sentido engañado, por muy agradables que sean ambos.
Elige dos tipos de letra y ya está. Uno con carácter para los títulos, normalmente el que aparece en tu letrero o uno parecido, y otro sencillo y legible para todo lo demás, incluido el menú. Las fuentes caligráficas y las de estilo original están bien para un nombre o un solo título. En una lista de treinta platos, se convierten en un rollo.
El tamaño y el contraste son los aspectos en los que las páginas web de restaurantes suelen fallar más a menudo. El texto del cuerpo debe tener al menos 16 píxeles en un móvil. Y las directrices de accesibilidad que siguen la mayoría de los diseñadores, las WCAG en nivel AA, exigen una relación de contraste de al menos 4,5 a 1 entre el texto normal y su fondo, o de 3 a 1 para los títulos grandes. El gris pálido sobre blanco no cumple los requisitos. Tampoco lo hace la letra dorada fina sobre negro, el aspecto predeterminado de la mitad de los bares de cócteles en Internet. Las herramientas gratuitas para comprobar el contraste te dirán en segundos si tus colores cumplen los requisitos.
En cuanto al color, elige dos o tres de los que haya en la página y reserva un color de acento solo para los botones. Si el botón «Reservar» es el único elemento de color terracota de la página, la gente lo encuentra sin siquiera mirar. Si el terracota es también el color del encabezado, el del borde y el del fondo del pie de página, el botón se pierde entre el resto de elementos.
Los fondos oscuros quedan bien en locales nocturnos y pueden quedar genial. Solo tienes que comprobar el contraste dos veces, evitar que el texto principal sea negro puro (donde empieza a brillar) y probar la página al aire libre a mediodía, que es cuando mucha gente la ve de verdad.
La dirección fotográfica, no solo las fotos
La mayoría de los consejos se quedan en «consigue buenas fotos». La diferencia entre una web que parece cara y otra que parece un batiburrillo suele estar en la coherencia: la misma luz, el mismo tipo de superficie y el mismo ángulo en todas las fotos, para que parezca que las imágenes son de una sola sesión y no de cuatro móviles a lo largo de tres años.
Hay algunas cosas que te pueden ayudar:
- Haz las fotos junto a una ventana, a la luz del día y siempre sobre la misma mesa. La luz natural difusa favorece mucho más a la comida que las cálidas bombillas del comedor.
- Adapta el ángulo al plato. Las pizzas, los cuencos y las tablas para compartir quedan mejor desde arriba. Las hamburguesas, los postres en capas y los cócteles altos quedan mejor a la altura de los ojos.
- Deja espacio alrededor del motivo. La misma foto se recortará a lo ancho en un portátil y a lo alto en un móvil, y un plato encuadrado de borde a borde pierde su guarnición en uno de ellos.
- Muestra el local con gente dentro, siempre que te den permiso. Un comedor vacío fotografiado a las 3 de la tarde da la impresión de que el sitio está tranquilo.
- Evita las fotos de banco de imágenes. Los clientes se dan cuenta, y una hamburguesa de banco de imágenes crea unas expectativas que tu hamburguesa tendrá que cumplir.
Una vez que las tengas, exporta las imágenes al tamaño en el que se mostrarán realmente, en un formato moderno como WebP, y añade a cada una una breve descripción de lo que aparece en ella. La parte técnica de la creación, desde los dominios hasta la velocidad de la página, forma parte de la creación de una web de restaurante, así que no hace falta repetirlo aquí.
Botones, reservas y el pulgar
La mayoría de la gente navega por la web de un restaurante con una sola mano, a menudo mientras camina o está de pie en una parada de autobús. La parte inferior de la pantalla es el lugar más fácil de alcanzar con el pulgar, por eso una barra estrecha fija en la parte inferior con «Llamar», «Cómo llegar» y «Reservar» funciona tan bien en el móvil. Se mantiene fija mientras la gente se desplaza por el menú, así que el siguiente paso siempre está a un toque de distancia.
Haz que cada elemento en el que se pueda tocar sea lo suficientemente grande como para acertar. Las directrices de diseño de Apple recomiendan al menos 44 por 44 puntos, y las WCAG 2.2 establecen 24 por 24 píxeles como mínimo. Etiqueta los botones con verbos que indiquen lo que ocurre: «Reserva una mesa», «Pide para recoger», «Llámanos». «Más información» no le dice nada a nadie.
El número de teléfono debería ser un enlace real que inicie una llamada, y la dirección debería abrirse en la app de mapas del cliente. Ambas cosas parecen obvias y, sin embargo, faltan en un número sorprendente de sitios web. Con Instant Site, la función «clic para llamar», el horario de apertura y las indicaciones de un solo toque aparecen en todas las páginas por defecto.
Las reservas merecen una atención especial. Enviar a la gente a una página aparte en la que se carga lentamente un widget de terceros hace que pierdas a algunos de ellos justo en el momento en que se habían decidido. O bien integra el formulario de reserva correctamente o mantén la solicitud en tu propio sitio web. Instant Site envía las solicitudes de reserva directamente a tu bandeja de entrada y a tu back office. Si estás comparando herramientas de reserva, elegir un sistema de reservas te ayuda a definir las opciones.
Lo mismo ocurre con los pedidos. Si el botón «Pedir» redirige a la gente a una app de reparto, estás pagando comisión por clientes que vinieron a buscarte a ti. Dirígelos a tu propio sistema de pedidos online siempre que puedas. Cómo encaja esto con el TPV se explica en el artículo sobre el TPV con pedidos online.
Ejemplos de diseño de páginas web para restaurantes según el tipo de local
El diseño adecuado depende de lo que los clientes vengan a hacer, y eso varía mucho más entre un local de comida para llevar y un menú degustación de lo que cualquier galería de plantillas puede reflejar. Así es como cambian las prioridades.
Bistró o trattoria de barrio
Los clientes habituales son la mayor parte de tu clientela, y quieren saber qué hay esta semana. Empieza con una foto acogedora del local en pleno servicio, el horario y un botón «Reservar», y luego un breve apartado «Esta semana» con las especialidades. Mantén un tono cercano y un diseño sencillo. Si las ofertas especiales cambian a diario y se muestran desde el TPV, nunca fallan.
Restaurante de alta cocina
La sobriedad encaja bien con este formato: mucho espacio en blanco, fotos grandes y una tipografía serif que transmita confianza. Pero no dejes que la elegancia oculte la información práctica que los clientes necesitan antes de gastarse unos cuantos cientos en una cena. Indica el precio del menú degustación por persona, con cuánta antelación se pueden hacer reservas, las condiciones de depósito o cancelación, el código de vestimenta y si puedes adaptarte a requisitos dietéticos. A los clientes no les gusta tener que enviar un correo para averiguarlo. Una página dedicada a los vales regalo también viene muy bien aquí.
Pizza, hamburguesas y comida para llevar
Aquí la web es una tienda. «Pide ahora» va en la parte de arriba, seguido de las zonas de reparto, los horarios de recogida y un menú con fotos de los platos más vendidos. La rapidez importa más que el ambiente, y cada pantalla extra antes de pagar te cuesta pedidos. Gestiónalo desde el mismo sistema que el mostrador y la cocina, que para eso sirve un TPV para comida para llevar y a domicilio.
Cafetería o panadería
El horario de apertura tiene más importancia de lo habitual, porque la gente lo consulta a las 7 de la mañana. Ponlo en la primera pantalla, seguido de lo que hay hoy en el mostrador, un mapa y las preguntas prácticas: ordenadores portátiles, perros, tronas, leche de avena. La información sobre alérgenos de los productos de panadería le ahorra al personal una docena de preguntas cada mañana.
Bar de cócteles o discoteca
Un diseño oscuro y evocador queda bien, siempre que el texto supere la prueba de contraste. El calendario de eventos suele ser la página más visitada, seguida de la reserva de mesas o la lista de invitados. Añade la política de edad y la política de entrada donde la gente las vea antes de venir, no después de haber hecho cola.
Restaurante de hotel
El restaurante tiene que funcionar de forma independiente, con su propia página o sitio web que sirva para quienes no se alojan en el hotel, porque mucha gente que busca dónde cenar no se da cuenta de que el restaurante del hotel está abierto para ellos. Dilo claramente. Ponle su propio horario, menú y botón de reserva, en lugar de esconderlo a tres niveles de profundidad en la página de reservas de habitaciones del hotel. El panorama general está en la gestión de restauración del hotel.
Un grupo con varios establecimientos
Empieza con un selector de ubicaciones y, a continuación, dale a cada local su propia página con su horario, menú, fotos y sistema de reservas. Mantén la misma plantilla en todos ellos para que la marca mantenga su coherencia y cualquier cambio en el menú se aplique en todas partes a la vez. La gestión de las operaciones que hay detrás de todo esto es el tema de la gestión de cadenas de restaurantes.
Cómo elegir plantillas para la web de un restaurante
Las plantillas se venden gracias a sus fotos de demostración, tomadas por profesionales con atrezo y una iluminación perfecta. Tu página no se verá así. Así que prueba una plantilla con tu propio material antes de decidirte por ella:
- El nombre más largo de uno de tus platos y tu descripción más extensa. ¿Sigue cabiendo todo en el menú?
- Tu peor foto. Las buenas plantillas aguantan incluso una foto normalita.
- Tu menú completo, con sus sesenta platos, más la carta de bebidas.
- Tu horario real, incluyendo ese lunes que a veces cierras y los turnos partidos.
- Un móvil, sujetado con una sola mano, conectado a datos móviles.
Más allá de eso, comprueba más adelante los aspectos que importan. ¿Puedes editar el texto y las fotos tú mismo sin necesidad de un desarrollador? ¿Hay un bloque de menú adecuado en lugar de un cuadro de texto? ¿Incluye secciones de horario y ubicación, y los botones siguen visibles en el móvil? ¿Puedes cambiar los títulos y descripciones de las páginas que muestra Google? ¿Puedes usar tu propio dominio?
Las plantillas de Instant Site se diseñaron desde el principio para el sector de la hostelería, con versiones para restaurantes, cafeterías, bares, discotecas y locales de comida para llevar. Editas los bloques directamente en la propia página (sección principal, galería, horario, ubicación, historia, menú); tu logotipo, colores y fuentes se aplican a todas las páginas, y todos los diseños funcionan en el móvil sin necesidad de una configuración aparte.
Además, no cuesta nada extra. Instant Site está incluido en todos los planes de Tableview, también en Starter, de 69 dólares al mes, así que no pagas una suscripción aparte para la web ni un alojamiento además del TPV. Lo que incluye cada plan está en los planes de precios de Tableview.
La accesibilidad forma parte del briefing de diseño
Una web accesible es una web mejor para todos, y la mayor parte del trabajo consiste en decisiones que, de todos modos, ya vas a tomar. Contraste que cumpla los requisitos. Texto en lugar de imágenes con texto. Texto alternativo en las fotos que describa lo que hay en ellas. Botones que se puedan manejar con el teclado. Menús que un lector de pantalla pueda leer en orden. Vídeos, si los usas, con subtítulos.
También hay un aspecto legal. En Estados Unidos, las páginas web de restaurantes han sido objeto de una larga serie de demandas por accesibilidad en virtud de la Ley de Estadounidenses con Discapacidades, y en 2019 un tribunal federal de apelación dictaminó, en el caso de Domino’s, que la ley se aplicaba a la página web y a la aplicación de la cadena. En la UE, la Ley Europea de Accesibilidad se aplica desde junio de 2025 a una serie de servicios digitales, con una exención para las empresas más pequeñas. Si esto te afecta y cómo lo hace es una cuestión que debe consultar con un abogado, no con un diseñador web. Diseñar pensando en la accesibilidad desde el principio sale mucho más barato que adaptarlo a posteriori tras recibir una queja.
La velocidad es una decisión de diseño
Las páginas lentas suelen serlo por decisiones de diseño: una imagen principal de 6 MB, cuatro fuentes web, un vídeo de fondo, una galería que carga cuarenta fotos a la vez. Google mide la velocidad de carga a través de sus Core Web Vitals y considera que una página funciona bien cuando el contenido principal aparece en menos de 2,5 segundos, la página responde a un toque en menos de 200 milisegundos y el diseño no se desplaza de forma errática mientras se carga.
Acuerda un presupuesto sencillo con quien diseñe la web. Limita la imagen principal a unos pocos cientos de kilobytes, usa solo dos familias de fuentes, evita los vídeos de reproducción automática y carga las imágenes de la galería solo cuando alguien se desplace hasta ellas. Las páginas de Instant Site están optimizadas para los Core Web Vitals desde el primer momento, lo que cubre la mayor parte de esto sin que nadie tenga que preocuparse por ello.
Diseña pensando tanto en Google como en los visitantes
Los motores de búsqueda también interpretan el diseño, aunque de forma diferente. Cada página necesita un título que diga qué y dónde («Marisco | Restaurante de marisco en Cais do Sodré, Lisboa») y un encabezado en la página que haga lo mismo con palabras sencillas. El menú, al estar en formato de texto, le da a Google los nombres de los platos que la gente busca realmente.
Entre bastidores, los datos estructurados indican a los motores de búsqueda que la página es un restaurante, con su dirección, horario, tipo de cocina y si admite reservas. Instant Site añade automáticamente datos estructurados de negocios locales y un mapa del sitio. Tu nombre, dirección y número de teléfono deben coincidir exactamente con lo que figura en tu perfil de Google My Business y en los directorios, incluso en las abreviaturas. La parte relacionada con el posicionamiento se trata en el artículo sobre SEO local para restaurantes.
Cómo diseñar la web de un restaurante, paso a paso
Si empiezas desde cero o estás rediseñando una web que se ha vuelto un lío, este orden te ahorrará tiempo:
- Decide cuál es la acción más importante: reservar, pedir o visitar el local. Esto determina el botón principal y gran parte del diseño.
- Escribe el contenido de la primera pantalla antes de elegir cualquier elemento visual: el nombre, la descripción de una línea, el horario y el botón.
- Diseña el menú con sus secciones, descripciones, precios e indicaciones dietéticas, y vincúlalo a tu menú del TPV si puedes.
- Elige las tipografías y los colores inspirándote en el local y el letrero, y selecciona un color de contraste para los botones.
- Haz una serie de fotos coherentes: diez platos, el local lleno, el local vacío, el exterior y el equipo.
- Elige una plantilla y pruébala con tu contenido real en un móvil.
- Añade las páginas prácticas: ubicación, reservas o pedidos, cenas privadas, vales regalo, contacto.
- Comprueba el contraste, el tamaño de los botones y la velocidad de carga; después, vincula tu dominio y publica la página.
- Échale otro vistazo un mes después. Arregla lo primero que te moleste.
La mayoría de los restaurantes pueden completar los pasos del uno al cinco en una tarde con un portátil y la cámara del móvil. El resto va rápido una vez que se toman esas decisiones.
Enséñasela a un desconocido antes de lanzarla
Conoces tu propia web demasiado bien como para juzgarla. Antes de que se publique, busca a tres personas que nunca hayan comido en tu sitio, dale a cada una un móvil y una tarea: reservar una mesa para el sábado, encontrar algo vegetariano por menos de 20 y buscar cómo llegar desde la estación. Observa sin intervenir. Cada vez que alguien dude, hay un problema de diseño, y es mucho más barato solucionarlo ahora que después de un mes de reservas perdidas.
Después, mantén la web al día. Una web de restaurante bien diseñada y actualizada es mejor que una preciosa que sigue mostrando el menú del invierno pasado.
Siguiente lectura: tu perfil de empresa de Google, que es lo primero que ven los usuarios antes de tu página web; el marketing en redes sociales del restaurante, para las fotos una vez que las tengas; y la gestión de las reseñas del restaurante, para lo que dicen los clientes sobre ti en otros sitios.
