UX / UI

Ventajas de usar UI KITS en nuestros proyectos

Publicado por
Clever Experience
Ventajas de usar  UI KITS en nuestros  proyectos

Hoy en día casi todos los diseñadores (y no diseñadores) de distintas especializaciones conocen la importancia de construir propuestas cada vez más complejas y al mismo tiempo más rápidas. Por tal motivo no es de extrañar qué en procesos de Fast prototyping sea necesario recurrir a sistemas de diseño o kits de interfaces (UI KIT). Sistemas de diseño y UI Kit son conceptos distintos, en esta oportunidad abordaremos la temática de los kits de interfaces

Ahora bien, es imprescindible conocer qué es un kit de interfaz de usuario y que beneficios presta a la hora de trabajar en nuestros proyectos.

Primero lo primero:

Source: https://dribbble.com/shots/6017458-UI-components

¿Qué es un kit de interfaz de usuario?

Un kit de interfaz de usuario (cómo lo define Invision) es un conjunto de archivos que contiene componentes críticos de la interfaz de usuario como fuentes, archivos de diseño en capas, iconos, documentación y archivos HTML / CSS. (Source: Invision)

Los kits de interfaz de usuario pueden ser bastante simples con unos pocos botones y componentes de diseño, o extremadamente robustos con conmutadores que cambian las fuentes, los colores y las formas sobre la marcha.

Del mismo modo, Adobe XD (Source: Adobe XD), define los kits de interfaz de usuario cómo una colección de activos que contiene un conjunto de elementos de diseño, como componentes y estilos de IU.

Estos componentes, son elementos que transmiten significado y brindan funcionalidad a los usuarios. Algunos ejemplos de componentes de la interfaz de usuario son formularios de entrada, widgets y menús de navegación (entre otros).

Por otro lado, la mayoría de estos kits cuentan con estilos que son los atributos visuales del diseño, como: Fuentes, colores y formas.

Source: https://dribbble.com/filipjustic

Ahora bien, algunas propiedades de estos estilos como el color juegan un papel tremendo en cómo los usuarios entienden e interpretan un diseño. Si quieres profundizar algunos conocimientos sobre la teoría del color te invitamos a consultar este artículo:  ¿Qué es la teoría del color ?

La presencia de determinados elementos o componentes dentro de este tipo de documentos dependen de su propósito. Los kits de UI generalmente contienen opciones o ejemplos de maquetas para una solución en una categoría particular (como diseño de UX de comercio electrónico, diseño de UX de atención médica y otros).

Dicho lo anterior es importante destacar las ventajas de este tipo de archivos y sus componentes.

Algunos beneficios de usar UI Kits

  1. Ahorras tiempo: No tienes que dedicar tiempo a crear los componentes desde cero ni preocuparte por los detalles estándar de cada uno, esto te permite utilizar tu tiempo de forma más eficiente, acelerar el proceso de diseño y prestarle atención a otras partes importantes del trabajo.
  2. Ayudan a mantener la coherencia y consistencia en el producto digitalYa que mantiene la relación lógica entre sus partes y componentes. Cada elemento es parte de una familia que posee características en común, lo que visualmente le otorga solidez a la interfaz.
  3. Son versátiles, puedes obtener algo único modificando y adaptando algunas cosasAunque para algunas personas puede resultar limitante trabajar con componentes prediseñados, la realidad es que el comenzar a trabajar de una base bien estructurada hace más simple comenzar a realizar cambios y adaptaciones, para obtener el resultado buscado, ya que el cambio de estilos es mucho más rápido.
  4. Puedes aprender buenas prácticas de los UI Kits existentes: Te ayuda a comprender como están diseñados los componentes (dimensiones, márgenes y paddings) y que elementos los componen (Formas, textos, iconos), que tamaños de tipografía son apropiados para que usos.

Entender como están diseñados los componentes y elementos de una interfaz puede ayudarte a mejorar tus habilidades de diseño y de esa forma construir un día tu propio UI Kit.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Descarga nuestro Clever UI KIT 👇

Acá en Clever Experience trabajamos en un pequeño UI KIT que puede ayudarte en la próxima propuesta rápida, idea o proyecto que debas o quieras desarrollar.
Ingresa tu nombre y correo para descargar.

Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.

Crea tu propio manual de marca con esta plantilla gratuita.
¡Organiza tus activos de diseño de forma más eficiente!