Una web conceptual para un quesero artesano

Escritorio y móvil de un solo vistazo

El concepto se muestra en ordenador y móvil a la vez, siendo esta la forma más rápida de comprobar que la personalidad sobrevive al cambio de pantalla. Las marcas de alimentación tradicionales suelen suavizarse a medida que se reducen de tamaño, perdiendo el contraste que las hacía interesantes. Aquí, el amarillo, el logotipo de letra gótica y la fuente con remates de gran tamaño se mantienen en todos los anchos, porque el diseño web adaptable se concibió como una distribución alternativa y no como una versión comprimida de la primera.

Tradición de artesanos

La página de inicio se abre sobre un fondo amarillo plano con el producto fotografiado sobre él, sin degradados, texturas ni graneros a la vista. La marca denominativa en letra gótica aporta la tradición, la tipografía con remates de gran tamaño aporta el volumen y la navegación lateral vertical mantiene despejada toda la parte superior de la pantalla para el queso. La mayoría de los diseños web de alimentos artesanales tienden a lo rústico, por lo que optar por algo gráfico y llamativo fue la forma más rápida de lograr una apariencia sofisticada en lugar de pintoresca.

Cómo se elabora

La página del producto se divide en dos mitades que responden a dos preguntas distintas. A la izquierda, la tabla de degustación, presentada en forma de plano corto y llena de color, para el visitante que decide si lo quiere. A la derecha, la propia quesería en fotografía de archivo en blanco y negro, para el visitante que decide si confiar en ella. Debajo, el proceso transcurre como una secuencia numerada de tres pasos, lo que dota a la página de un ritmo que el resto del diseño asimila.

Siete generaciones

La historia de una familia que lleva elaborando queso durante siete generaciones, contada con texturas de archivo, un mapa y un conjunto de cifras que respaldan la afirmación en lugar de limitarse a decorarla. La cuadrícula del equipo en la parte inferior pone cara a la operación, algo que resulta fundamental para un pequeño productor que vende a un precio superior. Esta es la sección que justifica el precio antes de que la tienda lo solicite.

El mostrador de quesos

La parte de comercio electrónico, construida como una cuadrícula de productos sencilla sobre amarillo plano para que sean los propios quesos los que aporten toda la variación de color y forma. Cada tarjeta mantiene visibles el precio y el peso sin necesidad de pasar el cursor, porque ocultar el precio mata la conversión en alimentación. La página de producto, debajo, va más completa: la historia de la maduración, el sello del premio y el botón de añadir al carrito justo donde cae la vista después de leer.

Tres colores, nada más

Tres colores y nada más. El Amarillo Gouda se encarga de la marca, el Casi Negro sostiene cada fondo y el Blanco Roto se ocupa de la lectura. La moderación es la clave, porque en el momento en que entra un cuarto color, el amarillo deja de ser una identidad y se convierte en decoración. Limitar la paleta de forma tan estricta es también lo que permite que el mismo sistema de color funcione en el sitio web, el embalaje y las plantillas para redes sociales.

Una serif que hace el trabajo pesado

Una serif de display lleva los títulos y una monoespaciada se encarga de botones, etiquetas y subtítulos, la pareja que evita que el diseño parezca puramente tradicional. Cada nivel está especificado por separado para escritorio y móvil, con su propio tamaño y peso, para que la jerarquía sobreviva al salto en lugar de reducirse a dos tamaños. Definir así el sistema tipográfico hace que la maquetación sea predecible al construirla después en Framer o en código.

Creado para el teléfono, no reducido

El sitio completo ha sido reconstruido para el teléfono, no escalado a partir de la versión de escritorio. El contraste, el volumen de la tipografía con serifa y el amarillo se mantienen con total fuerza, que es donde la mayoría de los diseños responsivos pierden discretamente la identidad de marca. Las tres pantallas aquí muestran el inicio, la historia y el flujo del producto, de modo que la versión móvil se lee como una experiencia completa y no como una simple muestra.

Inicio y navegación

La página de inicio móvil mantiene el amarillo a sangre completa y la tipografía serif de gran tamaño, con el texto reorganizado en una sola columna y el queso fijado en la parte inferior de la pantalla. El menú se abre como una superposición de pantalla completa en color Casi Negro, con zonas de pulsación generosas y de un tamaño pensado para los pulgares en lugar de los cursores. La navegación en un sitio web de comida tiene que ser rápida, porque el visitante suele estar a una mano y una distracción de irse.

Nuestro queso, en vertical

La sección Nuestro queso se ha reorganizado para una lectura vertical. La tabla de degustación y la fotografía de los productos lácteos se sitúan una encima de la otra en lugar de una al lado de la otra, y el proceso de tres pasos se convierte en una secuencia con desplazamiento que mantiene los números grandes. El estilo editorial se mantiene en la columna más estrecha porque la escala tipográfica se diseñó específicamente para ello, en lugar de adaptarse a posteriori.

Sobre nosotros y el equipo

La historia y el equipo en una pantalla estrecha, con la fotografía de archivo y las cifras reordenadas para que la historia siga construyéndose en el orden correcto. La cuadrícula del equipo pasa de una fila a un diseño de dos columnas que mantiene las caras lo suficientemente grandes como para que se aprecien. Los pequeños productores venden basándose en las personas, por lo que esta sección mantiene su peso en el diseño móvil en lugar de ser recortada.

Comprar en el móvil

La tienda en el móvil, con la cuadrícula de productos reducida a dos columnas y la acción del carrito fija al alcance del pulgar. La página de producto mantiene el texto explicativo sobre la maduración y el sello del premio, porque recortar la historia en el móvil es la razón habitual por la que el comercio electrónico de alimentación tiene peor tasa de conversión ahí. Mismo contenido, contenedor diferente, que es cómo se abordó el diseño adaptable en todo momento.

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