Sistema de diseño para AMIS

Visor

Guía UI

Mi función

Empresa donde fue desarrollado

Visor

Año de lanzamiento

2019

Resumen del desarrollo del sistema de diseño

Visor es una empresa mexicana del sector financiero y tecnológico que ofrece información en financiamiento para Pymes por medio de diversas herramientas online.

Por lo anterior, requerían de un sistema de diseño para homologar todas las plataformas existentes ya que existía discrepancia en la mayoría de los productos de Visor.

Lo primero que me tocó hacer en el equipo de UX/UI fue revisar el material gráfico con el que se basaban para diseñar las interfaces de la empresa. Posteriormente, tuve una sesión con los desarrolladores frontend para saber el material que usaban para la programación de los diseños entregados por el equipo de UX/UI.

En consecuencia, pude detectar diferencias entre los materiales que usaban ambos equipos tanto para diseñar como para desarrollar. Así pues, decidí partir con esos materiales y hallazgos para iniciar el proyecto a mi cargo.

Para crear el sistema de diseño me basé en la metodología de Brad Frost llamada Atomic Design. Esta metodología está compuesta por 5 etapas:

    1. Átomos
    2. Moléculas
    3. Partículas
    4. Plantillas
    5. Páginas

Estas etapas sirven para crear el sistema de diseño de una manera mejor estructurada y jerárquica. 

Debido a lo anterior, pude desglosar los componentes hasta lo más mínimo como el color, sombra, tipografía, espacios, etc. Hasta homologar la composición ideal para cada una de las secciones que compondrían los productos de Visor.

Al final, entregué un sistema que servirá para rediseñar los productos ya existentes de Visor así como los nuevos.

Resultados

Se entregó un sistema de diseño que permite definir las características de los componentes, sus usos correctos e incorrectos y las estructuras que tendrán los productos de Visor. Esta herramienta servirá para los equipos de TI y UX/UI.

Portada del sistema de diseño para Visor
Sección de colores de sistema de diseño de Visor
Sección de reglas del uso de colores del sistema de diseño para Visor
Sección de tipografía del sistema de diseño para Visor
Sección de los usos correctos e incorrectos de la tipografía en el sistema de diseño de Visor
Sección de inputs en el sistema de diseño de Visor
Sección de usos correctos e incorrectos de los inputs en el sistema de diseño de Visor

¡Gracias por ver mi trabajo!

¿Quieres ver otro de mis proyectos?

¿Te interesa mi perfil para cubrir una vacante?

Encuéntrame en:

O si lo prefieres escríbeme por este medio.