Su guía para los kits de interfaz de usuario: ventajas y desventajas

Estos son dos de los puntos débiles más generales al convertir una idea en una aplicación con todas las funciones:

1. Debe ser receptivo.
2. Debe tener un diseño de interfaz de usuario impresionante y funcional.

Para agregar aún más desafíos a esto, los equipos deben:

3. Afrontar plazos ajustados.
4. Ajustarse a un presupuesto estricto.
5. Y maniobre a través de la comunicación multicanal entre departamentos para mantenerse actualizado sobre el progreso de su proyecto.

¿No es alucinante?

Una forma de controlar el caos acumulado, especialmente en términos de procesos de diseño a código y entrega de UX convincente, es agregando una plataforma de diseño de productos digitales a su proceso.

¿Qué beneficios específicos obtienes?

Una parte clave de estas plataformas no es solo la creación de prototipos, las pruebas de usuario y el diseño según código, sino también los kits de interfaz de usuario que sirven como base del sistema de diseño que conforma su producto digital.

Y si bien todo esto sucede a una velocidad vertiginosa, tanto las mentes técnicas como las creativas no deberían quedarse de brazos cruzados. Para afrontar la transformación digital que, además, está en constante transformación, deben establecer mejores prácticas dentro de los equipos de productos de software que faciliten su flujo de trabajo y aceleren el proceso de diseño y desarrollo de una aplicación.

¿Qué es un kit de interfaz de usuario?

Los kits de interfaz de usuario son conjuntos completos de componentes prediseñados y archivos gráficos que incluyen todos los aspectos del sistema de diseño de una organización que dicta las pautas de lo que debe consistir en el diseño de la aplicación, incluyendo:

• Componentes de la interfaz de usuario
• Patrones de interfaz de usuario
• Plantillas de pantalla
• Iconografía
• Fuentes
• Paletas de colores

Con el objetivo de ahorrar tiempo y tener estándares en todo el diseño de aplicaciones, los kits de interfaz de usuario agilizan la creación de pantallas y aceleran su ciclo de desarrollo. Un kit de interfaz de usuario bien diseñado incluirá una amplia gama de patrones, colores y opciones de fuentes para una mayor personalización, y generación de código completo para ayudarle a crear aplicaciones interactivas más rápido que antes.

Otra razón por la que los kits de interfaz de usuario han surgido y se han vuelto tan obligatorios es porque los kits de interfaz de usuario junto con los conjuntos de componentes de la interfaz de usuario pueden cerrar la brecha entre diseñadores y desarrolladores. Durante un largo período de tiempo, los agentes creativos y los cerebros expertos en tecnología parecieron ocupar y operar en ámbitos distintos. Pero con el enfoque de la administración en entregar más proyectos de transformación digital más rápido, la necesidad de kits de interfaz de usuario que tengan componentes gemelos de interfaz de usuario reales es imperativa. Esto realmente acelera los proyectos de transformación digital, los equipos obtienen colaboración visual en tiempo real, un enfoque de diseño de pantalla simple pero creativo, generación de código, creación de prototipos y pruebas de usuario más rápidas, todo en un solo entorno. Desaparece el desajuste entre lo que se diseña y lo que se entrega.

En el vertiginoso mundo tecnológico donde los equipos de productos hablan en términos diferentes y generalmente trabajan con un ritmo, herramientas y técnicas diferentes, los kits de interfaz de usuario se sienten como el primer sorbo de café un lunes por la mañana, lo que de alguna manera promete reducir el estrés de hacerlo. tareas pesadas. Estos aceleradores de diseño y desarrollo no sólo dan como resultado una optimización de costos y una reducción del tiempo de desarrollo, sino que también crean un entorno de desarrollo de próxima generación.

Cómo utilizar kits de interfaz de usuario

Usar herramientas de UI es bastante simple y fácil y no requiere ningún conjunto de habilidades técnicas específicas diferentes a las que ya has adquirido. Por lo general, los kits de interfaz de usuario le permiten diseñar y desarrollar aplicaciones utilizando un generador visual. Hay una caja de herramientas que incluye varios componentes y temas, fuentes de datos, etc., que le ayudan a ensamblar el diseño, continuar el desarrollo y generar el código listo para producción una vez que todo esté hecho. Todo esto sin tener que escribir ningún CSS ni utilizar ningún lenguaje de marcado.

Para utilizar los kits de interfaz de usuario de Indigo.Design en Sketch, el primer paso es descargar e instalar el sistema de diseño como una nueva biblioteca en Sketch. Siga leyendo para ver cómo funciona esto.

1. Descargue Design System iniciando sesión en Indigo.Design, seleccionando Introducción y luego resaltando el botón Descargar en esta imagen.

Indigo Design System contiene un archivo Sketch con 26 páginas en la sección Páginas que se descomponen así:

