{"id":6371,"date":"2026-09-26T04:35:11","date_gmt":"2026-09-26T04:35:11","guid":{"rendered":"https:\/\/enigmametaverse.com\/?p=6371"},"modified":"2026-09-25T08:35:37","modified_gmt":"2026-09-25T08:35:37","slug":"pega-constellation-ui-designer","status":"publish","type":"post","link":"https:\/\/enigmametaverse.com\/it\/pega-constellation-ui-designer\/","title":{"rendered":"Pega Constellation UI Designer: Designing Portals with Real-Time Preview\u00a0"},"content":{"rendered":"<h2 class=\"wp-block-heading\"><strong>Introduction<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Building a modern application is no longer only about configuring the business process. The user interface also plays&nbsp;an important role&nbsp;in how easily people can complete their work.&nbsp;<\/p>\n\n\n\n<p>This is where the&nbsp;<strong>Pega Constellation UI Designer<\/strong>&nbsp;becomes useful.&nbsp;<\/p>\n\n\n\n<p>In Pega Platform &#8217;26, the UI Designer is part of the Constellation authoring experience and helps application builders configure portal content, themes, and navigation while seeing design changes in real time. Pega&#8217;s current UI authoring module also covers Portals, Landing Pages, Views, Widgets, Themes, and Styles. (<a href=\"https:\/\/academy.pega.com\/module\/ui-authoring-constellation\/v4?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p>Instead of treating UI configuration as&nbsp;a completely separate&nbsp;development activity, Constellation brings more of the design experience directly into the application-building workflow.&nbsp;<\/p>\n\n\n\n<p>Let&#8217;s&nbsp;look at what that means in practice.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Is Pega Constellation UI Designer?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>The&nbsp;<strong>UI Designer<\/strong>&nbsp;is a visual authoring experience for designing parts of a Constellation application&#8217;s user experience.&nbsp;<\/p>\n\n\n\n<p>It helps application builders configure areas such as:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Portal content\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigation\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Themes\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Styling\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Landing-page content\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visual presentation\u00a0<\/li>\n<\/ul>\n\n\n\n<p>Pega describes the UI Designer as providing a drag-and-drop experience, out-of-the-box design selections, and an AI assistant for in-context design configuration. It also provides real-time visualization while changes are being made. (<a href=\"https:\/\/academy.pega.com\/pt-br\/node\/106526\/in\/104316\/107131?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p>This makes the process more visual than traditional UI configuration.&nbsp;<\/p>\n\n\n\n<p>Instead of repeatedly changing configuration and then checking the runtime separately, developers can see the effect of many design decisions while authoring.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Real-Time Preview Matters<\/strong>&nbsp;<\/h2>\n\n\n\n<p>One of the practical benefits of UI Designer is&nbsp;<strong>immediate visual feedback<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Imagine that you are configuring a portal and want to change:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigation items\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Portal layout\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Theme settings\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Colors\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typography\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Landing-page content\u00a0<\/li>\n<\/ul>\n\n\n\n<p>With a traditional development workflow, you may need to make a change, save it, open the application, navigate to the&nbsp;appropriate screen, and then&nbsp;determine&nbsp;whether the result looks correct.&nbsp;<\/p>\n\n\n\n<p>Real-time visualization shortens that feedback loop.&nbsp;<\/p>\n\n\n\n<p>Configure&nbsp;<br>&nbsp;&nbsp; \u2193&nbsp;<br>Preview&nbsp;<br>&nbsp;&nbsp; \u2193&nbsp;<br>Adjust&nbsp;<br>&nbsp;&nbsp; \u2193&nbsp;<br>Preview again&nbsp;<br>&nbsp;&nbsp; \u2193&nbsp;<br>Finalize&nbsp;<\/p>\n\n\n\n<p>This is particularly useful when working on enterprise applications where small UI changes can affect the overall experience.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>UI Designer and Constellation Portals<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Constellation applications use a portal-based user experience.&nbsp;<\/p>\n\n\n\n<p>Pega&#8217;s current Constellation training specifically covers&nbsp;<strong>Portals and Landing Pages<\/strong>, including the configuration of portal experiences and reusable UI elements. (<a href=\"https:\/\/academy.pega.com\/module\/ui-authoring-constellation\/v4?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p>A portal provides the environment through which users access their work.&nbsp;<\/p>\n\n\n\n<p>For example:&nbsp;<\/p>\n\n\n\n<p>Portal&nbsp;<br>\u2502&nbsp;<br>\u251c\u2500\u2500 Navigation&nbsp;<br>\u2502&nbsp;<br>\u251c\u2500\u2500 Landing Page&nbsp;<br>\u2502&nbsp;&nbsp; \u251c\u2500\u2500 Widget&nbsp;<br>\u2502&nbsp;&nbsp; \u251c\u2500\u2500 Widget&nbsp;<br>\u2502&nbsp;&nbsp; \u2514\u2500\u2500 View&nbsp;<br>\u2502&nbsp;<br>\u2514\u2500\u2500 Case \/ Data Experience&nbsp;<\/p>\n\n\n\n<p>The exact portal experience depends on the application&#8217;s requirements and the user&#8217;s role.&nbsp;<\/p>\n\n\n\n<p>The&nbsp;important point&nbsp;is that UI Designer allows builders to work with these visual elements without treating every UI requirement as a custom-development exercise.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Designing Landing Pages<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Landing pages are another important part of the Constellation experience.&nbsp;<\/p>\n\n\n\n<p>A landing page can bring together useful information and functionality so users do not have to navigate through multiple areas to find what they need.&nbsp;<\/p>\n\n\n\n<p>For example, a customer-service portal might provide:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open cases\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Recent activities\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Important notifications\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Frequently used actions\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Performance information\u00a0<\/li>\n<\/ul>\n\n\n\n<p>Pega provides out-of-the-box landing-page widgets that can be used as part of the Constellation experience. (<a href=\"https:\/\/academy.pega.com\/module\/ui-authoring-constellation\/v4?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p>This supports a more reusable approach to UI design.&nbsp;<\/p>\n\n\n\n<p>Instead of creating every element from scratch, application builders can start with available components and configure them according to the application&#8217;s needs.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Themes: More Than Just Changing Colors<\/strong>&nbsp;<\/h2>\n\n\n\n<p>A common mistake is to think of a theme as simply a collection of colors.&nbsp;<\/p>\n\n\n\n<p>In Constellation, themes are part of a broader design-system approach.&nbsp;<\/p>\n\n\n\n<p>Pega&#8217;s current guidance describes using an&nbsp;<strong>Enterprise layer<\/strong>, sometimes referred to as a Center of Excellence layer, to establish reusable design assets across applications. These assets can include themes, web fonts, icons, and design templates. (<a href=\"https:\/\/academy.pega.com\/pt-br\/node\/106526\/in\/104316\/107131?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p>This becomes particularly useful for organizations with multiple Pega applications.&nbsp;<\/p>\n\n\n\n<p>For example:&nbsp;<\/p>\n\n\n\n<p>Enterprise Design Layer&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \u2193&nbsp;<br>&nbsp;&nbsp; Shared Theme&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \u2193&nbsp;<br>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2510&nbsp;<br>\u2193&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \u2193&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \u2193&nbsp;<br>App A&nbsp; App B&nbsp; App C&nbsp;<\/p>\n\n\n\n<p>Instead of independently defining the same visual standards in every application, organizations can establish reusable design elements.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Understanding Design Tokens<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Another important concept behind Constellation styling is&nbsp;<strong>design tokens<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Design tokens provide a centralized way to represent styling characteristics used by UI components.&nbsp;<\/p>\n\n\n\n<p>These can help maintain consistency across different platforms and components.&nbsp;<\/p>\n\n\n\n<p>For example, an organization may define consistent values for:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Colors\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typography\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Spacing\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Component styling\u00a0<\/li>\n<\/ul>\n\n\n\n<p>Pega states that components in the Constellation library use design tokens and that developers can modify default token values for more granular styling requirements. (<a href=\"https:\/\/academy.pega.com\/pt-br\/node\/106526\/in\/104316\/107131?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p>The benefit is consistency.&nbsp;<\/p>\n\n\n\n<p>If the same design language is used across multiple parts of an application, users get a more predictable experience.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>UI Designer and Accessibility<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Visual design should not only focus on appearance.&nbsp;<\/p>\n\n\n\n<p>Accessibility also needs to be considered while designing an application.&nbsp;<\/p>\n\n\n\n<p>Pega&#8217;s current UI Designer guidance highlights real-time visualization and configuration assistance for accessibility-related considerations such as color contrast and display elements. It also describes theme switching as one way to support readability and user preferences. (<a href=\"https:\/\/academy.pega.com\/pt-br\/node\/106526\/in\/104316\/107131?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p>A useful mindset is:&nbsp;<\/p>\n\n\n\n<p><strong>Design for the user who needs the interface, not only for the developer creating it.<\/strong>&nbsp;<\/p>\n\n\n\n<p>A visually attractive interface that is difficult to read or navigate is still a poor user experience.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How UI Designer Fits Into the Constellation Approach<\/strong>&nbsp;<\/h2>\n\n\n\n<p>It is important to understand that UI Designer is not a replacement for the entire Constellation architecture.&nbsp;<\/p>\n\n\n\n<p>Constellation separates the user experience from the underlying application logic and uses Views to connect the data model with the user interface. Pega describes Views as a core part of UI authoring in Constellation. (<a href=\"https:\/\/community.pega.com\/blog\/how-constellation-works-authoring-rendering?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Community<\/a>)&nbsp;<\/p>\n\n\n\n<p>A simplified picture is:&nbsp;<\/p>\n\n\n\n<p>Application Data&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \u2193&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp; Views&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \u2193&nbsp;<br>Portal \/ UI Designer&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \u2193&nbsp;<br>&nbsp;&nbsp; User Experience&nbsp;<\/p>\n\n\n\n<p>This separation allows developers and application builders to focus on business functionality while configuring the experience through supported Constellation patterns.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Practical Tips for Using UI Designer<\/strong>&nbsp;<\/h2>\n\n\n\n<p><strong>1. Start with out-of-the-box components<\/strong>&nbsp;<\/p>\n\n\n\n<p>Use the available Constellation components before considering custom solutions. Pega&#8217;s Constellation guidance emphasizes prescriptive, reusable authoring. (<a href=\"https:\/\/community.pega.com\/blog\/flexible-ui-constellation?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Community<\/a>)&nbsp;<\/p>\n\n\n\n<p><strong>2. Establish enterprise styling early<\/strong>&nbsp;<\/p>\n\n\n\n<p>If multiple applications need the same visual identity, consider defining reusable design assets at the Enterprise layer.&nbsp;<\/p>\n\n\n\n<p><strong>3. Preview frequently<\/strong>&nbsp;<\/p>\n\n\n\n<p>Don&#8217;t wait until the end of development to check the interface. Use the real-time preview to catch layout and presentation issues early.&nbsp;<\/p>\n\n\n\n<p><strong>4. Think about accessibility<\/strong>&nbsp;<\/p>\n\n\n\n<p>Check readability, contrast, navigation, and how different users will interact with the application.&nbsp;<\/p>\n\n\n\n<p><strong>5. Avoid unnecessary customization<\/strong>&nbsp;<\/p>\n\n\n\n<p>Customization can be useful when there is a genuine requirement, but relying on supported Constellation patterns generally makes applications easier to maintain.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Thoughts<\/strong>&nbsp;<\/h2>\n\n\n\n<p>The&nbsp;<strong>Pega Constellation UI Designer<\/strong>&nbsp;represents a more visual approach to building application experiences.&nbsp;<\/p>\n\n\n\n<p>Its value isn&#8217;t simply that developers can move UI elements around on a screen. The larger benefit is the combination of&nbsp;<strong>visual authoring, reusable design assets, real-time preview, themes, widgets, and Constellation&#8217;s structured UI model<\/strong>.&nbsp;<\/p>\n\n\n\n<p>For developers moving toward Pega Platform &#8217;26, understanding UI Designer alongside Views, Portals, Widgets, Themes, and design tokens provides a practical foundation for modern Constellation development. (<a href=\"https:\/\/academy.pega.com\/module\/ui-authoring-constellation\/v4?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p>The best results usually come from starting with the standard Constellation experience, establishing reusable design patterns, and customizing only where the application genuinely requires it.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Frequently Asked Questions<\/strong>&nbsp;<\/h2>\n\n\n\n<p><strong>What is Pega Constellation UI Designer?<\/strong>&nbsp;<\/p>\n\n\n\n<p>It is a visual authoring experience for configuring the user experience of Constellation applications, including portal content, navigation, themes, and styling.&nbsp;<\/p>\n\n\n\n<p><strong>Does UI Designer support real-time preview?<\/strong>&nbsp;<\/p>\n\n\n\n<p>Yes. Pega&#8217;s current Platform &#8217;26 guidance describes real-time visualization while configuring the application&#8217;s visual experience. (<a href=\"https:\/\/academy.pega.com\/pt-br\/node\/106526\/in\/104316\/107131?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p><strong>What are design tokens in Constellation?<\/strong>&nbsp;<\/p>\n\n\n\n<p>Design tokens provide reusable values for styling UI components and help maintain visual consistency across an application portfolio.&nbsp;<\/p>\n\n\n\n<p><strong>Can UI Designer be used for branding?<\/strong>&nbsp;<\/p>\n\n\n\n<p>Yes. Constellation themes and the Enterprise layer can be used to establish reusable organizational design elements such as colors, fonts, icons, and templates. (<a href=\"https:\/\/academy.pega.com\/pt-br\/node\/106526\/in\/104316\/107131?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p><strong>Is UI Designer the same as Constellation Views?<\/strong>&nbsp;<\/p>\n\n\n\n<p>No. Views are a core mechanism for defining the user interface around application data, while UI Designer is an authoring experience used to configure aspects of the overall Constellation user experience. (<a href=\"https:\/\/academy.pega.com\/module\/ui-authoring-constellation\/v4?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy<\/a>)&nbsp;<\/p>\n\n\n\n<p><strong>Official Pega References<\/strong>&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/academy.pega.com\/module\/ui-authoring-constellation\/v4?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy \u2014 UI authoring in Constellation<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/academy.pega.com\/pt-br\/node\/106526\/in\/104316\/107131?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Academy \u2014 Themes and styles for Constellation applications<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/community.pega.com\/products\/constellation?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega \u2014 Constellation<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/community.pega.com\/blog\/how-constellation-works-authoring-rendering?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Pega Community \u2014 How Constellation Works: From Authoring to Rendering<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>\u00a0<\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Introduction&nbsp; Building a modern application is no longer only about configuring the business process. The user interface also plays&nbsp;an important role&nbsp;in how easily people can complete their work.&nbsp; This is where the&nbsp;Pega Constellation UI Designer&nbsp;becomes useful.&nbsp; In Pega Platform &#8217;26, the UI Designer is part of the Constellation authoring experience and helps application builders configure [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6372,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pega Constellation UI Designer: A Guide to Modern UI Design<\/title>\n<meta name=\"description\" content=\"Learn how Pega Constellation UI Designer helps build consistent portals, configure navigation, apply themes, and preview UI changes in real time.\u00a0\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/enigmametaverse.com\/it\/pega-constellation-ui-designer\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pega Constellation UI Designer: A Guide to Modern UI Design\" \/>\n<meta property=\"og:description\" content=\"Learn how Pega Constellation UI Designer helps build consistent portals, configure navigation, apply themes, and preview UI changes in real time.\u00a0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/enigmametaverse.com\/it\/pega-constellation-ui-designer\/\" \/>\n<meta property=\"og:site_name\" content=\"Enigma Metaverse\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/EnigmaMetaverse\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-26T04:35:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2026\/09\/image-14.png\" \/>\n\t<meta property=\"og:image:width\" content=\"901\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Enigma Metaverse\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EnigmaMetaverse\" \/>\n<meta name=\"twitter:site\" content=\"@EnigmaMetaverse\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Enigma Metaverse\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/\"},\"author\":{\"name\":\"Enigma Metaverse\",\"@id\":\"https:\/\/enigmametaverse.com\/#\/schema\/person\/8e52133e3cc700baf39c19ab7992e76e\"},\"headline\":\"Pega Constellation UI Designer: Designing Portals with Real-Time Preview\u00a0\",\"datePublished\":\"2026-09-26T04:35:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/\"},\"wordCount\":1538,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/enigmametaverse.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2026\/09\/image-14.png\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/\",\"url\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/\",\"name\":\"Pega Constellation UI Designer: A Guide to Modern UI Design\",\"isPartOf\":{\"@id\":\"https:\/\/enigmametaverse.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2026\/09\/image-14.png\",\"datePublished\":\"2026-09-26T04:35:11+00:00\",\"description\":\"Learn how Pega Constellation UI Designer helps build consistent portals, configure navigation, apply themes, and preview UI changes in real time.\u00a0\",\"breadcrumb\":{\"@id\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#primaryimage\",\"url\":\"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2026\/09\/image-14.png\",\"contentUrl\":\"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2026\/09\/image-14.png\",\"width\":901,\"height\":450},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/enigmametaverse.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pega Constellation UI Designer: Designing Portals with Real-Time Preview\u00a0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/enigmametaverse.com\/#website\",\"url\":\"https:\/\/enigmametaverse.com\/\",\"name\":\"Enigma Metaverse\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/enigmametaverse.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/enigmametaverse.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/enigmametaverse.com\/#organization\",\"name\":\"Enigma Metaverse\",\"url\":\"https:\/\/enigmametaverse.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/enigmametaverse.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2025\/03\/enigmametaverse-white-logo.svg\",\"contentUrl\":\"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2025\/03\/enigmametaverse-white-logo.svg\",\"width\":125,\"height\":35,\"caption\":\"Enigma Metaverse\"},\"image\":{\"@id\":\"https:\/\/enigmametaverse.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/EnigmaMetaverse\",\"https:\/\/x.com\/EnigmaMetaverse\",\"http:\/\/instagram.com\/EnigmaMetaverse\",\"https:\/\/www.linkedin.com\/company\/EnigmaMetaverse\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/enigmametaverse.com\/#\/schema\/person\/8e52133e3cc700baf39c19ab7992e76e\",\"name\":\"Enigma Metaverse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/enigmametaverse.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ffb931a8d36a9ce6976a0a4d7821661b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ffb931a8d36a9ce6976a0a4d7821661b?s=96&d=mm&r=g\",\"caption\":\"Enigma Metaverse\"},\"sameAs\":[\"http:\/\/enigmametaverse.com\"],\"url\":\"https:\/\/enigmametaverse.com\/it\/author\/enigmametaverse\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pega Constellation UI Designer: A Guide to Modern UI Design","description":"Learn how Pega Constellation UI Designer helps build consistent portals, configure navigation, apply themes, and preview UI changes in real time.\u00a0","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/enigmametaverse.com\/it\/pega-constellation-ui-designer\/","og_locale":"it_IT","og_type":"article","og_title":"Pega Constellation UI Designer: A Guide to Modern UI Design","og_description":"Learn how Pega Constellation UI Designer helps build consistent portals, configure navigation, apply themes, and preview UI changes in real time.\u00a0","og_url":"https:\/\/enigmametaverse.com\/it\/pega-constellation-ui-designer\/","og_site_name":"Enigma Metaverse","article_publisher":"https:\/\/www.facebook.com\/EnigmaMetaverse","article_published_time":"2026-09-26T04:35:11+00:00","og_image":[{"width":901,"height":450,"url":"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2026\/09\/image-14.png","type":"image\/png"}],"author":"Enigma Metaverse","twitter_card":"summary_large_image","twitter_creator":"@EnigmaMetaverse","twitter_site":"@EnigmaMetaverse","twitter_misc":{"Scritto da":"Enigma Metaverse","Tempo di lettura stimato":"7 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#article","isPartOf":{"@id":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/"},"author":{"name":"Enigma Metaverse","@id":"https:\/\/enigmametaverse.com\/#\/schema\/person\/8e52133e3cc700baf39c19ab7992e76e"},"headline":"Pega Constellation UI Designer: Designing Portals with Real-Time Preview\u00a0","datePublished":"2026-09-26T04:35:11+00:00","mainEntityOfPage":{"@id":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/"},"wordCount":1538,"commentCount":0,"publisher":{"@id":"https:\/\/enigmametaverse.com\/#organization"},"image":{"@id":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#primaryimage"},"thumbnailUrl":"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2026\/09\/image-14.png","articleSection":["Uncategorized"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/","url":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/","name":"Pega Constellation UI Designer: A Guide to Modern UI Design","isPartOf":{"@id":"https:\/\/enigmametaverse.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#primaryimage"},"image":{"@id":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#primaryimage"},"thumbnailUrl":"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2026\/09\/image-14.png","datePublished":"2026-09-26T04:35:11+00:00","description":"Learn how Pega Constellation UI Designer helps build consistent portals, configure navigation, apply themes, and preview UI changes in real time.\u00a0","breadcrumb":{"@id":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#primaryimage","url":"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2026\/09\/image-14.png","contentUrl":"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2026\/09\/image-14.png","width":901,"height":450},{"@type":"BreadcrumbList","@id":"https:\/\/enigmametaverse.com\/pega-constellation-ui-designer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/enigmametaverse.com\/"},{"@type":"ListItem","position":2,"name":"Pega Constellation UI Designer: Designing Portals with Real-Time Preview\u00a0"}]},{"@type":"WebSite","@id":"https:\/\/enigmametaverse.com\/#website","url":"https:\/\/enigmametaverse.com\/","name":"Enigma Metaverse","description":"","publisher":{"@id":"https:\/\/enigmametaverse.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/enigmametaverse.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/enigmametaverse.com\/#organization","name":"Enigma Metaverse","url":"https:\/\/enigmametaverse.com\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/enigmametaverse.com\/#\/schema\/logo\/image\/","url":"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2025\/03\/enigmametaverse-white-logo.svg","contentUrl":"https:\/\/enigmametaverse.com\/wp-content\/uploads\/2025\/03\/enigmametaverse-white-logo.svg","width":125,"height":35,"caption":"Enigma Metaverse"},"image":{"@id":"https:\/\/enigmametaverse.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/EnigmaMetaverse","https:\/\/x.com\/EnigmaMetaverse","http:\/\/instagram.com\/EnigmaMetaverse","https:\/\/www.linkedin.com\/company\/EnigmaMetaverse"]},{"@type":"Person","@id":"https:\/\/enigmametaverse.com\/#\/schema\/person\/8e52133e3cc700baf39c19ab7992e76e","name":"Enigma Metaverse","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/enigmametaverse.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ffb931a8d36a9ce6976a0a4d7821661b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ffb931a8d36a9ce6976a0a4d7821661b?s=96&d=mm&r=g","caption":"Enigma Metaverse"},"sameAs":["http:\/\/enigmametaverse.com"],"url":"https:\/\/enigmametaverse.com\/it\/author\/enigmametaverse\/"}]}},"_links":{"self":[{"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/posts\/6371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/comments?post=6371"}],"version-history":[{"count":1,"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/posts\/6371\/revisions"}],"predecessor-version":[{"id":6373,"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/posts\/6371\/revisions\/6373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/media\/6372"}],"wp:attachment":[{"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/media?parent=6371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/categories?post=6371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/enigmametaverse.com\/it\/wp-json\/wp\/v2\/tags?post=6371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}