GLP Fleet Control
Cada propuesta es una manera distinta de ver y usar el mismo sistema. Todas parten de las mismas tres pantallas y de la misma información real de la flotilla, para que la comparación sea justa.
El cliente eligió la propuesta 6, y desde entonces se desarrolló por completo: todos sus controles funcionan y suma doce pantallas más: su sistema de diseño, el tablero de combustible del sistema actual y el resto de los módulos del menú. Sobre ella llegó después un diseño del cliente para la pantalla de inicio, y ese es el de la propuesta 7, que hereda todo lo demás de la 6. Las cinco primeras se dejaron como estaban, porque la comparación es parte de lo entregado.
El encargo
GLP distribuye gas LP en México y administra su flotilla con un sistema propio. Lo que hay hoy son siete pantallas de reportes internos; el encargo fue rediseñar la interfaz completa.
Las restricciones
Las seis propuestas parten de los mismos datos y las mismas pantallas, para que comparar sea justo. Sin servidor, y sin librerías más allá de Tailwind y Alpine — ni sus complementos: el selector de fechas, los buscadores y las gráficas están escritos a mano.
La decisión
Se eligió la 6. El azul sale del logotipo — #006CB6 — y la jerarquía se construye con elevación en vez de líneas: casi no hay bordes en todo el sistema.
El resultado
Tablero, listado y formulario — la 6 añade su sistema de diseño
Todo a la vista, sin desplazarse
Un puesto de mando. Cada área del negocio tiene su recuadro y su color, de modo que en una sola pantalla ves avisos, vencimientos, personal, mantenimiento y cumplimiento al mismo tiempo.
Ideal si quien la usa vigila la operación todo el día desde un monitor grande.
Sobrio, amplio y muy legible
Lo opuesto a la anterior. Pocos elementos, mucho espacio en blanco y cifras grandes. Se muestran sólo los cuatro indicadores que importan y casi no se usa color.
Ideal si se consulta unas cuantas veces al día para tomar decisiones, no para vigilar.
La calma de la 2 con la claridad de la 1
Toma el orden y el aire de la propuesta 2, pero recupera el color de la 1 con una regla: el color siempre significa algo. Rojo es vencido, ámbar es por vencer, verde es en regla. Nada se pinta por adorno, así que lo urgente se detecta sin leer.
Ideal si quieres una imagen renovada sin que el equipo tenga que reaprender nada.
Hecha para trabajar horas en ella
Estilo de las herramientas profesionales de hoy. Texto compacto, listas largas que se leen sin cansancio y controles a la mano: se ven muchas más unidades por pantalla y se filtra y ordena con menos clics.
Ideal si el personal de captura y control pasa el día dentro del sistema.
Como las apps de banca y pagos de hoy
El lenguaje de Stripe, Square o la app del banco: tarjetas que "flotan" con esquinas redondeadas, un color de marca en degradado y cifras grandes. En los formularios, el nombre del campo vive dentro de la casilla y sube al escribir, así que se ven más ligeros.
Ideal si quieres que el sistema se sienta moderno y fácil, y que dar de alta una unidad no se vea pesado.
La opción 5, vestida con el azul de la marca
Mismo lenguaje que la opción 5 — tarjetas que flotan, cifras grandes, etiquetas flotantes en los formularios — pero con la paleta tomada del logotipo: azul #006CB6 como color principal y un menú lateral en azul marino #003B6E. Es la única propuesta ya funcional de punta a punta: todos sus controles responden y cubre los del sistema actual.
Ideal si convence la opción 5 y quieres que el sistema se sienta parte de la marca GLP.
Combustible · el tablero de rendimiento del sistema actual Sistema de diseño · el catálogo de componentesResto del menú, sólo en esta propuesta
La 6, con el inicio que pidió el cliente
Mismo sistema que la 6 —mismo azul, mismas tarjetas, mismos formularios— con la pantalla de inicio rehecha sobre el diseño que entregó el cliente y ajustada con sus comentarios: seis indicadores, costo por kilómetro y rendimiento de los últimos seis meses, y cuatro donas —servicios, documentos, regulación y seguridad operativa— que llevan cada una a su pantalla de detalle.
Ideal si el inicio tiene que servir para decidir, y no sólo para avisar.
El listado de vehículos, el formulario y el resto del menú son los de la propuesta 6: el diseño sólo cambió el inicio y añadió los cuatro detalles, y duplicar las demás pantallas sólo abriría dos sitios donde corregir lo mismo.
Las seis parten exactamente de la misma base: los mismos datos, las mismas pantallas y las mismas tareas.
Información real
Las mismas 24 unidades, con pipas, portátiles y estaciones de carburación, sus placas, permisos CRE, conductores y sucursales.
Las tres pantallas clave
Tablero de inicio, listado de vehículos y alta de un vehículo nuevo. Con esas tres se aprecia el sistema completo; la propuesta 6 suma una cuarta con su sistema de diseño.
Se pueden usar
No son imágenes: puedes buscar, filtrar, ordenar, cambiar de página y llenar el formulario. En la propuesta 6, además, todo lo demás responde: diálogos, adjuntos, atajos de teclado y búsqueda global.
Funcionan en celular
Las treinta pantallas se adaptan al teléfono. Ábrelas también desde el móvil para verlo.
Las cifras de arriba no hay que creérselas: cada una se puede abrir y revisar.
El sistema de diseño
Los 69 componentes, cada uno con cuándo usarlo, cuándo no, sus estados y su código. Es la quinta pantalla de la propuesta 6.
Las comprobaciones
Dieciséis invariantes que se ejecutan en el navegador sobre las veintiuna páginas: contraste AA, desbordes, accesibilidad y que ningún fragmento de código se haya desfasado de su demo. Necesita servidor: python3 -m http.server 8830
En texto plano, dentro del paquete: README.md (decisiones tomadas y límites conocidos) · entrega/LEEME.md (el tailwind.config.js y el CSS listos para compilar, generados desde la misma cabecera que usan las pantallas) · CLAUDE.md (cómo se dirigió el trabajo y por qué existe cada regla).