• Páginas de estilo: todos los recursos de estilo, como íconos de materiales, colores, tipografía, elevación e ilustraciones, se pueden encontrar en las cinco páginas superiores.
• Páginas de componentes: un amplio conjunto de componentes para diseñar sus ideas de diseño. A través de varios ajustes preestablecidos disponibles en el menú de inserción Sketch y anulaciones de estados y diseños para configurar en el panel derecho de la interfaz de usuario Sketch, puede crear diseños compatibles con Ignite UI para Angular y nuestro motor de generación de código.
• Páginas de patrones: los componentes dan forma a patrones significativos para el diseño de aplicaciones productivas que se pueden encontrar repartidos en las páginas restantes.

2. A continuación, abra la aplicación Sketch en su Mac, haga clic en el elemento Sketch del menú Apple y seleccione Preferencias.
3. En el cuadro de diálogo, seleccione la pestaña Bibliotecas y haga clic en Agregar biblioteca...
4. Navegue hasta la carpeta donde descargó la biblioteca.
5. Selecciónelo y haga clic en Abrir.
6. Asegúrese de que aparezca en la lista del cuadro de diálogo Preferencias y de que esté marcado.

Es posible que hayas notado que en la imagen de arriba, la biblioteca también parece estar presente en la nube Sketch y, como alternativa, puedes usar este mecanismo en Sketch si estás ejecutando la versión 57 o posterior. La configuración es muy sencilla, sólo necesita abrir el archivo Sketch Indigo.Design y guardarlo en su nube Sketch. Puede encontrar una explicación detallada de cómo configurar Indigo.Design como una biblioteca en la nube en esta publicación de Medium. Una vez que haya agregado la biblioteca con éxito, aparecerá en la sección Símbolos del menú Insertar en Sketch.

Ahora puede crear nuevas aplicaciones utilizando Indigo Design System y los kits de interfaz de usuario para Sketch.

En Sketch, al utilizar el complemento Sync to Indigo.Design, puede obtener una vista previa del diseño, crear un prototipo interactivo, revisar el código y generar una aplicación completa lista para producción directamente desde el diseño.

Ventajas de los kits de interfaz de usuario

1. Una plataforma para gobernarlos a todos: desde el diseño hasta el código

Entre las cosas más complicadas cuando se trabaja en una aplicación empresarial se encuentra:

• eliminar las divisiones disfuncionales del trabajo;
• establecer un ecosistema que consolide las tareas individuales;
• desarrollar el entendimiento mutuo para que las cosas puedan suceder más rápido.

Muchos diseñadores revisan historias de usuarios en Jira (o alguna herramienta de seguimiento de proyectos/atrasos) para comenzar a pensar un poco como desarrolladores y comprender mejor por qué una característica de diseño en particular fue vista como nada más que 300 líneas de código adicional innecesario. . Y viceversa. Los desarrolladores de software abordan proyectos con mentalidad de diseñador gracias a herramientas como InVision. Y si bien esto ayuda a cada parte a descomponer componentes y patrones hasta cierto punto y a comprender el trabajo de sus colegas, lleva mucho tiempo y los equipos permanecen separados.

Aquí es donde brillan los kits de UI, y específicamente los kits de UI utilizados en el contexto de una plataforma de diseño de productos digitales. Crean una cultura abierta y una única fuente de verdad, lo que permite que tanto los diseñadores como los desarrolladores habiten el mismo ámbito de trabajo en línea. Después de la pandemia de Covid-19, esto se ha vuelto extremadamente importante ya que casi todas las personas en el mundo comenzaron a trabajar de forma remota. Entonces, en cierto sentido, los aceleradores de diseño y desarrollo de UI responden a la necesidad de un “multijugador” donde los equipos se reúnan para trabajar juntos, dar retroalimentación, monitorear los cambios y el progreso, y crear productos.

Permiten a los equipos llevar a cabo su tarea en una plataforma: desde la lluvia de ideas, el diseño, la entrega, la creación de prototipos, el control de versiones y la generación de código hasta las pruebas y la comunicación con los usuarios. Comprender los antecedentes de las ideas de diseño y revisar el código también se vuelve mucho más fácil, donde la realización de las tareas diarias se simplifica mucho más. Y aunque los diseñadores pueden sacar ideas de la cabeza más fácilmente y comenzar a articular cómo podrían funcionar las características individuales, los ingenieros pueden obtener una vista previa del código fuente de la aplicación en tiempo real.

2. La etapa del wireframing está muerta. ¡Viva la etapa del wireframing!

Cada proyecto pasa por un wireframing. Y debido a que el proceso va y viene entre pruebas de diseños de página, flujos de usuarios, arquitectura de la información, etc., realmente ralentiza la transición entre la ideación y el desarrollo. En el vertiginoso mundo tecnológico donde la VELOCIDAD lo es todo, esto, de hecho, debe resolverse.

A veces, no hay necesidad de perder el tiempo reinventando la rueda, y sería mucho más eficiente en términos de costos y tiempo reemplazar ciertas prácticas con opciones listas para usar e incluso estructuras alámbricas clonables.

Con el uso de buenos kits de interfaz de usuario, el wireframing ya no es necesario como una etapa separada. Estas herramientas pueden acelerar el proyecto al proporcionar bloques prediseñados para trazar el diseño general y probar conceptos desde el principio. Es más, dan una idea más realista de lo que implicará la aplicación en general.

3. Reutilizar para reducir (tiempo, dinero y energía)

Desde la perspectiva del diseñador, crear íconos, fuentes u otros patrones detallados que puedan usarse repetidamente o cambiarse donde sea necesario requiere tiempo y recursos. Lo mismo se aplica a los desarrolladores que deben reescribir su código de acuerdo con los últimos cambios.

La idea de reutilizar componentes para proyectos similares o simples se ha vuelto cada vez más atractiva en los últimos años, especialmente cuando existen herramientas de interfaz de usuario para ayudar en esto. Si bien los diseñadores pueden usarlos para seleccionar componentes prediseñados, los desarrolladores pueden realizar un seguimiento más fácil de los cambios y generar su código sin errores.

En su encuesta², Encuesta de herramientas de diseño 2020, UX Tools destaca que:

"Si bien casi el 20 % de los encuestados informaron que no estaban utilizando un sistema de diseño en 2019, ese número se redujo al 9 % en 2020 (lo que puede atribuirse al mayor conjunto de funciones de las herramientas de interfaz de usuario más populares)".

Las ideas clave del estudio también muestran que el uso de sistemas de diseño aumentó entre los 3500 encuestados:

• de ser utilizado por el 1% de los encuestados en 2019 al 11% en 2020 para Adobe XD;
• del 26% en 2019 al 47% en 2020 para Figma.

A medida que los kits de interfaz de usuario se vuelven más avanzados y ricos en funciones, eliminan la carga de crear nuevos patrones de interfaz de usuario complejos, botones, encabezados, etiquetas y menús desplegables desde cero. Lo que de otro modo habría consumido mucho tiempo. En esencia, los diseñadores pueden seleccionar componentes visuales esenciales y reunir patrones prediseñados para proyectos comunes con herramientas de copiar y pegar. Si es necesario, pueden agregar personalización para que coincida con la gran idea, lograr el estilo deseado de un diseño en particular, llevar el proyecto a una etapa de desarrollo y, por último, responder a las necesidades de los clientes. Con la opción de guardar todo el trabajo como una biblioteca, los elementos, estilos compartidos y patrones se pueden reutilizar fácilmente en muchos otros proyectos. Y como ya se habrán implementado en aplicaciones anteriores, las pruebas, los errores y el código roto se reducirán significativamente.

4. Diseños iniciales, hermosas plantillas y un terreno para aprender

Esto es lo que pasa con los grandes kits de interfaz de usuario: redefinen cómo se diseñan y construyen las aplicaciones. El uso de estas herramientas permite crear aplicaciones en un tiempo récord con plantillas prediseñadas y diseños funcionales que encajan con las pautas de marca y estilo de una manera que hace que su aplicación se vea y funcione de manera increíble para la administración y, lo que es más importante, para los usuarios finales que la usarán todos los días.

Este es el camino cuando se trata de velocidad y eficiencia. Con componentes predefinidos, las plantillas y diseños de la interfaz de usuario son ajustables y fáciles de personalizar cuando sea necesario. En otras palabras, obtienes la base y también la libertad de experimentar. Al hacerlo, tanto los diseñadores como los desarrolladores pueden aprender a diseñar y construir componentes similares. Se les ofrece una forma de ver dentro de la construcción de elementos, fuentes, colores e íconos y pueden determinar las prácticas de diseño y desarrollo que funcionan mejor para ellos.

5. Consistencia de marca y no más "about-us-page-vers-5-2-final-final-version.jpg"

Hoy en día, nos centramos en conservar la funcionalidad y la coherencia en lugar de limitarnos a crearlas. Sin embargo, mientras haces malabarismos con toneladas de tareas (crear iconos, diseños de página, botones, entregar maquetas, luchar contra marcos domesticados), la consistencia y la funcionalidad pueden perderse. Especialmente cuando se trata de archivos conflictivos, control de versiones y administración de archivos.

Con los aceleradores de interfaz de usuario de diseñador y desarrollo, tiene una única fuente de información que ayuda a crear y preservar la coherencia de la marca con opciones de un solo clic.

