BioMojo.com

DISEÑO WEB RESPONSIVO

BioMojo, una empresa de soluciones de rendimiento biomédico especializada en soluciones integradas de software y hardware, contrató a nuestro equipo de diseño web para diseñar la última iteración de su sitio web principal: BioMojo.com.

Desde el principio, diseñamos el sitio web con una paleta de colores oscuros para el fondo, complementada por cian y magenta como colores protagonistas, reflejando la identidad de marca revisada que creamos. Incorporamos elementos de diseño neumórficos y glassmorphic para añadir profundidad y hacer que el diseño plano destacara.

Además, utilizamos paneles deslizables para páginas web con contenido mínimo, asegurando una experiencia de usuario cohesiva y optimizada sin necesidad de crear páginas completas. El arte generativo con IA desempeñó un papel crucial en la creación de imágenes ricas y cautivadoras en todo el diseño web. Los elementos de diseño adicionales incluyeron: una pequeña revisión de la identidad de marca que creamos originalmente, un pequeño paquete de materiales corporativos compuesto por diseño de tarjetas de presentación y diseño de membrete, una revisión del parche que diseñamos previamente e imágenes de arte generativo con IA para marketing en redes sociales.

Página De Inicio Principal

Nuestro equipo de diseño implementó una paleta de colores oscuros para que los colores intensos destacaran sobre los fondos profundos. Como nuestra identidad de marca recientemente rediseñada presenta el cian de forma prominente, lo combinamos con magenta como color protagonista secundario, creando una gama de tonos emocionante y dinámica. Aunque las tendencias modernas de diseño web se inclinan hacia una estética 2D con esquinas redondeadas, adoptamos estas tendencias, pero también nos inspiramos en diseños anteriores que utilizaban elementos angulares y trabajo visual con líneas. Esta fusión de estilos modernos y retro garantiza que BioMojo destaque frente a sus competidores, ofreciendo una identidad web única y visualmente impactante. Colocamos los círculos de paginación del masthead en ángulo para evitar una apariencia cliché, destacándolos con una “barra de luz” magenta para atraer la atención.

Casi todas las imágenes que utilizamos para el diseño del sitio web fueron piezas de arte generativo con IA que creamos usando Midjourney, con un extenso postprocesamiento en Adobe Photoshop. Aunque fue un proceso que requirió mucho tiempo, los resultados excepcionales hicieron que valiera la pena.

Diseñamos los elementos neumórficos en el gráfico del Proceso de Integración de Sistemas como una imagen de línea de tiempo paso a paso, utilizando bases neumórficas 3D para alojar los íconos personalizados que diseñamos. Este enfoque no solo aporta colores vibrantes al diseño del sitio web, sino que también simboliza la competencia principal de BioMojo: soluciones de software de realidad mixta 3D. Luego aplicamos el mismo lenguaje de diseño a los íconos de Noticias y Publicaciones.

Acerca De Nosotros

Parte del proceso de rediseño del sitio web implica reconocer qué funcionaba y qué no en el diseño anterior del cliente. Por ejemplo, dedicar una página completa a un solo párrafo no ofrece la mejor experiencia de usuario. Para mejorar esto, consolidamos múltiples páginas en una sola tanto para las páginas Acerca De Nosotros como Nuestro Trabajo, aumentando así el contenido y la información entregada de una manera más rápida y eficiente.

Haz clic en la imagen Acerca De Nosotros para verla en tamaño completo.

Nuestro Trabajo + Páginas De Plantilla De Proyecto

Similar a la página Acerca De Nosotros, la página Nuestro Trabajo consolidó múltiples páginas relacionadas en una sola página cohesiva. Además, diseñamos una plantilla para las secciones Proyectos y Nuestro Trabajo que puede utilizarse para proyectos actuales y futuros. Este layout con plantilla ayuda al cliente a ahorrar costos con el tiempo al optimizar las actualizaciones y asegurar la consistencia.

Haz clic en las imágenes a continuación para verlas en tamaño completo.

Careers + Página De Plantilla De Puesto De Trabajo

Decidimos que algunas de las páginas web con contenido mínimo que no podían combinarse en una sola página se presentarían mejor como paneles deslizables. Este enfoque permite a los visitantes acceder a la información sin salir de la página actual. El lenguaje de diseño se enfoca en un lado, con el fondo sutilmente atenuado para dirigir la atención hacia el contenido relevante. El ancho flexible y el desplazamiento vertical del panel deslizable lo convierten en una solución versátil para diversas necesidades de contenido. Para la página de Plantilla De Puesto De Trabajo, que contiene mucha más información que incluso la página Careers, diseñamos un layout de plantilla para puestos actuales y futuros.

Noticias + Publicaciones

Similar al panel deslizable de Careers, las secciones News y Publications, que originalmente estaban alojadas en páginas web separadas, se consolidaron en un solo panel deslizable. Esta decisión se tomó después de considerar la frecuencia actual de publicación de ambas secciones. Al combinarlas, nos aseguramos de que los visitantes puedan acceder fácilmente a las últimas actualizaciones sin salir de la página principal. Cada sección dentro del panel permite desplazamiento, lo que permite a los usuarios explorar el contenido de forma fluida. A medida que aumente la frecuencia de actualizaciones, estas secciones pueden separarse fácilmente en sus propios paneles deslizables dedicados si es necesario. Este diseño flexible garantiza que el sitio web pueda adaptarse a las necesidades cambiantes de contenido mientras mantiene una experiencia de usuario optimizada.

Contáctanos

Nos aseguramos de que la información de contacto estuviera destacada en el footer de cada página del sitio web para facilitar el acceso. Sin embargo, también reconocimos la necesidad de una sección dedicada de “Contáctanos”. Dado que el contenido no era lo suficientemente amplio como para justificar una página completa, implementamos un panel deslizable en su lugar.

Para mejorar el atractivo visual de este panel, incluimos una foto de las oficinas del cliente y aplicamos una superposición de degradado de color en cian y magenta. Esto añadió un elemento vibrante y atractivo a la imagen, haciéndola visualmente más interesante y alineada con la estética general del diseño. Este enfoque proporciona a los usuarios acceso rápido a la información de contacto sin interrumpir su experiencia de navegación, al mismo tiempo que incorpora un elemento de diseño único y visualmente atractivo.