6 Formas en que el Kit del Sistema de Diseño Progress hace que el diseño de interfaz de usuario sea divertido – CodesCode

Aprende sobre el Sistema de Diseño Progress de Telerik, un lenguaje de diseño completo para crear experiencias simples, intuitivas y hermosas.

En este artículo, presentaremos el Sistema de Diseño Progress de Telerik, un lenguaje de diseño integral para crear experiencias simples, intuitivas y hermosas. Discutiremos cómo el Sistema de Diseño Progress se destaca entre la multitud como solución de diseño de interfaz de usuario y cómo este enfoque puede posicionar la biblioteca de componentes como base para una interfaz de usuario sólida.

Este artículo fue creado en colaboración con Sistema de Diseño Progress de Telerik. Gracias por apoyar a los colaboradores que hacen posible CodesCode.

• Sistema de Diseño Progress de Telerik
• Acerca de los Sistemas de Diseño
• Temas Listos para Usar
• Personalizaciones sin CSS (Básicas o Avanzadas)
• Colaboración Incorporada
• Hágalo Usted Mismo para Diseñadores
• Soporte para Figma
• Documentación Detallada e Interactiva de Frontend
• Cambio en la Forma de Trabajar

Sistema de Diseño Progress de Telerik

Las bibliotecas de componentes Kendo UI de Telerik son muy populares en la comunidad de desarrollo y la demanda de diseño de interfaz de usuario está creciendo. El Sistema de Diseño Progress tiene un enfoque único hacia la estilización de la interfaz de usuario, ya que está diseñado tanto para desarrolladores como para diseñadores. Esto garantiza que el esfuerzo de desarrollo pueda cumplir en tiempo y forma sin enfrentar dificultades relacionadas con la interfaz de usuario.

Progress se destaca de la competencia gracias a su enfoque único que mejora la colaboración en equipo. Este sistema de diseño ofrece temas, herramientas y documentación para satisfacer la mayoría de las necesidades de diseño. Una buena guía para comenzar está disponible en la página de Introducción al Sistema de Diseño.

Muchos usuarios de Telerik y Kendo UI son desarrolladores de backend que no tienen el tiempo ni la habilidad para manejar requisitos avanzados de estilizado. Los diseñadores también trabajan con los desarrolladores a través de herramientas que los ayudan a contribuir al esfuerzo de diseño. Progress aborda ambos casos de uso en un esfuerzo de diseño y desarrollo.

Acerca de los Sistemas de Diseño

Un sistema de diseño generalmente ayuda a un equipo a ofrecer una interfaz de usuario consistente, amigable e intuitiva. Esto es lo que afianza la apariencia y la sensación de una aplicación.

El éxito clave de cualquier esfuerzo de desarrollo de aplicaciones, ya sea para uso interno o externo, es su capacidad para cumplir con los requisitos de diseño de interfaz de usuario. Si la interfaz de usuario no es consistente, agradable e intuitiva, los usuarios no disfrutarán utilizándola. La carga de soporte y los costos también aumentarán debido a que la experiencia de la interfaz de usuario es inconsistente o confusa.

Si la interfaz de usuario no es de primera clase, la competencia brillará más. Un equipo de desarrollo puede crear la aplicación más innovadora, pero esto no sirve de nada si los usuarios no adoptan la nueva interfaz de usuario.

El problema es el tiempo, los recursos y el talento. Los desarrolladores deben perder tiempo para lograr que el CSS quede perfecto cuando preferirían trabajar en la funcionalidad y la ingeniería. Un equipo de desarrollo puede recibir diseños preliminares de un equipo de diseño, una guía de estilo o incluso un sistema de diseño completo. En cualquier caso, el tedioso trabajo de CSS y el ir y venir entre el desarrollo y el diseño hacen que todo este esfuerzo sea desafiante y a veces incluso poco realista. Incluso un proyecto de desarrollo bien planificado puede descarrilarse rápidamente cuando los miembros del equipo tienen que rehacer parte del trabajo.

Los equipos que no tienen aportes de diseñadores también pueden beneficiarse del Sistema de Diseño Progress. Los desarrolladores full-stack a menudo no tienen las habilidades de diseño necesarias para crear interfaces de usuario sólidas. Progress está diseñado para ayudar a lograr un gran diseño de interfaz de usuario con un esfuerzo mínimo.

