Misfits-proyecto

Detalle del proyecto

Descripción del proyecto

Propuesta de rediseño web para la banda Misfits, incluyendo promoción de conciertos ficticios en Sudamérica, contenido multimedia (discografía, blog, tour) y una tienda de merchandising conceptual, desarrollada como proyecto académico de Diseño y Desarrollo Web.

Misfits proyecto

Objetivo del proyecto

Modernizar la identidad visual de la banda combinando su estética punk/horror con una experiencia de navegación clara y funcional.

Problema

Los sitios de bandas de este estilo suelen ser difíciles de navegar, poco organizados y no responsivos.

Usuario objetivo

Fans del punk y horror rock interesados en fechas de conciertos, discografía y merchandising oficial.

Solución

Sitio multipágina (Home, Discografía, Tour, Blog, Merchandising) con navegación clara y reproductor de música integrado.

Proceso del diseño

Para este proyecto investigué la identidad visual histórica de The Misfits (su iconografía punk, tipografías y paleta de blanco, negro y rojo) y la adapté a una estructura web moderna, organizando el contenido en secciones claras: inicio, discografía, tour, blog y tienda.

Home Misfits - hero y próximos conciertos Discografía Misfits Merchandising Misfits - poleras y polerones

Investigación

Revisé referencias del sitio oficial y de otras bandas del género para entender patrones comunes: uso de imágenes en dúotono, tipografías góticas/punk, y la importancia de destacar fechas de tour y merchandising como elementos centrales de conversión. Para la paleta, combiné el negro característico del punk con un verde neón como acento principal (inspirado en el arte gráfico horror-punk), sumando rojo sangre para títulos destacados y un verde oliva militar en el tratamiento dúotono de las fotografías de la banda.

Paleta de colores

#0D0D0D
#C4D600
#C1272D
#4B5320

Arquitectura

El sitio se organizó en 5 páginas principales: Home (con próximos conciertos y canción destacada), Discografía (con playlist embebida), Tour (fechas y ubicaciones), Blog (galería de contenido histórico de la banda) y Merchandising (tienda conceptual), todas conectadas mediante una navegación fija.

Pequeños ejercicios

Ejercicio 1

Ejercicio 1

Ver más →
Ejercicio 2

Ejercicio 2

Ver más →
Ejercicio 3

Ejercicio 3

Ver más →
Ejercicio 4

Ejercicio 4

Ver más →