En la actualidad son muchos los negocios que tienen presencia online, ya no sólo es necesario que las tiendas online tengan un sitio web que los usuarios puedan visitar. Incluso en el caso de los restaurantes, es común que tengan un sitio web donde se puede identificar el tipo de comida que sirven, el horario de atención y la ubicación. Algunas páginas incluso implementan un formulario para reservas y muchos otros ofrecen su menú completo. Por medio del sitio web, el usuario conoce todos los detalles del restaurante, desde la ubicación hasta el aspecto del local. De esta manera, vive la experiencia incluso antes de decidirse a visitar el restaurante. Esta es la principal razón por la que muchos restaurantes deciden crear un sitio web: al recrear la experiencia, de una u otra manera, pueden convencer a un visitante de convertirse en cliente.
En este artículo hemos recopilado algunos ejemplos de sitios web de restaurantes, cada uno ofrece comidas distintas y posee estilos diferentes según su público objetivo. Pero son buenas referencias si están creando un sitio web para un restaurante y no sabes qué camino tomar.
Rissoteria Melotti
Desde la página de inicio podemos notar la elegancia del restaurante. Desde la fotografía que se utiliza como fondo, donde los cubiertos y la vajilla hacen notar el nivel del restaurante, hasta la tipografía que se ha empleado. Se utilizan tres fuentes, la primera es caligráfica y corresponde al propio logo tipográfico. La segunda fuente es una serif que mantiene el estilo de la primera. La última fuente es una sans-serif de bastones delgados que se emplea para hacer énfasis en los botones de llamada a la acción.
Se hacen uso de imágenes grandes, no sólo como fondo, sino también en los enlaces. Cuando se posa el cursor sobre alguna imagen tenemos un pequeño efecto de acercamiento. Es un efecto sencillo, pero sí que le agrega valor a todo el sitio web.
Mercer Tavern
Este moderno sitio emplea una visible cuadrícula para organizar los elementos de su sitio, de modo que en la página de inicio parece que todo estuviera formado por grandes botones. Incluso los enlaces a las redes sociales son más grandes de lo usual. Esta decisión poco común hace que el sitio destaque y le da un ambiente más juvenil y divertido al sitio.
Otra particularidad de este sitio es que no cuenta con un menú propiamente dicho. Todo el sitio se encuentra en una sola página. Han hecho un muy buen uso del espacio al decidirse por un diseño más “gráfico” y visual.
Whitmans
Este sitio posee una fotografía que ocupa todo el ancho de la pantalla. Se le ha aplicado un filtro azul para que la tipografía blanca hiciera mayor contraste y fuera más legible.
Posee un efecto parallax en la sección inicial. Debido al volumen de contenido se ha decidido usar el diseño de una página, aunque a diferencia del sitio anterior, Whitmans sí posee un menú localizado en la parte superior derecha.
Fino Par
Este sitio emplea una imagen y coloca una tipografía en el centro para hacer recordación de la marca. Se ha colocado un filtro oscuro a la fotografía para que la fuente destaque del fondo. Al igual que Whitmans, hace uso del efecto parallax en secciones específicas del sitio (al inicio y al final), de esta manera el efecto realmente impacta.
La tipografía de apoyo que se usa es una serif, se ha elegido así para que combine con la tipografía que se ha colocado en la pantalla de inicio. Debido al uso del color negro y blanco, así como la selección de tipografías, el sitio tiene destila elegancia.
Lemonade
Este sitio hace uso de colores amarillos y verdes, tanto en la decoración de su local (como podemos ver por las fotografías en slider), como en la paleta de colores de su sitio. El menú se encuentra sobre una barra amarilla que es ligeramente transparente.
El ambiente del local luce agradable y acogedor, estas dos características se traducen al sitio por medio de la tipografía y los colores. Además se hace uso de un patrón de diseño donde se han ilustrado rodajas de limonadas. El trazo libre y la síntesis de la ilustración transmiten un ambiente relajado y sencillo. Se emplea también el parallax y muchas imágenes para destacar los beneficios de este restaurante.
Benito’s Hat
La página de inicio se divide en 3 secciones bien diferenciadas. Como fondo se emplea una fotografía, se le ha colocado un filtro opaco para que el texto haga contraste. Asimismo, se hace uso de imágenes en slider, aunque es algo diferente a los sliders comunes: las imágenes posee un borde como si fueran fotografías impresas.
La tipografía, la selección de colores, las líneas libres que se emplean para separas las secciones y los trazos de las ilustraciones transmiten libertad. Se traduce a un ambiente bastante relajado y tranquilo, perfecto para pasar el rato con amigos.
Jamie’s Oliver Fifteen
Este sitio posee una estética minimalista. Emplea una sola tipografía y divide las secciones por título. El título se encuentra en mayor puntaje y en negritas. Además, se encuentra subrayado. Todo el contenido se encuentra centrado, dejando bastante espacio en los bordes derechos e izquierdos.
A diferencia de otros sitios, tiene un volumen mayor de contenido, por eso se ha divido bien el menú que se ubica también en el centro, bajo el nombre del restaurante en el primer pantallazo. Para no abrumar al visitante con tanto texto se hace uso de fotografías que funcionan como un descanso visual y que hacen el contenido más variado.
Shizuku Ramen
Al igual que Fifteen, este sitio posee una estética minimalista. Se hace uso de una paleta compuesta por tres colores: blanco, negro y gris. Debido al contenido se hace uso del diseño de una sola página. Posee un menú hamburguesa que se mantiene en la esquina inferior izquierda. Se hace uso de fotografías, sliders y también animaciones sencillas para variar contenido e intercalar entre imágenes y texto.
Es un sitio bastante sencillo y limpio, pero no por ello menos efectivo que otros que ya habíamos revisado.
Jaffle Jaffle
Este sitio tiene una navegación un poco distinta: cuando bajamos con la rueda del ratón, nos posiciona inmediatamente en la siguiente sección. Es una manera efectiva de ahorro de tiempo para el usuario, además evita que se pase contenido por alto.
El principal color de la marca es el verde, por eso lo vemos en el menú e incluso en algunas fotografías (como filtro). Como colores de acento se usa blanco, negro y gris. El gris principalmente se usa como color de fondo para poder diferenciar las secciones del sitio.
Duke’s
Este sitio posee un slider donde coloca algunas fotografías de los platos que tiene disponibles. De manera muy sabia, se han colocado todos los platos sobre una mesa de madera bastante rústica, lo que crea una línea gráfica entre todas las fotografías.
El menú siempre se mantiene visible en la parte superior y se diferencian las secciones mediante figuras sencillas (círculos y líneas). Hace uso de una tipografía simple, parecida a las que veíamos en las máquinas de escribir de antaño.
Jacks Bar
Este sitio hace uso del efecto parallax en ciertas secciones. Como muchos otros ejemplos, posee un diseño de una sola página e intercala textos con imágenes para ofrecer un contenido variado. En todas las fotografías se ha colocado un filtro opaco y se emplean como fondo en algunas secciones.
La zona más impresionante es la de los menús. Se hacen uso de composiciones tipográficas que realmente captan la atención de los visitantes. Toda la composición es un enlace, pero también se ha colocado un botón de llamada a la acción, para dar a entender que es un enlace.
Colonia Verde
Este sitio posee un menú bastante más notorio de lo normal. Este se ubica en todo el ancho de la composición. Como fondo se ha empleado una tipografía de un plato especial que sirven en el restaurante.
En las otras página sí te permite desplazarte hacia abajo para poder visualizar el contenido. En la mayoría se emplean fotografías como fondo y también para captar la atención. Al bajar con el ratón pasan las fotografías, de modo que también sirve como una especia de slider.
Easy Bistro
Este sitio presenta una impresionante tipografía en la pantalla inicial donde se indica el nombre del restaurante. Esta tipografía parece que estuviera compuesta por luces, el color de la tipografía y la imagen que se utiliza de fondo ayudan a crear este ambiente.
Las secciones se encuentran dividas ya sea por una imagen, que sirve también como descanso visual, o por el color de fondo.
The Paper Mill
Este sitio posee una textura de papel o cartulina, que se complementa con los tonos sepias que se emplean para las fotografías. La tipografía también tiene colores tierra, al menos en el menú. Para el contenido se emplea una tipografía negra de bastones delgados, los tonos tierra funcionan como acento para destacar enlaces y botones.
Es un diseño de una sola página y cuenta con suficientes espacios en blanco. Además se colocan fotografías entre secciones que sirven como descanso visual.
Marianne Restaurant
Este sitio es elegante, se nota en las fotografías que colocan en el slider que se puede apreciar en la página de inicio. Al bajar, el menú siempre se queda fijo en la parte superior.
Todo el contenido se coloca en el centro y existe un buen balance entre los elementos gráficos y el texto. Tiene un enfoque minimalista y hace un gran uso de los espacios en blanco.
Se emplean dos tipos de tipografías que van a juego: una sans-serif de bastones semi-gruesos que se coloca en los títulos y una serif en menor puntaje y de bastones más delgados.
