Diseño UI

Primeros pasos para la creación de un Kit UI

Anteriormente hemos hablado sobre los tan famosos Sistemas de Diseño tanto en nuestro blog como en nuestros Workshop. Sabemos que es una herramienta que permite articular y coordinar distintas aristas sobre un producto digital y una organización. Algo así como el recetario de un remedio y sus indicaciones. Una parte de estos son los Kit UI, los que identificamos como una librería de componentes o piezas que nos ayudan a diseñar interfaces más rápido sin la necesidad de reinventar la rueda. 

Además, ayuda a que distintos grupos de diseñadores encargados de diferentes features de un producto puedan diseñar sin perder la coherencia. Para diseñar un Kit UI te recomendamos partir por definir cuál es la estrategia detrás de este producto.

Definir el objetivo

No todos los proyectos son iguales. Algunos pueden ser de uso interno y otro de uso externo, por ejemplo, cuando desarrollamos un sitio para terceros. 

Debemos tener claro cuál es el alcance que tendrá este Kit, ya que puede ser únicamente para la implementación de un sitio web, o puede incluir piezas para el diseño de gráficas para redes sociales. 

Además, el avance de la tecnología es cada vez mayor, por lo que necesitamos saber el soporte o el formato en que el producto digital será usado. Por ejemplo, es muy distintos crear componentes para Desktop que para Mobile. Actualmente podemos diseñar también para Smartwatches, realidad virtual o incluso para pantallas en refrigeradores. Todo depende del propósito.

¿Quién lo usará?

Repite conmigo: “No estoy diseñando para mi, alguien más lo usará”

Teniendo en mente que un Kit UI es en esencia un producto, debemos definir quiénes serán las personas que harán uso de él.

En estricto rigor, son los diseñadores y desarrolladores quienes tienen más contacto con este producto. Pero este también puede incluir definiciones de voz y tono de la marca, por ejemplo, en las microcopias presente en cada componente. Acercándose a algo más completo como el Sistema de Diseño.

¿Qué debe contemplar como básico?

Para que un Kit UI pueda ser útil, usable y escalable, debe entenderse como una fuente única de verdad, donde, en el mejor de los casos, se detalle las decisiones que se tomaron en el camino para llegar al producto final. Por ejemplo, introducir la marca, sus pilares fundamentales, su paleta cromática, tipografía corporativa.

Otro factor importante es ser muy ordenado. Piensa que alguien debe poder encontrar fácilmente un componente o cierta información o un color. Cada elemento debe estar nombrado bajo una norma establecida. La mayoría de los softwares para diseñar interfaces, como Sketch, Figma o Adobe XD, cuentan con la convención de poder ordenar elementos bajo categorías. 

Un ejemplo para lo anterior es: tenemos dos colores, uno primario y otro secundario, una forma de ordenarlos es nombrarlos como “Color/primario y Color/secundario”. Esto dejará ambos colores bajo la categoría “Color”. Lo mismo podemos hacer con los estilos tipográficos o con aquellos componentes que poseen distinta estructura para Desktop como para Mobile.

Lo importante es dejar en claro las directrices para que quien vaya a usar un Kit digital pueda hacerlo con total seguridad y no comprometer los tiempos ni la calidad del producto final.

Una pequeña ayuda

Una recomendación es revisar Kit’s de otros diseñadores. La mayoría contemplan los elementos más básicos para empezar a diseñar lo más rápido posible. Puedes usarlos como referencia para diseñar uno que se acomode a tus necesidades. De hecho, en la comunidad de Figma puedes encontrar un sinfín de ejemplos.