¿Cómo generar software con buen diseño?
Introducción
Vivimos en tiempos de inmediatez, donde los cambios y las evoluciones tecnológicas son una constante.
Para surfear estos desafíos, las empresas requieren cada vez más software, pero no cualquier software, sino software que permita transformar con seguridad los sistemas obsoletos, o generar y mantener ecosistemas digitales con rapidez, facilidad, y a prueba de futuro.
En esta cruzada, el diseño ha tomado un papel fundamental.
En el mundo del software, el diseño no abarca solo la estética, sino también el flujo de interacciones entre el usuario y las distintas pantallas y plataformas. Todo debe ser claro, coherente y consistente, para que la aplicación se vea uniforme.
Para la consultora Gartner es importante crear y mantener prácticas eficaces de DesignOps (operaciones de diseño, por sus siglas en inglés) que permitan la alineación operativa, la colaboración profunda y la innovación continua de los productos.
“Las empresas que trabajan con DesignOps, tienen una ventaja competitiva sobre las que no tienen instauradas estas prácticas. Cerrar la brecha entre el diseño y el desarrollo es un punto que no debe seguir siendo una tarea pendiente. GeneXus dispone de grandes herramientas y prácticas para que nuestros usuarios puedan superar estos desafíos de la mejor manera posible ”, alega Gabriel Simonet, Director de Marketing (CMO) de GeneXus.
Este whitepaper es una guía práctica para generar software de calidad, de forma rápida y con buen diseño.
Nielsen Norman Group, la empresa de consultoría fundada por Norman y el ingeniero de Interfaces, Jakob Nielsen, considera que el primer requisito para una UX ejemplar es satisfacer las necesidades exactas del cliente, sin problemas ni molestias. Luego viene la simplicidad y la elegancia que producen productos que son un placer poseer y usar. “Para lograr una experiencia de usuario de alta calidad en las ofertas de una empresa, debe haber una fusión perfecta de los servicios de múltiples disciplinas, que incluyen ingeniería, marketing, diseño gráfico e industrial y diseño de interfaz”.
En síntesis, la UX abarca todos los aspectos de la interacción del usuario final con la empresa, sus servicios y sus productos.
Su objetivo es satisfacer las necesidades y optimizar la experiencia de los usuarios, dentro de las limitaciones técnicas o comerciales relevantes.
Los temas comunes del Diseño de Interacción incluyen el diseño, la interacción humano-computadora y el desarrollo de software.
El experto en diseños de productos digitales, Nathan Curtis, añade que “un Design System está compuesto de una biblioteca, estilo visual, componentes, entre otros elementos, que han sido documentados y liberados por un individuo, un equipo o una comunidad como código y herramientas de diseño, de tal manera que los productos que lo adoptan sean más eficientes y cohesivos”.
Es importante entender que los Design Systems no son universales. Aunque comparten consensos, se definen para cada producto o familia de productos digitales. También dependen de las herramientas con las que cuente el software.
Nielsen Norman Group define al DesignOps como “la orquestación y optimización de personas, procesos y artesanía para amplificar el valor y el impacto del diseño a escala”.
El término es empleado para abordar desafíos como:
→ Búsqueda y contratación de personas con habilidades relacionadas con esa área.
→ Creación de flujos de trabajo eficientes para mejorar la calidad y el impacto de los resultados del diseño.
Su objetivo consiste en establecer procesos y medidas que respalden soluciones escalables para estos desafíos, de modo que los diseñadores puedan también concentrarse en diseñar e investigar
“DesignOps se aplica a cualquier persona que use procesos de pensamiento de diseño centrados en el usuario para resolver problemas. El término ‘diseñador’ incluye diseñadores de UX, investigadores de usuarios, diseñadores visuales, estrategias de contenido, diseñadores de servicios, diseñadores de comunicación y cualquier otra persona que contribuya a la experiencia del usuario final”
Las 3 áreas principales en las que se enfoca el DesignOps son:
→ Cómo interactúan los miembros del equipo entre ellos.
→ Cómo hace su trabajo el equipo.
→ Cómo genera impacto ese trabajo.
2: Estandarizar los procesos necesarios para ejecutar el trabajo
3: Implementar el diseño
4: Testear
En el proceso de crear un producto digital, todos los roles son elementales, pero es en la interacción entre el diseñador y el desarrollador donde radica el éxito o el fracaso de la interfaz y la UX.
“En ese pasaje es donde se corren más riesgos de perder calidad. Los diseñadores y los desarrolladores utilizan herramientas de trabajo distintas; y cuando estas herramientas no están integradas, existe una alta probabilidad de que el desarrollador deba repetir tareas que el diseñador ya había dado por resueltas y terminadas”, explica Fabián Bonilla, experto en consultoría, soporte técnico y capacitación de GeneXus.
En Sistemas de Misión Crítica, la creación e implementación del diseño puede ser aún más complejo.
«Si hacemos una analogía con el código, la calidad de un producto depende muchas veces de la calidad de los desarrolladores. Con el diseño sucede lo mismo: la calidad del diseño de un producto está muy atado a la calidad de los diseñadores. Es más, muchas veces la calidad depende de la relación entre los diseñadores y los desarrolladores. Contar con una contraparte en el equipo de desarrollo que “hable diseño”, un desarrollador frontend, es esencial para una traducción del diseño al código» - Señala Mauro Canziani, Jefe de Diseño de GeneXus.
Por experiencia, sabemos que el proceso de desarrollo de la interfaz de usuario de una aplicación ocupa la mayor parte del ciclo de desarrollo. Cuando el diseño de la interfaz de usuario está en manos de un experto, surgen dos ventajas:
1. La aplicación tendrá un aspecto y estilo profesional.
2. El desarrollador tendrá un conjunto de paneles creados previamente que pueden requerir cambios mínimos, y luego podrá centrarse en la lógica empresarial.
«En este cambio, es fundamental conocer los roles que se necesitan para iniciar un camino hacia DesignOps. Una vez que estemos dispuestos a cambiar nuestra mentalidad y poner el diseño en el lugar correcto, debemos comenzar a usar las herramientas adecuadas y motivar a las personas para que hagan el cambio. Este proceso puede partir de una sola persona dispuesta a adquirir nuevas habilidades; además, algo que seguramente surgirá más adelante será realmente diversificar el equipo con diferentes perfiles. La elección de GeneXus como plataforma de desarrollo simplifica varios pasos de DevOps y de DesignOps código» - Explica Damián Salvia, Ingeniero en Computación en GeneXus.
Apostando por la simplificación de los procesos, y por la productividad e integración de los equipos, GeneXus dispone de herramientas para importar y exportar diseños, con todos los activos necesarios (como imágenes y archivos de fuentes), desde Figma y Sketch, permitiendo que el desarrollador pueda generar la aplicación con todas las especificaciones de interfaz y experiencia de usuario definidas por el diseñador.
De esta manera, GeneXus une lo mejor de estos dos mundos, elevando la calidad de las aplicaciones desarrolladas con su plataforma de Low-Code.
“En GeneXus estamos convencidos de que los Sistemas de Diseño son la mejor estrategia para mantener y evolucionar el diseño de aplicaciones para soluciones complejas”, señala Mauro Canziani, Jefe de Diseño de GeneXus.
• SAP Fiori Design System
Permite a los usuarios de GeneXus crear aplicaciones alrededor del mundo de SAP sin necesidad de implementar diseño. Está disponible en sus dos versiones principales SAP Fiori 2 y 3.
• Unanimo Design System
Este nuevo Sistema de Diseño de base, está pensado para aplicaciones de negocio, de misión crítica y multiexperiencia, y está presente en todos los productos de GeneXus. Es open source, personalizable y extensible. Está desarrollado sobre el objeto Design System, que permite crear, modelar y evolucionar los Design Systems de la forma que GeneXus lo hace tradicionalmente: independiente de la tecnología.
• Orion | K2BTools
• WorkWithPlus | WorkWithPlus
La tercera estrategia se recomienda para grandes sistemas complejos multiexperiencia que necesitan de una solución a medida.
Para navegar esta complejidad, GeneXus dispone de una colección de herramientas y procesos que permiten crear, automatizar, mantener y evolucionar Sistemas de Diseño completos:
• Design System Object
El Design System Object es la evolución de lo que se conocía en GeneXus como temas (Themes), y es la fuente que permite crear, personalizar y evolucionar los Sistemas de Diseños, independientemente de la tecnología.
Es modularizable y permite definir características de estilo para interfaces de pantalla con el propósito de lograr una mayor abstracción en el diseño, lo que permite una reutilización y ensamblaje más fáciles.
A su vez, utiliza una estructura en formato muy similar a lo que es el CSS, lo que nos lleva también a una interacción más fluida con el equipo de diseño.
Con el Design System Object, los diseñadores y desarrolladores pueden trabajar usando un mismo lenguaje, motivando fuertemente la colaboración entre ellos.
• Patterns
Resuelven con un solo clic las interacciones de negocio más frecuentes.
• User Controls
Son controles personalizados que permiten crear aplicaciones con interfaces ricas y fáciles de usar, agregando recursos como menús, mapas, gráficos, calendarios, diagramas, entre otros.
• Stencils
Permiten crear y expandir componentes de UI para hacerlos reutilizables en distintas partes de la aplicación. No tienen código asociado. Su beneficio se traduce en agilidad en el diseño y desarrollo.
• Import from External Design
Es la herramienta que permite integrar en la base de conocimiento de GeneXus, el diseño y las interacciones diseñadas en Sketch y Figma, transformando todo ese lenguaje visual en objetos como Design Systems, Stencils, Panels, y muchos más. Esto reduce el tiempo de implementación de UI y facilita la integración del equipo de diseño, de forma natural y con menos fricciones.
• Live Editing
Es un pilar fundamental para el desarrollo de interfaces de usuario de calidad. Es la herramienta que permite trabajar en vivo el diseño de las aplicaciones, desde el dispositivo final. De esta manera se puede ver, en tiempo real, las modificaciones que se hagan en los paneles, para así lograr resultados pulidos y de calidad en mucho menos tiempo.
Existen 3 formas de hacerlo:
1. Creando un diseño de cero, desde el diálogo New Object dentro del Entorno de Desarrollo Integrado (IDE, por sus siglas en inglés) de GeneXus.
2. Importando un Design System en la base de conocimiento, para luego extenderlo.
3. Usando la opción Design Import, ya sea con Sketch o Figma, para luego modificarlo y extenderlo.
1. Conocer en profundidad las herramientas de diseño, así como también las plataformas donde esa aplicación se va a ejecutar (entorno web o mobile, resoluciones de pantalla, orientación de la aplicación, entre otras). La razón es porque algunas pueden contar con un Design System predeterminado, como es el caso de las Human Interface Guidelines (HIG) de Apple, o el Material Design para Android.
2. Diseñar pensando en el sistema, es decir, estructurando el diseño basado en Sistemas de Diseño o en componentes.
3. Mantener un diálogo fluido entre diseñadores, especialistas de frontend y desarrolladores, con el fin de llegar a un común acuerdo con relación a los aspectos que tendrán impacto en el desarrollo y en la mantenibilidad del sistema. En GeneXus, toda decisión de diseño se toma en cuenta al momento de ajustar los archivos de diseño e importar, incluyendo el nombrado (las herramientas asignan nombres por defecto sin semántica para un desarrollador).
Para Mauro Canziani, los diseños complejos deben estar basados en Sistemas de Diseño. De allí su recomendación de usar la metodología Atomic Design, ideada por Brad Frost, para acabar con las inconsistencias y optimizar al máximo el diseño y el desarrollo de productos digitales.
“La idea de Atomic Design es tomar los elementos básicos estandarizados y con eso componer elementos más complejos. Si vamos a la interfaz, los elementos más básicos como puede ser un botón o un campo de texto o una etiqueta, le llamamos átomos. Y con esos átomos construimos moléculas, básicamente agrupamos dos o tres de ellos, como por ejemplo un campo de texto, un botón y una etiqueta y un icono para formar un buscador. Y agrupando estas moléculas componemos organismos, que son elementos más grandes”.
En GeneXus, el Atomic Design puede proyectarse de la siguiente manera:
GeneXus 18 cuenta con todos los componentes necesarios para crear experiencias de usuario que siguen prácticas de diseño y usabilidad modernas.
Gracias a Unanimo, el Design System que viene por defecto a partir de la versión 18 de GeneXus, las interfaces de las aplicaciones son más unificadas y consistentes.
Este Sistema de Diseño, creado y mantenido por GeneXus, también simplifica la interacción entre diseñadores y especialistas de frontend, acelerando el ciclo de desarrollo de software.
“Con Unanimo hemos logrado herramientas que permiten implementar el diseño de una manera más simple y fácil; que las interfaces se comporten y se vean de la misma manera; y que todas las tareas y procesos de negocio sigan la misma línea de diseño”, resalta Eugenio García, Gerente de Producto de la Suite de GeneXus.
· Fue liberado con licencia Apache 2.0, y fue creado para ser el corazón de Sistemas de Misión Crítica, ya que sus soluciones visuales y de código pueden implementarse rápidamente y con poco esfuerzo.
· Se distribuye en GeneXus “out of the box”, esto quiere decir que las nuevas bases de conocimiento (KBs) que se creen y se generen a partir de la versión GeneXus 18, van a tener Unanimo como look and feel por defecto.
· Es multi-experiencia, ya que está pensado para web, native mobile y conversacional.
· Es de código abierto, flexible y personalizable, permitiendo que los usuarios apliquen su propio look and feel, el de su empresa o el del negocio.
· Se distribuye como módulo. Esto significa que cuenta con todos los beneficios del uso de módulos en GeneXus, como su portabilidad, su fácil instalación y su fácil actualización, permitiendo que los usuarios realicen actualizaciones y manejo de versiones de forma independiente a la versión de GeneXus.
· Es coherente. Está basado en tokens y estilos agnósticos a la solución final.
· Es extensible. Es posible ampliar sus capacidades construyendo nuevos componentes reutilizables como parte del sistema de diseño. Como permite agregar nuevas clases y tokens, se hace más fácil adaptarlo a las necesidades de cada proyecto.
· Es incremental. Se puede incorporar de forma gradual en la KB, sin generar grandes impactos. Esto facilita la adopción para aquellos proyectos y bases de conocimiento creados con versiones anteriores a GeneXus 18, o con Design Systems creados a través de diferentes Themes. En cualquiera de los casos, la migración puede hacerse por módulos u objetos.
· Para todos los gustos. Viene en dos modos: Unanimo Light y Unanimo Dark.
Además del Design System Object, Unanimo cuenta con los siguientes recursos:
Puedes profundizar estos temas, a través de los siguientes contenidos:
→ Total Experience con GeneXus 18
→ Unanimo Design System: Visión, Características y Personalización
→ Los beneficios de modelar Aplicaciones Multiexperience para aumentar la productividad del Desarrollo de Software
→ Cómo integrar un Equipo de Diseño con GeneXus 18
→ K2BTools con GeneXus 18
→ WorkWithPlus con GeneXus 18
→ Estrategias de DesignOps: Caminos que llevan del Diseño al Código
→ Amplifica el valor del diseño e impacta a gran escala con DesignOps
→ DesignOps y GeneXus
→ DesignOps - Guía para diseñadores
→ DesignOps - Mejores prácticas para diseñadores
→ Design Systems Introduction
→ GeneXus default Design System
→ Design Import
→ Frontend Development: Construcción visual interacción
→ Curso Automated DevOps
Para surfear estos desafíos, las empresas requieren cada vez más software, pero no cualquier software, sino software que permita transformar con seguridad los sistemas obsoletos, o generar y mantener ecosistemas digitales con rapidez, facilidad, y a prueba de futuro.
En esta cruzada, el diseño ha tomado un papel fundamental.
En el mundo del software, el diseño no abarca solo la estética, sino también el flujo de interacciones entre el usuario y las distintas pantallas y plataformas. Todo debe ser claro, coherente y consistente, para que la aplicación se vea uniforme.
Para la consultora Gartner es importante crear y mantener prácticas eficaces de DesignOps (operaciones de diseño, por sus siglas en inglés) que permitan la alineación operativa, la colaboración profunda y la innovación continua de los productos.
“Las empresas que trabajan con DesignOps, tienen una ventaja competitiva sobre las que no tienen instauradas estas prácticas. Cerrar la brecha entre el diseño y el desarrollo es un punto que no debe seguir siendo una tarea pendiente. GeneXus dispone de grandes herramientas y prácticas para que nuestros usuarios puedan superar estos desafíos de la mejor manera posible ”, alega Gabriel Simonet, Director de Marketing (CMO) de GeneXus.
Este whitepaper es una guía práctica para generar software de calidad, de forma rápida y con buen diseño.
Conceptos que debes conocer
Experiencia de Usuario
Conocido generalmente por las siglas UX que vienen del inglés User Experience (Experiencia de Usuario). El término surgió en 1993 con la creación de la Oficina de Arquitectos de la Experiencia del Usuario. Esto lo hizo la compañía Apple, bajo la dirección del psicólogo y diseñador cognitivo Don Norman (en este video puedes ver lo que él opina sobre la UX).Nielsen Norman Group, la empresa de consultoría fundada por Norman y el ingeniero de Interfaces, Jakob Nielsen, considera que el primer requisito para una UX ejemplar es satisfacer las necesidades exactas del cliente, sin problemas ni molestias. Luego viene la simplicidad y la elegancia que producen productos que son un placer poseer y usar. “Para lograr una experiencia de usuario de alta calidad en las ofertas de una empresa, debe haber una fusión perfecta de los servicios de múltiples disciplinas, que incluyen ingeniería, marketing, diseño gráfico e industrial y diseño de interfaz”.
En síntesis, la UX abarca todos los aspectos de la interacción del usuario final con la empresa, sus servicios y sus productos.
Diseño de Interacción
El Diseño de Interacción, abreviado como IxD, es la práctica de diseñar productos, entornos, sistemas y servicios digitales interactivos. Se centra en el diseño del comportamiento humano, sintetizando e imaginando cómo un usuario podría interactuar con los productos digitales.Su objetivo es satisfacer las necesidades y optimizar la experiencia de los usuarios, dentro de las limitaciones técnicas o comerciales relevantes.
Los temas comunes del Diseño de Interacción incluyen el diseño, la interacción humano-computadora y el desarrollo de software.
Usabilidad
Nielsen Norman Group define a la usabilidad como un “atributo de calidad que evalúa la facilidad de uso de las interfaces de usuario. También son los métodos para mejorar la facilidad de uso durante el proceso de diseño. En la Web, la usabilidad es una condición necesaria para la supervivencia. Si un sitio web es difícil de usar, la gente lo abandonará”.Design Systems
Es el conjunto de principios (claridad, eficiencia, consistencia, y estética), patrones (tipografía, colores, espacios, componentes) y prácticas (procesos y herramientas para desarrollar, diseñar), que están orientados a construir un producto digital para que tenga coherencia, uniformidad y robustez.El experto en diseños de productos digitales, Nathan Curtis, añade que “un Design System está compuesto de una biblioteca, estilo visual, componentes, entre otros elementos, que han sido documentados y liberados por un individuo, un equipo o una comunidad como código y herramientas de diseño, de tal manera que los productos que lo adoptan sean más eficientes y cohesivos”.
Es importante entender que los Design Systems no son universales. Aunque comparten consensos, se definen para cada producto o familia de productos digitales. También dependen de las herramientas con las que cuente el software.
DesignOps
Nielsen Norman Group define al DesignOps como “la orquestación y optimización de personas, procesos y artesanía para amplificar el valor y el impacto del diseño a escala”.
El término es empleado para abordar desafíos como:
→ Búsqueda y contratación de personas con habilidades relacionadas con esa área.
→ Creación de flujos de trabajo eficientes para mejorar la calidad y el impacto de los resultados del diseño.
Su objetivo consiste en establecer procesos y medidas que respalden soluciones escalables para estos desafíos, de modo que los diseñadores puedan también concentrarse en diseñar e investigar
“DesignOps se aplica a cualquier persona que use procesos de pensamiento de diseño centrados en el usuario para resolver problemas. El término ‘diseñador’ incluye diseñadores de UX, investigadores de usuarios, diseñadores visuales, estrategias de contenido, diseñadores de servicios, diseñadores de comunicación y cualquier otra persona que contribuya a la experiencia del usuario final”
Las 3 áreas principales en las que se enfoca el DesignOps son:
→ Cómo interactúan los miembros del equipo entre ellos.
→ Cómo hace su trabajo el equipo.
→ Cómo genera impacto ese trabajo.
Pasos básicos para llevar un buen diseño a software
1: Generar el diseño2: Estandarizar los procesos necesarios para ejecutar el trabajo
3: Implementar el diseño
4: Testear
Software y diseño: desafíos más comunes
Estos son algunos de los desafíos que enfrentan las empresas que deben mantener al día sus aplicaciones:1. Investigación
Estudiar e idear cómo debería verse la solución que necesita ser creada, es una tarea que puede implicar costos elevados, y no todas las empresas pueden abordarlo.2. Equipo
Para llevar un proyecto de software a su fin, de forma óptima, se requiere de la interacción de distintos perfiles y roles, entre ellos diseñadores, desarrolladores, expertos en despliegue de las aplicaciones, redactores y testers.3. Implementación
Una vez que el diseño de la solución está listo, debe implementarse, y esos costos también son relevantes.4. Cambios de diseño
Cuando una solución está perfectamente funcionando, las empresas suelen resistirse a hacer cambios. La evolución del diseño suele detenerse por el miedo a los riesgos que pueden implicar esos cambios.5. Lograr la consistencia y la coherencia de un diseño
Es difícil tener un diseño perfectamente coherente en una única plataforma; y esa dificultad aumenta exponencialmente con cada plataforma que se agrega a la solución.¡En la unión está la fuerza!
La era de la Experiencia de Usuario (UX), y de la transformación digital, no solo ha aumentado la complejidad en el desarrollo de los sistemas, sino que también ha generado la necesidad de traer a la mesa a expertos en interacción, en diseño visual y en arquitectura de la información, para que entre todos puedan centrarse en el usuario final.En el proceso de crear un producto digital, todos los roles son elementales, pero es en la interacción entre el diseñador y el desarrollador donde radica el éxito o el fracaso de la interfaz y la UX.
“En ese pasaje es donde se corren más riesgos de perder calidad. Los diseñadores y los desarrolladores utilizan herramientas de trabajo distintas; y cuando estas herramientas no están integradas, existe una alta probabilidad de que el desarrollador deba repetir tareas que el diseñador ya había dado por resueltas y terminadas”, explica Fabián Bonilla, experto en consultoría, soporte técnico y capacitación de GeneXus.
En Sistemas de Misión Crítica, la creación e implementación del diseño puede ser aún más complejo.
«Si hacemos una analogía con el código, la calidad de un producto depende muchas veces de la calidad de los desarrolladores. Con el diseño sucede lo mismo: la calidad del diseño de un producto está muy atado a la calidad de los diseñadores. Es más, muchas veces la calidad depende de la relación entre los diseñadores y los desarrolladores. Contar con una contraparte en el equipo de desarrollo que “hable diseño”, un desarrollador frontend, es esencial para una traducción del diseño al código» - Señala Mauro Canziani, Jefe de Diseño de GeneXus.
Por experiencia, sabemos que el proceso de desarrollo de la interfaz de usuario de una aplicación ocupa la mayor parte del ciclo de desarrollo. Cuando el diseño de la interfaz de usuario está en manos de un experto, surgen dos ventajas:
1. La aplicación tendrá un aspecto y estilo profesional.
2. El desarrollador tendrá un conjunto de paneles creados previamente que pueden requerir cambios mínimos, y luego podrá centrarse en la lógica empresarial.
«En este cambio, es fundamental conocer los roles que se necesitan para iniciar un camino hacia DesignOps. Una vez que estemos dispuestos a cambiar nuestra mentalidad y poner el diseño en el lugar correcto, debemos comenzar a usar las herramientas adecuadas y motivar a las personas para que hagan el cambio. Este proceso puede partir de una sola persona dispuesta a adquirir nuevas habilidades; además, algo que seguramente surgirá más adelante será realmente diversificar el equipo con diferentes perfiles. La elección de GeneXus como plataforma de desarrollo simplifica varios pasos de DevOps y de DesignOps código» - Explica Damián Salvia, Ingeniero en Computación en GeneXus.
¿Cómo generar software con buen diseño en GeneXus?
Apostando por la simplificación de los procesos, y por la productividad e integración de los equipos, GeneXus dispone de herramientas para importar y exportar diseños, con todos los activos necesarios (como imágenes y archivos de fuentes), desde Figma y Sketch, permitiendo que el desarrollador pueda generar la aplicación con todas las especificaciones de interfaz y experiencia de usuario definidas por el diseñador.
De esta manera, GeneXus une lo mejor de estos dos mundos, elevando la calidad de las aplicaciones desarrolladas con su plataforma de Low-Code.
“En GeneXus estamos convencidos de que los Sistemas de Diseño son la mejor estrategia para mantener y evolucionar el diseño de aplicaciones para soluciones complejas”, señala Mauro Canziani, Jefe de Diseño de GeneXus.
1. Utilizar los Sistemas de Diseño incorporados en GeneXus
Para mejorar los lenguajes visuales y generar aplicaciones rápidamente, GeneXus dispone de:• SAP Fiori Design System
Permite a los usuarios de GeneXus crear aplicaciones alrededor del mundo de SAP sin necesidad de implementar diseño. Está disponible en sus dos versiones principales SAP Fiori 2 y 3.
• Unanimo Design System
Este nuevo Sistema de Diseño de base, está pensado para aplicaciones de negocio, de misión crítica y multiexperiencia, y está presente en todos los productos de GeneXus. Es open source, personalizable y extensible. Está desarrollado sobre el objeto Design System, que permite crear, modelar y evolucionar los Design Systems de la forma que GeneXus lo hace tradicionalmente: independiente de la tecnología.
2. Utilizar los Sistemas de Diseño de los Partners de GeneXus
El segundo camino para acelerar el desarrollo de software y la implementación de un diseño de alta calidad es la utilización de Design Systems creados por los partners de la comunidad GeneXus, cada uno de ellos con capacidades específicas y adecuado para distintos tipos de proyectos:• Orion | K2BTools
• WorkWithPlus | WorkWithPlus
3. Modificar o crear un sistema de diseño propio con las herramientas de GeneXus para crear Design Systems a medida
La tercera estrategia se recomienda para grandes sistemas complejos multiexperiencia que necesitan de una solución a medida.
Para navegar esta complejidad, GeneXus dispone de una colección de herramientas y procesos que permiten crear, automatizar, mantener y evolucionar Sistemas de Diseño completos:
• Design System Object
El Design System Object es la evolución de lo que se conocía en GeneXus como temas (Themes), y es la fuente que permite crear, personalizar y evolucionar los Sistemas de Diseños, independientemente de la tecnología.
Es modularizable y permite definir características de estilo para interfaces de pantalla con el propósito de lograr una mayor abstracción en el diseño, lo que permite una reutilización y ensamblaje más fáciles.
A su vez, utiliza una estructura en formato muy similar a lo que es el CSS, lo que nos lleva también a una interacción más fluida con el equipo de diseño.
Con el Design System Object, los diseñadores y desarrolladores pueden trabajar usando un mismo lenguaje, motivando fuertemente la colaboración entre ellos.
• Patterns
Resuelven con un solo clic las interacciones de negocio más frecuentes.
• User Controls
Son controles personalizados que permiten crear aplicaciones con interfaces ricas y fáciles de usar, agregando recursos como menús, mapas, gráficos, calendarios, diagramas, entre otros.
• Stencils
Permiten crear y expandir componentes de UI para hacerlos reutilizables en distintas partes de la aplicación. No tienen código asociado. Su beneficio se traduce en agilidad en el diseño y desarrollo.
• Import from External Design
Es la herramienta que permite integrar en la base de conocimiento de GeneXus, el diseño y las interacciones diseñadas en Sketch y Figma, transformando todo ese lenguaje visual en objetos como Design Systems, Stencils, Panels, y muchos más. Esto reduce el tiempo de implementación de UI y facilita la integración del equipo de diseño, de forma natural y con menos fricciones.
• Live Editing
Es un pilar fundamental para el desarrollo de interfaces de usuario de calidad. Es la herramienta que permite trabajar en vivo el diseño de las aplicaciones, desde el dispositivo final. De esta manera se puede ver, en tiempo real, las modificaciones que se hagan en los paneles, para así lograr resultados pulidos y de calidad en mucho menos tiempo.
¿Cómo crear un Design System dentro de GeneXus?
Existen 3 formas de hacerlo:
1. Creando un diseño de cero, desde el diálogo New Object dentro del Entorno de Desarrollo Integrado (IDE, por sus siglas en inglés) de GeneXus.
2. Importando un Design System en la base de conocimiento, para luego extenderlo.
3. Usando la opción Design Import, ya sea con Sketch o Figma, para luego modificarlo y extenderlo.
Recomendaciones para importar diseños externos en GeneXus
1. Conocer en profundidad las herramientas de diseño, así como también las plataformas donde esa aplicación se va a ejecutar (entorno web o mobile, resoluciones de pantalla, orientación de la aplicación, entre otras). La razón es porque algunas pueden contar con un Design System predeterminado, como es el caso de las Human Interface Guidelines (HIG) de Apple, o el Material Design para Android.
2. Diseñar pensando en el sistema, es decir, estructurando el diseño basado en Sistemas de Diseño o en componentes.
3. Mantener un diálogo fluido entre diseñadores, especialistas de frontend y desarrolladores, con el fin de llegar a un común acuerdo con relación a los aspectos que tendrán impacto en el desarrollo y en la mantenibilidad del sistema. En GeneXus, toda decisión de diseño se toma en cuenta al momento de ajustar los archivos de diseño e importar, incluyendo el nombrado (las herramientas asignan nombres por defecto sin semántica para un desarrollador).
Tips para optimizar con Atomic Design
Para Mauro Canziani, los diseños complejos deben estar basados en Sistemas de Diseño. De allí su recomendación de usar la metodología Atomic Design, ideada por Brad Frost, para acabar con las inconsistencias y optimizar al máximo el diseño y el desarrollo de productos digitales.
“La idea de Atomic Design es tomar los elementos básicos estandarizados y con eso componer elementos más complejos. Si vamos a la interfaz, los elementos más básicos como puede ser un botón o un campo de texto o una etiqueta, le llamamos átomos. Y con esos átomos construimos moléculas, básicamente agrupamos dos o tres de ellos, como por ejemplo un campo de texto, un botón y una etiqueta y un icono para formar un buscador. Y agrupando estas moléculas componemos organismos, que son elementos más grandes”.
En GeneXus, el Atomic Design puede proyectarse de la siguiente manera:
1. Organismos = Objetos
“Entre esos objetos tenemos los Stencils, que permiten definir elementos de interfaz reutilizables y multiplataforma”.2. Átomos y Moléculas = Componentes GeneXus
“Esos componentes pueden ser botones y controles. Si queremos crear nuestros propios controles, tenemos User Controls que nos permiten crear controles complejos”.3. Sub-átomos = Design System Object
“El Design System Object nos permite modelar Tokens, estilos y elementos, siendo ésta una forma de hacer override a los controles nativos de GeneXus”.Los diseños complejos deben estar basados en Sistemas de Diseño para acabar con las inconsistencias y optimizar al máximo el diseño y el desarrollo de productos digitales.
GeneXus 18 y Unanimo: La clave para diseñar y modelar sistemas complejos
GeneXus 18 cuenta con todos los componentes necesarios para crear experiencias de usuario que siguen prácticas de diseño y usabilidad modernas.
Gracias a Unanimo, el Design System que viene por defecto a partir de la versión 18 de GeneXus, las interfaces de las aplicaciones son más unificadas y consistentes.
Este Sistema de Diseño, creado y mantenido por GeneXus, también simplifica la interacción entre diseñadores y especialistas de frontend, acelerando el ciclo de desarrollo de software.
“Con Unanimo hemos logrado herramientas que permiten implementar el diseño de una manera más simple y fácil; que las interfaces se comporten y se vean de la misma manera; y que todas las tareas y procesos de negocio sigan la misma línea de diseño”, resalta Eugenio García, Gerente de Producto de la Suite de GeneXus.
Esto es lo que debes saber de Unanimo:
· Fue liberado con licencia Apache 2.0, y fue creado para ser el corazón de Sistemas de Misión Crítica, ya que sus soluciones visuales y de código pueden implementarse rápidamente y con poco esfuerzo.
· Se distribuye en GeneXus “out of the box”, esto quiere decir que las nuevas bases de conocimiento (KBs) que se creen y se generen a partir de la versión GeneXus 18, van a tener Unanimo como look and feel por defecto.
· Es multi-experiencia, ya que está pensado para web, native mobile y conversacional.
· Es de código abierto, flexible y personalizable, permitiendo que los usuarios apliquen su propio look and feel, el de su empresa o el del negocio.
· Se distribuye como módulo. Esto significa que cuenta con todos los beneficios del uso de módulos en GeneXus, como su portabilidad, su fácil instalación y su fácil actualización, permitiendo que los usuarios realicen actualizaciones y manejo de versiones de forma independiente a la versión de GeneXus.
· Es coherente. Está basado en tokens y estilos agnósticos a la solución final.
· Es extensible. Es posible ampliar sus capacidades construyendo nuevos componentes reutilizables como parte del sistema de diseño. Como permite agregar nuevas clases y tokens, se hace más fácil adaptarlo a las necesidades de cada proyecto.
· Es incremental. Se puede incorporar de forma gradual en la KB, sin generar grandes impactos. Esto facilita la adopción para aquellos proyectos y bases de conocimiento creados con versiones anteriores a GeneXus 18, o con Design Systems creados a través de diferentes Themes. En cualquiera de los casos, la migración puede hacerse por módulos u objetos.
· Para todos los gustos. Viene en dos modos: Unanimo Light y Unanimo Dark.
Siguiendo los principios de GeneXus, Unanimo acorta las distancias entre el trabajo de diseño y la implementación del desarrollo de software, permitiendo modelar más y programar menos.
¿Cómo está compuesto Unanimo?
Además del Design System Object, Unanimo cuenta con los siguientes recursos:
1. Objetos y User Controls
Resuelven necesidades comunes de aplicaciones tanto Web como Mobile.2. Sidebar o menú lateral
Está cargado dinámicamente mediante un SDT en GeneXus y sirve para navegar las opciones de la aplicación.3. User dropdown
Es un control utilizado para visualizar al usuario logueado en la aplicación y administrar sus datos, modificarlos, o cerrar la sesión.4. Controles de interacción
Entre los más comunes destacan el control switch, un progress indicator, una alerta.5. Biblioteca extrema
Para los controles que requieren una lógica más compleja, existe una biblioteca externa, desarrollada también por GeneXus, que permite encapsular toda esa lógica, ofreciendo al usuario un user control que va a ser modelado como un markup y que van a ser posibles de componer entre sí.6. Fuentes
Las fuentes son un archivo dentro de la base de conocimiento y pueden ser modificadas a través de los Tokens del Design System. En caso de requerir otra fuente, basta con importar esa fuente a la base de conocimiento y modificar su referencia mediante un token.7. Imágenes e íconos
Se presentan en formato SVG y permiten personalizar ciertos elementos del Design System. Unanimo provee un set de íconos por defecto: de perfil, de configuración, de filtro, de lupas, entre otros.8. Colores
Se ofrecen dos alternativas o dos esquemas de representación del color, que son el modo dark y el modo light, los cuales pueden modificarse a través de los Tokens del objeto.¿Te quedaste con ganas de más?
Puedes profundizar estos temas, a través de los siguientes contenidos:
→ Total Experience con GeneXus 18
→ Unanimo Design System: Visión, Características y Personalización
→ Los beneficios de modelar Aplicaciones Multiexperience para aumentar la productividad del Desarrollo de Software
→ Cómo integrar un Equipo de Diseño con GeneXus 18
→ K2BTools con GeneXus 18
→ WorkWithPlus con GeneXus 18
→ Estrategias de DesignOps: Caminos que llevan del Diseño al Código
→ Amplifica el valor del diseño e impacta a gran escala con DesignOps
→ DesignOps y GeneXus
→ DesignOps - Guía para diseñadores
→ DesignOps - Mejores prácticas para diseñadores
→ Design Systems Introduction
→ GeneXus default Design System
→ Design Import
→ Frontend Development: Construcción visual interacción
→ Curso Automated DevOps