Marca y diseño

La marca de un restaurante no es un logo — es la sensación que tiene un comensal cuando la puerta se cierra detrás de él, y si el sitio coincide con eso. La mayoría de los restaurantes independientes fallan de una de dos formas: la marca es fuerte en el salón y está ausente en línea, o la marca es ruidosa en línea y desconectada de lo que entra por la puerta. El puente es un set pequeño de tokens de diseño — la paleta, la tipografía, el tratamiento de la foto, la voz — aplicados consistentemente en el sitio, en GBP, en el menú y en los impresos. No hace falta un rebrand; la mayoría de los operadores llega al 80% con una mañana de sábado, una paleta y tres pares accesibles.

Este pilar junta los manuales, términos del glosario y herramientas para el trabajo de diseño que toca el sitio. Léelo de corrido si estás armando una marca desde cero; salta a la sección que toque si estás arreglando una pieza puntual.

La marca es un sistema, no un logo

Los cinco elementos que cargan la identidad visual de un restaurante independiente, en orden de palanca para el operador:

• Paleta de color. Máximo tres a cinco colores: un primario (tu «color de marca»), un secundario o acento, ink (casi negro para texto), crema o papel (para fondos) y un color de alerta si entregas una herramienta o un formulario. La parte dura es el par accesible — una combinación cuyo contraste cumpla WCAG 2.2 AA al tamaño de cuerpo. La herramienta gratis Brand Suite genera pares accesibles desde cualquier hue inicial.
• Tipografía. Dos faces, casi siempre: una display para titulares (la personalidad), una de texto para el cuerpo (la legibilidad). Para restaurantes independientes las combinaciones probadas son una serif display (Fraunces, Cormorant Garamond, EB Garamond) emparejada con una sans humanista (Inter, Source Sans, Public Sans). Evita emparejar dos display; evita emparejar dos sans. La hoja de especificaciones de fotos incluye los emparejamientos tipográficos usados en builds reales.
• Tratamiento de foto. ¿Tus fotos son cálidas o frías? ¿Alto contraste o muteadas? ¿Plato cerrado o mesa abierta? Elige un tratamiento y manténlo en el sitio, GBP, social y print. La inconsistencia es lo que lee como «contrataron a tres proveedores distintos» — y eso es la marca.
• Voz. La forma en que habla el sitio. ¿Primera persona del chef? ¿Tercera persona editorial? ¿Casual juguetona? ¿Formal contenida? El contrato de voz de este sitio (/methods/#voice-contract) es un modelo: declarativas cortas, sin marketing-speak, sin signos de exclamación. Elige un registro y quédate ahí.
• Iconografía. Si usas iconos (en nav, en herramientas, en la página del menú), necesitan un solo grosor de trazo, un solo radio de esquina y un solo peso visual. Mezclar iconos de línea con iconos rellenos lee como inconsistente. Usa un solo set; si tu sitio necesita un icono custom, brifea a un diseñador y agrégalo al sistema.

Codifica estos cinco en un archivo de tokens (un bloque JSON o de custom properties de CSS) que el sitio, las plantillas de email y el diseñador de print referencien. Una vez que existen los tokens, los «cambios de marca» se vuelven ediciones de dos líneas, no rediseños.

La accesibilidad también es trabajo de marca

La meta de accesibilidad del plan de lanzamiento (/es/accessibility.html) es WCAG 2.2 AA. La mayoría de los operadores leen «accesibilidad» como un balde separado de cumplimiento; en la práctica es una disciplina de marca. Tres lugares donde la línea se borra:

• Contraste de color. Un par primario-sobre-crema que falla 2.2 AA a 16px no es una decisión de marca — es una decisión de visibilidad que el adulto mayor y la persona con baja visión no pueden ver. Ajusta la luminosidad de uno de los colores hasta que pase; el hue se queda. Par accesible es el término; la Brand Suite te muestra qué pares de tu paleta pasan y cuáles no.
• Tamaños de tipo. Piso de 16px en el cuerpo en teléfonos. Más chico es una decisión de marca que falla al 5% de tu audiencia. La excepción rara es texto de pie de página o adorno aria-hidden; nunca los precios del menú, nunca el copy del cuerpo.
• Anillos de foco. El anillo amarillo por defecto que envían los navegadores es feo y funciona. Reemplázalo con un anillo de 2px en tu color de acento — no más delgado, no transparente, no eliminado por CSS. La experiencia del usuario que navega con teclado es parte de la marca.

Tres modos de fallo de marca específicos a sitios de restaurante

1. El delator de plantilla Wix. Fuentes stock, hero stock, bloque de testimonios stock, scroll «parallax» de mediados de los 2010s. La lectura del visitante es «a este restaurante no le importó lo suficiente como para hacer esto por su cuenta». El arreglo no es custom-desde-cero; el arreglo es quitar los delatores. Hostea las fuentes, reemplaza la foto stock con una imagen tomada por el operador, mata el parallax. Wix versus a la medida recorre los seis lugares donde Wix se queda sin espacio para un independiente.
2. El delator de rebrand de agencia. Espacio en blanco excesivo, formas abstractas, «auténtico» en el about copy, una fuente demasiado refinada para la comida. La lectura del visitante es «este restaurante contrató a la agencia equivocada». La comida no necesita diseño a este nivel; el diseño está compitiendo con el menú. Empareja el registro visual con la realidad de operación.
3. El desfase. El salón es cálido, hecho a mano, familiar. El sitio se ve como una startup tecnológica. O el salón es preciso, emplatado, alta cocina. El sitio se ve como un blog Wordpress. El desfase cuesta reservas porque la expectativa que el visitante setéa en el sitio no coincide con lo que se encuentra al entrar. Los dos tienen que estar de acuerdo.

La fotografía es el artefacto que carga la marca

La fotografía correlaciona con la consideración pero no con la conversión (según los hallazgos de la auditoría del 1% de margen). Lo que eso significa: la fotografía fenomenal no arregla un embudo con fugas, pero la mala fotografía le pone un techo al valor percibido. Tres reglas:

• La luz lo es todo. Luz de día en la ventana, media mañana, con un reflector blanco para rellenar las sombras. La foto más cara de iPhone con mala luz le gana a la foto más barata de DSLR con buena luz, cada vez. La hoja de especificaciones de fotos cubre el setup de iluminación.
• Hojas de spec a los fotógrafos. Entrégale al fotógrafo el output de Photo Brief antes del shoot. Relaciones de aspecto, tamaños de archivo, superficies a las que apunta. Evita el resultado de «cuatro horas de fotos que se ven geniales pero no encajan en ningún lado».
• No uses comida generada por IA. La página /es/ai/ se compromete con eso; los operadores también deberían. El salón se da cuenta. El crítico se da cuenta. El visitante se da cuenta. Platos reales por un fotógrafo real.

Dónde este tema toca a los otros

• Conversiones y Contenido — porque la consistencia de marca sube el valor percibido, y el valor percibido sube el techo del precio. El bavette steak que cuesta $34 en un menú bellamente diseñado lee como más barato que el mismo steak a $34 en un menú feo.
• Velocidad y móvil — porque las decisiones de diseño (hero grande, web fonts, cursores custom, animaciones de hover) juegan contra la velocidad. Los buenos diseñadores conocen el tradeoff explícitamente.
• Confianza y reseñas — porque las señales de confianza en un sitio (la página del dueño, el agregado de reseñas, las menciones de prensa) son artefactos visuales y se ganan su tratamiento visual.

El compuesto a vigilar: el puntaje de consistencia de Brand Suite. Corre la herramienta trimestralmente con tu paleta actual. El pasa-no-pasa de los pares accesibles es la única métrica que importa; lo demás es gusto.