Gonzalo TéllezBatan
Batan
Productora audiovisual para marcas de gastronomía, nacida del equipo detrás de A Comer. Llevé su manual de marca a lo digital, construí su primer sistema de diseño y diseñé y desarrollé su nuevo sitio.
Recorrer el prototipoUna marca nueva que todavía no vivía en pantalla
Batan nace del equipo detrás de A Comer, el colectivo de recetas peruanas en video. Tras su rebranding tenía un manual de marca pensado para piezas gráficas y un sitio anterior que ya no reflejaba la nueva marca. Necesitaba que la identidad funcionara en lo digital y un sitio que presentara su trabajo como productora.
Del manual al sitio, en cuatro decisiones
- 01Partí del manual y lo llevé a la pantalla.
Íconos operativos propios, ícono de app y favicon, y roles claros de color y tipografía para la web.
- 02Construí su primer sistema de diseño.
Una sola fuente de verdad para diseño y desarrollo: componentes vivos, modo claro y oscuro, contraste medido y traspaso al gestor de contenidos.
- 03Diseñé el inicio como un set de filmación.
La cámara avanza por escenas y los servicios se leen como una carta.
- 04Desarrollé el sitio sobre el sistema.
Cada pieza del sitio sale del sistema, con las mismas variables y los mismos estados.
Una productora que trabaja como una cocina
El sitio no presenta una productora: te mete a su cocina. Las páginas son estaciones de trabajo y el equipo es una brigada, porque en Batan cada rol tiene su par en una cocina. Allí también se cocina, solo que lo que sale del pase es contenido, diseño, branding y valor de marca. De ahí el lema que ordena todo el sitio: «del guión al plato».
Sobre el video de la cocina, la barra y las tarjetas son de vidrio: el fondo se lee a través, con transparencia y desenfoque, nunca con un bloque opaco.
Una sola fuente de verdad para diseño y desarrollo
El sistema lleva la marca a la pantalla y reúne las decisiones del prototipo del sitio: fundamentos de marca, color en claro y oscuro, tipografía, iconografía, componentes con sus estados, patrones de interacción, plantillas, accesibilidad medida, voz y variables listas para el código.
Fundamentos
- 01Marca
- 02Color
- 03Tipografía
- 04Iconografía
Sistema
- 05Componentes
- 06Overlays y feedback
- 07Patrones
- 08Navegación
- Rail de escenas
- 09Responsive
- 10Plantillas
Guía
- 11Accesibilidad
- 12Voz y tono
- 13Variables
- 14Traspaso a Elementor
- 15Changelog
Con muestra viva en esta página
Cuatro colores, dos temas y un set de íconos propio
La marca pasó del papel a la pantalla con sus colores intactos, un modo oscuro que invierte roles y no valores, e íconos dibujados para la interfaz.
Cuatro colores, sin degradados ni variaciones de tono. La paleta no se amplía: entre claro y oscuro cambia el rol de cada color, no su valor.
Idioma, tema y menú viven juntos en el header, igual que en el sitio.
Pruébalo: toca el sol. Todas las muestras vivas de esta página pasan a modo oscuro contigo, y vuelven a claro con la luna.
Un set de 29 íconos ilustrados con el trazo orgánico de la marca, pensado para la interfaz en lugar de los íconos de plantilla. Aquí van seis; la tinta se adapta sola al tema.
Piezas con todos sus estados
Cada componente del sitio está documentado con sus estados y reglas, y funciona igual en claro y en oscuro.
Un solo botón naranja por vista, y es la acción principal. Al pasar el cursor, el botón sube; en celular, cada uno mide al menos 44 px para el dedo.
Los chips filtran y las etiquetas clasifican. En celular la fila de filtros no se parte en dos líneas: se desliza con el dedo, y un arrastre no activa un filtro por error.
Reposo, foco, deshabilitado y cargando. El foco siempre se ve, y el botón no cambia de ancho mientras envía.
El error se marca con borde, mensaje y fondo tenue, y la etiqueta siempre está visible: el texto de ayuda nunca es la única pista.
Cada servicio de la carta es una tarjeta con ícono propio, una línea que lo explica y sus formatos como etiquetas.
Los trabajos ocupan puestos fijos. Al filtrar, lo que coincide avanza y lo demás se atenúa, pero la grilla nunca cambia de forma.
Variables listas para el gestor
Cada valor del sistema es una variable con su equivalente en el gestor de variables de Elementor. Si cambia una, el sitio entero la sigue.
- --naranja-batanNaranja Batan · acción principal
#FF6C37 - --naranja-profundoNaranja profundo · error y hover
#E85620 - --carbonCarbón
#2E2D2C - --carbon-profundoCarbón profundo
#171615 - --beigeBeige
#F0DAB5 - --gris-calidoGris cálido · fondo claro
#EDE9E3 - --panalPanal
#F6E9CF
La paleta física de la marca. Las variables por rol, como fondo o texto, apuntan a estas.
- --curva-marcaBotones, reveals y acordeones
cubic-bezier(.2,.7,.25,1) - --curva-suaveMenús y expansiones grandes
cubic-bezier(.25,.8,.25,1) - --duracion-microHovers de botones, links y chips
0.2s - --duracion-mediaAcordeones y menú móvil
0.45s - --duracion-revealAparición de secciones al hacer scroll
0.8s - --elevacion-botonHover de botones
-2px - --elevacion-tarjetaHover de tarjetas
-3px - --inclinacion-3dInclinación de tarjetas con el mouse
5deg - --zoom-imagenFotos dentro de tarjetas de proyecto
1.055
Curvas, duraciones y magnitudes de los efectos. Cada muestra se mueve con su propia variable.
Un sitio que crece sobre el sistema
El sitio está en implementación sobre el sistema, y el equipo de Batan va sumando sus fotos y videos sin tocar la estructura.
Lo que ves en esta página son muestras vivas: piezas sueltas del sistema, elegidas para contar el caso.
El sistema de diseño completo, v2.2, pertenece a Batan y está en su poder.