Diseño prescrito en Constellation
El sistema de diseño de Pega Constellation sigue un diseño prescrito (prescribed design): un conjunto de diseños y plantillas predeterminados informados con configuraciones preestablecidas para reducir el tiempo de diseño, lo que le permite al diseñador crear páginas y flujos que se centran en las necesidades del usuario. Diseño prescrito:
- itera en el tiempo a medida que se descubren o regulan nuevos casos de uso
- no excluye la personalización de patrones y componentes
- tiene como objetivo reducir el tiempo de comercialización y aumentar el foco en las necesidades de los usuarios
El diseño prescrito le permite concentrarse en decisiones más importantes
En diseño, hay muchas maneras de resolver un problema. Por ejemplo, la ubicación del botón Next en un modal. Algunas empresas colocan el botón en la parte inferior derecha para hacer alusión a pasar la página de un libro. Algunas compañías lo colocan en el centro inferior para un flujo de lectura más natural, y algunas alinean el botón a la izquierda cuando aparecen entradas o información clave en la parte superior del modal. Si bien todas estas soluciones pueden funcionar para resolver la coherencia y la legibilidad, las pequeñas decisiones consumen tiempo de planificación y recursos de implementación en todos los equipos. Un diseño prescrito resuelve muchos de estos problemas en nombre de los diseñadores. En términos más simples, el diseño prescrito le permite centrarse en lo que realmente está en el modal y cuándo el modal tiene sentido en el flujo del usuario a través de la aplicación.
La siguiente figura muestra cómo se muestra un modal durante el flujo de trabajo del usuario:
Conceptos de diseño prescritos en el sistema de diseño de Pega Constellation
El sistema de diseño Constellation utiliza una serie de herramientas y conceptos de manera prescriptiva. Los diseñadores de aplicaciones y aquellos que trabajan en estrecha colaboración con los diseñadores deben estar familiarizados con los siguientes términos: tokens de diseño, temas, patrones y componentes.
Tokens de diseño
Los tokens de diseño son herramientas utilizadas para transmitir principios clave de diseño y UX a través de múltiples canales y tecnologías. Los tokens se utilizan para unificar elementos de estilo en la web, el escritorio, los dispositivos móviles, las herramientas y las aplicaciones. Su uso es fundamental con las aplicaciones de Pega Platform, ya que las aplicaciones de Pega Platform combinan elementos nativos y de diseño web.
El sistema de diseño Constellation contiene cuatro tipos de tokens de diseño:
| Tipo de token de diseño | Descripción | Ejemplos |
|---|---|---|
| Primitivo | Representar elementos de diseño sin procesar |
|
| Significativo | Vincular el propósito funcional a los tokens primitivos |
|
| Compartido entre componentes | Partes de componentes repetidas que dependen de tokens de componente y se pueden compartir entre componentes. Estos a menudo usan tokens primitivos y significativos. |
|
| Específico del componente | Todos los componentes tienen un conjunto de tokens específicos para ese componente, que define cada elemento del estilo, desde el espaciado hasta el diseño. Estos pueden usar una combinación de tokens primitivos, significativos o compartidos por componentes. |
|
Algunos tokens de diseño se pueden editar al personalizar las aplicaciones para permitir la personalización de marca. Los ejemplos incluyen tokens significativos, como base.palette.brand-primary o cambiar tokens básicos, como la familia de colores predeterminada.
Temas
Los temas son configuraciones simples que se utilizan para diseñar una aplicación de acuerdo con los estándares de la marca.
En la siguiente ilustración, se muestran tres ejemplos de temas que incluyen personalización de marca para texto, colores y botones:
Patrones
Los patrones (patterns) son combinaciones repetibles y escalables de componentes y flujos de usuario que crean una experiencia uniforme.
La siguiente figura ilustra tres ejemplos de patrones que se pueden reutilizar en una aplicación:
Algunos ejemplos de patrones en el sistema de diseño Constellation incluyen:
- flujos de trabajo para encontrar y elegir contenido, como Buscar y seleccionar (Search & Select) y Resultados de búsqueda
- mensajes y respuestas del sistema, como notificaciones de error, estados vacíos y advertencias
- navegación por la información a través de la navegación principal y las breadcrumbs
- desplazarse por las etapas de trabajo
Componentes
Los componentes son elementos y combinaciones de IU que realizan una función específica.
La siguiente figura muestra un elemento común de la interfaz de usuario, el campo de texto:
Los componentes complejos que tienen una meta de negocio específica y pueden ser completamente funcionales en cualquier contexto se denominan widgets. Por ejemplo, un widget de bienvenida de la página de inicio que le permite definir qué mensaje reciben los usuarios cuando inician sesión por primera vez en su aplicación.
Compruebe sus conocimientos con la siguiente actividad:
Experiencia prescrita
Un verdadero sistema de diseño es holístico, fácilmente actualizable y crea una experiencia prescrita. Los patrones de diseño, los componentes de la interfaz de usuario, el comportamiento técnico y los tratamientos visuales son complementarios y están destinados a usarse de una manera específica para resolver problemas comerciales comunes, mejorar la velocidad y el flujo de trabajo de los usuarios, y cumplir o superar los requisitos legales, como la accesibilidad o la localización.
Sin embargo, esto no significa que no haya flexibilidad o creatividad dentro de un sistema de diseño. Muchas decisiones finales sobre la ubicación, la aparición de contenido, el flujo de trabajo a realizar y la marca de una aplicación son responsabilidad del diseñador que trabaja en el sistema. Como diseñador, organiza ideas, optimiza flujos y se centra en lo que realmente importa: ayudar a los usuarios a lograr sus metas y satisfacer las necesidades del negocio.
La siguiente figura ilustra la relación entre las diferentes partes de un sistema de diseño:
Compruebe sus conocimientos con la siguiente actividad:
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
¿Quiere ayudarnos a mejorar este contenido?