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.

Preparé propuestas con Figma Make y Antigravity: una ilustración modular que responde al cursor, módulos que se iluminan y tarjetas que descubren una solución con un movimiento de cortina. También definí interacciones para la cabecera, la tabla y las funcionalidades del ERP.

Las documenté como opciones para valorar con desarrollo, incluyendo una alternativa estática. La entrega conserva el código de la ilustración modular y sus indicaciones de uso.

Entregué las pantallas, el sistema visual y las indicaciones para trabajarlos con desarrollo. Las notas distinguen lo definido, las variantes por valorar y los materiales pendientes, como disponer de pantallas reales para algunas soluciones. La integración final de la web correspondía a desarrollo.

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