01
Comprender
Quién usa el sistema, qué necesita y bajo qué reglas debe trabajar.
Proyecto integrador
Diseño de Interfaces
De la documentación técnica a una solución visual, navegable y lista para convertirse en software.
Propósito
Transformar lo técnico en una experiencia clara
Los diagramas, requerimientos y la base de datos dejan de ser documentos aislados y se convierten en decisiones de interfaz.
02
Organizar
Convertir módulos y procesos en navegación, pantallas y flujos coherentes.
03
Validar
Probar la solución antes de invertir tiempo en su desarrollo completo.
Etapa 1
Análisis del proyecto
Antes de dibujar una pantalla, el equipo debe responder las preguntas que definen el comportamiento real del sistema.
01¿Quién utilizará el sistema?
02¿Qué necesita hacer cada usuario?
03¿Qué información necesita consultar?
04¿Qué procesos son más frecuentes?
05¿Qué acciones son críticas?
06¿Qué permisos tendrá cada tipo de usuario?
07¿Qué datos se consultan o almacenan en la BD?
08¿Qué reglas y validaciones condicionan el proceso?
Trazabilidad
Un caso de uso puede requerir varias interfaces
👤 Actor: Administrador
“El administrador registra un nuevo producto.”
Lista de productosConsulta, búsqueda, filtros y acciones disponibles.
Crear productoFormulario, campos obligatorios y validaciones.
Vista de detalleInformación completa y relaciones del registro.
Editar productoActualización de datos y control de cambios.
Confirmar eliminaciónPrevención de acciones destructivas accidentales.
Mensajes del sistemaÉxito, advertencia, error y recuperación.
Etapa 2
Mapa del sistema
La navegación debe reflejar los módulos, actores y casos de uso definidos en la documentación.
Inicio de sesión
Panel principal
Usuarios
- Lista
- Crear
- Editar
Productos
- Lista
- Registrar
- Detalle
Reportes
Configuración
El mapa del sistema responde una pregunta esencial: ¿cómo encuentra cada usuario lo que necesita?
Etapa 3
Flujos de usuario
Cada proceso importante debe representarse paso a paso, incluyendo decisiones, validaciones y resultados.
01Iniciar sesión
02Abrir Productos
03Nuevo producto
04Capturar datos
05Validar
06Guardar
07Confirmar
08Actualizar lista
Pantallas faltantesRevela vistas que no estaban contempladas.
ValidacionesIdentifica errores posibles antes de programar.
DecisionesHace visibles permisos, bifurcaciones y excepciones.
Etapa 4
Wireframes: estructura antes que decoración
Los diseños de baja fidelidad permiten concentrarse en jerarquía, distribución, navegación y comportamiento.
Wireframes
¿Qué deben definir?
Estructura y contenido
- Distribución de información
- Menús y navegación
- Formularios, tablas y botones
- Jerarquía visual
- Adaptación responsiva
Estados y comportamiento
- Estados vacíos
- Errores y validaciones
- Confirmaciones
- Carga y espera
- Acciones críticas o destructivas
Enfoque recomendado
Diseñar primero para móvil
Cuando el tipo de sistema lo permita, comenzar con el espacio más limitado obliga a priorizar lo verdaderamente importante.
▯
Móvil primero
Contenido esencial, controles accesibles, acciones claras y uso cómodo con una sola mano.
→
▭
Adaptar a escritorio
Aprovechar el espacio adicional sin perder jerarquía, consistencia ni claridad.
Etapa 5
Sistema de diseño
Una guía visual común evita que cada pantalla parezca pertenecer a un producto distinto.
Primario#8B5CF6
Secundario#22D3EE
Texto#F4F7FB
Superficie#202737
BotonesVariantes, tamaños y estados
Guardar cambios
CamposEtiquetas, ayuda y validación
EstadosRetroalimentación consistente
ÉxitoAdvertenciaError
Reglas visualesTipografía, espaciado, bordes, sombras e iconografía.
Etapa 6
Prototipo navegable en Figma
No basta con diseñar el inicio de sesión y un dashboard. El prototipo debe representar procesos completos.
✓Inicio de sesión
✓Navegación principal
✓Panel o dashboard
✓Listados
✓Registro y edición
✓Vista de detalle
✓Eliminar o desactivar
✓Búsqueda y filtros
✓Estados vacíos
✓Validaciones
✓Confirmaciones
✓Móvil y escritorio
Resultado del equipo
Entregables de Diseño de Interfaces
Análisis de usuarios
Relación entre casos de uso y pantallas
Mapa de navegación
Flujos de usuario
Wireframes
Sistema de diseño
Prototipo navegable en Figma
Prueba de usabilidad
Registro de mejoras realizadas
Especificaciones para desarrollo
Continuidad
Diseñar para desarrollar
El prototipo no es el final. Es el puente entre la documentación de software y la implementación en Tecnologías y Aplicaciones Web.
◈RequerimientosNecesidades, actores y reglas.
⌘DiagramasProcesos, módulos y relaciones.
◫InterfacesPantallas, navegación y estados.
↗PrototipoValidación antes de programar.
{ }Desarrollo webImplementación funcional.
Cada pantalla debe poder justificarse con un usuario, un caso de uso, un proceso y los datos que necesita.