Ecuador — Cuenca
Proyectos

Hexaleph — Sitio web para una banda de rock de Cuenca

Hexaleph — Sitio web para una banda de rock de Cuenca
11 de abril de 2026
Hexaleph es una banda de rock con base en Cuenca, Ecuador. Su brief fue simple e implacable: un sitio que transmita el tono de la banda antes de que el visitante presione play. Nada de embebidos de Bandcamp pretendiendo ser portada, nada de tema genérico de WordPress — un sitio que se sienta como un artefacto propio de la banda. Llevé el proyecto de extremo a extremo: dirección de arte, UX, diseño visual y frontend de producción.
  • Encuadre de audiencia: dos tipos reales de visitante — fans buscando el próximo show o un nuevo lanzamiento, y promotores/venues haciendo un chequeo de credibilidad de cinco segundos. La portada tenía que servir a ambos en el primer viewport.
  • Estudio de referencias: una mirada dirigida a cómo actos independientes de rock y metal se presentan online (páginas de tour, press kit, merch, enlaces de streaming). El objetivo fue aislar las convenciones funcionales que vale la pena conservar (fechas de tour claras, enlaces de streaming obvios) de los valores predeterminados estilísticos que vale la pena romper.
  • Conversaciones con la banda sobre influencias, artwork, estética escénica — traducidas en un moodboard que condujo cada decisión posterior de diseño.
  • Mapa de prioridad: música → shows → about → contacto. Cualquier otra sección candidata tenía que ganarse su lugar contra esas cuatro.
  • Un hero con fuerza tipográfica que se comporta como un póster de concierto, no como un encabezado corporativo.
  • Una paleta oscura sobria construida a partir del artwork existente de la banda, usada consistentemente para que la fotografía y el arte de portada carguen el peso visual.
  • Ritmo editorial: las secciones respiran, las fechas de tour se leen como un calendario impreso y la sección de press/bio se maqueta como liner notes en lugar de una página web.
  • Movimiento con intención: scroll-reveals sutiles y hover states controlados — lo suficiente para sentirse viva, no lo suficiente para competir con la música.
  • Accesibilidad y rendimiento: estructura semántica, enlaces de streaming navegables por teclado, imágenes con lazy loading y Core Web Vitals rápidos — porque un sitio lento de banda es una pestaña cerrada.
  • Hero / declaración de identidad con el nombre de la banda, la región y la pieza de arte más fuerte.
  • Componente de fechas de tour con venue, ciudad y enlaces de tickets, fácil de actualizar por la banda.
  • Hub de streaming enlazando a Spotify, Apple Music, YouTube y Bandcamp desde un solo componente consistente.
  • Sección de bio / press kit con fotos de prensa en alta resolución y un one-sheet descargable para promotores.
  • Contacto para consultas de booking y prensa, ruteado directamente a la banda.
Hexaleph — 1
Hexaleph — 2
Hexaleph — 3
  • Frontend: stack moderno basado en componentes con Tailwind para el sistema visual.
  • Modelo de contenido: estructurado para que la banda pueda agregar un show o un lanzamiento sin tocar código.
  • Deployment: pipeline estático primero optimizado para velocidad en redes móviles, ya que la mayoría de la audiencia llega vía enlaces sociales en un teléfono.
  • Diseño: Figma para el sistema visual, artwork real y pruebas tipográficas impulsando la dirección final en lugar de stock genérico.
  • Puntuación Lighthouse de rendimiento de 98+ en móvil, medida en un perfil 4G con throttling.
  • Largest Contentful Paint por debajo de 1.4s en dispositivos Android de gama media, gracias a artwork en WebP y hero imagery dimensionada agresivamente.
  • Peso total de la página por debajo de 400 KB para la portada, incluyendo tipografía e imágenes.
  • 100% navegable por teclado: cada enlace de streaming, enlace de tickets y acción de contacto pasa una revisión con solo teclado y un focus state visible.
  • Contraste WCAG AA verificado en cada par foreground/background de la paleta oscura.
Un sitio que se lee como una extensión de la banda en lugar de una página de un tercero sobre ellos — igualmente útil para un fan revisando el próximo show y para un venue decidiendo si contratarlos. Un proyecto pequeño, pero del tipo en que cada decisión visible e invisible — tipografía, espaciado, compresión de imagen, tamaño de tap target — tiene que ser deliberada, porque no hay dónde esconder el trabajo descuidado.