El sistema visual de mi portfolio
Un lenguaje visual consistente, flexible y claro que da estructura a cada proyecto y pone el contenido en el centro. Diseñado para comunicar con enfoque, jerarquía y accesibilidad.
1. Content first
El espacio en blanco organiza y da respiro.
2. Consistency over decoration
El espacio en blanco organiza y da respiro.
3. White space is structure
El espacio en blanco organiza y da respiro.
4. Client identity, unified experience
Cada proyecto mantiene la identidad del cliente, con una experiencia unificada.
5. Accessibility by default
Diseñamos para que todo el mundo pueda acceder y comprender.
Paleta neutra como base. El color de acento es dinámico y corresponde a la identidad de cada cliente.
Cada caso de estudio adopta el color principal de la marca del cliente.
El sistema, la experiencia y los componentes se mantienen siempre iguales.
Para estados y mensajes.
Tipografía limpia y legible que aporta claridad, jerarquía y personalidad.
Inter como familia principal.
| Estilo | Uso | Tamaño | Altura | Ejemplo |
|---|---|---|---|---|
| Display | Títulos de portada | 72 px | 80 px | Aa |
| H1 | Títulos de sección | 40 px | 48 px | Contexto del proyecto |
| H2 | Subtítulos | 28 px | 36 px | Mi contribución |
| H3 | Títulos de bloque | 20 px | 28 px | Decisiones de diseño |
| H4 NEW | Subtítulos de contenido | 18 px | 24 px | El problema planteado |
| Body | Texto principal | 16 px | 24 px | Texto de ejemplo. Aporta claridad y legibilidad. |
| Small | Texto secundario | 14 px | 20 px | Información adicional o complementaria. |
| Caption | Etiquetas / notas | 12 px | 16 px | Notas pequeñas o pies de foto. |
Sistema de espaciado base 4px para mantener ritmo y coherencia.
Ancho máximo: 1280px
↑ 16 es el valor más usado en UI: padding de cards, gap entre párrafo y título.
12 columnas · gutter 24px · márgenes 32px
Elementos reutilizables que siguen las mismas reglas visuales y de interacción.
DefaultHoverFocus-vis.
Título del proyecto
Descripción del proyecto en una o dos líneas.
Ver caso de estudio
Contenido relacionado con la pestaña activa. Se usará este patrón para organizar información en bloques claros y digeribles.
26 iconos lineales, simples y consistentes organizados por tamaño en 3 categorías.
16px — Navigation & Actions
8
arrow-up-right
arrow-down
briefcase
layers
eye
users
arrow-right
arrow-up20px — Interface
6
moon
sun
search
edit-3
check-circle
send24px — Feature & Content
18
grid
pie-chart
feather
download
experiencia
share
wording
navegacion
informacion
behance
quote
collaboration
introduccion
fundamentos
componentes
patrones
paginas
contenidoGuía de uso
• Stroke: 1.5px consistente · Color: heredan text/primary, text/secondary o text/accent
• 16px para acciones inline · 20px para UI general · 24px para features
• Siempre usar como instancias desde la librería de componentes
• Nomenclatura: icon/{nombre} en kebab-case
06. Uso en páginas
Estructura base que se repite en cada caso de estudio para garantizar una narrativa clara y consistente.
07. Ejemplo de aplicación
Vista de un caso de estudio aplicando el sistema completo.
Observatorio AECC
Plataforma de datos e informe sobre Cáncer en España
Trabajé en la evolución de la experiencia digital del Observatorio AECC, reorganizando la arquitectura de información, mejorando la navegación y aplicando criterios de accesibilidad.
08. Accesibilidad
Este sistema cumple y se alinea con las pautas WCAG 2.2 AA.