UX En 60 Segundos: Usando Librerías de Componentes

Bienvenido a esta introducción super rápida a usar librerías de componentes; útiles para diseñadores, desarrolladores, y usuarios. ¡Comencemos!

Librerías de Componentes en 60 Segundos

Cada interacción que un usuario encuentra, ellos la tienen que aprender, lo que crea una carga cognitiva. Es especialmente retador para un usuario si los elementos de la UI son casi los mismos, pero diferentes. El usuario entonces tiene que analizar preguntas como "¿por qué son estos diferentes?", "¿sucederá lo mismo si presiono estos dos botones?"

Comienza identificando objetos comunes en tus diseños, definelos como componentes, después (cuando estés diseñando pantallas) puedes comenzar a jalarlos de vuelta. Haciendo esto te forzarás a ti mismo a ser más consistente. Podrías incluso sorprenderte por el kilometraje que puedes obtener usando los mismos objetos para resolver diferentes problemas.

Usando Sketch

Hablando de manera práctica, puedes crear símbolos dentro de tu proyecto sketch, o usar el complemento Craft por InVision. Para realmente obtener valor de tu librería de componentes, trabaja con tus desarrolladores para obtener las mismas cosas definidas en el código tambien.

• Craft: Diseñando Con Datos del Mundo Real
• Cómo Organizar Tus Estilos Sketch y Símbolos Como un Profesional

No necesita ser puramente visual tampoco, deberías definir los diferentes estados de cada objeto, e incluso interacciones complejas. 

Cuando se usa una librería de componentes, los diseñadores y desarrolladores pueden usar los mismos objetos una y otra vez, para resolver diferentes problemas. Y para los usuarios, encontrarán componentes familiares, habiendo pasado menos tiempo descifrando cómo usar tu app o sitio web.

Kits UI Destacados

Habrás notado un par de Kits UI presentados en este video; ¡tómalos ahora como parte de tu suscripción Envato Elements!

Simple

Más de 100 elementos Photoshop editables y re-dimensionables, basados en formas vectoriales limpias. Las capas están agrupadas y bien organizadas, los elementos son fáciles de re-dimensionar y ajustar, así como editar colores.

Zoomie

Aplicacion Social Media Mobile para Sketch; todos los lienzos de la pantalla están organizados y en capas.