Guía de diseño (HCI) — Cali GastroWeb

1 · Propuesta de valor

¿Por qué ayuda a resolver el problema?

Quien llega por primera vez a Cali encuentra fácilmente restaurantes de moda, pero no sabe qué es realmente tradicional, dónde probarlo ni cuánto cuesta. Esa información existe, pero está dispersa entre mapas, redes, blogs y páginas oficiales. Cali Gastro Web la organiza desde el descubrimiento cultural, no solo comercial.

"Descubre Cali a través de sus sabores: qué comer, dónde probarlo y qué historia hay detrás."

Qué la hace novedosa para el usuario: une en una sola ficha el plato (qué es, ingredientes, historia, receta corta) con los lugares tradicionales donde probarlo, su lista de precios fechada y la ruta para llegar. Además cambia el contenido según la temporada de la ciudad (Feria, Petronio, Semana Santa).

Necesidad del visitante	Cali Gastro Web	Google Maps	Tripadvisor	Redes sociales	Guías turísticas
Saber qué es tradicional de Cali	Sí	No	Parcial	Parcial	Sí
Historia y receta del plato	Sí	No	No	Parcial	Parcial
Dónde probar cada plato	Sí	Parcial	Parcial	Parcial	Parcial
Precios con fecha y fuente	Sí	Parcial	Parcial	No	No
Contenido según temporada/evento	Sí	No	No	Parcial	Parcial
Mapa y "cerca de mí"	Sí	Sí	Sí	No	No

2 · Ajustes tras la retroalimentación (DCU)

Qué cambió en la idea del sistema

Antes	Ahora	Por qué
Plataforma general de restaurantes	Guía de gastronomía tradicional de Cali	Delimita el problema y evita competir con Google Maps.
Público: cualquier persona	Turista nacional e internacional y visitante por evento	Son quienes menos conocen la cultura gastronómica local.
Solo recetas y mapa	4 formas de explorar: Qué comer · Dónde ir · Cerca de mí · Temporada	Responde a cómo decide un visitante con poco tiempo (N1, N2, N4, N5).
Lugares sin precio	Lista de precios por lugar con fecha y fuente	N3 (saber cuánto cuesta) y RNF06 (no mostrar precios viejos como actuales).
2 restaurantes en el mapa	15 lugares verificados por zona oficial, con filtros	RF03, RF04, RF06 y RF08.
Datos sin respaldo visible	Fuente oficial en cada cifra y estado del dato (verificado / referencial)	N7 confianza · RNF05.

3 · Paleta de color

Colores con intención

La paleta se inspira en el territorio y la cocina del Valle: el verde de sus ríos y montañas, la calidez de la salsa y del fogón, y el dorado de la panela y el manjar blanco. Los contrastes se midieron con la fórmula de WCAG 2.1.

Primario

Verde azulado

#0D7377 · contraste 5,6:1 con blanco (AA)

Confianza y frescura; evoca ríos y montañas del Valle. Se usa en navegación, botones principales y todo lo "seguro": acciones y datos verificados.

Acento

Naranja fogón

#FF6B35 · 2,8:1 → solo texto grande o decorativo

Despierta el apetito y transmite la energía caleña. Se reserva para énfasis (palabras clave de títulos, temporada actual). Para texto pequeño se usa su versión oscura #E55A2B.

Apoyo

Dorado panela

#F59E0B · 8,4:1 con azul noche

Remite a la caña de azúcar, la panela y el manjar blanco. Marca niveles de precio y destacados sin competir con el primario.

Fondo

Crema mantel

#FFF8F0 · texto #1E293B = 13,9:1 (AAA)

Fondo cálido que diferencia secciones y cansa menos que el blanco puro en lecturas largas (recetas).

Contraste

Azul noche

#0A1628 · texto claro = 17,3:1 (AAA)

Bloques de datos ("¿Sabías que?") y portada. Da peso a las cifras oficiales y hace resaltar las fotos de los platos.

Estados

Semáforo de confianza

Verde #15803D y ámbar #B45309 · 5,0:1 (AA)

Verde = precio verificado, ámbar = dato referencial de años anteriores, gris = sin dato. Siempre acompañado de ícono y texto, nunca solo color (accesibilidad para daltonismo).

4 · Íconos

Un solo set: Lucide (línea, trazo 2 px)

Se eligió un único set de íconos de línea, de código abierto y gratuito (RNF08). Un solo estilo da consistencia (RNF07) y, a diferencia de los emojis, se ve igual en cualquier celular o computador. Cada ícono usa metáforas reconocibles —reconocimiento antes que recuerdo— y siempre va acompañado de una etiqueta de texto.

Ícono	Significado	Dónde se usa	Por qué este ícono

5 · Tipografía y principios HCI

Legible primero, con personalidad

Decisión	Justificación
Outfit para títulos	Geométrica y cercana; da personalidad moderna a nombres de platos y secciones sin perder claridad.
Inter para textos	Diseñada para pantallas; muy legible en tamaños pequeños como precios, direcciones y fuentes.
Mobile-first (RNF02)	El turista consulta en la calle: filtros en una columna, botones de mínimo 44 px (RNF03) y acciones "Cómo llegar" a un toque.
Consistencia (RNF07)	Misma tarjeta de lugar en listado, mapa y "Dónde probarlo"; mismos estados de precio en todo el sitio.
Reconocimiento > recuerdo	Las 4 formas de explorar están siempre visibles en el inicio; los filtros elegidos se conservan en la URL y la sesión (RF09).
Confianza (N7, RNF05, RNF06)	Cada cifra enlaza a su fuente; cada precio dice cuándo se consultó y si es verificado o referencial.

Guía de diseño de Cali Gastro Web