Bootcamp UX - Contenido

Explore

Diseño de interfaces

UI kit y sistema de diseño

¿Qué es un UI Kit?

Los kit de interfaz de usuario son librería que contemplan la parte visual y recogen elementos prediseñados (botones, formularios,etc) para facilitar el desarrollo de las interfaces. Los elementos se pueden editar según la necesidad de cada proyecto.

LA finalidad del UI Kit es ahorrar tiempo y dinero para no partir un diseño desde 0 , además es un punto de partida para descubrir nuevos elementos en nuestros diseños. Por otro lado, la mayor diferente entre los sistemas de diseño y UI Kits es que el primero están adecuados al proyecto y es una guía para todo el equipo, incluyendo los desarrolladores; en cambio, UI Kits son plantillas para facilitar el trabajo y sirven como inicio de guía visual para tu proyecto.

¿Qué es un sistema de diseño?

Es una librería que sirve como guía para organizar cómo debe estar estructurado un diseño , en este documento se recoge el tono, el contenido visual y la forma de comunicación de los elementos que tendrá la interfaz. Tiene como objetivo a) orientar a todo el equipo de diseñadores a utilizar los mismos comportamientos de los patrones de diseño; b) asimismo, garantiza que todo el equipo se encuentre alineado y que el producto sea coherente. c) Además facilita los procesos, y consigue que sea más fácil crear y replicar otros elementos para utilizar durante el desarrollo.

“Utilizar un sistema de diseño garantiza la consistencia de nuestros productos. Esto repercute de manera positiva en la experiencia del usuario y acorta significativamente los tiempos de ideación, desarrollo y elaboración de productos.” (Product design handbook)

A continuación mostramos algunos ejemplos de sistemas de diseño

Ejemplos de

sistemas de diseño⁠

⁠

Caso

Auna⁠

⁠

Para iOS :

Human Interface Guide⁠

⁠

Para Android :

Material design⁠

⁠

Para Microsoft :

Fluent Design System⁠

windows ui⁠

⁠

¿Cuándo realizar un sistema de diseño?

Los equipos que participan en el desarrollo del producto, web o aplicación pueden ser tremendamente grandes y mantener la coherencia en el diseño de la interfaz puede ser realmente complicado.

Cuando el producto va a ser lanzado en diferentes plataformas y dispositivos y es necesario mantener las características y los diseños sincronizados.

Al tener un equipo muy grande de diseñadores y otras disciplinar es importante la consistencia y evitar que se dupliquen componentes que resuelven el mismo problema pero de formas diferentes.

Recursos para conocer más sobre el tema

⁠

Product design handboook⁠

⁠

Design systems - Scotiabank

⁠

Loading…⁠

⁠

Loading…⁠

⁠

Checklist para design system⁠

⁠

Atomic design systems

Una de las formas más comunes de organizar tus componente sy darle un orden a la forma en que crear y agrupas capas o componentes entre si.

⁠

Loading…⁠

⁠

Documentación sobre atomic design⁠

⁠

Loading platzi.com⁠

⁠

Loading platzi.com⁠

⁠

4. Herramienta de material design para asignar colores

https://material.io/design/color/the-color-system.html#color-usage-and-palettes⁠

⁠

Ayúdanos a seguir mejorando nuestro contenido🤩

Puedes dejarnos tu comentarios

aquí⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.