Sistema personal

Diseño y desarrollo de mi web personal como sistema de producto

Web personal creada como herramienta de comunicación profesional, integrando diseño, desarrollo y estructura de contenido para reflejar mi forma de trabajar como diseñador de producto.

UX/UI Design
HTML/CSS
Arquitectura de información
Interacción
Desarrollo frontend

00. Imagen hero del proyecto

Caption ficticio: imagen principal del proyecto mguxer.com.

01 — Contexto

Un sistema para explicar mi propio trabajo

El objetivo fue diseñar y desarrollar una web capaz de comunicar mi perfil profesional, mi forma de pensar como diseñador y mis capacidades técnicas en un mismo sistema.

Dirigido a equipos de producto, empresas y reclutadores.

01. Vista general del home

Estructura principal del sistema de presentación personal.

02. Navegación global

Acceso continuo a proyectos, información y contacto.

02 — Estructura y arquitectura

Construir un sistema modular de contenido

Se definió una estructura flexible basada en bloques reutilizables para poder adaptar la narrativa a distintos tipos de proyectos y niveles de profundidad.

03. Sistema de proyectos

Estructura modular para presentar casos de estudio.

04. Jerarquía de contenido

Organización no lineal de información profesional.

05. Wireframe estructural

Base del sistema antes de la implementación visual.

03 — Diseño y desarrollo

Diseñar mientras se construye

El proyecto se desarrolló directamente en HTML y CSS, combinando diseño e implementación de forma iterativa para validar decisiones en tiempo real.

06. Vista en navegador (layout base)

Estructura sin estilos para validar arquitectura.

07. Tipografía y escalas

Definición tipográfica adaptativa y responsive.

08. Sistema de estilos

Pruebas de color, accesibilidad y comportamiento visual.

09. Componentes

Estructura de cards, listas y elementos reutilizables.

04 — Interacción y personalización

Pequeñas interacciones, gran control del sistema

Se incorporaron micro-interacciones, transiciones y opciones de personalización para reforzar la experiencia de producto real.

10. Light / Dark mode

Cambio de tema aplicado a todo el sistema.

11. Color de acento personalizable

Control del usuario sobre la identidad visual.

12. Micro-interacciones

Animaciones sutiles en navegación y feedback.

13. Responsive en tiempo real

Adaptación del sistema a distintos tamaños de pantalla.

05 — Sistema de presentación de proyectos

Un modelo propio para contar proyectos

Se diseñó una estructura reutilizable para presentar cualquier proyecto de forma consistente, evitando formatos rígidos o excesivamente largos.

14. Estructura de caso de estudio

Bloques reutilizables para explicar procesos y decisiones.

15. Sistema de acordeones y lectura fragmentada

Contenido organizado para explorar sin sobrecargar.

16. Composición editorial de proyectos

Jerarquía visual para combinar texto, imágenes y navegación.

17. Detalle de tarjetas y módulos de contenido

Componentes flexibles para distintos tipos de información.

Diseñar también es construir el propio sistema

El resultado es una web que funciona como extensión del propio trabajo: un sistema donde diseño, desarrollo y narrativa se integran en un mismo entorno.