K·Factor

La web anterior abría con una presentación general de la empresa. Para la nueva web, K·Factor quería desarrollar el contenido de sus servicios y productos y renovar su imagen. Organicé y redacté ese contenido como base del diseño.

En las reuniones con el cliente revisamos las necesidades y referencias para la nueva web.

Revisé cómo otras consultoras tecnológicas y empresas de software presentaban sus servicios, soluciones y proyectos. Reuní en Figma referencias como Izertis, hiberus, Sngular, Plain Concepts y Thoughtworks.

Organicé las distintas líneas de oferta en páginas propias y di a cada solución SaaS un segundo nivel. El mapa recoge también los bloques de cada página, para trabajar la relación entre estructura y contenido antes del diseño visual.

Redacté todos los textos de la web y los trabajé dentro de los wireframes. Así podía revisar qué debía explicar cada página, en qué orden y con qué extensión.

No pasamos al diseño visual hasta tener aprobados los wireframes de baja fidelidad y los textos.

Rediseñé el logotipo que ya tenía K·Factor. Ajusté el espaciado entre las letras y acerqué la K al resto del nombre para que el conjunto se leyera como una sola marca.

Definí nuevos colores, tipografía, botones, navegación y componentes en Figma. El sistema reunía las reglas para aplicar la identidad a páginas con contenidos distintos y a los materiales de marca.

Con los textos y wireframes aprobados, trabajé el diseño visual de las páginas a partir del sistema de K·Factor.

También me ocupé de contactar con el fotógrafo para incorporar fotografías reales a la web. Buscaba que la imagen de la empresa transmitiera más credibilidad.

En Metodología, el movimiento destaca cada fase y muestra su explicación para recorrer el proceso por partes. La esfera de Valor diferencial responde al cursor y aporta el carácter interactivo que buscaba la marca.

Preparé demos funcionales con Figma Make, Antigravity y Google AI Studio. Me permitían concretar cómo se comportaba cada pieza y revisarla con desarrollo antes de integrarla en la web.

También preparé la animación de la cabecera principal y el fondo de la sección de equipo. Entregué los HTML a desarrollo para que pudieran abrirlos, probarlos y consultar el código durante la integración. Aquí muestro Metodología y Valor diferencial. La cabecera animada y el recorrido de las cinco fases en la home están en «Más del proyecto».

En móvil, las tarjetas se recorren deslizando con el dedo. El carrusel conserva la agrupación del contenido sin apilar todas las tarjetas en una página más larga; para ver las siguientes, hay que avanzar horizontalmente.

El trabajo reunió la arquitectura, los textos, la identidad, las pantallas para escritorio y móvil y las animaciones con su código. El cliente fue aprobando las propuestas durante el proceso; trabajé en coordinación con desarrollo para preparar la entrega y su integración en la web.

Reflexión provisional para revisar: si volviera a preparar estas piezas, acordaría desde el principio qué aporta cada animación al contenido y cómo se adapta a móvil. Separaría las que explican un proceso, como Metodología, de las que dan carácter a la marca, como la esfera de Valor diferencial, para revisar cada una con un criterio claro junto a desarrollo.