Elegir entre una variedad de características, temas, tipografía y colores prediseñados hace que sea mucho más fácil crear y conservar la marca corporativa en toda la aplicación. Además, incluso cuando es necesario realizar cambios, ya no es necesario buscar en innumerables archivos y versiones de una imagen, icono o página. Las actualizaciones se realizan rápidamente cambiando solo unas pocas capas.

Desventajas de los kits de interfaz de usuario

En comparación con los pros y los contras, las ventajas de las herramientas de interfaz de usuario parecen superar las desventajas. Sin embargo, es necesario subrayar algunas notas.

1. Muy poco espacio para la personalización

La personalización está disponible cuando se utilizan estos kits y se puede aplicar a características como fuentes, colores y diseños. Sin embargo, tiene algunos límites. Si su objetivo es sorprender a los usuarios finales con singularidad y un aspecto específico, es posible que no pueda lograrlo porque los componentes y estilos están predeterminados. Debido a su naturaleza apta para todos, los íconos utilizados en su diseño también se pueden ver en otras aplicaciones y sitios web.

Aunque esto no es tan malo, ya que preserva la coherencia en todo el diseño, la falta de diferenciación visual completa podría considerarse un inconveniente si el objetivo es diferenciar la experiencia del usuario. Aún así, hay espacio para agregar personalización a algunos elementos.

2. Kits incompletos: miles de funciones… pero todas iguales

Aunque la mayoría de las herramientas de interfaz de usuario en los kits incluyen muchos componentes, no todas las herramientas pueden proporcionar a los diseñadores y desarrolladores exactamente lo que necesitan. Nadie estará contento si se incluyen miles de funciones pero representan solo un conjunto de elementos en diferentes colores.

3. Planes mensuales costosos

Otras veces, puede obtenerlo todo: una gran cantidad de funciones personalizables, plantillas impresionantes, diseños funcionales y generación instantánea de código, pero a un precio determinado. Y ese precio puede saltar a cientos de dólares por un plan mensual. Al final, puede decidir que es mejor ahorrar y, en su lugar, reunir sus habilidades creativas y técnicas para hacer el trabajo por su cuenta.

Los 5 mejores kits de interfaz de usuario que agilizan el diseño y desarrollo de la interfaz de usuario

• Kits de interfaz de usuario de Adobe XD
• Kits de interfaz de usuario Figma
• Kits de interfaz de usuario de aleteo
• Kits de interfaz de usuario Sketch
• Kits de interfaz de usuario para Indigo.Design
• App Builder

Si bien los ejemplos de kits de interfaz de usuario anteriores se centran principalmente en agilizar el trabajo de los diseñadores, los equipos de desarrollo todavía quedan algo excluidos. App Builder, sin embargo, es la única plataforma de diseño de productos digitales del mundo que ofrece una solución completa de diseño a código y sirve como una plataforma de trabajo unificada para gerentes, diseñadores y desarrolladores.

Es una nueva herramienta de arrastrar y soltar 100% basada en la nube que ofrece una experiencia de diseño WYSIWYG completa. Incluye más de 60 componentes de interfaz de usuario optimizados para ayudar a optimizar el diseño, la creación de prototipos, las pruebas de usuario, la creación de aplicaciones y la generación de código. Si bien cubre todo eso, elimina simultáneamente las pesadas transferencias de diseño y reduce el tiempo de desarrollo de aplicaciones en un 80 %.

Con el nuevo App Builder, todo lo diseñado da como resultado código Angular, Blazor y Web Components listo para producción. Puede ver esto de inmediato mientras crea o extrae un archivo zip completo de la aplicación.

También incluido:

• Biblioteca de plantillas basadas en escenarios de aplicaciones prediseñadas y diseños basados en web
• Más de 60 controles de interfaz de usuario en la caja de herramientas listos para arrastrar y soltar
• Interacciones aplicación/componente: Navegar hacia; Abierto cerrado; Mostrar ocultar
• Temas preestablecidos y temas personalizados para material; Oreja; Interfaz de usuario fluida
• Opciones para temas personalizados
• Subir archivos Sketch y Figma a App Builder
• Conéctese a Live Data o cargue un archivo JSON
• Generación de código completo
• Vista previa instantánea de la aplicación y el código fuente
• Integración con GitHub para colaboración de diseño/desarrollo

Hay mucho más por descubrir sobre cómo Indigo Design System empodera a los diseñadores y desarrolladores. En caso de que quieras profundizar más, aquí tienes una útil biblioteca de vídeos en YouTube con descripciones rápidas y consejos sobre cómo utilizar App Builder para tus proyectos.

1. Forrester, Los seis pasos para justificar una mejor experiencia de usuario, 28 de diciembre de 2016
2. Herramientas UX, Encuesta sobre herramientas de diseño 2020, Taylor & Jordan, diciembre de 2020