Progress tiene un enfoque único para resolver este problema, que es el kit del Sistema de Diseño Progress.

Hablemos de lo que ofrece este Sistema de Diseño.

Temas Listos para Usar

Las bibliotecas de componentes Kendo UI vienen con cuatro temas diseñados profesionalmente (Default, Material, Fluent y Bootstrap). Los desarrolladores y diseñadores pueden elegir cualquiera de ellos, y esto se aplicará de manera automática y consistente en todo el proyecto. Esta es la forma más sencilla de lograr una gran interfaz de usuario si no se necesitan personalizaciones.

• Default: estilizado neutral basado en el sistema de diseño de Telerik y Kendo
• Bootstrap: coincide con el estilizado de Bootstrap 5
• Material: sigue las Directrices de Material Design
• Fluent: implementa el Sistema de Diseño de Microsoft

Los temas son cuidadas colecciones de atributos visuales como colores, fuentes y espaciado. Los sistemas de diseño disponibles como Material, Bootstrap y Fluent son ampliamente populares y conocidos. Una vez que aplicas un tema, logras un aspecto consistente sin ningún esfuerzo adicional.

Hay cientos de demos en el sitio web de Telerik. Asegúrate de cambiar el tema y la paleta de colores para ver estos temas por ti mismo. Por ejemplo, echa un vistazo al componente de cuadrícula y las opciones listas para usar que están disponibles.

Customizaciones sin CSS (Básicas o Avanzadas)

El ThemeBuilder es una herramienta de diseño muy poderosa que ayuda a los desarrolladores y diseñadores a realizar personalizaciones globales o detalladas sin necesidad de escribir CSS complejo.

La curva de aprendizaje con el ThemeBuilder es casi nula, porque es una herramienta visual. Puedes estilizar cada elemento de tu componente de Telerik y Kendo UI, desde el color principal de alto impacto hasta el detalle más pequeño.

Los desarrolladores pueden enfocarse en la funcionalidad mientras los diseñadores pueden crear experiencias hermosas que deleitan a los usuarios. El CSS es difícil, y es un conjunto de habilidades que es mejor dejar en manos de profesionales experimentados.

Puedes ajustar propiedades globales como color, radio de borde y tipografía en unos pocos clics, o puedes entrar en modo avanzado y hacer personalizaciones hasta el nivel atómico. El ThemeBuilder es una aplicación web que te permite estilizar componentes con facilidad.

Una vez que un diseñador define el diseño del proyecto, puede compartir sus personalizaciones con solo unos pocos clics.

Puedes probar el ThemeBuilder durante una prueba gratuita de 7 días.

Colaboración Integrada

El ThemeBuilder es una aplicación en la nube que almacena proyectos de forma segura en tu cuenta. Cuando los miembros del equipo necesitan contribuir, solo tienen que iniciar sesión y abrir el proyecto. No es necesario compartir archivos manualmente ni a través de control de versiones. Esto permite a los diseñadores colaborar y compartir ideas con los desarrolladores de manera fluida.

El ThemeBuilder es accesible tanto para diseñadores como para desarrolladores. Esto coloca a la herramienta en el centro de todas las personalizaciones de la interfaz de usuario y minimiza las barreras entre los miembros del equipo.

Además, los gerentes pueden configurar permisos para cada proyecto para un mayor control del equipo. El equipo simplemente puede centrarse en hacer el trabajo sin verse abrumado por un montón de proyectos irrelevantes.

Hazlo tú mismo para Diseñadores

Generalmente, los diseñadores pierden el control del proyecto una vez que entregan su diseño a un desarrollador. Esto puede significar varios viajes entre el diseñador y el desarrollador a medida que la aplicación se refine.

El ThemeBuilder no requiere código y es fácilmente accesible, por lo que los diseñadores pueden iniciar sesión y actualizar el diseño real ellos mismos sin intervención. Los desarrolladores también pueden tener acceso a la herramienta, para que puedan mantenerse actualizados con los últimos diseños disponibles. La herramienta ayuda a que el proyecto de desarrollo tome impulso, de manera que el equipo pueda abordar problemas de diseño de la interfaz de usuario desafiantes con relativa facilidad.

