Arquitectura de Información Web - Parte 4

Wireframes, Mockups, Mapas de Navegación y Prototipado

10. Wireframes (Prototipos de Baja Fidelidad)

Los wireframes representan la estructura básica de las páginas, mostrando la disposición de elementos sin estilos visuales detallados.

10.1 Wireframe - Página de Inicio
LOGO | UTyPCB
Inicio Cursos Nosotros Contacto
TÍTULO PRINCIPAL
Subtítulo descriptivo
Ver Cursos →
CURSOS DESTACADOS
[IMG]
Ver
[IMG]
Ver
[IMG]
Ver
10.2 Wireframe - Catálogo de Cursos
LOGO | UTyPCB
Inicio Cursos Nosotros Contacto
CATÁLOGO DE CURSOS
Subtítulo
Filtro: Todos
[Barra de búsqueda]
[IMG]
$X,XXX Ver
[IMG]
$X,XXX Ver
[IMG]
$X,XXX Ver
[IMG]
$X,XXX Ver
10.3 Wireframe - Detalle de Curso
LOGO | UTyPCB
[IMAGEN CURSO]
TÍTULO DEL CURSO
Temario Requisitos Metodología
✓ Módulo 1
✓ Módulo 2
✓ Módulo 3
$X,XXX
$X,XXX

⏱ 40 horas
💻 Online
📊 Intermedio

INSCRIBIRME
10.4 Wireframe - Checkout
LOGO | UTyPCB
PROCESO DE INSCRIPCIÓN
DATOS PERSONALES
[Nombre]
[Apellidos]
[Email]
[Teléfono]
MÉTODO DE PAGO
○ Transferencia
○ Depósito
○ Efectivo
RESUMEN
[IMG]
Total: $X,XXX
DATOS BANCARIOS
Banco: XXXXX
CLABE: XXXXX
CONFIRMAR INSCRIPCIÓN

11. Mockups (Prototipos de Alta Fidelidad)

Los mockups representan el diseño visual final con colores, tipografía, imágenes y estilos aplicados.

11.1 Mockup - Página de Inicio
Inicio Cursos Nosotros Contacto

Impulsa tu Carrera Profesional

Cursos de alta calidad con certificación

Ver Cursos
Cursos Destacados

PHP Full Stack

40 horas • Online

Ver

Diseño UX/UI

60 horas • Híbrido

Ver

Ciberseguridad

80 horas • Online

Ver

© 2025 UTyPCB Centro de Capacitación

11.2 Mockup - Detalle de Curso
Inicio Cursos Nosotros Contacto
Programación
Desarrollo Web Full Stack con PHP

Aprende a crear aplicaciones web completas desde cero...

Temario Requisitos
HTML5, CSS3 y JavaScript
PHP y MySQL
Proyecto Final
$6,500
$4,999
-23% OFF
40 horas
Online
Intermedio

© 2025 UTyPCB

12. Mapa de Navegación

El mapa de navegación muestra las rutas que el usuario puede seguir a través del sitio web.

Flujos de Navegación Principales
FlujoRutaObjetivo
Inscripción a curso Inicio → Cursos → Curso → Checkout → Confirmación Completar registro de inscripción
Exploración rápida Inicio → Cursos Destacados → Curso Ver información de curso destacado
Contacto directo Cualquier página → Contacto → Envío Comunicarse con el centro
Información institucional Inicio → Nosotros Conocer el centro de capacitación

13. Mapa del Sitio (Sitemap)

Estructura Jerárquica
  • 🌐 cursos.mitiendamonica.com
    • 📄 index.php (Página de inicio)
    • 📁 Cursos
      • 📄 cursos.php (Catálogo)
      • 📄 curso.php?slug=X (Detalle)
    • 📁 Proceso de Compra
      • 📄 checkout.php (Formulario)
      • 📄 confirmacion.php (Éxito)
    • 📄 nosotros.php (Institucional)
    • 📄 contacto.php (Formulario)
Sitemap XML
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://cursos.mitiendamonica.com/</loc>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://cursos.mitiendamonica.com/cursos.php</loc>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://cursos.mitiendamonica.com/nosotros.php</loc>
    <priority>0.7</priority>
  </url>
  <url>
    <loc>https://cursos.mitiendamonica.com/contacto.php</loc>
    <priority>0.8</priority>
  </url>
</urlset>

14. Prototipado y Metodología

Proceso de Prototipado Aplicado
1
Bocetos

Dibujos iniciales en papel para definir estructura básica

2
Wireframes

Prototipos de baja fidelidad con estructura y contenido

3
Mockups

Diseños de alta fidelidad con estilos visuales finales

4
Prototipo Funcional

Implementación real con HTML, CSS, JavaScript y PHP

Prototipo Funcional en Línea

El prototipo funcional está completamente implementado y desplegado en un servidor de producción, permitiendo:

  • ✅ Navegación completa por todas las secciones
  • ✅ Visualización del catálogo de cursos
  • ✅ Proceso completo de inscripción
  • ✅ Envío de mensajes de contacto
  • ✅ Diseño responsivo en todos los dispositivos
Herramientas Utilizadas
FaseHerramientaPropósito
Wireframes HTML + CSS (representación visual) Documentar estructura de páginas
Mockups HTML + CSS + Bootstrap Diseño visual de alta fidelidad
Desarrollo Frontend VS Code + Bootstrap 5 Implementación de interfaces
Desarrollo Backend PHP 8.x + MySQL Lógica de negocio y datos
Despliegue SSH + SCP Publicación en servidor
Documentación HTML + Bootstrap Este documento de arquitectura

15. Conclusiones

El desarrollo de la plataforma de cursos para UTyPCB Centro de Capacitación ha cumplido satisfactoriamente con todos los objetivos planteados:

Objetivos Alcanzados
  • Plataforma web funcional y responsiva
  • Catálogo de cursos con filtros
  • Sistema de inscripción con pago manual
  • Formulario de contacto operativo
  • Diseño moderno y profesional
  • Base de datos estructurada
Mejoras Futuras
  • Integración de pasarela de pagos online
  • Panel de administración
  • Sistema de usuarios registrados
  • Aula virtual integrada
  • Certificados digitales automáticos
  • App móvil complementaria