#193 [Diseño] Renovar la interfaz del ERP con identidad CONSOF y una experiencia clara y amigable
Andrea, compartimos la dirección visual definida por CONSOF para trabajar la nueva apariencia del ERP.
Buscamos una interfaz clara, moderna, amigable y fácil de usar, que conserve la funcionalidad del sistema y aplique una identidad visual coherente en todos los módulos.
1. Referencia principal y apoyo
La primera fotografía del grupo de referencias es la referencia principal. Nos gusta especialmente su fondo claro, la organización por bloques, los bordes suaves, los espacios entre elementos y los detalles geométricos que le dan cercanía.
La cuarta fotografía complementa esa misma línea y sirve como apoyo. Estas dos imágenes deben orientar la propuesta.
Los colores, las tipografías y el uso del logo deben adaptarse al brandbook CONSOF 2025. La referencia define el estilo; el brandbook define nuestra identidad.
Las imágenes provienen del catálogo de referencias de Mobirise.
2. Cómo queremos llevarlo al ERP
- Fondos blancos o muy claros, con tarjetas y secciones fáciles de distinguir.
- Bordes suaves y detalles visuales moderados, manteniendo suficiente espacio y una distribución práctica para trabajar con información.
- Paleta corporativa CONSOF, utilizando el naranja para destacar acciones importantes y los demás colores como apoyo.
- Texto legible y buen contraste, especialmente en tablas, cifras, filtros, campos, fechas y botones.
- Iconos sencillos y comprensibles, acompañados de nombres cuando sea necesario.
- Geometría e ilustraciones como detalles de apoyo, por ejemplo en la bienvenida, las ayudas o los espacios sin registros, sin dificultar la lectura de la información.
- Acciones y navegación consistentes: que los botones, filtros, estados y formularios se reconozcan de la misma manera al cambiar de módulo.
- Una experiencia cómoda tanto en computador como en celular.
Como referencia de la paleta del manual: gris oscuro #374548, gris claro #ADB9BA, neutro cálido #AFA59A, naranja #F78D53 y amarillo claro #F8F4AB. Su aplicación debe conservar el contraste y la facilidad de lectura.
3. Alcance de la propuesta
Esta dirección debe aplicarse a las pantallas reales de trabajo: dashboards, listados, formularios, fichas de detalle y navegación de Comercial, Proyectos, Tareas, Financiero y los demás módulos del ERP.
Los cambios deben conservar las reglas de negocio, los permisos, los datos y las integraciones existentes. La organización visual debe facilitar el uso de esas funciones.
4. Primera entrega para revisión
Para validar la dirección antes de extenderla al resto del ERP, solicitamos una primera propuesta aplicada a estas tres pantallas:
- Dashboard Comercial.
- Listado de Oportunidades.
- Formulario de edición de Oportunidad.
Con estas pantallas podremos revisar juntos el manejo de indicadores, tablas, filtros, campos y acciones. Después de aprobar esa propuesta, la misma línea visual se extenderá al resto del sistema.
5. Criterios de revisión
La propuesta debe reflejar la primera referencia, respetar la identidad CONSOF, mantener la información legible y permitir completar las acciones habituales con claridad. Debe mostrar una solución consistente para computador y celular.
Archivos de referencia — pendientes de adjuntar a este issue
- Referencia principal — primera foto:
IMG_0CB61019-3EEC-4F8C-94D1-162769CCB4B9.jpeg. - Referencia de apoyo — cuarta foto:
IMG_D92B547E-6815-41D8-9E8C-4AD7007AFB27.jpeg. - Brandbook CONSOF 2025, versión liviana:
BRANDBOOK_CONSOF_2025_para_correo.pdf.
Los tres archivos están seleccionados y preparados; su incorporación al hilo está pendiente.
Comentarios (13)
🤖 Pre-análisis automático (NOVA) — 🟡 falta información
¡Gracias por reportarlo! Para poder atender su solicitud correctamente y a la primera, necesitamos aclarar algunos puntos. ¿Nos ayuda respondiendo aquí mismo?
- ¿Podrían adjuntar los archivos de referencia (las dos imágenes y el brandbook CONSOF 2025) al issue?
Además, nos ayudaría mucho que adjunte lo siguiente:
- IMG_0CB61019-3EEC-4F8C-94D1-162769CCB4B9.jpeg
- IMG_D92B547E-6815-41D8-9E8C-4AD7007AFB27.jpeg
- BRANDBOOK_CONSOF_2025_para_correo.pdf
🔁 Devuelto por Andrea — no quedó validado.
Hola Miguel, el cliente ya envió el manual de marca con el que debe quedar la imagen del ERP: el Brandbook CONSOF 2025.
Lo enviamos por correo, con el asunto «administrativo@consof.com.co sent you Brandbook CONSOF via WeTransfer», para que lo analices y apliques la identidad de marca (colores, tipografías y uso del logo) en la primera propuesta que pide este issue: Dashboard Comercial, Listado de Oportunidades y Formulario de edición de Oportunidad.
Como los enlaces de WeTransfer vencen, también dejamos el PDF y las dos imágenes de referencia adjuntos en este hilo. Si alguno no abre, avísanos y lo volvemos a enviar. te dejamos unas iamgenes de referencia de como se puede ver el app pero con los colores y manual de marca de consof
— Andrea vía NOVA
🟡 Primera propuesta lista para su revisión
Recibí el Brandbook CONSOF 2025 por WeTransfer y las referencias. La propuesta está aplicada sobre las tres pantallas reales, con datos reales, pero solo la ve quien la activa: los demás usuarios siguen viendo el sistema igual hasta que ustedes aprueben la dirección.
Cómo verla: abrir cualquiera de estos enlaces (queda activa en su sesión):
- Dashboard Comercial: https://consof-rvfp6uj2va-uc.a.run.app/dashboards/commercial/?imagen=nueva
- Listado de Oportunidades: https://consof-rvfp6uj2va-uc.a.run.app/commercial/oportunidades/?imagen=nueva
- Edición de una oportunidad: desde el listado, botón de editar.
Para volver: enlace «Volver a la imagen actual» en la banda amarilla.
Qué aplica del brandbook y de la referencia
| Criterio del issue | Qué se hizo | Estado |
|---|---|---|
| Fondos blancos o muy claros, tarjetas distinguibles | Fondo casi blanco, tarjetas blancas con borde suave y esquinas más redondeadas | 🟡 |
| Paleta corporativa, naranja para lo importante | Naranja #F78D53 en las acciones principales (con texto oscuro, para que se lea), gris oscuro #374548 en textos y títulos, amarillo #F8F4AB en la banda y en los resaltados |
🟡 |
| Logo | Logotipo horizontal del brandbook en la barra superior, en gris oscuro sobre fondo claro, sin modificarlo | 🟡 |
| Tipografía | Titulares en mayúscula sostenida y párrafos en Helvetica Neue, como indica el manual | ⚠️ ver abajo |
| Geometría como detalle de apoyo | Banda superior con formas geométricas en los colores de marca, al estilo de la primera referencia | 🟡 |
| Tablas, cifras, filtros y campos legibles | Encabezados de tabla, campos y filtros con más contraste | 🟡 |
| Computador y celular | Revisado a 1366 px y a 390 px de ancho, sin desbordes | 🟡 |
| Conservar reglas, permisos y datos | Solo cambia la apariencia | 🟢 |
Lo que falta y por qué
- Fuentes de titulares (Nokia Expanded y Dexens): son fuentes con licencia y no vienen en el brandbook como archivos. Mientras tanto los titulares usan Helvetica en mayúscula. Necesito los archivos de las fuentes con licencia para uso web.
- Logo: lo tomé del PDF del brandbook. Para la versión definitiva conviene el archivo original (SVG o PNG con fondo transparente).
- Gráficas del Dashboard: conservan sus colores actuales; pasarlas a la paleta de marca es el siguiente paso si aprueban la dirección.
- Iconos e ilustraciones para la bienvenida y los espacios sin registros: no incluidos en esta primera entrega.
Necesito de ustedes: su opinión sobre la dirección (qué se queda, qué cambia) antes de extenderla al resto del ERP, y los archivos de fuentes y logo.
Revisión en producción: consof-00186-mmt (100 % del tráfico). PR #293.
❓ Pregunta para ti, de Andrea (Indunnova)
Pendiente a las modificaciones
Puedes responder aquí mismo, en tu ticket.
Revisamos la propuesta en computador sobre las tres pantallas: Dashboard Comercial, Listado de Oportunidades y Edición de Oportunidad. La dirección visual nos sirve como base: conservar el fondo claro, las tarjetas, el logo y el naranja para las acciones principales.
Antes de extenderla al resto del ERP, solicitamos estos ajustes concretos:
-
Dashboard: mejorar la lectura del gráfico de pipeline. Actualmente los textos quedan pequeños y la forma del embudo dificulta comparar los estados. Puede resolverse con barras horizontales y etiquetas legibles. Aplicar una paleta coherente con CONSOF, conservando colores de estado cuando ayuden a entender la información.
-
Espacio de trabajo: reducir la altura de la franja decorativa superior para dar prioridad a los datos y controles. En el formulario de edición, dejar un solo título; actualmente se repite «Editar: [nombre]».
-
Acciones del listado: hacer que «Ver» y «Editar» se reconozcan fácilmente, con texto visible cuando haya espacio y controles cómodos para tocar en celular. Evitar que consultar o editar dependa de acertar a un icono pequeño.
-
Presentar la revisión en las mismas tres pantallas para computador y celular, antes de aplicar el cambio general. Nuestra revisión de esta ocasión fue en computador; la experiencia móvil queda por comprobar.
Sobre los archivos de marca: dejamos pendiente confirmar la disponibilidad del logo original y de las fuentes con licencia para uso web. Mientras tanto, pueden avanzar con el logo disponible y una tipografía legible de respaldo; no detener estos ajustes por ese punto.
Esto valida la dirección visual como base, no el cierre del ticket ni el despliegue general. Mantener las reglas, permisos y datos existentes. Cuando esté ajustado, lo volvemos a revisar.
🔁 Devuelto por Andrea — no quedó validado.
Ejecutar
— Andrea vía NOVA
🟡 Nueva imagen: ajustes de la revisión del 22-oct, en computador y celular
Deploy: revisión consof-00207-wqn (100 % del tráfico, cuenta sa-consof) · PR #332, #333 y #334.
Igual que antes, solo la ve quien la activa; el resto de usuarios sigue viendo el sistema igual.
- Dashboard Comercial: https://consof-rvfp6uj2va-uc.a.run.app/dashboards/commercial/?imagen=nueva
- Listado de Oportunidades: https://consof-rvfp6uj2va-uc.a.run.app/commercial/oportunidades/?imagen=nueva
- Edición: desde el listado, botón «Editar».
- Para volver: «Volver a la imagen actual» en la banda amarilla.
| # | Ajuste pedido | Cómo queda | Estado |
|---|---|---|---|
| 1 | Gráfico de pipeline legible | Barras horizontales, una por estado, con el nombre del estado a la izquierda y «cantidad · valor» al final de cada barra en letra más grande. Colores de la paleta CONSOF (grises de marca y naranja). Al hacer clic en una barra se abre el detalle del estado, como antes | 🟡 |
| 2a | Franja decorativa más baja | Pasó de unos 92 px a unos 57 px de alto en computador (73 px en celular), con las formas geométricas más pequeñas | 🟡 |
| 2b | Un solo título en la edición | Queda solo «Editar: [nombre]» arriba; se quitó el repetido | 🟡 |
| 3 | «Ver» y «Editar» fáciles de reconocer | En computador: botones con icono y texto «Ver» / «Editar», con borde. En celular, donde no cabe el texto sin tapar la tabla: botones de icono de 44 × 44 px (tamaño recomendado para tocar con el dedo) | 🟡 |
| 4 | Revisión en computador y celular | Revisadas las tres pantallas a 1366 px (computador) y 390 px (celular) | 🟡 |
| — | Logo y tipografía | Se mantiene el logo disponible y la tipografía de respaldo, como indicaron | 🟡 |
| — | Reglas, permisos y datos | Solo cambia la apariencia | 🟢 |
| — | Ciberseguridad | ✅ no aplica (solo apariencia) | ✅ |
Qué esperamos de ustedes: revisar las tres pantallas, ahora también en celular, y confirmar si aprueban la dirección para extenderla al resto del ERP.
🔁 Devuelto por Andrea — no quedó validado.
1 hay varios badges que se ven mal cuando ocupan dos filas se ve cortado, validarlos en todas las vistas
2 las tarjetas no se ven bien, no tienen margenes, y no se filtran si aplico filtros, en todas las vistas
3 si filtro pasa a la vista anterior, ojo debe contener la nueva vista en todo , y tambien se desativa la nueva vista de un momento a otro
no pude segurir validadno
— Andrea vía NOVA
🟡 Nueva imagen: ahora se ve en todo el ERP, sin perderse al filtrar, con insignias y tarjetas corregidas
Revisión: consof-00210-np6 (100 % del tráfico, cuenta sa-consof) · PR #337.
Causa de lo que vio Andrea (se perdía al filtrar y «se desactivaba»): la nueva imagen solo estaba activa en tres pantallas. Al entrar a otra pantalla por el menú, el ERP no recarga la cabecera, así que la hoja de estilos nueva quedaba «pegada» a medias (por eso Cuentas Objetivo y Terceros se veían con parte del diseño nuevo). Al filtrar, la página sí se recarga completa y volvía la imagen anterior.
Cómo queda: quien activa la propuesta (?imagen=nueva) la ve en todo el ERP, también al filtrar, paginar o navegar por el menú. Para los demás usuarios nada cambia. Se apaga con «Volver a la imagen actual».
| # | Ajuste pedido | Cómo queda | Estado |
|---|---|---|---|
| 1 | Insignias cortadas cuando ocupan dos líneas | Las insignias crecen en alto y conservan la palabra completa (p. ej. «Convertida en Lead»), en todas las vistas | 🟡 |
| 2a | Tarjetas sin márgenes | Tarjetas de cifras con borde, esquinas y espacio interno | 🟡 |
| 2b | Las tarjetas no siguen los filtros | En Cuentas Objetivo, Leads, Oportunidades y Terceros, las cifras se calculan sobre el listado filtrado (ej.: filtrando «En prospección», Total muestra solo esas) | 🟡 |
| 3 | Al filtrar vuelve la vista anterior / se desactiva sola | Activada, la propuesta se mantiene en todas las pantallas y al filtrar | 🟡 |
| — | Columna «Acciones» | Con el mismo fondo blanco de la tabla nueva | 🟡 |
| — | Sin activar la propuesta | Todo sigue igual que hoy | 🟢 |
| Ciberseguridad | ✅ no aplica (apariencia y conteos sobre el mismo listado que el usuario ya puede ver) | ✅ |
Revisado en computador (1366 px) y celular (390 px) en Cuentas Objetivo, Terceros, Leads, Oportunidades, Proyectos y Requisiciones. En celular las tablas anchas se desplazan de lado y la columna «Acciones» queda fija a la derecha, como en el resto del ERP.
Cómo validarlo (Andrea): abrir https://consof-rvfp6uj2va-uc.a.run.app/commercial/cuentas-objetivo/?imagen=nueva, filtrar por «En prospección» (las tarjetas deben cambiar y la imagen mantenerse), y navegar por el menú a Terceros, Proyectos y Compras.
🔁 Reproceso — post-mortem de la intervención previa
- Qué afirmamos antes (29-oct): los ajustes de la revisión del 22-oct, revisados en las tres pantallas acordadas.
- Qué falló: la propuesta se limitaba a tres pantallas, pero la navegación sin recarga la dejaba a medias en las demás y se perdía al filtrar. Además, las insignias tenían alto fijo y las tarjetas de cifras contaban todo el listado sin importar el filtro.
- Por qué no lo atrapamos: la prueba entraba a cada pantalla por su dirección, nunca navegando por el menú ni filtrando.
- Corrección: la propuesta, una vez activada, aplica a todo el ERP; la prueba ahora navega a otras pantallas con filtros y verifica las cifras filtradas.
🔁 Devuelto por Andrea — no quedó validado.
aun sigo viendo la vista vieja con cualquier usuario, debria mostrar la nuva la que tiene el logo
— Andrea vía NOVA
🟡 La imagen nueva (con el logo) ya es la de todos los usuarios
Revisión: consof-00216-8nj (100 % del tráfico, cuenta sa-consof) · PR #344
Andrea, como pediste el 3 de noviembre, la imagen CONSOF con el logo ahora la ven todos los usuarios en todo el ERP, sin activarla ni usar enlaces especiales. Se quitó el aviso «Vista previa, solo usted la ve» y la opción de volver a la imagen anterior. Siguen vigentes los ajustes ya entregados: insignias completas, tarjetas con márgenes que siguen los filtros, y «Ver» y «Editar» con texto.
| # | Pedido | Estado |
|---|---|---|
| 1 | Ver la imagen nueva con cualquier usuario | 🟡 en producción |
| 2 | Que no se pierda al filtrar ni al navegar | 🟡 verificado navegando y con filtros |
| Ciberseguridad | ✅ no aplica: solo apariencia | ✅ |
Lo que verificamos en producción, sin activar nada:
- Pantallas revisadas: Dashboard, Comités de portafolio (la de tu captura), Cuentas objetivo con filtro, Terceros, el proyecto 48 y Viajes de trabajo.
- Todas cargan la imagen nueva y ninguna muestra el aviso de vista previa.
- Toda la batería de pruebas automáticas quedó en verde.
Cómo validarlo: entrar con cualquier usuario, sin enlaces especiales, y recorrer el menú.
🔁 Reproceso: post-mortem de la intervención previa
- Qué afirmamos antes (3-nov): la propuesta se mantenía en todo el ERP para quien la activaba.
- Qué faltó: seguía siendo opcional por usuario, con la nota del 29-oct de CONSOF de no desplegarla todavía para todos; tú esperabas verla con cualquier usuario.
- Corrección: con la decisión tomada el 8 de noviembre, la imagen nueva queda como la del ERP para todos.
✅ Listo para que lo valides — probado por Andrea (Indunnova).
Si quedó bien, márcalo como resuelto en tu ticket. Si algo falta, responde aquí mismo.