A medida que Telerik y Kendo UI evolucionan, los diseñadores pueden mantenerse al día con las últimas características de los componentes a través de actualizaciones automáticas. Esto ajusta automáticamente tus estilos para que coincidan con el HTML actualizado, asegurando una experiencia consistente y emocionantes características nuevas del componente.

Soporte para Figma

Los diseñadores pueden incorporar variables de Sass/CSS desde Figma en el ThemeBuilder. Tokens de diseño como colores, tipografía y efectos también se pueden importar.

El plugin del ThemeBuilder para Figma puede exportar lo siguiente desde Figma:

• Estilos como colores, tipografías y efectos: estos son tokens de Sass o CSS.
• Íconos SVG personalizados: estos se exportan y se convierten en fuentes de íconos.

Para instalar el plugin para Figma, lo único que necesitas es una cuenta de Figma como requisito previo. Luego, encuentra el plugin Progress ThemeBuilder para Figma (disponible a través de la página de la comunidad de Figma) y haz clic en Instalar.

Para mejorar aún más la colaboración entre diseñadores y desarrolladores, Telerik y Kendo UI admiten Figma de dos formas:

• Kits de UI de Figma: Progress ofrece kits de UI de Figma que representan cada componente de la biblioteca. Los diseñadores pueden crear diseños perfectos en píxeles de cómo creen que debería lucir el producto final.
• Importar tokens de diseño en ThemeBuilder: Los desarrolladores pueden obtener tokens de diseño directamente desde Figma para agilizar aún más la colaboración entre diseñadores y desarrolladores.

El sistema de diseño de Progress está diseñado pensando tanto en diseñadores como en desarrolladores para minimizar retrasos inesperados en la entrega de un proyecto.

Documentación detallada e interactiva de Frontend

Telerik y Kendo UI tienen documentación de primer nivel. Es detallada, completa e interactiva. Los desarrolladores y diseñadores pueden leer acerca del sistema de diseño de Progress en general, y también pueden aprender sobre las opciones de marcado, estilo y configuración de cada componente.

Por ejemplo, un desarrollador puede visitar la documentación, configurar algunas propiedades e inspeccionar el marcado. Si quieres echar un vistazo rápido a la documentación, revisa la documentación disponible para el componente de botón.

Un ejemplo específico es la documentación del componente de autocompletado construido en React. Los desarrolladores pueden evaluar rápidamente el marcado y qué propiedades están disponibles. También pueden elegir entre JavaScript o TypeScript como lenguaje de marcado.

Si React no es tu herramienta de elección, hay otras opciones disponibles, como Angular, Blazor, jQuery y Vue. La documentación es completa, por lo que recibirás soporte sin importar qué herramienta elijas.

Esta técnica puede mejorar enormemente el desarrollo de sistemas backend, como APIs que deben integrarse con el diseño de UI. Por ejemplo, un desarrollador backend puede inspeccionar el diseño y comenzar a imaginar cómo podría lucir el modelo de datos de dominio. Con una visión clara del dominio, un desarrollador puede comenzar rápidamente a desarrollar otras partes de la solución, como DTOs, almacenamiento backend y almacenamiento en caché.

Nota: Telerik y Kendo UI aún están trabajando en la documentación y, hasta la fecha de esta escritura, no se han cubierto todos los componentes. La esperanza es alcanzar ese punto para el 2024.

Cambia la forma en que trabajas

Telerik y Kendo UI han sido confiados por los desarrolladores durante décadas para ofrecer excelentes experiencias de UI. A medida que las demandas de estilo de UI continúan evolucionando, también lo hace el Sistema de Diseño de Progress y sus herramientas. Hoy en día, Progress ha alcanzado un punto en el que los diseñadores y desarrolladores tienen una solución de estilo única que se destaca de la competencia. Ya sea que necesites algo listo para usar o un diseño personalizado verdaderamente único, esta ruta te brinda la forma más fácil de realmente deleitar a los clientes.

Comparte este artículo

• design software