Fisotec

Posted 21 octubre, 2023

In Web

Web Fisotec / fisotecsolutions.com

El proyecto llegó a nuestras manos con un sólo requerimiento por parte del cliente: “Queremos que nuestra web refleje tecnología”; y así sin más este enunciado se transformó en un cómo muy práctico que nos sirvió de norte para el diseño y la usabilidad de la web.

Concepto Web

Es una web que tiene un diseño que evoluciona para lograr sumergir al usuario en una plataforma tecnológica futurista con formas limpias y finas que enfocan al usuario en el contenido. Los colores eléctricos, ácidos y profundos que pertenecen a la marca, acentúan el estilo y sumergen al usuario en un universo en el que no se necesita demasiado tiempo estando allí para saber que se está hablando de tecnología que rompe esquemas.

Dimensionalidad

Fiel a su concepto, la web quiebra los esquemas verticales y hace que el usuario recorra la web inicialmente en horizontal para hacer un paneo a través del mapa conceptual de una ciudad en segundo plano que refleja la forma en la que las plataformas de los software del cliente “ven” las formas y profundidades de la ciudad.

Todos los elementos de segundo plano al igual que la ciudad al inicio de la web, aportan una sensación de profundidad y movimiento sutil que sirven como marco para los primeros planos de información y elementos principales.

Como reflejo del concepto, la interfaz está diseñada para ser minimalista basada en formas geométricas que delimitan las áreas e interactúan entre sí. Aún por sobre la frialdad de los colores y las formas muy marcadas se visualiza para el usuario una interfaz conocida y amigable por tres razones que han sido pilares fundamentales para el diseño:

Información organizada en el eje central de la pantalla.
Fidelidad a los elementos más comunes de UI: botones y carruseles.
Jerarquía de títulos y textos.

Elementos Creativos

Para terminar de profundizar en el lado conceptual de la web y reflejarlo en la UI, se han incluído elementos animados que se entrelazan con el contenido de la web:

Un interruptor que permite al usuario elegir el modo en el que quiere ver la web: Light or Dark. Estos modos también se activan automáticamente con respecto a la hora del día en el que el usuario esté navegando.
Radar Animado que muestra los servicios de la marca, inspirado en el análisis de los softwares del cliente.
Footer Interactivo vertical que permite ver amplificado el menú, los datos de contacto e información relevante de la marca.

Como dato final la web fue concebida tanto en diseño UX como UI, en el modo Dark, ya que así muestra la verdadera inspiración en las plataformas futurísticas, pero sobre todo muestra aún mejor el vibrante contraste de los colores de la marca del cliente.

Programación. Creación. Desarrollo Web

El equipo se tomó el reto de realizar las animaciones y la experiencia de navegación propuestas para la UX y UI y lograr materializar no sólo los elementos creativos sino también la dimensionalidad de la interfaz creada.

Técnicamente destacamos el uso del Framework NuxtJS, Versión II para componer la interfaz y reutilizar diferentes componentes a lo largo de la web para agilizar el proceso de montaje y luego el manejo y mantenimiento. Esta acción nos ha permitido obtener unos resultados excelentes en cuanto al desempeño de la web. El backend es un CMS como WordPress, ligero, funcional, adaptable y conocido; para facilitar la publicación de contenidos por parte del equipo interno de la marca que mantiene la web actualizada.

WordPress se ha utilizado como «Headless CMS» y por lo tanto prescindimos de su motor de plantillas y utilizamos Nuxt en formato SSR (por sus siglas en inglés para Server-side Rendering o en español Renderización desde el Servidor) para garantizar que el SEO no se vea afectado por usar un framework JavaScript.

En el mundo de las animaciones, (siendo este un punto importantísimo para el diseño y la transmisión del mensaje conceptual), hemos utilizado una librería contrastada; GSAP nos garantiza el rendimiento a pesar de la carga de animaciones en la web.

Resumen Final

Fisotec fue un reto desde el primer momento en el que se recibió como proyecto, pero también agradecemos a la marca, que nos permitió explorar las barreras conocidas del UX para un rubro de mercado tan específico como éste.

Una web limpia y tecnológica que rompe los esquemas para llevar un mensaje claro: Fisotec Solutions es tecnología de punta.

«Lleva tu empresa hasta la Nube»

nubeseo.es

+34 951 70 37 82

Marbella | Madrid | Córdoba | Málaga

*****

DATOS DE CONTACTO NUBESEO:

Persona de contacto: Samuel Molina Valor.

Número de teléfono: 690 639 114

Correo electrónico: samuel@nubeseo.es

Web: nubeseo.es

REDES SOCIALES DE NUBESEO: