Una web conceptual para un restaurante de marisco

El hero en movimiento

La página de inicio se abre con el mar moviéndose detrás de un titular que permanece perfectamente inmóvil. El movimiento se utiliza una sola vez y solo aquí, porque el sitio web de un restaurante tiene que sentirse vivo sin convertirse en un muestrario de vídeos. El plato mantiene su posición durante todo el bucle, por lo que la animación aporta atmósfera al diseño de interacción sin competir en ningún momento con la comida.

Cinco colores frente a la costa

Tres azules aportan profundidad, un blanco roto se encarga de la lectura y un naranja bogavante se reserva exclusivamente para botones y enlaces de reserva. Esa última regla es la que hace todo el trabajo: como el naranja no aparece en ningún otro lugar del diseño, cada elemento cálido en pantalla es algo sobre lo que se puede actuar. Para el sitio web de un restaurante donde el único objetivo es conseguir una reserva, vincular el color de acento a la acción elimina cualquier duda sobre dónde hacer clic.

Una serif con mucho swing

Una serif de alto contraste y con gran personalidad se encarga de los títulos, combinada con una sans-serif sencilla para el texto del cuerpo y los precios, de modo que el menú siga siendo legible a tamaños pequeños. Ambos tipos de letra están especificados tanto para ordenador como para móvil, reduciéndose los tamaños de pantalla de forma más pronunciada que los del texto. Esta diferencia es deliberada, ya que un titular que funciona a ancho completo se convierte en un grito en el móvil si escala proporcionalmente.

Pescados, mariscos y cocina calabresa

La sección de cabecera se divide en tres franjas verticales: el titular con serifa a la izquierda, la textura real del mar en el centro y el plato estrella enmarcado en un círculo a la derecha. Rodear el plato con un círculo es lo que convierte una foto de comida en un retrato, y las finas líneas de conexión etiquetan los platos sin saturar la composición. Un único botón naranja se sitúa debajo del texto, siendo la única llamada a la acción en la parte superior de la página de inicio.

Bienvenido a Scilla

El lugar antes del plato. Costa Viola, el pueblo de Scilla y la leyenda detrás de su nombre, explicados a través de la fotografía, un mapa de Italia dibujado a mano y marcos de Polaroid repartidos por el diseño. Los sitios web de restaurantes tienden a pasar directamente al menú, pero cuando se trata de un destino turístico, el entorno es la mitad de lo que se vende. Esta sección se alarga a propósito y termina en las especialidades a la brasa, dando paso al menú.

Pasta casera, pescado a la parrilla

El menú está organizado por platos, con una lista de categorías persistente a la izquierda y fotografías que llenan la derecha para que el visitante coma con los ojos antes de leer un solo precio. Cada plato carga su propio conjunto de recetas sin necesidad de cambiar de página, lo que mantiene una navegación fluida. El botón de reserva permanece fijo en la cabecera en todo momento, porque en el diseño web para restaurantes la decisión de reservar suele tomarse a mitad del desplazamiento y no al final.

El mismo restaurante en un teléfono

El sitio web completo rediseñado para móviles, manteniendo el mismo color azul marino, la misma tipografía serif y el mismo tono cálido. Las tres pantallas que se muestran aquí cubren el inicio, la historia y el menú, que son las tres cosas que un visitante hambriento realmente abre en un teléfono. No se recortó nada en el diseño adaptativo, solo se reordenó y se reorganizó.

Inicio y navegación

La página de inicio móvil mantiene el diseño principal dividido en una pila vertical, con la textura marina detrás del titular y el plato anclado en la parte inferior. La navegación se abre como una superposición a pantalla completa en azul marino, con grandes áreas de pulsación y el botón de reserva repetido abajo. La mayor parte del tráfico de los restaurantes llega a través de un teléfono cuando la gente ya está decidiendo dónde comer, por lo que reservar nunca está a más de un toque de distancia desde cualquier parte de la interfaz de usuario.

La historia, en vertical

Costa Viola y el mapa reordenados para lectura vertical, manteniendo intactos los marcos tipo polaroid para que la sección siga pareciendo hecha a mano y no una plantilla. La fotografía pasa a una sola columna mientras el mapa ocupa todo el ancho, lo que conserva la sensación de lugar a un tamaño en el que de verdad se puede leer. La atmósfera es lo más difícil de preservar en diseño móvil y lo primero que suele perderse.

Menú en móviles

El menú completo en un teléfono, con las categorías de platos convertidas en un desplazamiento horizontal y cada plato con su propia fotografía. Los precios se mantienen alineados al margen derecho para un escaneo rápido, y el botón de reserva permanece fijo en la parte inferior de la pantalla. Construir el menú móvil como una experiencia de navegación en lugar de un PDF es la mayor mejora de usabilidad en este proyecto.

Ambientado en el mar

La toma de presentación final, con el teléfono iluminado a medias sobre el agua oscura y la arena. Existe para vender la atmósfera del concepto en una sola imagen, que es lo que debe hacer la miniatura de un portfolio o una publicación en redes sociales antes de que se lea una sola palabra del caso de estudio.

¿Quieres una web así para tu negocio? Descubre mis servicios de diseño web o reserva una llamada gratuita.