María
Ángeles
Info
Client María Ángeles — Energía y Alma
Role Creative Director & UX/UI Designer
Overview
María Ángeles is a digital identity and web experience developed from five WhatsApp photographs, transforming limited source material into a complete and coherent visual system.
The project focused on creating a distinctive language within a sector dominated by predictable spiritual aesthetics. Chess became the central metaphor: its board, pieces and movements represent family structures, inherited patterns, blockages and the position we occupy within our own story.
Through UX/UI design in Figma, art direction and an AI-assisted workflow combining Lovable, Claude and Adobe, the original photographs were transformed into an editorial universe built around monochrome imagery, controlled light, glass and selective gold accents.
The result is a digital experience where concept, interface, imagery and interaction operate as one system, demonstrating how generative technology can expand limited material when it is directed by a clear creative vision.
Cinco FOTOGRAFÍAS
NINGÚN estudio
Una marca por nacer
Sin fotógrafo. Sin sesión. Sin estudio. Estas son las fotos de móvil reales, sin editar, que María Ángeles compartió al inicio del proyecto — el único material de referencia que existía antes de construir el universo visual.
Una partida
distinta en
cada PÁGINA,
la misma
GRAMÁTICA
en todas
Recreación exacta de la navegación entre páginas: número de orden y título en Nympha grande a la izquierda, la pieza de cristal con base dorada a la derecha, el menú completo de páginas arriba a la derecha, y un punto-guía que se desplaza con el scroll. Toca cualquier página del listado.
Origen
La página de quiénes somos: quién es María Ángeles, de dónde viene su forma de acompañar y por qué el tablero de ajedrez es la estructura que sostiene todo lo demás.
Una DECISIÓN
solo vale si se
traduce en reglas
Cada regla existe para que una idea sobreviva intacta al pasar por quince páginas distintas y por manos distintas, sin degradarse en el camino.
Cada pieza se asienta como si alguien la moviera con intención. El scroll dramatiza una jugada.
Tres tipografias,
tres funciones,
cero AMBIGÜEDAD
Cada tipografía tiene un único trabajo y nunca hace el del otro: una abre, otra conmueve, la tercera explica. Así nadie duda qué está leyendo ni por qué.
Estructura en
blanco y negro.
El dorado, reservado
solo para lo esencial.
El dorado no es decorativo: viene directamente del oro de las piezas de cristal del tablero. Aparece en acentos puntuales, nunca como fondo.
La tinta, el peso, la autoridad del texto y de las piezas oscuras.
Cada retrato
del sitio nace
de las mismas
cinco fotografías
originales
La luz, el gesto y la identidad de María se mantuvieron fieles a las fotos reales; la IA generativa multiplicó el contexto — tableros, piezas, escenarios — sin tocar nunca quién es ella. Pasa el cursor para detener el recorrido y arrastra para explorar cada versión.
Piezas y tableros:
la gramática
visual de cada
proceso espiritual
Cada pieza representa un movimiento emocional: la torre que ya no sostiene, la reina inmóvil, el peón que empieza a avanzar. El tablero de mármol y oro se convirtió en el escenario donde cada categoría del sitio libra su propia partida.
Los dos VÍDEOS
del sitio nunca
se rodaron
No hubo cámara, ni plato, ni actriz frente a un equipo de rodaje. Cada fotograma se escribió: encuadre, luz, tiempo de movimiento y transición entre planos, iteración tras iteración hasta lograr algo que se sintiera real.
La misma partida,
jugada por
dos manos
distintas
El mismo tablero que organiza cada página de la web organizó también el trabajo detrás de ella: una parte definía las reglas, la otra las ejecutaba dentro de esas reglas — nunca al revés.
El concepto, la correspondencia pieza-emoción, la jerarquía tipográfica, la paleta, el tono de voz y la cadencia del scroll fueron decisiones tomadas antes de generar nada.
El mismo sistema,
pensado para
el bolsillo
La misma gramática visual se reorganiza para una pantalla vertical: el menú se convierte en pantalla completa, los tableros pasan a apilarse y el recorrido se vuelve lineal, un movimiento a la vez.
El monograma
que abre cada PÁGINA
Sobre fondo blanco el monograma se dibuja en negro: es la versión que aparece en el resto del sitio, sobre cada cabecera y cada pie de página, con el mismo trazo ornamental que las piezas del tablero.
El sistema completo,
visto como el
visitante lo ve
La web real, navegable dentro de su propia ventana de navegador.
