Bodymind

Skills

UX-UI design

Graphic design

Software

Wordpress

Elementor

Figma

Proyecto

Bodymind web

Año

2024

Diseño UI

En mi colaboración con Bodymind, la submarca de FisioOnline, lideré el diseño UI de su sitio web, con un enfoque especial en la optimización de la landing page para sus cursos. Implementé la paleta cromática de la marca y sustituí el fondo oscuro por un gris claro, logrando una imagen más alineada con los valores y el enfoque de la empresa. Asimismo, estructuré los elementos del blog de manera uniforme, consolidando un lenguaje visual coherente y profesional que refuerza la identidad de la marca en toda la plataforma.

Para los gráficos complementarios de la marca, se tomaron los colores principales del logo y se integraron con dos tonos base adicionales que refuerzan la identidad visual. La tipografía seleccionada fue Instrument, una fuente geométrica sans que garantiza excelente legibilidad, especialmente diseñada para el público objetivo, compuesto mayoritariamente por adultos mayores. En línea con sus necesidades, se estableció un tamaño base de 18 px. Adicionalmente, se crearon gráficos específicos para cada curso, utilizando iconos en 3D organizados en una composición 1-4, donde los iconos secundarios refuerzan de forma estratégica el concepto de cada curso.

Merriweather

Instrument

Instrument Sans es una tipografía geométrica inspirada en el estilo neo-grotesco, con un diseño versátil y contemporáneo

Bold

Semibold

Regular

AaBbCcDdEeF

Tierra

#323232

Nieve

#fafbfd

Ocaso

#f3b0aa

Marea

#5e91ef

Bodymind, tu aliado para una vida plena.

Landing pages

La pieza central del proyecto UI fue la landing page de los cursos, diseñada con un enfoque de pantalla dividida. En el lado izquierdo se presenta información detallada del curso, mientras que en el lado derecho se incluye una ficha concisa con la portada, el nombre, el precio y un botón de llamado a la acción (CTA).Se utilizaron secciones alternadas en gris claro y gris oscuro, complementadas con una iconografía minimalista cuidadosamente seleccionada. Además, se diseñaron tarjetas específicas para cada módulo del curso, proporcionando información detallada y estructurada sobre los contenidos.

Let's work together!
Let's work together!

© 2024 Elizabethleon. All rights reserved