la marca.
Seba Quintanilla es un músico y productor argentino radicado en Mar del Plata, con una trayectoria consolidada tanto en escenarios en vivo como en estudios de grabación. Su identidad profesional fusiona la experiencia técnica y la sensibilidad artística, ofreciendo un perfil versátil que se mueve con naturalidad entre la ejecución musical y la producción sonora.
La marca personal de Seba transmite profesionalismo, calidez y autenticidad, valores que se reflejan tanto en su trabajo como en la estética visual de su web. Este sitio busca representar su universo musical, destacando no solo su talento como intérprete, sino también su rol como creador y colaborador en múltiples proyectos.
período de tiempo.
6 semanas.
mi papel.
Diseño UI, Diseño visual, Prototipado, Desarrollo Web.
herramientas.
Figma, Illustrator, Html, Css. Bootstrap.
el desafío.
El principal desafío fue trasladar la identidad sonora y profesional de Seba Quintanilla al entorno digital. La web debía funcionar como una carta de presentación integral, mostrando tanto su recorrido como músico como su trabajo detrás de escena como productor.
Además, era clave equilibrar lo visual con lo funcional: crear un sitio atractivo, moderno y expresivo, sin dejar de ser claro, fácil de navegar y con carga rápida. También se buscó estructurar el contenido de forma que resaltara su versatilidad sin generar dispersión.
el objetivo.
El objetivo fue desarrollar una plataforma personal profesional, donde Seba pudiera exhibir su música, sus proyectos y su experiencia de forma organizada, atractiva y auténtica. Se buscó construir una presencia digital que conecte con colegas, posibles clientes y oyentes, generando oportunidades de colaboración y difusión.
La web debía reflejar su estilo musical, su trayectoria y su personalidad, siendo a la vez una herramienta de posicionamiento profesional y una forma de acercarse a su comunidad desde un lugar humano y artístico.
cómo.
exploración.
El proceso comenzó con una instancia de investigación y definición visual, donde se buscó capturar la esencia artística y profesional de Seba.
diseño ui.
Se diseñó una interfaz que equilibra lo sobrio y lo expresivo. La identidad visual se apoya en imágenes de alta calidad, detalles tipográficos y una estructura clara.
prototipo.
Se crearon wireframes y maquetas de alta fidelidad para testear la disposición de los contenidos, jerarquía visual y recorrido del usuario.
testing y ajustes.
Revisión funcional y visual en distintos navegadores y pantallas. Ajustes finales para asegurar accesibilidad, legibilidad y coherencia visual.
desarrollo.
Maquetación y codificación de la landing page utilizando HTML, CSS y Bootstrap. Implementación responsive y optimización para distintos dispositivos.
exploración.
moodboard.
Para iniciar el proceso de diseño, se creó un moodboard que sirvió como punto de partida para construir la identidad visual de la web. La idea fue capturar el universo sonoro y visual de Seba, combinando su perfil de músico profesional con su lado más personal y creativo.
Este tablero permitió definir la atmósfera general del sitio, orientando la elección de la paleta cromática, tipografías y estilo fotográfico, buscando un equilibrio entre lo técnico, lo artístico y lo íntimo.
diseño ui.
tipografía.
Se utilizó Raleway como tipografía principal en todos los niveles jerárquicos del sitio. Su estilo sans serif, moderno y elegante, transmite profesionalismo y limpieza visual.
-En títulos, se usaron pesos más pesados (bold y semi-bold) para aportar carácter y presencia.
-En textos y descripciones, se optó por versiones regulares y light para facilitar la lectura y aportar ligereza.
Esta elección permite mantener una unidad visual clara, versátil y fácil de aplicar tanto en escritorio como en dispositivos móviles.
Raleway.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
paleta de colores.
La identidad visual se construyó con una paleta de tonos profundos y expresivos, que acompañan el universo musical de Seba con personalidad y calidez.
Estos colores se usaron en bloques, detalles y acentos, generando contraste y ritmo sin perder sobriedad. La combinación ayuda a reflejar el espíritu artístico y contemporáneo de Seba.
sistema visual.
El diseño de la web de Seba Quintanilla se apoya en una estética oscura, intensa y profundamente visual, que refleja su universo musical con carácter y profundidad.
El fondo negro funciona como base para destacar imágenes en tonos oscuros y violáceos, generando una atmósfera íntima, profesional y envolvente. Las fotografías, tanto de estudio como en vivo, ocupan un rol central en la experiencia visual, transmitiendo la esencia de Seba como artista y productor.
Como elemento distintivo, se incorporó un detalle gráfico en forma de onda que funciona como separador. Esta “ola” evoca de manera sutil la vibración del sonido, conectando visualmente con el mundo de la música y aportando movimiento al layout sin romper la sobriedad del diseño.
secciones.
Todas las secciones están presentes tanto en el menú de navegación como en la home, permitiendo un recorrido fluido e intuitivo por su trayectoria, proyectos y servicios.
Algunas secciones son separadas por un efecto de pintura desgastada, que suma textura y profundidad, conectando con lo artesanal y lo analógico de la música, aportando un toque visual distintivo.
botones.
Los botones se diseñaron utilizando los colores de la paleta, aplicados según su jerarquía y función dentro del recorrido. Tienen formas redondeadas que suavizan el conjunto visual, manteniendo coherencia con las curvas de los separadores y generando una interfaz accesible, clara y amigable.
El resultado es un sistema visual equilibrado, expresivo y profesional, alineado con el estilo artístico de Seba y pensado para que su trabajo brille desde lo visual y lo funcional.
prototipo.
secciones.
El prototipo de la web de Seba Quintanilla fue pensado para ofrecer una experiencia fluida, directa y sin interrupciones, permitiendo al usuario recorrer toda la información en una sola navegación.
La estructura se diseñó en formato one page, donde todas las secciones conviven dentro de la home. El menú superior actúa como una guía de anclajes: al hacer clic en cada ítem, el usuario es llevado automáticamente al bloque correspondiente dentro de la misma página, asegurando una transición rápida y natural.
Este enfoque fue elegido para favorecer una lectura lineal y coherente del contenido, ideal para una narrativa visual como la de Seba, que combina imagen, sonido y experiencia profesional.
flujo de usuario.
Tarea: Buscar información sobre el estudio.
El prototipo permitió visualizar de manera concreta la estructura, navegación y estética del sitio antes de entrar en desarrollo. Fue clave para validar decisiones de diseño relacionadas con la jerarquía de la información, el sistema visual y la experiencia del usuario.
testing y ajustes.
estudio Titler.
Durante la etapa de testeo, se identificó que la sección Estudio Titler contenía demasiada información y requería un nivel de detalle que interrumpía el flujo ágil de la navegación en la home.
Como resultado, se tomó la decisión de separarla en una página propia, a la cual se accede desde el menú principal. Esta nueva página mantiene la identidad visual general del sitio, pero con una estética particular que acompaña el carácter técnico y profesional del estudio. De este modo, se logra una mejor organización del contenido, sin sobrecargar la home y permitiendo profundizar en los servicios y características del estudio de forma clara y ordenada.
Este cambio mejoró notablemente la experiencia del usuario y el equilibrio visual de la web.
Gracias a este testeo anticipado, fue posible perfeccionar la experiencia del usuario y validar decisiones de diseño antes de la etapa de desarrollo.
desarrollo.
responsive.
El desarrollo de la web de Seba Quintanilla se realizó desde cero utilizando HTML, CSS y Bootstrap, con foco en lograr una estructura semántica, accesible y completamente responsive.
Se aplicaron media queries para asegurar que el contenido se adaptara de forma fluida a distintos dispositivos, desde móviles hasta pantallas de escritorio. Además, se implementaron animaciones sutiles para dar dinamismo a las transiciones y elementos clave, aportando una experiencia visual coherente con el universo musical del artista.
desktop.
tablet.
mobile.
