Leer el flujo de ingeniería
Identifiqué las tareas y datos que debían trasladarse a pantalla, conservando la lógica funcional definida por el equipo.
CASO 01 / UX/UI · Front-end
2025Implementación del DS Estatal en MINVU y SUBTEL.
Un sistema de diseño compartido, aplicado a necesidades reales de MINVU y SUBTEL.
- Proyecto
- MINVU · SUBTEL
- Mi rol
- Diseño UI · Maquetación front-end
- Herramientas / Entrega
- UI Kit V3.0 · HTML · CSS
- Contexto
- Proyectos en Tecnova
01 / CONTEXTO
El reto.
El reto consistía en transformar flujos definidos por ingeniería en pantallas coherentes con el UI Kit V3.0. MINVU y SUBTEL compartían una base institucional, pero necesitaban interfaces para tareas distintas: operaciones de subsidio y administración de información.
02 / RESPONSABILIDAD
Mi aporte.
- Adaptación de flujos funcionales al sistema de diseño estatal.
- Diseño de pantallas y componentes modulares en HTML/CSS.
- Revisión de fidelidad visual e interacción para la entrega a desarrollo.
Mi responsabilidad fue adaptar y maquetar interfaces con el UI Kit oficial del Estado de Chile. El sistema base pertenece al Estado; mi aporte está en su aplicación a flujos ministeriales y su traducción a HTML/CSS.
03 / DECISIONES Y DESARROLLO
Del contexto a la entrega.
Adaptar el UI Kit
Apliqué la base institucional a navegación, formularios, acciones y jerarquía de contenido de cada contexto ministerial.
Maquetar y revisar
Preparé componentes HTML/CSS y revisé la fidelidad visual e interactiva de la entrega.
DECISIONES EN LA ENTREGA
Mantener el contexto de edición
En la pantalla de SUBTEL, la lista de campos permanece a la izquierda y sus propiedades se organizan a la derecha. Esta composición permite relacionar el elemento seleccionado con la información que se está configurando.
Separar configuración y validaciones
Las propiedades del campo y sus reglas de validación están en bloques diferenciados. La estructura hace visible qué se configura y qué condiciones se aplican, dentro del mismo contexto de trabajo.
Dar continuidad al diseño en código
La entrega incluyó maquetación HTML/CSS modular y revisión de fidelidad visual. La captura de implementación muestra la continuidad entre estructura de interfaz y archivos de desarrollo.
04 / IMPACTO Y APRENDIZAJE
Lo que aporta la solución.
Consistencia que llega a la implementación.
La entrega documentada reúne interfaces de MINVU y SUBTEL, formularios y componentes HTML/CSS adaptados a un lenguaje institucional común. El aporte se puede inspeccionar en las pantallas y la muestra de implementación: organización de la información, consistencia de acciones y continuidad con desarrollo.
- Interfaz operativa
- Administración de campos y validaciones en SUBTEL.
- Cobertura institucional
- Aplicación de la misma base visual a MINVU y SUBTEL.
- Entrega técnica
- Componentes y estructura de implementación en HTML/CSS.
El valor del sistema está en cómo resuelve cada flujo, además de en la coherencia visual.
SIGUIENTE CASO / 02