Arte en Manos
Dossier de Arquitectura de Interfaces Responsivas
Documentación técnica interactiva de los bocetos de interfaz restantes. Cada sección
presenta de forma paralela la distribución de elementos adaptada para pantallas móviles y
de escritorio.
Especificaciones del Sistema: Tipografía Poppins / Arial | Paleta Orgánica (#8B5E34, #A9744F, #F3E9D7, #5E7D5A)
Arte en Manos — Sistema E-commerce Rural 1
Requerimiento 13 Soporte para Métodos de Pago Múltiples
VISTA MÓVIL VISTA ESCRITORIO (DESKTOP)
🍃 Arte en Manos ☰ 🍃 Arte en Manos | Checkout Seguro Carrito > Envío > Pago
Paso 3: Método de Pago Elige cómo pagar
Resumen del Pedido
Tarjeta de Crédito / Débito
Visa, Mastercard, American Express Tarjetas Bancarias PayPal Internacional Productos (2 piezas): $1,250.00
Envío Garantizado rural: $120.00
PayPal Descuento aplicado: -$100.00
Número de Tarjeta
Transferencia SPEI XXXX XXXX XXXX 4321 Total Neto: $1,270.00
Vencimiento CVC / CVV
Efectivo en OXXO
MM / AA *** Confirmar y Realizar Pago
🔒 Conexión cifrada SSL de 256 bits
Total a pagar: $1,270.00
Procesar Pago Seguro 🔒
Mecánica de adaptabilidad: En dispositivos móviles las alternativas se despliegan en formato de lista vertical para facilitar la pulsación táctil. En escritorios, se aprovecha la pantalla ancha para dividir la
interfaz en una sección de formularios a dos columnas y una barra lateral de resumen contable persistente.
Arte en Manos — Sistema E-commerce Rural 2
Requerimiento 14 Pantalla Inmediata de Confirmación de Compra
VISTA MÓVIL VISTA ESCRITORIO (DESKTOP)
🍃 Arte en Manos
✓
✓
¡Tu pedido ha sido confirmado con éxito!
¡Compra Exitosa! Un correo con el recibo detallado y la guía de rastreo ha sido enviado a tu cuenta.
Orden: #AM-2025-00123
Enviado a: [Link]@[Link] Detalles de la Orden Dirección de Entrega
Código único: #AM-2025-00123 Juan Pérez — Calle San Martín 123
Método de pago: Tarjeta Visa terminación 4321 Colonia Centro, C.P. 68000
Fecha de transacción: 26 de Mayo de 2026 Oaxaca de Juárez, México
Seguir Comprando
¡Gracias por apoyar el comercio local!
Ir a mis pedidos Descargar Factura PDF
Mecánica de adaptabilidad: La confirmación en móviles se centra en la verificación rápida del cobro. En escritorio se despliega una estructura de dos bloques modulares simétricos que desglosan de
forma simultánea los datos de facturación y el domicilio de entrega física.
Arte en Manos — Sistema E-commerce Rural 3
Requerimiento 15 Selección de Envío y Módulo de Seguimiento
VISTA MÓVIL VISTA ESCRITORIO (DESKTOP)
🍃 Arte en Manos Rastreo Avanzado de Pedidos Colectivos ID de Rastreo: AM-98765432
Estado del Envío Historial de Ruta
● Pedido Enviado 📍 Camión de reparto en ruta a Oaxaca Centro
En camino - En tránsito En Distribución
26 May, 14:00 - Centro Regional
○ Entregado (Est. 28 Mayo)
Recolectado Powered by Google Maps API
🏡 🚚 📍
25 May, 09:00 - Taller del Artesano
📦 Paquetería: DHL Express
Guía: #DHL-98765432
Procesado en Sistema
24 May, 18:20
Mecánica de adaptabilidad: Mientras la vista móvil se limita a un resumen simplificado por motivos de ancho de banda y tamaño de pantalla, la vista web de escritorio incrusta un mapa interactivo
completo de geolocalización que rastrea geográficamente el envío desde las comunidades rurales.
Arte en Manos — Sistema E-commerce Rural 4
Requerimiento 22 Panel de Control y Reportes de Ventas para el Administrador
VISTA MÓVIL VISTA ESCRITORIO (DESKTOP)
📊 Admin Panel 📈 Consola Administrativa — Cooperativa Cooperar Cerrar Sesión
Balance del Mes 🏠 Panel General Ventas Órdenes Ticket Promedio
Ingresos Totales 📦 Control Catálogo $28,450 156 $182
$28,450.00 👥 Padrón Artesanos
📊 Reportes Contables Volumen de Venta Semanal
📈 Órdenes Activas: 156
Generar Excel
Mecánica de adaptabilidad: El panel administrativo móvil compacta la información macro en tarjetas numéricas simples. La versión de escritorio aprovecha el espacio horizontal para habilitar un menú
lateral de operaciones complejas y desplegar gráficas de barras avanzadas para un análisis de datos profundo.
Arte en Manos — Sistema E-commerce Rural 5
Requerimiento 25 Estrategia Global de Interfaz Responsiva (Layout de Inicio)
VISTA MÓVIL (360PX) VISTA ESCRITORIO (1200PX)
🍃 Arte en Manos ☰ 🍃 Arte en Manos — Mercado de Cooperativas Catálogo | Nuestras Raíces | Impacto Social | Contacto
Artesanías Exclusivas
Hechas Directamente a Mano
🏺
Conecta de forma directa y transparente con artesanos apasionados de
comunidades rurales. Cada compra impulsa la economía local familiar y 🏺
Artesanía con Alma preserva técnicas ancestrales.
Cada pieza cuenta una historia única de nuestra
cultura.
Explorar Catálogo Completo Conocer Historias
Ver Tienda
Piezas únicas de Barro Bruñido
Mecánica de adaptabilidad: Demostración estructural del flujo de diseño responsivo. En smartphones los menús colapsan bajo el ícono de hamburguesa (☰) y el contenido se lee de manera secuencial
vertical. En monitores de escritorio el diseño se despliega horizontalmente reubicando imágenes decorativas a la derecha.
Arte en Manos — Sistema E-commerce Rural 6