Caso Soft Solutions: diseño UI/UX y branding para una agencia tecnológica
Project Gallery
El problema de vender software
Soft Solutions vende arquitectura de backend y sistemas escalables. Nadie puede imaginarse eso. Su sitio anterior describía el trabajo con palabras, y las palabras eran exactas y completamente inertes: alguien llegaba, leía “infraestructura escalable” y se iba sin haber entendido qué estaría comprando.
El encargo pedía ilustraciones vectoriales. El trabajo real era hacer legible un producto invisible.
Por qué isométrico
Elegí un sistema isométrico en vez de ilustración plana o renders 3D, por razones prácticas antes que estéticas.
La proyección isométrica da profundidad y relaciones espaciales sin distorsión de perspectiva, lo que hace que un diagrama de sistema se lea como una estructura y no como un dibujo. Quien lo mira ve que este componente se apoya sobre aquel otro. La ilustración plana pierde eso; el 3D real lo recupera, pero cuesta mucho más en peso de archivo y en tiempo de producción para la misma claridad.
Al ser vectoriales, las ilustraciones se mantienen nítidas a cualquier tamaño y pesan una fracción de su equivalente en mapa de bits. Para una agencia cuyo argumento es la competencia técnica, un sitio lento habría contradicho el mensaje.
El sistema geométrico
La agencia se describe como rigurosa y creativa a la vez, que es el tipo de afirmación que normalmente se queda en afirmación. Construí el lenguaje visual para demostrarlo en lugar de decirlo:
Los cuadrados llevan la lógica. Tablas de precios, especificaciones técnicas y bloques de comparación viven en estructuras rectangulares estrictas con alineación dura. Estabilidad donde hace falta comparar números.
Los círculos llevan el movimiento. Formas redondeadas y acentos circulares rodean las ilustraciones y guían la mirada hacia las llamadas a la acción. Movimiento donde hace falta conducir.
Mantener esos dos vocabularios separados hace que cada sección avise qué tipo de atención pide antes de que nadie lea una palabra.
El espaciado como decisión técnica
Las ilustraciones detalladas necesitan aire o se convierten en desorden. Definí la rejilla en Figma con medianiles deliberadamente generosos y mantuve ese ritmo en todas las secciones. Las ilustraciones consiguen aislamiento; quien lee consigue un descanso entre bloques densos.
Herramientas
- Figma para la interfaz, el sistema de rejilla y la biblioteca de componentes
- Adobe Illustrator para los recursos vectoriales isométricos
El maquetado se especificó pensando en una construcción de sitio estático, para que el peso de la ilustración no comprometiera el tiempo de carga en producción.
Resultado
La agencia terminó con una página que explica su oferta visualmente en vez de pedir que se crea la descripción, y con un sistema de ilustración que puede ampliar según añada servicios.
¿Vendes algo abstracto?
Los productos técnicos suelen fallar en internet porque el valor es invisible, no porque el texto esté mal escrito. Si eso describe tu sitio, escríbeme.