{"id":25814080,"date":"2025-11-06T08:48:25","date_gmt":"2025-11-06T07:48:25","guid":{"rendered":"https:\/\/www.demomentsomtres.com\/?p=25814080"},"modified":"2026-03-19T09:45:29","modified_gmt":"2026-03-19T08:45:29","slug":"diseno-ux-ui-diseno-y-codigo","status":"publish","type":"post","link":"https:\/\/www.demomentsomtres.com\/es\/2025\/11\/diseno-ux-ui-diseno-y-codigo\/","title":{"rendered":"Cuando el dise\u00f1o y el c\u00f3digo hablan el mismo idioma. Euromus, un caso de \u00e9xito"},"content":{"rendered":"\n<p>El dise\u00f1o UX\/UI es mucho m\u00e1s que una capa bonita. Es la manera en que un producto digital explica su funcionamiento, gu\u00eda la decisi\u00f3n y reduce el ruido.  <\/p>\n\n<p>Cuando el dise\u00f1o y el c\u00f3digo hablan el mismo idioma, la experiencia se convierte en un relato \u00fanico: lo que ves es lo que pasa, y lo que pasa es lo que el producto te explica. <\/p>\n\n<p>Esta es la mirada que, en DeMomentSomTres, hemos aplicado a una plataforma cultural de referencia: <a href=\"https:\/\/www.ccalgir.es\/es\/\" target=\"_blank\" rel=\"noopener\">Euromus<\/a>, una soluci\u00f3n online de venta de actividades culturales ampliamente utilizada en el sector, que confi\u00f3 en nosotros para darle un impulso con criterio en t\u00e9rminos de experiencia de usuario, accesibilidad y coherencia entre pantallas. <\/p>\n\n<p>En este art\u00edculo compartimos aprendizajes que son \u00fatiles para cualquier equipo que quiera mejorar su producto mediante el dise\u00f1o UX\/UI.<\/p>\n\n<h2 class=\"wp-block-heading\">Euromus, un referente que suma miradas<\/h2>\n\n<p>Euromus no es un experimento, es una <strong>soluci\u00f3n implantada en m\u00faltiples instituciones<\/strong> culturales. De hecho, el an\u00e1lisis de la plataforma incluye referencias a implementaciones como <strong>VINSEUM<\/strong> y la <strong>Fundaci\u00f3n Joan Mir\u00f3<\/strong>, entre otras, que demuestran su alcance y su madurez dentro del sector. <\/p>\n\n<p><strong>Cuando una soluci\u00f3n de esta magnitud nos pide una auditor\u00eda y mejora, el reto no es \u201creinventar\u201d, sino afinar:<\/strong> reforzar el relato del producto para que el usuario avance con seguridad y garantizar que el c\u00f3digo respalde de forma coherente aquello que el dise\u00f1o comunica.<\/p>\n\n<p>Por eso, en este post incluiremos capturas de dos implementaciones que conocemos y apreciamos: VINSEUM (nos toca de cerca) y la Fundaci\u00f3n Joan Mir\u00f3 (una instituci\u00f3n de referencia para muchas personas de nuestro equipo). Este material nos ayudar\u00e1 a ilustrar patrones de buena experiencia en contextos reales.  <\/p>\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 significa que el dise\u00f1o y el c\u00f3digo hablen el mismo idioma?<\/h3>\n\n<p>Hablar el mismo idioma significa que el flujo de usuario queda claro desde el primer clic, que las reglas del producto se ven y se entienden, y que las acciones y los estados tienen una representaci\u00f3n visual coherente. En la pr\u00e1ctica: <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Un solo relato de producto.<\/strong> La secuencia de pasos es comprensible y predecible: selecci\u00f3n de fecha, actividad, tarifa y franja. El usuario sabe d\u00f3nde est\u00e1 y qu\u00e9 vendr\u00e1 despu\u00e9s.  <\/li>\n\n\n\n<li><strong>Contexto que no se pierde.<\/strong> Quan canvia la vista, l\u2019usuari no hauria de sentir que canvia el codi que governa les regles del joc. Mantenir el context i la visibilitat del que ha triat \u00e9s essencial per a la confian\u00e7a.  <\/li>\n\n\n\n<li><strong>Accesibilidad que suma.<\/strong> Un contraste adecuado, informaci\u00f3n textual que complemente a los iconos y una sem\u00e1ntica clara ayudan a todos y, adem\u00e1s, mejoran la conversi\u00f3n. <\/li>\n\n\n\n<li><strong>Consistencia entre pantallas y dispositivos.<\/strong> Lo que aprendes en un paso sirve para el siguiente, y tambi\u00e9n en m\u00f3vil. La coherencia forma parte del dise\u00f1o UX\/UI, no es un extra.  <\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"1031\" src=\"https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2025\/11\/proces-ccalgir-euromus-ux-ui.jpg\" alt=\"\" class=\"wp-image-25814116\" style=\"object-fit:cover\" title=\"\" srcset=\"https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2025\/11\/proces-ccalgir-euromus-ux-ui.jpg 1920w, https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2025\/11\/proces-ccalgir-euromus-ux-ui-1280x687.jpg 1280w, https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2025\/11\/proces-ccalgir-euromus-ux-ui-980x526.jpg 980w, https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2025\/11\/proces-ccalgir-euromus-ux-ui-480x258.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1920px, 100vw\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\">Nuestra mirada de auditor\u00eda en dise\u00f1o UX\/UI.<\/h2>\n\n<p>La auditor\u00eda la enfocamos con una mirada de producto: personas usuarias, objetivos del negocio y l\u00f3gica de la plataforma. La documentaci\u00f3n de trabajo estructura el an\u00e1lisis en contexto, UX, accesibilidad, comportamiento responsivo y propuestas de mejora, para asegurar una visi\u00f3n hol\u00edstica y aplicable desde el primer d\u00eda. <\/p>\n\n<p>A partir de aqu\u00ed, convertimos la revisi\u00f3n en criterios agn\u00f3sticos (aplicables a cualquier tecnolog\u00eda). No se trata de \u201chacerlo bonito\u201d, sino de formalizar decisiones de dise\u00f1o en reglas verificables: orden de pasos, persistencia del estado, desactivaci\u00f3n coherente de opciones, <em>feedback <\/em>cercana a la acci\u00f3n y mensajes de ayuda que expliquen qu\u00e9 ha ocurrido y c\u00f3mo resolverlo.  <\/p>\n\n<h3 class=\"wp-block-heading\">Buenas pr\u00e1cticas que siempre funcionan.<\/h3>\n\n<ol class=\"wp-block-list\">\n<li><strong>Muestra el camino antes de pedir acciones.<\/strong> El calendario y las actividades deben trabajar juntos para reducir la incertidumbre: si una fecha no es v\u00e1lida, desact\u00edvala; si una actividad no est\u00e1 disponible, explica por qu\u00e9. Esto evita selecciones que no llevan a ninguna parte. <\/li>\n\n\n\n<li><strong>Feedback junto a la acci\u00f3n.<\/strong> Los mensajes de error o validaci\u00f3n deben aparecer donde el usuario pueda actuar de inmediato, no en la parte superior ni lejos del campo que necesita corregir.<\/li>\n\n\n\n<li><strong>Texto + icono = comprensi\u00f3n.<\/strong> Los iconos son \u00fatiles, pero la accesibilidad mejora cuando a\u00f1adimos texto alternativo o etiquetas que expliquen su funci\u00f3n.<\/li>\n\n\n\n<li><strong>Coherencia visual = coherencia funcional.<\/strong> Si un bot\u00f3n significa \u201cavanzar\u201d, debe comportarse siempre de la misma manera y tener el mismo c\u00f3digo visual en todas las pantallas y dispositivos. <\/li>\n\n\n\n<li><strong>Evita cambios de c\u00f3digo no anunciados.<\/strong> Cuando una vista cambia reglas o comportamientos, el dise\u00f1o debe explicarlo. La previsibilidad es un pilar del <strong>dise\u00f1o UX\/UI.<\/strong>  <\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"656\" src=\"https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2025\/11\/compra-dentrades-1024x656.png\" alt=\"\" class=\"wp-image-25814104\" style=\"width:657px;height:auto\" title=\"\" srcset=\"https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2025\/11\/compra-dentrades-1024x656.png 1024w, https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2025\/11\/compra-dentrades-980x628.png 980w, https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2025\/11\/compra-dentrades-480x308.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\">El valor de un \u201cimpulso con criterio\u201d.<\/h2>\n\n<p>Hablar de dise\u00f1o UX\/UI con criterio es asumir que cada microdecisi\u00f3n tiene un impacto en la confianza y en la tasa de conversi\u00f3n. <\/p>\n\n<p>Cuando una plataforma como Euromus \u2014presente en diversos equipos e instituciones\u2014 busca una segunda mirada, lo que hacemos es alinear a los equipos: que dise\u00f1o, desarrollo y negocio compartan el mismo mapa mental del producto. <\/p>\n\n<p>Es decir, documentamos el flujo, hacemos expl\u00edcitas las reglas y consensuamos la sem\u00e1ntica visual para que cualquier evoluci\u00f3n posterior sea m\u00e1s s\u00f3lida y m\u00e1s r\u00e1pida de implementar.<br\/>El resultado es m\u00e1s claridad, menos fricci\u00f3n y m\u00e1s inclusi\u00f3n: una experiencia en la que el usuario reconoce el patr\u00f3n y avanza sin dudas. <\/p>\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n<p>Cuando dise\u00f1o y c\u00f3digo hablan el mismo idioma, el producto deja de \u201cpedir\u201d atenci\u00f3n y empieza a ofrecer claridad. Es ah\u00ed donde el dise\u00f1o UX\/UI despliega todo su valor: convierte la arquitectura interna en comprensi\u00f3n externa y transforma la tecnolog\u00eda en experiencia.<br\/>En plataformas maduras como <a href=\"https:\/\/www.ccalgir.es\/es\/\" target=\"_blank\" rel=\"noopener\">Euromus<\/a>, este impulso con criterio no es algo cosm\u00e9tico: es una manera de seguir creciendo sobre una base s\u00f3lida.  <\/p>\n\n<p>Si quieres que revisemos tu producto digital con esta mirada \u2014donde el dise\u00f1o se convierte en una especificaci\u00f3n clara para el c\u00f3digo\u2014, <a href=\"https:\/\/www.demomentsomtres.com\/es\/contacto\/\">hablemos<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Euromus, soluci\u00f3n referente al sector cultural, conf\u00eda en DeMomentSomTres para dar una nueva mirada de dise\u00f1o UX\/UI: mayor claridad, inclusi\u00f3n y coherencia entre pantallas. Compartimos criterios agn\u00f3sticos y buenas pr\u00e1cticas para que dise\u00f1o y c\u00f3digo hablen el mismo idioma. <\/p>\n","protected":false},"author":9,"featured_media":25814095,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[],"tags":[4520,4524,4402,4522,4469],"class_list":["post-25814080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-casos-dexit","tag-consultoria-es","tag-diseno","tag-ui-es","tag-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/25814080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/comments?post=25814080"}],"version-history":[{"count":10,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/25814080\/revisions"}],"predecessor-version":[{"id":25814701,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/25814080\/revisions\/25814701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/media\/25814095"}],"wp:attachment":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/media?parent=25814080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/categories?post=25814080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/tags?post=25814080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}