{"id":12260,"date":"2025-09-26T13:38:38","date_gmt":"2025-09-26T13:38:38","guid":{"rendered":"https:\/\/caixamagica.pt\/?page_id=12260"},"modified":"2026-07-14T14:19:25","modified_gmt":"2026-07-14T14:19:25","slug":"ux-ui-design-hub","status":"publish","type":"page","link":"https:\/\/caixamagica.pt\/de\/ux-ui-design-hub\/","title":{"rendered":"UX\/UI Design Hub"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"12260\" class=\"elementor elementor-12260\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-42458fa0 elementor-section-full_width py-5 elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"42458fa0\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default container my-2 py-md-2 py-lg-5\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5391b61f\" data-id=\"5391b61f\" data-element_type=\"column\">\n\t\t\t<div class=\"p-0 elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d4b6352 code-block elementor-widget elementor-widget-html\" data-id=\"d4b6352\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =======================================================\n     SHARED STYLES\n     Adiciona isto UMA VEZ em:\n     Elementor \u2192 Settings \u2192 Custom CSS\n     (ou num widget HTML no topo da primeira p\u00e1gina)\n     ======================================================= -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Red+Hat+Display:wght@400;500;600;700;800;900&display=swap');\n\n:root {\n  --cms-font:    \"Red Hat Display\", sans-serif;\n  --cms-blue:    #2170F2;\n  --cms-dark:    #131022;\n  --cms-body:    #585c7b;\n  --cms-gray-1:  #f3f6ff;\n  --cms-gray-3:  #e2e5f1;\n  --cms-gray-5:  #b4b7c9;\n  --cms-gray-8:  #3e4265;\n  --cms-white:   #ffffff;\n  --cms-radius:  8px;\n  --cms-max:     1160px;\n}\n\n\/* Reset scoped ao prefixo cms- *\/\n.cms * { box-sizing: border-box; }\n.cms {\n  font-family: var(--cms-font);\n  font-size: 1rem;\n  line-height: 1.6;\n  color: var(--cms-body);\n}\n.cms h1, .cms h2, .cms h3, .cms h4 {\n  font-family: var(--cms-font);\n  font-weight: 800;\n  color: var(--cms-dark);\n  line-height: 1.2;\n  margin: 0;\n}\n.cms p { margin: 0 0 1rem; }\n.cms p:last-child { margin-bottom: 0; }\n.cms a { color: var(--cms-blue); text-decoration: none; }\n.cms a:hover { text-decoration: underline; }\n.cms ul { list-style: none; padding: 0; margin: 0; }\n\n\/* \u2500\u2500 BLEED WRAPPER\n   Escapa do padding da coluna Elementor e cobre o fundo completo \u2500\u2500 *\/\n.cms-bleed {\n  margin-left:  calc(-50vw + 50%);\n  margin-right: calc(-50vw + 50%);\n  padding-left:  calc(50vw - 50%);\n  padding-right: calc(50vw - 50%);\n}\n\n\/* \u2500\u2500 INNER \u2014 limita a largura do conte\u00fado \u2500\u2500 *\/\n.cms-inner {\n  max-width: var(--cms-max);\n  margin: 0 auto;\n  padding: 0 1.5rem;\n}\n\n\/* \u2500\u2500 SECTION PADDING \u2500\u2500 *\/\n.cms-section        { padding: 5rem 0; }\n.cms-section-sm     { padding: 3rem 0; }\n.cms-section-xs     { padding: 2rem 0; }\n\n\/* \u2500\u2500 BACKGROUNDS \u2500\u2500 *\/\n.cms-bg-white  { background: var(--cms-white); }\n.cms-bg-light  { background: var(--cms-gray-1); }\n.cms-bg-dark   { background: var(--cms-dark); }\n.cms-bg-blue   { background: var(--cms-blue); }\n\n\/* \u2500\u2500 EYEBROW \u2500\u2500 *\/\n.cms-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--cms-blue);\n  margin-bottom: 1rem;\n  font-family: var(--cms-font);\n}\n.cms-eyebrow::before {\n  content: \"\";\n  display: block;\n  width: 20px;\n  height: 2px;\n  background: var(--cms-blue);\n  flex-shrink: 0;\n}\n.cms-eyebrow-white { color: rgba(255,255,255,0.7); }\n.cms-eyebrow-white::before { background: rgba(255,255,255,0.7); }\n\n\/* \u2500\u2500 HEADINGS \u2500\u2500 *\/\n.cms-h1 {\n  font-size: clamp(2rem, 5vw, 3.25rem);\n  letter-spacing: -0.03em;\n  margin-bottom: 1.5rem;\n}\n.cms-h1 span { color: var(--cms-blue); }\n\n.cms-h2 {\n  font-size: clamp(1.6rem, 3.5vw, 2.5rem);\n  letter-spacing: -0.02em;\n  margin-bottom: 1rem;\n}\n.cms-h2-white { color: #fff; }\n\n\/* \u2500\u2500 LEAD \u2500\u2500 *\/\n.cms-lead {\n  font-size: clamp(0.95rem, 2vw, 1.05rem);\n  color: var(--cms-body);\n  max-width: 660px;\n  line-height: 1.75;\n  margin-bottom: 3rem;\n}\n.cms-lead-white { color: rgba(255,255,255,0.7); }\n\n\/* \u2500\u2500 BUTTONS \u2500\u2500 *\/\n.cms-btn {\n  display: inline-block;\n  background: var(--cms-blue) !important;\n  background-color: var(--cms-blue) !important;\n  color: #fff !important;\n  font-family: var(--cms-font);\n  font-size: 0.95rem;\n  font-weight: 700;\n  padding: 0.8rem 1.75rem;\n  border-radius: var(--cms-radius);\n  text-decoration: none !important;\n  transition: opacity .2s;\n  white-space: nowrap;\n  border: none;\n}\n.cms-btn:hover,\n.cms-btn:visited,\n.cms-btn:focus,\n.cms-btn:active {\n  opacity: 0.88;\n  color: #fff !important;\n  background: var(--cms-blue) !important;\n  background-color: var(--cms-blue) !important;\n  text-decoration: none !important;\n}\n\n.cms-btn-outline {\n  display: inline-block;\n  border: 2px solid var(--cms-gray-3) !important;\n  color: var(--cms-dark) !important;\n  font-family: var(--cms-font);\n  font-size: 0.95rem;\n  font-weight: 700;\n  padding: 0.75rem 1.75rem;\n  border-radius: var(--cms-radius);\n  text-decoration: none !important;\n  transition: border-color .2s, color .2s;\n  white-space: nowrap;\n  background: transparent !important;\n}\n.cms-btn-outline:hover,\n.cms-btn-outline:focus {\n  border-color: var(--cms-blue) !important;\n  color: var(--cms-blue) !important;\n  text-decoration: none !important;\n  background: transparent !important;\n}\n\n.cms-btn-white {\n  display: inline-block;\n  background: #fff !important;\n  background-color: #fff !important;\n  color: var(--cms-blue) !important;\n  font-family: var(--cms-font);\n  font-size: 1rem;\n  font-weight: 700;\n  padding: 0.9rem 2rem;\n  border-radius: var(--cms-radius);\n  text-decoration: none !important;\n  transition: opacity .2s;\n  border: none;\n}\n.cms-btn-white:hover,\n.cms-btn-white:visited,\n.cms-btn-white:focus,\n.cms-btn-white:active {\n  opacity: 0.9;\n  color: var(--cms-blue) !important;\n  background: #fff !important;\n  text-decoration: none !important;\n}\n\n\/* \u2500\u2500 HERO LAYOUT \u2500\u2500 *\/\n.cms-hero-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 4rem;\n  align-items: center;\n}\n.cms-hero-img {\n  border-radius: 16px;\n  overflow: hidden;\n  background: transparent;\n  aspect-ratio: 1 \/ 1;\n}\n.cms-hero-img img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.cms-hero-actions {\n  display: flex;\n  gap: 1rem;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-top: 2rem;\n}\n\n\/* \u2500\u2500 CARDS \u2500\u2500 *\/\n.cms-card-grid-3 {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1.25rem;\n}\n.cms-card-grid-2 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 1.25rem;\n}\n.cms-card {\n  border: 1px solid var(--cms-gray-3);\n  border-radius: 12px;\n  padding: 1.75rem;\n  background: var(--cms-white);\n  transition: box-shadow .2s, border-color .2s;\n}\n.cms-card:hover {\n  box-shadow: 0 8px 32px rgba(33,112,242,0.08);\n  border-color: var(--cms-blue);\n}\n.cms-card-num {\n  font-size: 0.7rem;\n  font-weight: 800;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--cms-blue);\n  margin-bottom: 1rem;\n  display: block;\n  font-family: var(--cms-font);\n}\n.cms-card h3 { font-size: 1rem; margin-bottom: 0.6rem; }\n.cms-card p { font-size: 0.875rem; color: var(--cms-body); line-height: 1.65; }\n\n\/* Dark card *\/\n.cms-card-dark {\n  background: rgba(255,255,255,0.06);\n  border: 1px solid rgba(255,255,255,0.1);\n  border-radius: 10px;\n  padding: 1.5rem;\n}\n.cms-card-dark h4 {\n  font-size: 0.9rem;\n  font-weight: 700;\n  color: #fff;\n  margin-bottom: 0.4rem;\n  font-family: var(--cms-font);\n}\n.cms-card-dark p {\n  font-size: 0.85rem;\n  color: rgba(255,255,255,0.5);\n  line-height: 1.6;\n  margin: 0;\n}\n\n\/* \u2500\u2500 NUMBERED PROCESS LIST \u2500\u2500 *\/\n.cms-process-list {\n  border: 1px solid var(--cms-gray-3);\n  border-radius: 12px;\n  overflow: hidden;\n}\n.cms-process-item {\n  display: grid;\n  grid-template-columns: 64px 1fr;\n  border-bottom: 1px solid var(--cms-gray-3);\n  background: var(--cms-white);\n}\n.cms-process-item:last-child { border-bottom: none; }\n.cms-process-num {\n  background: var(--cms-gray-1);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 1.5rem 0;\n  border-right: 1px solid var(--cms-gray-3);\n  font-size: 1.25rem;\n  font-weight: 800;\n  color: var(--cms-blue);\n  font-family: var(--cms-font);\n}\n.cms-process-content { padding: 1.5rem 1.75rem; }\n.cms-process-content h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }\n.cms-process-content p { font-size: 0.875rem; color: var(--cms-body); line-height: 1.65; }\n\n\/* \u2500\u2500 CAPABILITY ROWS \u2500\u2500 *\/\n.cms-capability-row {\n  display: grid;\n  grid-template-columns: 200px 1fr;\n  gap: 2.5rem;\n  padding: 2rem 0;\n  border-bottom: 1px solid var(--cms-gray-3);\n  align-items: start;\n}\n.cms-capability-row:last-child { border-bottom: none; }\n.cms-cap-label {\n  font-size: 0.95rem;\n  font-weight: 700;\n  color: var(--cms-dark);\n  font-family: var(--cms-font);\n  padding-top: 2px;\n}\n.cms-cap-body p { font-size: 0.9rem; color: var(--cms-body); line-height: 1.75; }\n.cms-cap-body p + p { margin-top: 0.75rem; }\n\n\/* \u2500\u2500 TWO COL LAYOUT \u2500\u2500 *\/\n.cms-two-col {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 5rem;\n  align-items: start;\n}\n\n\/* \u2500\u2500 STACK TAGS \u2500\u2500 *\/\n.cms-stack-group { margin-bottom: 2rem; }\n.cms-stack-label {\n  font-size: 0.68rem;\n  font-weight: 800;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--cms-gray-5);\n  display: block;\n  margin-bottom: 0.75rem;\n  padding-bottom: 0.5rem;\n  border-bottom: 1px solid var(--cms-gray-3);\n  font-family: var(--cms-font);\n}\n.cms-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n.cms-tag {\n  font-size: 0.8rem;\n  font-weight: 600;\n  background: var(--cms-white);\n  color: var(--cms-gray-8);\n  border: 1px solid var(--cms-gray-3);\n  padding: 0.35rem 0.85rem;\n  border-radius: 20px;\n  font-family: var(--cms-font);\n}\n\n\/* \u2500\u2500 AEO DEFINITION BLOCK \u2500\u2500 *\/\n.cms-aeo {\n  font-size: 0.9rem;\n  line-height: 1.8;\n  max-width: 800px;\n  padding: 1.5rem 1.75rem;\n  background: var(--cms-white);\n  border-left: 3px solid var(--cms-blue);\n  border-radius: var(--cms-radius);\n  color: var(--cms-body);\n}\n.cms-aeo strong {\n  color: var(--cms-dark);\n  display: block;\n  margin-bottom: 0.4rem;\n  font-size: 0.95rem;\n}\n\n\/* \u2500\u2500 CLIENTS \u2500\u2500 *\/\n.cms-clients { display: flex; flex-wrap: wrap; gap: 0.6rem; }\n.cms-client {\n  font-size: 0.85rem;\n  font-weight: 700;\n  color: var(--cms-gray-8);\n  background: var(--cms-white);\n  border: 1px solid var(--cms-gray-3);\n  padding: 0.45rem 1rem;\n  border-radius: 20px;\n  font-family: var(--cms-font);\n}\n\n\/* \u2500\u2500 FAQ \u2500\u2500 *\/\n.cms-faq-list { max-width: 760px; }\ndetails.cms-faq { border-bottom: 1px solid var(--cms-gray-3); }\ndetails.cms-faq summary {\n  list-style: none;\n  cursor: pointer;\n  font-family: var(--cms-font);\n  font-size: 0.95rem;\n  font-weight: 700;\n  color: var(--cms-dark);\n  padding: 1.25rem 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  user-select: none;\n}\ndetails.cms-faq summary::-webkit-details-marker { display: none; }\ndetails.cms-faq summary::after {\n  content: \"+\";\n  font-size: 1.3rem;\n  font-weight: 300;\n  color: var(--cms-gray-5);\n  flex-shrink: 0;\n  line-height: 1;\n}\ndetails.cms-faq[open] summary::after { content: \"\u2212\"; }\n.cms-faq-body { padding-bottom: 1.25rem; max-width: 700px; }\n.cms-faq-body p { font-size: 0.9rem; color: var(--cms-body); line-height: 1.75; }\n\n\/* \u2500\u2500 CTA BAND \u2500\u2500 *\/\n.cms-cta-inner {\n  text-align: center;\n  max-width: 640px;\n  margin: 0 auto;\n  padding: 0 1.5rem;\n}\n.cms-cta-inner h2 { color: #fff; margin-bottom: 1rem; }\n.cms-cta-inner p { color: rgba(255,255,255,0.82); font-size: 1.05rem; margin-bottom: 2.5rem; }\n\n\/* \u2500\u2500 DARK SECTION HELPERS \u2500\u2500 *\/\n.cms-dark-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--cms-blue);\n  margin-bottom: 1rem;\n  font-family: var(--cms-font);\n}\n.cms-dark-eyebrow::before {\n  content: \"\";\n  display: block;\n  width: 20px;\n  height: 2px;\n  background: var(--cms-blue);\n}\n.cms-diff-point {\n  border-left: 2px solid var(--cms-blue);\n  padding-left: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n.cms-diff-point:last-child { margin-bottom: 0; }\n.cms-diff-point h4 {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: #fff;\n  margin-bottom: 0.3rem;\n  font-family: var(--cms-font);\n}\n.cms-diff-point p {\n  font-size: 0.82rem;\n  color: rgba(255,255,255,0.5);\n  line-height: 1.6;\n  margin: 0;\n}\n\n\/* \u2500\u2500 ENGAGEMENT CARDS \u2500\u2500 *\/\n.cms-engage-list {\n  list-style: none;\n  border-top: 1px solid var(--cms-gray-3);\n  padding-top: 1.25rem;\n  margin-top: 1.25rem;\n}\n.cms-engage-list li {\n  font-size: 0.875rem;\n  color: var(--cms-body);\n  padding: 0.3rem 0;\n  display: flex;\n  gap: 0.5rem;\n  align-items: flex-start;\n}\n.cms-engage-list li::before {\n  content: \"\u2192\";\n  color: var(--cms-blue);\n  font-weight: 700;\n  flex-shrink: 0;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   RESPONSIVE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* Tablet \u2014 768px *\/\n@media (max-width: 768px) {\n\n  .cms-section     { padding: 4rem 0; }\n  .cms-section-sm  { padding: 2.5rem 0; }\n\n  .cms-hero-grid {\n    grid-template-columns: 1fr;\n    gap: 2.5rem;\n  }\n  .cms-hero-img { display: none; }\n\n  .cms-h1 { margin-bottom: 1rem; }\n\n  .cms-card-grid-3,\n  .cms-card-grid-2 { grid-template-columns: 1fr 1fr; gap: 1rem; }\n\n  .cms-two-col { grid-template-columns: 1fr; gap: 3rem; }\n\n  .cms-capability-row {\n    grid-template-columns: 1fr;\n    gap: 0.5rem;\n    padding: 1.5rem 0;\n  }\n\n  .cms-process-item { grid-template-columns: 52px 1fr; }\n  .cms-process-num { font-size: 1rem; padding: 1.25rem 0; }\n  .cms-process-content { padding: 1.25rem 1.25rem; }\n}\n\n\/* Mobile \u2014 480px *\/\n@media (max-width: 480px) {\n\n  .cms-section     { padding: 3rem 0; }\n  .cms-section-sm  { padding: 2rem 0; }\n  .cms-section-xs  { padding: 1.5rem 0; }\n\n  .cms-inner { padding: 0 1rem; }\n\n  .cms-card-grid-3,\n  .cms-card-grid-2 { grid-template-columns: 1fr; gap: 0; }\n\n  .cms-hero-actions { flex-direction: column; align-items: flex-start; }\n  .cms-btn, .cms-btn-outline { width: 100%; text-align: center; }\n\n  .cms-h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }\n  .cms-h2 { font-size: clamp(1.4rem, 6vw, 2rem); }\n\n  .cms-lead { margin-bottom: 2rem; font-size: 0.95rem; }\n\n  details.cms-faq summary { font-size: 0.875rem; padding: 1rem 0; }\n\n  .cms-tag { font-size: 0.75rem; padding: 0.3rem 0.7rem; }\n\n  .cms-cta-inner p { font-size: 0.95rem; }\n  .cms-btn-white { width: auto; padding: 0.85rem 1.75rem; }\n\n  \/* \u2500\u2500 MOBILE ACCORDION \u2014 cards, process, capabilities, stack, dark cards \u2500\u2500 *\/\n\n  \/* Esconde conte\u00fado dos cards em mobile \u2014 o JS transforma em <details> *\/\n  .cms-mob-accordion .cms-card-body,\n  .cms-mob-accordion .cms-process-content > p,\n  .cms-mob-accordion .cms-cap-body,\n  .cms-mob-accordion .cms-stack-tags,\n  .cms-mob-accordion .cms-card-dark > p { display: none; }\n\n  \/* Estilo do summary gerado pelo JS *\/\n  .cms-mob-summary {\n    list-style: none;\n    cursor: pointer;\n    font-family: var(--cms-font);\n    font-size: 0.9rem;\n    font-weight: 700;\n    color: var(--cms-dark);\n    padding: 1rem 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 0.75rem;\n    user-select: none;\n    border-bottom: 1px solid var(--cms-gray-3);\n  }\n  .cms-mob-summary::-webkit-details-marker { display: none; }\n  .cms-mob-summary::after {\n    content: \"+\";\n    font-size: 1.2rem;\n    font-weight: 300;\n    color: var(--cms-gray-5);\n    flex-shrink: 0;\n    line-height: 1;\n  }\n  details[open] > .cms-mob-summary::after { content: \"\u2212\"; }\n\n  \/* Conte\u00fado aberto \u2014 preserva os estilos visuais originais *\/\n  .cms-mob-body {\n    padding: 1rem 1.25rem 1.25rem;\n    border-bottom: 1px solid var(--cms-gray-3);\n    background: var(--cms-white);\n    border-left: 3px solid var(--cms-blue);\n    border-radius: 0 0 var(--cms-radius) var(--cms-radius);\n  }\n  .cms-mob-body p {\n    font-size: 0.875rem;\n    color: var(--cms-body);\n    line-height: 1.7;\n    margin-bottom: 0.5rem;\n  }\n  .cms-mob-body p:last-child { margin-bottom: 0; }\n\n  \/* Tags dentro do acorde\u00e3o aberto *\/\n  .cms-mob-body .cms-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    padding-top: 0.25rem;\n  }\n\n  \/* Dark section \u2014 corpo do acorde\u00e3o diferente *\/\n  .cms-bg-dark .cms-mob-body {\n    background: rgba(255,255,255,0.06);\n    border-color: var(--cms-blue);\n    border-left-width: 3px;\n  }\n  .cms-bg-dark .cms-mob-body p { color: rgba(255,255,255,0.65); }\n  .cms-bg-dark .cms-mob-summary { color: #fff; border-color: rgba(255,255,255,0.15); }\n  .cms-bg-dark .cms-mob-summary::after { color: rgba(255,255,255,0.4); }\n\n  \/* Cards em mobile: flat, sem border pr\u00f3pria (o acorde\u00e3o assume) *\/\n  .cms-mob-accordion .cms-card {\n    border-radius: 0;\n    border: none;\n    padding: 0;\n    box-shadow: none;\n    background: transparent;\n  }\n  .cms-mob-accordion .cms-card:hover { box-shadow: none; border-color: transparent; }\n  .cms-mob-accordion .cms-card-num { display: none; }\n\n  \/* Process list flat em mobile *\/\n  .cms-mob-accordion .cms-process-list {\n    border: none;\n    border-radius: 0;\n    border-top: 1px solid var(--cms-gray-3);\n  }\n  .cms-mob-accordion .cms-process-item { display: block; border: none; }\n  .cms-mob-accordion .cms-process-num { display: none; }\n  .cms-mob-accordion .cms-process-content { padding: 0; }\n\n  \/* Capability rows flat *\/\n  .cms-mob-accordion .cms-capability-row { display: block; padding: 0; border: none; }\n  .cms-mob-accordion .cms-cap-label { display: none; }\n\n  \/* Stack groups \u2014 elimina margem e espa\u00e7os fantasma *\/\n  .cms-mob-accordion .cms-stack-group { margin-bottom: 0; }\n  .cms-mob-accordion .cms-stack-label { display: none; }\n  .cms-mob-accordion .cms-two-col { gap: 0; }\n\n  \/* Dark cards flat *\/\n  .cms-mob-accordion .cms-card-dark {\n    background: transparent;\n    border: none;\n    border-radius: 0;\n    padding: 0;\n  }\n  .cms-mob-accordion .cms-card-dark h4 { display: none; }\n}\n.elementor-section.py-5 {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n\n.elementor-container.py-lg-5,\n.elementor-container.py-md-2 {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n.elementor-container.my-2 {\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n}\n.elementor-widget-wrap.elementor-element-populated {\n  padding: 0 !important;\n}\n.cms-faq-list details.cms-faq:last-child {\n  border-bottom: none;\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     MOBILE ACCORDION SCRIPT\n     Converte cards, process steps, capabilities, stack e dark\n     cards em <details> em ecr\u00e3s \u2264 480px.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n(function () {\n  var BREAKPOINT = 480;\n\n  function getTitle(el) {\n    \/* Tenta extrair o t\u00edtulo do elemento de v\u00e1rias formas *\/\n    var h3 = el.querySelector('h3');\n    if (h3) return h3.textContent.trim();\n    var h4 = el.querySelector('h4');\n    if (h4) return h4.textContent.trim();\n    var num = el.querySelector('.cms-card-num');\n    if (num) return num.textContent.trim();\n    var lbl = el.querySelector('.cms-cap-label');\n    if (lbl) return lbl.textContent.trim();\n    var slbl = el.querySelector('.cms-stack-label');\n    if (slbl) return slbl.textContent.trim();\n    var pnum = el.querySelector('.cms-process-num');\n    if (pnum) {\n      var pcontent = el.querySelector('.cms-process-content h3');\n      return pcontent ? pnum.textContent.trim() + ' \u2014 ' + pcontent.textContent.trim() : pnum.textContent.trim();\n    }\n    return '\u2014';\n  }\n\n  function getBody(el) {\n    \/* Extrai o conte\u00fado em texto\/HTML *\/\n    var body = el.querySelector('.cms-card-body');\n    if (body) return body.innerHTML;\n\n    \/* Process item: pega no <p> dentro de .cms-process-content *\/\n    var pc = el.querySelector('.cms-process-content');\n    if (pc) {\n      var ps = pc.querySelectorAll('p');\n      if (ps.length) return Array.from(ps).map(function(p){ return p.outerHTML; }).join('');\n    }\n\n    \/* Capability row: pega no .cms-cap-body *\/\n    var cb = el.querySelector('.cms-cap-body');\n    if (cb) return cb.innerHTML;\n\n    \/* Stack group: pega nas tags *\/\n    var st = el.querySelector('.cms-stack-tags');\n    if (st) return st.outerHTML;\n\n    \/* Dark card: pega no <p> *\/\n    var dp = el.querySelector('p');\n    if (dp) return dp.outerHTML;\n\n    \/* Fallback: todo o innerHTML menos o h3\/h4\/num *\/\n    return el.innerHTML;\n  }\n\n  function buildAccordion(container) {\n    \/* Selecciona todos os elementos convert\u00edveis dentro do container *\/\n    var selectors = [\n      '.cms-card-grid-3 > .cms-card',\n      '.cms-card-grid-2 > .cms-card',\n      '.cms-process-item',\n      '.cms-capability-row',\n      '.cms-stack-group',\n      '.cms-card-dark'\n    ];\n\n    selectors.forEach(function(sel) {\n      container.querySelectorAll(sel).forEach(function(el) {\n        \/* J\u00e1 foi convertido *\/\n        if (el.dataset.mobileAccordion) return;\n        el.dataset.mobileAccordion = '1';\n\n        var title = getTitle(el);\n        var bodyHtml = getBody(el);\n\n        \/* Cria o <details> *\/\n        var details = document.createElement('details');\n        var summary = document.createElement('summary');\n        summary.className = 'cms-mob-summary';\n        summary.textContent = title;\n\n        var bodyDiv = document.createElement('div');\n        bodyDiv.className = 'cms-mob-body';\n        bodyDiv.innerHTML = bodyHtml;\n\n        details.appendChild(summary);\n        details.appendChild(bodyDiv);\n\n        \/* Substitui o elemento original *\/\n        el.parentNode.insertBefore(details, el);\n        el.style.display = 'none';\n        el.dataset.mobileHidden = '1';\n      });\n    });\n\n    container.classList.add('cms-mob-accordion');\n  }\n\n  function destroyAccordion(container) {\n    \/* Restaura os elementos originais *\/\n    container.querySelectorAll('[data-mobile-hidden=\"1\"]').forEach(function(el) {\n      el.style.display = '';\n      delete el.dataset.mobileHidden;\n      delete el.dataset.mobileAccordion;\n    });\n    container.querySelectorAll('details').forEach(function(d) {\n      if (d.querySelector('.cms-mob-summary')) d.remove();\n    });\n    container.classList.remove('cms-mob-accordion');\n  }\n\n  var activeBreakpoint = null;\n\n  function applyBreakpoint() {\n    var isMobile = window.innerWidth <= BREAKPOINT;\n\n    if (isMobile && activeBreakpoint !== 'mobile') {\n      activeBreakpoint = 'mobile';\n      document.querySelectorAll('.cms').forEach(buildAccordion);\n    } else if (!isMobile && activeBreakpoint === 'mobile') {\n      activeBreakpoint = 'desktop';\n      document.querySelectorAll('.cms').forEach(destroyAccordion);\n    }\n  }\n\n  \/* Corre no load e no resize *\/\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', applyBreakpoint);\n  } else {\n    applyBreakpoint();\n  }\n\n  var resizeTimer;\n  window.addEventListener('resize', function () {\n    clearTimeout(resizeTimer);\n    resizeTimer = setTimeout(applyBreakpoint, 150);\n  });\n})();\n<\/script>\n\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc7b6ed code-block elementor-widget elementor-widget-html\" data-id=\"cc7b6ed\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     UX\/UI DESIGN HUB \u2014 01 HERO\n     Fundo: branco\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"cms cms-section\">\n  <div class=\"cms-inner\">\n    <div class=\"cms-hero-grid\">\n      <div>\n        <span class=\"cms-eyebrow\">UX\/UI Design Hub<\/span>\n        <h2 class=\"cms-h1\" style=\"font-size:clamp(2rem,5vw,3.25rem);font-weight:800;letter-spacing:-0.03em;margin-bottom:1.5rem;color:var(--cms-dark);\">\n          Entwerfen Sie das<br><span style=\"color:var(--cms-blue);\">Schiffe wie entworfen<\/span>\n        <\/h2>\n        <p style=\"font-size:1.05rem;line-height:1.75;color:var(--cms-body);max-width:520px;\">\n          Wir gestalten Benutzeroberfl\u00e4chen f\u00fcr Web-, Mobil- und Automobilplattformen. Die Arbeit basiert auf Nutzerforschung, orientiert sich an Standards der Barrierefreiheit und ist detailliert genug spezifiziert, dass das Entwicklungsteam sie ohne Interpretationsspielraum umsetzen kann.\n        <\/p>\n        <div class=\"cms-hero-actions\">\n          <a href=\"https:\/\/caixamagica.pt\/de\/kontakt\/\" class=\"cms-btn\">Projekt starten<\/a>\n          <a href=\"https:\/\/caixamagica.pt\/de\/erfolgsgeschichten\/\" class=\"cms-btn-outline\">Sehen Sie sich unsere Arbeit an<\/a>\n        <\/div>\n      <\/div>\n      <div class=\"cms-hero-img\">\n        <img decoding=\"async\" src=\"https:\/\/caixamagica.pt\/wp-content\/uploads\/2023\/09\/Img_UX_UI.png\" alt=\"Caixa M\u00e1gica UX\/UI Design Hub\">\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96da6df code-block elementor-widget elementor-widget-html\" data-id=\"96da6df\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     UX\/UI DESIGN HUB \u2014 03 PLATFORMS\n     Fundo: branco\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"cms cms-bleed cms-bg-white cms-section\">\n  <div class=\"cms-inner\">\n    <span class=\"cms-eyebrow\">Plattformen<\/span>\n    <h2 class=\"cms-h2\">Was wir entwerfen<\/h2>\n   <h3 style=\"font-size:1.05rem;font-weight:700;color:var(--cms-dark);margin-bottom:0.75rem;font-family:var(--cms-font);\">Von b\u00fcrgerorientierten Portalen bis hin zu Automotive HMI<\/h3>\n<p style=\"font-size:0.95rem;line-height:1.75;color:var(--cms-body);margin-bottom:2rem;\">Unsere UX\/UI-Arbeit erstreckt sich \u00fcber \u00f6ffentliche Plattformen, die von Millionen von B\u00fcrgern genutzt werden, mobile Anwendungen f\u00fcr Au\u00dfendienstmitarbeiter, Enterprise-Backoffice-Tools und fahrzeugintegrierte Mensch-Maschine-Schnittstellen. In jedem Fall sind die Designbeschr\u00e4nkungen kontextspezifisch. Daher entwerfen wir von Anfang an plattformspezifisch, anstatt einen generischen Ansatz zu verfolgen.<\/p>\n    <div class=\"cms-card-grid-2\">\n      <div class=\"cms-card\">\n        <span class=\"cms-card-num\">01<\/span>\n        <h3>Web-Plattformen<\/h3>\n        <p>Von Marketing-Websites bis hin zu komplexen Unternehmensportalen mit rollenbasierter Zugriffskontrolle, Mehrsprachigkeit und Transaktionsfl\u00fcssen mit hohem Volumen. Wir haben Schnittstellen f\u00fcr Plattformen des \u00f6ffentlichen Sektors entworfen, die von Millionen von B\u00fcrgern genutzt werden, Umgebungen, in denen die Einhaltung von Barrierefreiheitsstandards zwingend vorgeschrieben ist und die Kosten einer verwirrenden Benutzeroberfl\u00e4che sich in Supportanrufen niederschlagen.<\/p>\n      <\/div>\n      <div class=\"cms-card\">\n        <span class=\"cms-card-num\">02<\/span>\n        <h3>Mobile Anwendungen<\/h3>\n        <p>Native und plattform\u00fcbergreifende Benutzeroberfl\u00e4chen f\u00fcr Android und iOS. Wir gestalten unter Ber\u00fccksichtigung der Einschr\u00e4nkungen von Mobilger\u00e4ten: begrenzter Bildschirmplatz, Touch-Interaktionen, variable Konnektivit\u00e4t. Gutes Mobile Design ist kein komprimiertes Desktop-Design. Es ist ein Erlebnis, das darauf aufgebaut ist, wie Menschen ein Ger\u00e4t tats\u00e4chlich nutzen, oft abgelenkt, oft unterwegs.<\/p>\n      <\/div>\n      <div class=\"cms-card\">\n        <span class=\"cms-card-num\">03<\/span>\n        <h3>Unternehmenssoftware<\/h3>\n        <p>Back-Office-Tools, operative Dashboards, Datenmanagementsysteme und Workflow-Schnittstellen. Dies sind Umgebungen, in denen Benutzer acht Stunden am Tag verbringen. Die Priorit\u00e4t liegt auf Effizienz und Klarheit: Reduzierung der kognitiven Belastung, Minimierung von Fehlerraten und Lesbarkeit komplexer Daten ohne Schulungsaufwand.<\/p>\n      <\/div>\n      <div class=\"cms-card\">\n        <span class=\"cms-card-num\">04<\/span>\n        <h3>Automobil-HMI<\/h3>\n        <p>Mensch-Maschine-Schnittstellen-Design f\u00fcr fahrzeugintegrierte Systeme, eine Spezialdisziplin mit eigenen Sicherheitsbeschr\u00e4nkungen und Interaktionsmustern. Wir haben mit Blickzeitstandards, Reduzierung von Ablenkungen, der Integration von Touch- und physischen Bedienelementen sowie der Herausforderung, f\u00fcr Benutzer zu gestalten, die den Bildschirm nur f\u00fcr einen kurzen Moment betrachten k\u00f6nnen, gearbeitet.<\/p>\n      <\/div>\n    <\/div>\n\n    <div style=\"margin-top:1.25rem;padding:1.75rem;background:var(--cms-gray-1);border-radius:12px;\">\n      <h3 style=\"font-size:1rem;margin-bottom:0.6rem;\">Design-Systeme<\/h3>\n      <p style=\"font-size:0.875rem;color:var(--cms-body);line-height:1.75;\">F\u00fcr Kunden, die in gro\u00dfem Umfang bauen, erstellen wir Komponentenbibliotheken und Designsysteme, die Entwicklungsteams einen konsistenten, wiederverwendbaren Satz von Bausteinen bieten. Ein gut durchdachtes Designsystem schlie\u00dft die L\u00fccke zwischen Design und Entwicklung, h\u00e4lt das Produkt visuell konsistent, w\u00e4hrend es w\u00e4chst, und bedeutet, dass neue Bildschirme erstellt werden k\u00f6nnen, ohne dass ein Designer jede Entscheidung \u00fcberpr\u00fcfen muss. Wir erstellen diese in Figma mit vollst\u00e4ndiger Komponenten-Dokumentation und arbeiten mit der technischen Abteilung zusammen, um sicherzustellen, dass das System sauber auf das von ihnen gew\u00e4hlte Framework abgebildet wird.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9fb7ca4 code-block elementor-widget elementor-widget-html\" data-id=\"9fb7ca4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     UX\/UI DESIGN HUB \u2014 04 PROCESS\n     Fundo: #f3f6ff\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"cms cms-bleed cms-bg-light cms-section\">\n  <div class=\"cms-inner\">\n    <span class=\"cms-eyebrow\">Prozess<\/span>\n    <h2 class=\"cms-h2\">Wie wir entwerfen<\/h2>\n   <h3 style=\"font-size:1.05rem;font-weight:700;color:var(--cms-dark);margin-bottom:0.75rem;font-family:var(--cms-font);\">Warum fr\u00fches Testen wichtig ist<\/h3>\n<p style=\"font-size:0.95rem;line-height:1.75;color:var(--cms-body);margin-bottom:2rem;\">Ein Usability-Problem, das im Wireframe-Stadium gefunden wird, kostet einen Designer eine Stunde zur Behebung. Dasselbe Problem, das nach der Entwicklung entdeckt wird, erfordert Wochen zur Behebung und birgt das Risiko, bereits funktionierende Komponenten zu destabilisieren. In der Praxis bedeutet dies, dass wir Usability-Sitzungen in jeder Phase durchf\u00fchren \u2013 nicht nur am Ende, wenn die Behebung von Problemen teuer ist.<\/p>\n\n    <div class=\"cms-process-list\">\n      <div class=\"cms-process-item\">\n        <div class=\"cms-process-num\">01<\/div>\n        <div class=\"cms-process-content\">\n          <h3>Nutzerforschung<\/h3>\n          <p>Wir sprechen mit den Menschen, die das Produkt nutzen werden. F\u00fcr Unternehmenssoftware bedeutet dies Sitzungen mit Betriebsteams, Kundendienstmitarbeitern oder Au\u00dfendienstmitarbeitern, die t\u00e4glich in der Benutzeroberfl\u00e4che arbeiten werden. Bei Verbraucherprodukten bedeutet dies strukturierte Tests mit Zielbenutzern, bevor ein einziges hochdetailliertes Mockup erstellt wird. Der Umfang der Forschung passt sich dem Projektzeitplan an, aber wir \u00fcberspringen ihn niemals.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"cms-process-item\">\n        <div class=\"cms-process-num\">02<\/div>\n        <div class=\"cms-process-content\">\n          <h3>Informationsarchitektur<\/h3>\n          <p>Bevor wir uns Gedanken dar\u00fcber machen, wie etwas aussieht, legen wir fest, wie Inhalte und Funktionalit\u00e4t organisiert werden sollen. Die richtige Struktur ist das, was ein Produkt, das die Nutzer navigieren k\u00f6nnen, von einem unterscheidet, das eine Einarbeitung erfordert. Tree Testing und Card Sorting mit echten Nutzern validieren die IA, bevor wir uns f\u00fcr sie entscheiden.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"cms-process-item\">\n        <div class=\"cms-process-num\">03<\/div>\n        <div class=\"cms-process-content\">\n          <h3>Wireframes und Prototyping<\/h3>\n          <p>Interaktive Prototypen, die vor Beginn der Entwicklung getestet werden k\u00f6nnen. Usability-Tests in der Wireframe-Phase decken strukturelle Probleme und Probleme im Ablauf auf, solange deren Behebung noch kosteng\u00fcnstig ist. Der Prototyp entspricht dem tats\u00e4chlichen Produkt so gut, dass die Nutzer auf n\u00fctzliche und aufschlussreiche Weise verwirrt werden.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"cms-process-item\">\n        <div class=\"cms-process-num\">04<\/div>\n        <div class=\"cms-process-content\">\n          <h3>High-Fidelity-Design und -Spezifikation<\/h3>\n          <p>Visuelles Design, Komponenten-Spezifikationen, Interaktionsnotizen f\u00fcr nicht standardm\u00e4\u00dfige Verhalten und ein Styleguide. Barrierefreiheit wird in dieser Phase integriert: Farbkontrast nach WCAG 2.1 AA, Tastaturnavigation, Screenreader-Kompatibilit\u00e4t, Touch-Target-Gr\u00f6\u00dfen. Dies ist keine Checkliste, die wir am Ende durchgehen.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"cms-process-item\">\n        <div class=\"cms-process-num\">05<\/div>\n        <div class=\"cms-process-content\">\n          <h3>Implementierungs-QA<\/h3>\n          <p>Wir \u00fcberpr\u00fcfen die erstellte Benutzeroberfl\u00e4che vor dem Start, um sicherzustellen, dass die Implementierung der Designabsicht entspricht. Dies ist bei jedem Engagement Standard. Ohne diesen Schritt werden Designs nicht wie geplant ausgeliefert, da die L\u00fccke zwischen einer Figma-Datei und einer gerenderten Benutzeroberfl\u00e4che der Ort ist, an dem die meisten visuellen Inkonsistenzen auftreten.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2578bb code-block elementor-widget elementor-widget-html\" data-id=\"e2578bb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"cms cms-bleed cms-bg-dark cms-section\">\r\n  <div class=\"cms-inner\">\r\n    <span class=\"cms-dark-eyebrow\">Warum es wichtig ist<\/span>\r\n    <h2 class=\"cms-h2 cms-h2-white\">Designer, die mit den Ingenieuren zusammenarbeiten, die bauen<\/h2>\r\n    <div class=\"cms-two-col\" style=\"margin-top:2.5rem;\">\r\n      <div>\r\n        <p style=\"font-size:0.9rem;color:rgba(255,255,255,0.65);line-height:1.75;\">Designer, die nur gestalten und nicht mit Ingenieuren in der Produktion zusammenarbeiten, entwickeln Gewohnheiten, die die Implementierung erschweren. Interaktionszust\u00e4nde werden nicht ber\u00fccksichtigt. Animationen werden spezifiziert, deren Erstellung teuer ist. Komponenten werden erstellt, ohne dar\u00fcber nachzudenken, wie sie bei unterschiedlichen Datenl\u00e4ngen und Bildschirmgr\u00f6\u00dfen skalieren.<\/p>\r\n        <p style=\"font-size:0.9rem;color:rgba(255,255,255,0.65);line-height:1.75;margin-top:0.75rem;\">Unsere Designer wissen, was gebaut wird, von wem und in welchem Rahmenwerk. Das Ergebnis ist eine reibungslose \u00dcbergabe und Schnittstellen, die tats\u00e4chlich so ausgeliefert werden, wie sie entworfen wurden.<\/p>\r\n        <p style=\"font-size:0.9rem;color:rgba(255,255,255,0.65);line-height:1.75;margin-top:0.75rem;\">F\u00fcr Kunden, die mit ihrem eigenen Entwicklungsteam zusammenarbeiten, stellen wir Figma-Deliverables mit dem erforderlichen Spezifikationsgrad zur Verf\u00fcgung, der R\u00e4tselraten \u00fcberfl\u00fcssig macht.<\/p>\r\n      <\/div>\r\n      <div>\r\n        <div class=\"cms-diff-point\">\r\n          <h4>Framework-bewusstes Design<\/h4>\r\n          <p>Wir gestalten nach dem Komponentenmodell von Angular, React oder Vue. Komponenten sind realistisch zu implementieren, keine idealisierten Entw\u00fcrfe, die vor der Auslieferung neu entwickelt werden m\u00fcssen.<\/p>\r\n        <\/div>\r\n        <div class=\"cms-diff-point\">\r\n          <h4>WCAG 2.1 AA als Standard<\/h4>\r\n          <p>Barrierefreiheit ist in jeder Spezifikation integriert: Farbkontrast, Tastaturnavigation, Screenreader-Kompatibilit\u00e4t, Touch-Ziele. Keine Checkliste nach dem Start.<\/p>\r\n        <\/div>\r\n        <div class=\"cms-diff-point\">\r\n          <h4>Inkrementelle Verbesserung verf\u00fcgbar<\/h4>\r\n          <p>Wir pr\u00fcfen die bestehende Benutzeroberfl\u00e4che, identifizieren die gr\u00f6\u00dften Probleme und gestalten spezifische Abl\u00e4ufe neu, ohne dass ein vollst\u00e4ndiger Umbau erforderlich ist. Messbare Verbesserungen mit geringerem Risiko und geringeren Kosten.<\/p>\r\n        <\/div>\r\n        <div class=\"cms-diff-point\">\r\n          <h4>Qualit\u00e4tssicherung nach dem Erstellen enthalten<\/h4>\r\n          <p>Wir \u00fcberpr\u00fcfen die erstellte Benutzeroberfl\u00e4che vor der Ver\u00f6ffentlichung. So werden Designs tats\u00e4chlich wie entworfen ausgeliefert, und dies ist Standard bei jeder Beauftragung.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46b3502 code-block elementor-widget elementor-widget-html\" data-id=\"46b3502\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     UX\/UI DESIGN HUB \u2014 07 FAQ\n     Fundo: #f3f6ff\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"cms cms-bleed cms-bg-light cms-section\">\n  <div class=\"cms-inner\">\n    <span class=\"cms-eyebrow\">FAQ<\/span>\n    <h2 class=\"cms-h2\">H\u00e4ufig gestellte Fragen<\/h2>\n    <p class=\"cms-lead\">Was Kunden typischerweise fragen, bevor sie eine Design-Beauftragung beginnen.<\/p>\n    <div class=\"cms-faq-list\">\n      <details class=\"cms-faq\">\n        <summary>Was ist der Unterschied zwischen UX Design und UI Design?<\/summary>\n        <div class=\"cms-faq-body\"><p>UX-Design befasst sich damit, wie ein Produkt funktioniert: die Informationsstruktur, der Aufgabenfluss und ob Benutzer ihre Ziele effizient erreichen k\u00f6nnen. UI-Design befasst sich damit, wie es aussieht: die visuelle Sprache, Komponenten und \u00e4sthetische Konsistenz. Gutes Produktdesign erfordert beides. UX ohne UI erzeugt funktionale, aber unattraktive Software. UI ohne UX erzeugt attraktive Software, die frustrierend zu bedienen ist.<\/p><\/div>\n      <\/details>\n      <details class=\"cms-faq\">\n        <summary>Wie gehen Sie an Barrierefreiheit heran?<\/summary>\n        <div class=\"cms-faq-body\"><p>Wir gestalten nach WCAG 2.1 AA als Standard-Baseline. F\u00fcr \u00f6ffentliche Projekte in Portugal und der EU gestalten wir nach den h\u00f6heren Barrierefreiheitsanforderungen, die durch europ\u00e4ische Gesetzgebung vorgeschrieben sind. Barrierefreiheit ist von Anfang an integriert: Kontrastverh\u00e4ltnisse, Tastaturnavigationspfade, Screenreader-Beschriftungen und Touch-Zielfl\u00e4chen sind Teil jeder Spezifikation.<\/p><\/div>\n      <\/details>\n      <details class=\"cms-faq\">\n        <summary>F\u00fchren Sie User Research durch, bevor Sie entwerfen?<\/summary>\n        <div class=\"cms-faq-body\"><p>Ja, immer. F\u00fcr eine gro\u00dfe Unternehmensplattform k\u00f6nnten das strukturierte Interviews mit 15 bis 20 Benutzern, Card Sorting, Tree Testing und mehrere Runden Usability-Tests bedeuten. F\u00fcr ein fokussiertes Redesign k\u00f6nnten es f\u00fcnf moderierte Usability-Sitzungen mit bestehenden Benutzern sein. Der Ansatz passt sich dem Projekt an, aber Benutzerforschung wird nie \u00fcbersprungen. Designdecisions, die ohne Benutzereinbeziehung getroffen werden, sind reine Vermutungen.<\/p><\/div>\n    <\/details>\n      <h3 style=\"font-size:1.2rem;font-weight:800;color:var(--cms-dark);margin-top:1.5rem;margin-bottom:0;font-family:var(--cms-font);\">Arbeitsprozess und Ergebnisse<\/h3>\n      <\/details>\n      <details class=\"cms-faq\">\n        <summary>Kann man ein bestehendes Produkt verbessern, ohne es von Grund auf neu zu bauen?<\/summary>\n        <div class=\"cms-faq-body\"><p>Ja, und dies ist eines der g\u00e4ngigsten Projekte, die wir durchf\u00fchren. Wir \u00fcberpr\u00fcfen die bestehende Benutzeroberfl\u00e4che, identifizieren die Probleme mit den gr\u00f6\u00dften Auswirkungen und \u00fcberarbeiten spezifische Komponenten oder Abl\u00e4ufe. Dies liefert messbare Verbesserungen ohne das Risiko und die Kosten eines vollst\u00e4ndigen Neuanfangs.<\/p><\/div>\n      <\/details>\n      <details class=\"cms-faq\">\n        <summary>Wie arbeiten Sie mit unserem Entwicklungsteam zusammen?<\/summary>\n        <div class=\"cms-faq-body\"><p>Wir liefern Figma-Dateien mit vollst\u00e4ndigen Komponentenspezifikationen, Interaktionshinweisen f\u00fcr nicht standardm\u00e4\u00dfige Verhaltensweisen, einem Styleguide und einem Komponenteninventar. Wenn Ihr Team React, Angular oder Vue verwendet, gestalten wir nach dem Komponentenmodell dieses Frameworks. Eine QA-\u00dcberpr\u00fcfung der erstellten Benutzeroberfl\u00e4che vor der Ver\u00f6ffentlichung ist in jedem Auftrag enthalten.<\/p><\/div>\n      <\/details>\n      <details class=\"cms-faq\">\n        <summary>Was kostet ein Design-Engagement und wie lange dauert es?<\/summary>\n        <div class=\"cms-faq-body\"><p>Ein UX-Audit und Neudesign eines bestimmten Produktbereichs dauert in der Regel 4 bis 8 Wochen. Eine komplette Produktgestaltung, von der Nutzerforschung bis hin zu einem vollst\u00e4ndigen Designsystem, dauert je nach Produktkomplexit\u00e4t 3 bis 6 Monate. Wir legen den Umfang f\u00fcr jede Zusammenarbeit nach einem ersten Gespr\u00e4ch individuell fest.<\/p><\/div>\n      <\/details>\n    <\/div>\n  <\/div>\n<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-432de55 code-block elementor-widget elementor-widget-html\" data-id=\"432de55\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     UX\/UI DESIGN HUB \u2014 08 CTA\n     Fundo: #2170F2\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"cms cms-bleed cms-bg-blue cms-section cms-no-gap\">\n  <div class=\"cms-cta-inner\">\n    <h2 class=\"cms-h2 cms-h2-white\">Haben Sie ein Produkt zu entwerfen?<\/h2>\n    <p>Erz\u00e4hlen Sie uns, was Sie entwickeln und wer es nutzen wird. Wir antworten innerhalb eines Werktages.<\/p>\n    <a href=\"https:\/\/caixamagica.pt\/de\/kontakt\/\" class=\"cms-btn-white\">Lass uns reden<\/a>\n  <\/div>\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5102321 code-block elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"5102321\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n\r\n\r\n\r\n\r\n<script type=\"application\/ld+json\">{\n    \"@context\": \"https:\\\/\\\/schema.org\",\n    \"@graph\": [\n        {\n            \"@type\": \"WebPage\",\n            \"@id\": \"https:\\\/\\\/caixamagica.pt\\\/de\\\/ux-ui-design-hub\\\/#webpage\",\n            \"url\": \"https:\\\/\\\/caixamagica.pt\\\/de\\\/ux-ui-design-hub\\\/\",\n            \"inLanguage\": \"de-DE\",\n            \"name\": \"UX\\\/UI Design Hub - Benutzererfahrung und Schnittstellendesign - Caixa M\\u00e1gica\",\n            \"description\": \"Spezialisierte Beratung f\\u00fcr UX\\\/UI-Design, die sich auf die Erstellung intuitiver und barrierefreier Schnittstellen f\\u00fcr komplexe Software-\\u00d6kosysteme konzentriert.\",\n            \"breadcrumb\": {\n                \"@type\": \"BreadcrumbList\",\n                \"itemListElement\": [\n                    {\n                        \"@type\": \"ListItem\",\n                        \"position\": 1,\n                        \"name\": \"Home\",\n                        \"item\": \"https:\\\/\\\/caixamagica.pt\\\/de\\\/\"\n                    },\n                    {\n                        \"@type\": \"ListItem\",\n                        \"position\": 2,\n                        \"name\": \"UX\\\/UI Hub\"\n                    }\n                ]\n            }\n        },\n        {\n            \"@type\": \"Service\",\n            \"name\": \"UX\\\/UI Design- und Beratungsdienstleistungen\",\n            \"serviceType\": \"User Experience and Interface Design\",\n            \"provider\": {\n                \"@id\": \"https:\\\/\\\/caixamagica.pt\\\/#organization\"\n            },\n            \"description\": \"Benutzerzentriertes Design, Erstellung von Design Systems und Usability-Audits f\\u00fcr digitale Hochleistungsprodukte.\",\n            \"knowsAbout\": [\n                \"Benutzerzentriertes Design (UCD)\",\n                \"Design Thinking\",\n                \"Design Systems\",\n                \"Barrierefreiheit (WCAG)\",\n                \"Prototyping & Wireframing\",\n                \"Usability-Tests\"\n            ],\n            \"hasOfferCatalog\": {\n                \"@type\": \"OfferCatalog\",\n                \"name\": \"UX\\\/UI-Dienstleistungskatalog\",\n                \"itemListElement\": [\n                    {\n                        \"@type\": \"Offer\",\n                        \"itemOffered\": {\n                            \"@type\": \"Service\",\n                            \"name\": \"Usability-Audits\"\n                        }\n                    },\n                    {\n                        \"@type\": \"Offer\",\n                        \"itemOffered\": {\n                            \"@type\": \"Service\",\n                            \"name\": \"Skalierbare Design Systems\"\n                        }\n                    },\n                    {\n                        \"@type\": \"Offer\",\n                        \"itemOffered\": {\n                            \"@type\": \"Service\",\n                            \"name\": \"Web- und Mobile-UI-Design\"\n                        }\n                    }\n                ]\n            }\n        }\n    ]\n}<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>UX\/UI Design Hub Design thatships as designed We design interfaces for web, mobile, and automotive platforms. The work is grounded in user research, built to accessibility standards and specified in enough detail that the engineering team can build it without interpretation. Start a project See our work Platforms What we design From citizen-scale portals to [&hellip;]<\/p>","protected":false},"author":6,"featured_media":8496,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-12260","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UX\/UI Design Hub | Web, Mobile &amp; Automotive<\/title>\n<meta name=\"description\" content=\"Caixa M\u00e1gica&#039;s UX\/UI Design Hub creates interfaces for web, mobile and automotive. User research, prototyping and accessibility included.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/caixamagica.pt\/de\/ux-ui-design-hub\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX\/UI Design Hub | Web, Mobile &amp; Automotive\" \/>\n<meta property=\"og:description\" content=\"Caixa M\u00e1gica&#039;s UX\/UI Design Hub creates interfaces for web, mobile and automotive. User research, prototyping and accessibility included.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/caixamagica.pt\/de\/ux-ui-design-hub\/\" \/>\n<meta property=\"og:site_name\" content=\"Caixa M\u00e1gica Software\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CaixaMagicaSoftware\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-14T14:19:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/caixamagica.pt\/wp-content\/uploads\/2025\/09\/Img_UX_UI-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"8\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/caixamagica.pt\/ux-ui-design-hub\/\",\"url\":\"https:\/\/caixamagica.pt\/ux-ui-design-hub\/\",\"name\":\"UX\/UI Design Hub | Web, Mobile & Automotive\",\"isPartOf\":{\"@id\":\"https:\/\/caixamagica.pt\/#website\"},\"datePublished\":\"2025-09-26T13:38:38+00:00\",\"dateModified\":\"2026-07-14T14:19:25+00:00\",\"description\":\"Caixa M\u00e1gica's UX\/UI Design Hub creates interfaces for web, mobile and automotive. User research, prototyping and accessibility included.\",\"breadcrumb\":{\"@id\":\"https:\/\/caixamagica.pt\/ux-ui-design-hub\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/caixamagica.pt\/ux-ui-design-hub\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/caixamagica.pt\/ux-ui-design-hub\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/caixamagica.pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX\/UI Design Hub\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/caixamagica.pt\/#website\",\"url\":\"https:\/\/caixamagica.pt\/\",\"name\":\"Caixa M\u00e1gica Software\",\"description\":\"Caixa Magica Software create technological solutions in the areas of mobile, web, and automotive, with over 19 years of experience in developing for various market segments.\",\"publisher\":{\"@id\":\"https:\/\/caixamagica.pt\/#organization\"},\"alternateName\":\"CMS\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/caixamagica.pt\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/caixamagica.pt\/#organization\",\"name\":\"Caixa M\u00e1gica Software\",\"alternateName\":\"CMS\",\"url\":\"https:\/\/caixamagica.pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/caixamagica.pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/caixamagica.pt\/wp-content\/uploads\/2023\/09\/cropped-Favicon-CMS-v2.png\",\"contentUrl\":\"https:\/\/caixamagica.pt\/wp-content\/uploads\/2023\/09\/cropped-Favicon-CMS-v2.png\",\"width\":512,\"height\":512,\"caption\":\"Caixa M\u00e1gica Software\"},\"image\":{\"@id\":\"https:\/\/caixamagica.pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/CaixaMagicaSoftware\",\"https:\/\/www.instagram.com\/caixamagicasoftware\/\",\"https:\/\/www.linkedin.com\/company\/caixa-magica-software\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX\/UI Design Hub | Web, Mobile &amp; Automotive","description":"Der UX\/UI Design Hub von Caixa M\u00e1gica erstellt Schnittstellen f\u00fcr Web, Mobilger\u00e4te und Automotive. User Research, Prototyping und Barrierefreiheit inklusive.","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:\/\/caixamagica.pt\/de\/ux-ui-design-hub\/","og_locale":"de_DE","og_type":"article","og_title":"UX\/UI Design Hub | Web, Mobile & Automotive","og_description":"Caixa M\u00e1gica's UX\/UI Design Hub creates interfaces for web, mobile and automotive. User research, prototyping and accessibility included.","og_url":"https:\/\/caixamagica.pt\/de\/ux-ui-design-hub\/","og_site_name":"Caixa M\u00e1gica Software","article_publisher":"https:\/\/www.facebook.com\/CaixaMagicaSoftware","article_modified_time":"2026-07-14T14:19:25+00:00","og_image":[{"width":900,"height":900,"url":"https:\/\/caixamagica.pt\/wp-content\/uploads\/2025\/09\/Img_UX_UI-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/caixamagica.pt\/ux-ui-design-hub\/","url":"https:\/\/caixamagica.pt\/ux-ui-design-hub\/","name":"UX\/UI Design Hub | Web, Mobile &amp; Automotive","isPartOf":{"@id":"https:\/\/caixamagica.pt\/#website"},"datePublished":"2025-09-26T13:38:38+00:00","dateModified":"2026-07-14T14:19:25+00:00","description":"Der UX\/UI Design Hub von Caixa M\u00e1gica erstellt Schnittstellen f\u00fcr Web, Mobilger\u00e4te und Automotive. User Research, Prototyping und Barrierefreiheit inklusive.","breadcrumb":{"@id":"https:\/\/caixamagica.pt\/ux-ui-design-hub\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/caixamagica.pt\/ux-ui-design-hub\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/caixamagica.pt\/ux-ui-design-hub\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/caixamagica.pt\/"},{"@type":"ListItem","position":2,"name":"UX\/UI Design Hub"}]},{"@type":"WebSite","@id":"https:\/\/caixamagica.pt\/#website","url":"https:\/\/caixamagica.pt\/","name":"Caixa M\u00e1gica Software","description":"Caixa Magica Software entwickelt technologische L\u00f6sungen in den Bereichen Mobile, Web und Automotive mit \u00fcber 19 Jahren Erfahrung in der Entwicklung f\u00fcr verschiedene Marktsegmente.","publisher":{"@id":"https:\/\/caixamagica.pt\/#organization"},"alternateName":"CMS","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/caixamagica.pt\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/caixamagica.pt\/#organization","name":"Caixa M\u00e1gica Software","alternateName":"CMS","url":"https:\/\/caixamagica.pt\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/caixamagica.pt\/#\/schema\/logo\/image\/","url":"https:\/\/caixamagica.pt\/wp-content\/uploads\/2023\/09\/cropped-Favicon-CMS-v2.png","contentUrl":"https:\/\/caixamagica.pt\/wp-content\/uploads\/2023\/09\/cropped-Favicon-CMS-v2.png","width":512,"height":512,"caption":"Caixa M\u00e1gica Software"},"image":{"@id":"https:\/\/caixamagica.pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/CaixaMagicaSoftware","https:\/\/www.instagram.com\/caixamagicasoftware\/","https:\/\/www.linkedin.com\/company\/caixa-magica-software"]}]}},"_links":{"self":[{"href":"https:\/\/caixamagica.pt\/de\/wp-json\/wp\/v2\/pages\/12260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caixamagica.pt\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/caixamagica.pt\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/caixamagica.pt\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/caixamagica.pt\/de\/wp-json\/wp\/v2\/comments?post=12260"}],"version-history":[{"count":97,"href":"https:\/\/caixamagica.pt\/de\/wp-json\/wp\/v2\/pages\/12260\/revisions"}],"predecessor-version":[{"id":14298,"href":"https:\/\/caixamagica.pt\/de\/wp-json\/wp\/v2\/pages\/12260\/revisions\/14298"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/caixamagica.pt\/de\/wp-json\/wp\/v2\/media\/8496"}],"wp:attachment":[{"href":"https:\/\/caixamagica.pt\/de\/wp-json\/wp\/v2\/media?parent=12260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}