GaremTech

Una empresa puede necesitar un sistema de gestión completo; otra, conectar solo una parte de su actividad. La web debía explicar las dos posibilidades sin convertirse en una lista de funciones técnicas.

Partí de reuniones para entender el producto y sus usuarios. Ese conocimiento ayudó a concretar qué debía explicar la web antes de entrar en el detalle de cada módulo.

También revisé referencias de software de gestión, como Sage, SAP, Holded y Odoo, y referencias de diseño web. Me sirvieron para trabajar la estructura, los textos y la dirección visual.

Organicé la home como una visión de conjunto, las soluciones para explicar cada módulo y los sectores para situar la oferta en una actividad concreta. Separé «Qué es GaremTech», que presenta el producto, de «Valor diferencial», que desarrolla sus argumentos.

Redacté todos los textos y los llevé a los wireframes para trabajar el orden y la extensión de cada bloque. Las páginas de soluciones comparten una base: qué aporta el módulo, sus funcionalidades y el siguiente paso.

La selección conserva contenido de trabajo y propuestas, como el listado y el detalle de casos de uso. No todas las páginas tenían el mismo grado de definición.

Diseñé el logotipo, el símbolo, sus versiones y la paleta. La construcción modular y los tonos cálidos forman parte de la identidad que trasladé a la web y a los materiales comerciales.

Preparé tipografía, escalas de color, botones y estados, navegación y retículas para escritorio y móvil. La documentación completa de identidad está al final, en el apartado desplegable.

El presupuesto no permitía una sesión de fotos y queríamos evitar las fotografías de personas y las imágenes de banco. Elegimos un lenguaje de dibujo propio para toda la web.

El trazo lineal, la geometría isométrica y el acento naranja permiten representar módulos, capas y conexiones: conceptos que forman parte del producto. Así, la decisión visual también ayuda a explicar GaremTech.

Las soluciones comparten la estructura de la cabecera; cambié el visual y el tono de fondo para distinguirlas. En el ERP desenfoqué el mockup para que acompañara al mensaje sin obligar a leer su contenido. Estos visuales presentan el producto de forma comercial.

En «Qué es GaremTech» utilicé una ilustración. En «Valor diferencial» opté por una cabecera centrada y sin imagen, para ir directamente al argumento. También aclaré los colores de los bloques de perfiles para facilitar la lectura.

En las cabeceras de las soluciones retiré los textos superpuestos sobre las imágenes: en móvil recargaban la composición. La información importante queda en los puntos explicativos.

Para presentar los módulos preparé una lista vertical y una galería como alternativas para valorar con el equipo. En varias subpáginas documenté la cabecera; el resto seguía la estructura compartida.

Quería que la idea de una plataforma modular se entendiera también al verla. En la ilustración, las piezas forman un conjunto y responden al cursor. En las tarjetas de la home, el trazo naranja acompaña la idea de fluidez y las barras llevan la atención al bloque de datos. En la sección de tecnología, los mensajes aparecen uno a uno para explicar las capas del dibujo. Elegí el movimiento según lo que explicaba cada pieza.

Con Figma Make y Antigravity preparé prototipos funcionales para probar el movimiento y la respuesta al cursor. También exploré interacciones para la cabecera, la tabla y las funcionalidades del ERP.

Entregué los HTML a desarrollo como referencia funcional: el equipo podía probar la interacción y consultar su código, en lugar de interpretar el movimiento a partir de una imagen fija. Documenté las variantes por valorar y una alternativa sin movimiento.

Entregué las pantallas, el sistema visual y los HTML de las animaciones para que desarrollo pudiera ver y probar el comportamiento propuesto. Las notas distinguen lo definido de las variantes por valorar. Algunos visuales comerciales seguían pendientes de sustituirse por pantallas reales del producto. La integración final de la web correspondía a desarrollo.

Reflexión provisional para revisar: si retomara el proyecto, definiría antes qué piezas deben explicar el concepto y cuáles necesitan mostrar la interfaz real. La ilustración ayuda a entender la plataforma modular; las capturas del producto aportan el detalle que una imagen comercial no puede enseñar.

Logotipo, versiones, color, ilustración y aplicaciones de marca. Las propuestas de mockup y movimiento conservan su identificación.