Gameartoutsourcestudio | Dise\u00f1o de Interfaz de Usuario, Experiencia de Usuario en Juegos, Dise\u00f1o de HUDs, Creaci\u00f3n de Iconos de Juego, Wireframing y Prototipado, Dise\u00f1o de Men\u00fas Principales, Interfaces de Realidad Virtual, Optimizaci\u00f3n de UI M\u00f3vil, Integraci\u00f3n de UI en Motores, Animaci\u00f3n de Interfaces<\/title>\n \n <meta name=\"description\" content=\"Estudio experto en Dise\u00f1o de Interfaz de Usuario (UI) y Experiencia de Usuario en Juegos (UX). Especialistas en Dise\u00f1o de HUDs, Creaci\u00f3n de Iconos de Juego, Wireframing y Prototipado, Dise\u00f1o de Men\u00fas Principales, Interfaces de Realidad Virtual, Optimizaci\u00f3n de UI M\u00f3vil, Integraci\u00f3n de UI en Motores y Animaci\u00f3n de Interfaces. Cont\u00e1ctenos: info@gameartoutsourcestudio.de\">\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n dark: '#0f172a',\n darker: '#020617',\n brand: {\n emerald: '#10b981',\n teal: '#14b8a6',\n cyan: '#06b6d4',\n blue: '#3b82f6',\n slate: '#64748b'\n }\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n <style>\n .icon-gradient-uiux {\n background: -webkit-linear-gradient(45deg, #10b981, #06b6d4);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .glow-effect-uiux {\n box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);\n transition: all 0.3s ease;\n }\n .glow-effect-uiux:hover {\n box-shadow: 0 0 30px rgba(6, 182, 212, 0.4);\n transform: translateY(-5px);\n border-color: rgba(20, 184, 166, 0.5);\n }\n .wireframe-pattern {\n background-image: linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),\n linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);\n background-size: 30px 30px;\n }\n <\/style>\n<\/head>\n<body class=\"bg-darker text-slate-300 font-sans antialiased selection:bg-brand-emerald selection:text-darker wireframe-pattern\">\n\n \n <nav class=\"fixed w-full z-50 top-0 bg-darker\/90 backdrop-blur-md border-b border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center h-20\">\n <div class=\"flex-shrink-0 flex items-center gap-3\">\n <i class=\"fa-solid fa-gamepad text-3xl text-brand-emerald\"><\/i>\n <span class=\"font-bold text-xl md:text-2xl tracking-tighter text-white\">\n Gameart<span class=\"text-brand-cyan\">outsource<\/span>studio\n <\/span>\n <\/div>\n <div class=\"hidden md:flex space-x-8 items-center\">\n <a href=\"index.html\" class=\"text-sm font-medium hover:text-brand-emerald transition-colors\"><i class=\"fa-solid fa-arrow-left mr-1\"><\/i> Inicio<\/a>\n <a href=\"#servicios-uiux\" class=\"text-sm font-medium hover:text-brand-emerald transition-colors\">Servicios UI\/UX<\/a>\n <a href=\"#pipeline\" class=\"text-sm font-medium hover:text-brand-emerald transition-colors\">Metodolog\u00eda UX<\/a>\n <a href=\"#faq\" class=\"text-sm font-medium hover:text-brand-emerald transition-colors\">FAQ<\/a>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"bg-gradient-to-r from-brand-emerald to-brand-cyan hover:from-brand-cyan hover:to-brand-emerald text-darker px-5 py-2.5 rounded-full font-bold transition-all shadow-lg shadow-brand-emerald\/20 flex items-center gap-2\">\n <i class=\"fa-solid fa-envelope\"><\/i> Dise\u00f1ar Interfaz\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <section class=\"relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden\">\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-brand-emerald\/10 via-darker to-darker -z-10\"><\/div>\n \n \n <div class=\"absolute top-32 left-10 text-brand-emerald text-6xl opacity-10\"><i class=\"fa-solid fa-object-group\"><\/i><\/div>\n <div class=\"absolute bottom-20 right-10 text-brand-cyan text-8xl opacity-10\"><i class=\"fa-solid fa-mobile-screen-button\"><\/i><\/div>\n <div class=\"absolute top-52 right-20 text-brand-teal text-5xl opacity-10\"><i class=\"fa-solid fa-sitemap\"><\/i><\/div>\n <div class=\"absolute bottom-32 left-32 text-brand-blue text-7xl opacity-10\"><i class=\"fa-solid fa-arrow-pointer\"><\/i><\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center\">\n \n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-900\/30 border border-brand-emerald\/50 text-brand-emerald text-sm font-bold mb-8 uppercase tracking-widest\">\n <i class=\"fa-solid fa-layer-group\"><\/i> Divisi\u00f3n de Interacci\u00f3n y Usabilidad\n <\/div>\n \n \n <h1 class=\"text-3xl md:text-5xl lg:text-7xl font-extrabold text-white tracking-tight mb-8 leading-tight max-w-6xl mx-auto\">\n Interfaces que Conectan al <br class=\"hidden md:block\">\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-emerald via-brand-teal to-brand-cyan\">Jugador con su Universo Digital<\/span>\n <\/h1>\n \n <h2 class=\"text-xl md:text-2xl font-semibold text-slate-300 mb-6 max-w-5xl mx-auto\">\n Especialistas en <span class=\"text-brand-emerald\">Dise\u00f1o de Interfaz de Usuario, Experiencia de Usuario en Juegos, Dise\u00f1o de HUDs, Creaci\u00f3n de Iconos de Juego y Wireframing y Prototipado.<\/span>\n <\/h2>\n \n <p class=\"mt-6 text-lg text-slate-400 max-w-4xl mx-auto leading-relaxed mb-10\">\n La mejor interfaz es aquella en la que el jugador no tiene que pensar. En <strong>Gameartoutsourcestudio<\/strong>, elevamos la retenci\u00f3n y la inmersi\u00f3n de los jugadores fusionando una est\u00e9tica visual deslumbrante (UI) con una arquitectura de la informaci\u00f3n impecable (UX). Desde \u00e1rboles de habilidades complejos en juegos de rol de mundo abierto, hasta visores en pantalla (HUD) minimalistas para shooters competitivos, dise\u00f1amos sistemas que no solo se ven espectaculares, sino que se sienten instintivos. Integramos arte, psicolog\u00eda cognitiva y fluidez t\u00e9cnica para crear interfaces que mejoran la jugabilidad sin obstaculizarla.\n <\/p>\n \n <div class=\"flex flex-col sm:flex-row justify-center gap-4\">\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"bg-gradient-to-r from-brand-emerald to-brand-cyan text-darker px-8 py-4 rounded-full font-bold text-lg hover:from-brand-cyan hover:to-brand-emerald hover:text-darker transition-all shadow-[0_0_20px_rgba(16,185,129,0.4)] flex justify-center items-center gap-3\">\n <i class=\"fa-solid fa-paper-plane\"><\/i> Consultar a un Experto UX\n <\/a>\n <a href=\"#servicios-uiux\" class=\"px-8 py-4 rounded-full font-bold text-lg border border-brand-emerald\/50 text-brand-emerald hover:bg-brand-emerald\/10 transition-all flex justify-center items-center gap-3\">\n <i class=\"fa-solid fa-compass-drafting\"><\/i> Explorar Servicios UI\/UX\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"servicios-uiux\" class=\"py-24 bg-dark relative border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-20\">\n <i class=\"fa-solid fa-cubes text-4xl text-brand-emerald mb-4\"><\/i>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6\">Nuestros Servicios de Dise\u00f1o UI\/UX<\/h2>\n <p class=\"text-lg text-slate-400 leading-relaxed\">\n Nuestro enfoque cubre el ciclo de vida completo del dise\u00f1o interactivo. Abordamos la investigaci\u00f3n del comportamiento del jugador, la estructuraci\u00f3n visual l\u00f3gica y la creaci\u00f3n de activos pulidos listos para ser implementados directamente en el motor de su juego.\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-emerald transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-emerald-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-emerald group-hover:text-darker transition-all text-brand-emerald shadow-inner border border-brand-emerald\/20\">\n <i class=\"fa-solid fa-palette text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Dise\u00f1o de Interfaz de Usuario (UI)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Desarrollamos el aspecto visual de su juego. Creamos botones, paneles, barras de progreso y tipograf\u00edas personalizadas que respiran la misma direcci\u00f3n de arte que sus entornos y personajes. Desde la est\u00e9tica met\u00e1lica pesada (Sci-Fi) hasta pergaminos pintados a mano (Fantas\u00eda).\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-teal transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-teal-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-teal group-hover:text-darker transition-all text-brand-teal shadow-inner border border-brand-teal\/20\">\n <i class=\"fa-solid fa-brain text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Experiencia de Usuario en Juegos (UX)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n La ciencia detr\u00e1s de la pantalla. Analizamos la carga cognitiva del jugador, dise\u00f1amos diagramas de flujo (User Flows) y estructuramos la arquitectura de la informaci\u00f3n para garantizar que tareas complejas como la elaboraci\u00f3n (crafting) o la gesti\u00f3n de gremios sean intuitivas y gratificantes.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-cyan transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-cyan-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-cyan group-hover:text-darker transition-all text-brand-cyan shadow-inner border border-brand-cyan\/20\">\n <i class=\"fa-solid fa-crosshairs text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Dise\u00f1o de HUDs (Visores)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Dise\u00f1amos el \u00abHeads-Up Display\u00bb en pantalla. Nos enfocamos en el minimalismo estrat\u00e9gico, asegurando que la informaci\u00f3n vital de combate (salud, munici\u00f3n, minimapa, br\u00fajula) sea perif\u00e9ricamente visible en fracciones de segundo sin obstruir la belleza del mundo del juego o distraer la acci\u00f3n.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-blue transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-blue-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-blue group-hover:text-white transition-all text-brand-blue shadow-inner border border-brand-blue\/20\">\n <i class=\"fa-solid fa-icons text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Creaci\u00f3n de Iconos de Juego<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Poblamos sus men\u00fas con miles de activos de lectura r\u00e1pida. Pintamos iconos de habilidades, glifos de estados alterados (buffs\/debuffs), elementos de inventario, divisas (monedas, gemas) y logros. Cada icono se dise\u00f1a para ser perfectamente reconocible incluso en las resoluciones m\u00e1s peque\u00f1as.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-emerald transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-emerald-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-emerald group-hover:text-darker transition-all text-brand-emerald shadow-inner border border-brand-emerald\/20\">\n <i class=\"fa-solid fa-network-wired text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Wireframing y Prototipado<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Antes de aplicar el arte final, creamos \u00abplanos\u00bb (wireframes) interactivos en baja fidelidad utilizando herramientas como Figma o Adobe XD. Esto permite a su equipo probar la navegaci\u00f3n del juego, los clics y la fluidez general (prototipado cliqueable) antes de invertir tiempo en el renderizado final.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-teal transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-teal-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-teal group-hover:text-darker transition-all text-brand-teal shadow-inner border border-brand-teal\/20\">\n <i class=\"fa-solid fa-list-ul text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Dise\u00f1o de Men\u00fas Principales<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Dise\u00f1amos la primera impresi\u00f3n del jugador. Creamos sistemas de men\u00fas de inicio cinem\u00e1ticos, pantallas de selecci\u00f3n de personajes, \u00e1rboles de habilidades masivos, sistemas de misiones (Quest Logs) y pantallas de configuraci\u00f3n accesibles, todo priorizando la navegaci\u00f3n eficiente con mando (gamepad) o rat\u00f3n.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-cyan transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-cyan-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-cyan group-hover:text-darker transition-all text-brand-cyan shadow-inner border border-brand-cyan\/20\">\n <i class=\"fa-solid fa-vr-cardboard text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Interfaces de Realidad Virtual (VR)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n La UI tradicional plana no funciona en VR. Especialistas en ergonom\u00eda espacial dise\u00f1an interfaces espaciales (Spatial UI) curvas, men\u00fas anclados a las manos del jugador e interfaces di\u00e9geticas (como pantallas en armas o herramientas f\u00edsicas) para mantener la inmersi\u00f3n 3D inquebrantable.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-blue transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-blue-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-blue group-hover:text-white transition-all text-brand-blue shadow-inner border border-brand-blue\/20\">\n <i class=\"fa-solid fa-mobile-screen text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Optimizaci\u00f3n de UI M\u00f3vil<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Resolviendo los desaf\u00edos de las pantallas t\u00e1ctiles peque\u00f1as. Dise\u00f1amos con la \u00abzona del pulgar\u00bb (Thumb Zone) en mente. Garantizamos zonas t\u00e1ctiles (Touch Targets) amplias, interfaces receptivas (Responsive) para m\u00faltiples relaciones de aspecto y tenemos en cuenta las \u00abmuescas\u00bb (Notches) y \u00e1reas seguras de iOS y Android.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-emerald transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-emerald-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-emerald group-hover:text-darker transition-all text-brand-emerald shadow-inner border border-brand-emerald\/20\">\n <i class=\"fa-solid fa-code text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Integraci\u00f3n de UI en Motores<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n No nos detenemos en el archivo de Photoshop. Nuestros Artistas T\u00e9cnicos de UI pueden implementar directamente los activos en Unreal Engine (usando UMG \/ Slate) o Unity (UGUI \/ UI Toolkit), configurando anclajes (Anchors), resoluciones din\u00e1micas y jerarqu\u00edas limpias para sus programadores.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-teal transition-all glow-effect-uiux group md:col-span-2 lg:col-span-3\">\n <div class=\"flex flex-col md:flex-row items-center gap-6\">\n <div class=\"w-20 h-20 shrink-0 rounded-2xl bg-teal-500\/10 flex items-center justify-center group-hover:bg-brand-teal group-hover:text-darker transition-all text-brand-teal shadow-inner border border-brand-teal\/20\">\n <i class=\"fa-solid fa-wand-magic-sparkles text-4xl\"><\/i>\n <\/div>\n <div class=\"text-left\">\n <h3 class=\"text-2xl font-bold text-white mb-3\">Animaci\u00f3n de Interfaces y VFX (Motion Graphics)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed\">\n Una interfaz est\u00e1tica se siente sin vida. El servicio de Animaci\u00f3n de Interfaces proporciona esa retroalimentaci\u00f3n (feedback) jugosa e instant\u00e1nea que los jugadores adoran. Animamos la apertura y cierre de paneles, creamos microinteracciones al pasar el rat\u00f3n (Hover effects), animaciones de subida de nivel (Level Up) deslumbrantes con part\u00edculas, y aseguramos que la navegaci\u00f3n se sienta t\u00e1ctil, \u00e1gil y altamente responsiva a trav\u00e9s del movimiento y el flujo.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"pipeline\" class=\"py-24 bg-darker relative border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n \n \n <div>\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-emerald\/10 border border-brand-emerald\/30 text-brand-emerald text-sm font-semibold mb-6\">\n <i class=\"fa-solid fa-diagram-project\"><\/i> Enfoque Basado en Datos\n <\/div>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6 leading-tight\">\n Nuestro <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-emerald to-brand-cyan\">Pipeline de Producci\u00f3n UX\/UI<\/span>\n <\/h2>\n <p class=\"text-slate-400 mb-6 leading-relaxed\">\n El dise\u00f1o de interfaces para juegos no se trata solo de pintar botones bonitos; es un proceso anal\u00edtico. En <strong>Gameartoutsourcestudio<\/strong>, seguimos una metodolog\u00eda iterativa estricta que reduce el riesgo t\u00e9cnico, elimina la frustraci\u00f3n del usuario final y acelera la producci\u00f3n de los desarrolladores de frontend.\n <\/p>\n \n <div class=\"space-y-6 mt-8\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-emerald font-bold shrink-0 shadow-[0_0_10px_rgba(16,185,129,0.3)]\">01<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Investigaci\u00f3n y Arquitectura (UX Research)<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Estudiamos las mec\u00e1nicas de su juego. Mapeamos todo el \u00abViaje del Jugador\u00bb (Player Journey) mediante diagramas de flujo l\u00f3gicos, definiendo cu\u00e1ntos clics toma acceder a cada funci\u00f3n vital.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-teal font-bold shrink-0 shadow-[0_0_10px_rgba(20,184,166,0.3)]\">02<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Esquemas y Mockups Grises (Wireframing)<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Creamos bloques grises interactivos para establecer la jerarqu\u00eda visual y el dise\u00f1o espacial (Layout). Probamos esto intensamente para validar la usabilidad antes de invertir en arte.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-cyan font-bold shrink-0 shadow-[0_0_10px_rgba(6,182,212,0.3)]\">03<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Conceptualizaci\u00f3n Visual y Gu\u00eda de Estilo<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Nuestro equipo de Arte UI toma los wireframes y aplica el \u00abLook and Feel\u00bb. Generamos una biblioteca maestra de componentes (Botones, Paneles, Tipograf\u00eda, Paleta de Colores) para asegurar la coherencia.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-blue font-bold shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.3)]\">04<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Producci\u00f3n, Slicing e Integraci\u00f3n<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Se producen todas las pantallas. Cortamos (Slice) los activos optimizando los formatos y, si se requiere, implementamos y animamos directamente los archivos (Prefabs\/Widgets) en Unity o Unreal.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-emerald-900\/30 flex flex-col items-center justify-center text-center glow-effect-uiux\">\n <i class=\"fa-brands fa-figma text-5xl text-brand-emerald mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Prototipado<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">Figma \/ Adobe XD<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-teal-900\/30 flex flex-col items-center justify-center text-center glow-effect-uiux transform translate-y-8\">\n <i class=\"fa-solid fa-universal-access text-5xl text-brand-teal mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Accesibilidad<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">Daltonismo y Contraste WCAG<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-cyan-900\/30 flex flex-col items-center justify-center text-center glow-effect-uiux\">\n <i class=\"fa-solid fa-gamepad text-5xl text-brand-cyan mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Cross-Platform<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">PC, Consolas y M\u00f3vil<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-blue-900\/30 flex flex-col items-center justify-center text-center glow-effect-uiux transform translate-y-8\">\n <i class=\"fa-solid fa-code text-5xl text-brand-blue mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Motores<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">Unreal UMG \/ Unity UGUI<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"faq\" class=\"py-24 bg-dark relative border-t border-slate-800\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <i class=\"fa-solid fa-circle-question text-4xl text-brand-teal mb-4\"><\/i>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6\">Preguntas Frecuentes sobre Interfaz de Juego<\/h2>\n <p class=\"text-slate-400 text-lg\">Aclarando los conceptos t\u00e9cnicos detr\u00e1s de un dise\u00f1o de experiencia de usuario impecable.<\/p>\n <\/div>\n\n <div class=\"space-y-6\">\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-emerald\"><\/i> \u00bfCu\u00e1l es la diferencia real entre UI y UX en los videojuegos?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n La <strong>UX (Experiencia de Usuario)<\/strong> es el \u00abesqueleto y el cerebro\u00bb. Es la l\u00f3gica de c\u00f3mo funciona algo, cu\u00e1ntos pasos se requieren para equipar una espada, c\u00f3mo fluye la informaci\u00f3n y si es frustrante o intuitivo. La <strong>UI (Interfaz de Usuario)<\/strong> es la \u00abpiel y la belleza\u00bb. Es el dise\u00f1o visual de esa misma pantalla de inventario: los colores, el estilo de la madera del panel, el brillo del bot\u00f3n y las fuentes utilizadas. En nuestro estudio, ambas disciplinas trabajan en conjunto continuo.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-teal\"><\/i> \u00bfQu\u00e9 es la Interfaz \u00abDi\u00e9getica\u00bb y cu\u00e1ndo se recomienda usarla?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n La UI Di\u00e9getica es aquella que existe dentro de la narrativa y la geometr\u00eda 3D del mundo del juego, visible tanto para el jugador como para el personaje (ej. el contador de munici\u00f3n en el arma de Halo, o el holograma de inventario en Dead Space). Se recomienda en juegos de inmersi\u00f3n profunda, terror (Survival Horror) o Realidad Virtual (VR). Nuestros dise\u00f1adores colaboran con los equipos 3D para modelar interfaces directamente en los \u00abprops\u00bb y entornos del juego.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-cyan\"><\/i> \u00bfC\u00f3mo abordan la adaptaci\u00f3n de UI para juegos multiplataforma (Cross-Platform)?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n El mayor desaf\u00edo multiplataforma es la escala y el m\u00e9todo de entrada (Input). Lo que funciona para un cursor de rat\u00f3n en PC, es inoperable para un controlador de Xbox o un pulgar t\u00e1ctil en un m\u00f3vil. Dise\u00f1amos con un enfoque modular. Creamos gu\u00edas de atajos de teclado din\u00e1micas (Input Prompts) que cambian al vuelo, ampliamos las zonas interactivas (Hitboxes) para pantallas t\u00e1ctiles y garantizamos la escalabilidad de las fuentes (Dynamic Typography) para que sean legibles a 3 metros de un televisor de consola.\n <\/p>\n <\/div>\n \n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-blue\"><\/i> \u00bfExportan los activos listos o los integran directamente en el motor del juego?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n Ofrecemos ambos niveles de servicio. Como est\u00e1ndar, entregamos carpetas organizadas con activos cortados, hojas de sprites y gu\u00edas de estilo. Sin embargo, nuestro servicio premium (Integraci\u00f3n de UI en Motores) permite que nuestros Artistas T\u00e9cnicos trabajen directamente en su repositorio (Perforce\/Git). Ensamblamos los Canvas en Unity o los Widgets en Unreal Engine (UMG), vinculamos las animaciones y dejamos las variables expuestas para que sus programadores de Frontend solo tengan que conectar la l\u00f3gica del backend.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 relative overflow-hidden bg-gradient-to-b from-dark to-slate-900 border-t border-slate-800\">\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-brand-emerald\/10 via-darker to-darker -z-10\"><\/div>\n <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n \n <i class=\"fa-solid fa-object-group text-6xl text-brand-emerald mb-8 glow-effect-uiux rounded-full bg-slate-800 p-6\"><\/i>\n \n <h2 class=\"text-4xl md:text-5xl font-bold text-white mb-6\">\n Construya la Conexi\u00f3n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-emerald to-brand-cyan\">Perfecta con su Jugador<\/span>\n <\/h2>\n <p class=\"text-xl text-slate-400 mb-12 max-w-2xl mx-auto\">\n No permita que una interfaz confusa arruine grandes mec\u00e1nicas de juego. Conf\u00ede en nuestro equipo especializado en dise\u00f1o centrado en el jugador para elevar su retenci\u00f3n, accesibilidad y acabado profesional.\n <\/p>\n\n <div class=\"bg-slate-800\/50 backdrop-blur-sm border border-slate-700 rounded-3xl p-8 md:p-12 shadow-2xl\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n <div class=\"text-left\">\n <h3 class=\"text-2xl font-bold text-white mb-4\">Auditor\u00eda y Consulta UX<\/h3>\n <p class=\"text-slate-400 mb-8 text-sm\">\n Comun\u00edquese con nuestros Dise\u00f1adores Principales de UI\/UX. Ofrecemos evaluaciones exhaustivas de flujos de usuarios en juegos en desarrollo y estimaciones de producci\u00f3n completas sin ning\u00fan compromiso.\n <\/p>\n \n <div class=\"flex items-center gap-4 mb-6 group cursor-pointer\">\n <div class=\"w-12 h-12 rounded-full bg-brand-emerald\/20 flex items-center justify-center group-hover:bg-brand-emerald\/40 transition-colors\">\n <i class=\"fa-solid fa-envelope text-xl text-brand-emerald\"><\/i>\n <\/div>\n <div>\n <p class=\"text-xs text-slate-500 uppercase tracking-wider font-bold\">Solicitudes de Proyecto<\/p>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"text-lg font-bold text-white hover:text-brand-cyan transition-colors\">\n info@gameartoutsourcestudio.de\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"flex items-center gap-4 group cursor-pointer\">\n <div class=\"w-12 h-12 rounded-full bg-brand-teal\/20 flex items-center justify-center group-hover:bg-brand-teal\/40 transition-colors\">\n <i class=\"fa-solid fa-shield-halved text-xl text-brand-teal\"><\/i>\n <\/div>\n <div>\n <p class=\"text-xs text-slate-500 uppercase tracking-wider font-bold\">Total Confidencialidad<\/p>\n <p class=\"text-sm font-bold text-white\">Evaluaci\u00f3n bajo NDA Seguro<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-darker rounded-2xl p-6 border border-slate-700 text-left\">\n <h4 class=\"text-lg font-bold text-white mb-6 flex items-center gap-2\">\n <i class=\"fa-solid fa-earth-americas text-brand-cyan\"><\/i> Disponibilidad Global de Talento\n <\/h4>\n <div class=\"space-y-4\">\n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-emerald transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-map-location-dot text-brand-emerald group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Am\u00e9rica del Norte (USA\/CAN)<\/span>\n <\/div>\n <span class=\"text-xs text-brand-emerald bg-brand-emerald\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Principal<\/span>\n <\/div>\n \n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-teal transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-landmark-flag text-brand-teal group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Europa Continental \/ UK<\/span>\n <\/div>\n <span class=\"text-xs text-brand-teal bg-brand-teal\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Principal<\/span>\n <\/div>\n \n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-blue transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-torii-gate text-brand-blue group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Asia-Pac\u00edfico<\/span>\n <\/div>\n <span class=\"text-xs text-brand-blue bg-brand-blue\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Activo<\/span>\n <\/div>\n\n <div class=\"mt-4 pt-4 border-t border-slate-700\">\n <p class=\"text-xs text-slate-500 leading-relaxed\">\n <i class=\"fa-solid fa-circle-info mr-1\"><\/i> Nuestros Lead UX Designers facilitan sincronizaciones diarias mediante plataformas \u00e1giles para asegurar una integraci\u00f3n perfecta sin fricciones horarias.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-darker py-12 border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-6\">\n \n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-gamepad text-2xl text-brand-emerald\"><\/i>\n <span class=\"font-bold text-xl tracking-tighter text-white\">\n Gameart<span class=\"text-brand-cyan\">outsource<\/span>studio\n <\/span>\n <\/div>\n \n \n <div class=\"flex flex-wrap justify-center gap-4 text-sm text-slate-500 max-w-5xl\">\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-palette text-brand-emerald\"><\/i> Dise\u00f1o de Interfaz de Usuario<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-brain text-brand-teal\"><\/i> Experiencia de Usuario en Juegos<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-crosshairs text-brand-cyan\"><\/i> Dise\u00f1o de HUDs<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-icons text-brand-blue\"><\/i> Creaci\u00f3n de Iconos de Juego<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-network-wired text-brand-emerald\"><\/i> Wireframing y Prototipado<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-list-ul text-brand-teal\"><\/i> Dise\u00f1o de Men\u00fas Principales<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-vr-cardboard text-brand-cyan\"><\/i> Interfaces de Realidad Virtual<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-mobile-screen text-brand-blue\"><\/i> Optimizaci\u00f3n de UI M\u00f3vil<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-code text-brand-emerald\"><\/i> Integraci\u00f3n de UI en Motores<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-wand-magic-sparkles text-brand-teal\"><\/i> Animaci\u00f3n de Interfaces<\/span>\n <\/div>\n \n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-darker hover:bg-brand-emerald transition-colors\">\n <i class=\"fa-brands fa-linkedin-in\"><\/i>\n <\/a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-darker hover:bg-brand-teal transition-colors\">\n <i class=\"fa-brands fa-artstation\"><\/i>\n <\/a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-darker hover:bg-brand-cyan transition-colors\">\n <i class=\"fa-brands fa-behance\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n \n <div class=\"mt-8 pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4\">\n <p class=\"text-slate-500 text-sm text-center md:text-left\">\n © 2024 Gameartoutsourcestudio. Todos los derechos reservados. Divisi\u00f3n de Dise\u00f1o de UI\/UX e Interacci\u00f3n.\n <\/p>\n <div class=\"flex items-center gap-2 text-slate-400 text-sm font-semibold bg-slate-800 px-4 py-2 rounded-full\">\n <i class=\"fa-solid fa-envelope text-brand-emerald\"><\/i>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"hover:text-white transition-colors\">info@gameartoutsourcestudio.de<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n<\/body>\n<\/html>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gameartoutsourcestudio | Dise\u00f1o de Interfaz de Usuario, Experiencia de Usuario en Juegos, Dise\u00f1o de HUDs, Creaci\u00f3n de Iconos de Juego, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"wangjianchen02@gmail.com","author_link":"https:\/\/3danimationart.co.uk\/ka\/author\/wangjianchen02gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Gameartoutsourcestudio | Dise\u00f1o de Interfaz de Usuario, Experiencia de Usuario en Juegos, Dise\u00f1o de HUDs, Creaci\u00f3n de Iconos de Juego, […]","_links":{"self":[{"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":1,"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/pages\/22\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n \n Gameartoutsourcestudio | Dise\u00f1o de Interfaz de Usuario, Experiencia de Usuario en Juegos, Dise\u00f1o de HUDs, Creaci\u00f3n de Iconos de Juego, Wireframing y Prototipado, Dise\u00f1o de Men\u00fas Principales, Interfaces de Realidad Virtual, Optimizaci\u00f3n de UI M\u00f3vil, Integraci\u00f3n de UI en Motores, Animaci\u00f3n de Interfaces<\/title>\n \n <meta name=\"description\" content=\"Estudio experto en Dise\u00f1o de Interfaz de Usuario (UI) y Experiencia de Usuario en Juegos (UX). Especialistas en Dise\u00f1o de HUDs, Creaci\u00f3n de Iconos de Juego, Wireframing y Prototipado, Dise\u00f1o de Men\u00fas Principales, Interfaces de Realidad Virtual, Optimizaci\u00f3n de UI M\u00f3vil, Integraci\u00f3n de UI en Motores y Animaci\u00f3n de Interfaces. Cont\u00e1ctenos: info@gameartoutsourcestudio.de\">\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n dark: '#0f172a',\n darker: '#020617',\n brand: {\n emerald: '#10b981',\n teal: '#14b8a6',\n cyan: '#06b6d4',\n blue: '#3b82f6',\n slate: '#64748b'\n }\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n <style>\n .icon-gradient-uiux {\n background: -webkit-linear-gradient(45deg, #10b981, #06b6d4);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .glow-effect-uiux {\n box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);\n transition: all 0.3s ease;\n }\n .glow-effect-uiux:hover {\n box-shadow: 0 0 30px rgba(6, 182, 212, 0.4);\n transform: translateY(-5px);\n border-color: rgba(20, 184, 166, 0.5);\n }\n .wireframe-pattern {\n background-image: linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),\n linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);\n background-size: 30px 30px;\n }\n <\/style>\n<\/head>\n<body class=\"bg-darker text-slate-300 font-sans antialiased selection:bg-brand-emerald selection:text-darker wireframe-pattern\">\n\n \n <nav class=\"fixed w-full z-50 top-0 bg-darker\/90 backdrop-blur-md border-b border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center h-20\">\n <div class=\"flex-shrink-0 flex items-center gap-3\">\n <i class=\"fa-solid fa-gamepad text-3xl text-brand-emerald\"><\/i>\n <span class=\"font-bold text-xl md:text-2xl tracking-tighter text-white\">\n Gameart<span class=\"text-brand-cyan\">outsource<\/span>studio\n <\/span>\n <\/div>\n <div class=\"hidden md:flex space-x-8 items-center\">\n <a href=\"index.html\" class=\"text-sm font-medium hover:text-brand-emerald transition-colors\"><i class=\"fa-solid fa-arrow-left mr-1\"><\/i> Inicio<\/a>\n <a href=\"#servicios-uiux\" class=\"text-sm font-medium hover:text-brand-emerald transition-colors\">Servicios UI\/UX<\/a>\n <a href=\"#pipeline\" class=\"text-sm font-medium hover:text-brand-emerald transition-colors\">Metodolog\u00eda UX<\/a>\n <a href=\"#faq\" class=\"text-sm font-medium hover:text-brand-emerald transition-colors\">FAQ<\/a>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"bg-gradient-to-r from-brand-emerald to-brand-cyan hover:from-brand-cyan hover:to-brand-emerald text-darker px-5 py-2.5 rounded-full font-bold transition-all shadow-lg shadow-brand-emerald\/20 flex items-center gap-2\">\n <i class=\"fa-solid fa-envelope\"><\/i> Dise\u00f1ar Interfaz\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <section class=\"relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden\">\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-brand-emerald\/10 via-darker to-darker -z-10\"><\/div>\n \n \n <div class=\"absolute top-32 left-10 text-brand-emerald text-6xl opacity-10\"><i class=\"fa-solid fa-object-group\"><\/i><\/div>\n <div class=\"absolute bottom-20 right-10 text-brand-cyan text-8xl opacity-10\"><i class=\"fa-solid fa-mobile-screen-button\"><\/i><\/div>\n <div class=\"absolute top-52 right-20 text-brand-teal text-5xl opacity-10\"><i class=\"fa-solid fa-sitemap\"><\/i><\/div>\n <div class=\"absolute bottom-32 left-32 text-brand-blue text-7xl opacity-10\"><i class=\"fa-solid fa-arrow-pointer\"><\/i><\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center\">\n \n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-900\/30 border border-brand-emerald\/50 text-brand-emerald text-sm font-bold mb-8 uppercase tracking-widest\">\n <i class=\"fa-solid fa-layer-group\"><\/i> Divisi\u00f3n de Interacci\u00f3n y Usabilidad\n <\/div>\n \n \n <h1 class=\"text-3xl md:text-5xl lg:text-7xl font-extrabold text-white tracking-tight mb-8 leading-tight max-w-6xl mx-auto\">\n Interfaces que Conectan al <br class=\"hidden md:block\">\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-emerald via-brand-teal to-brand-cyan\">Jugador con su Universo Digital<\/span>\n <\/h1>\n \n <h2 class=\"text-xl md:text-2xl font-semibold text-slate-300 mb-6 max-w-5xl mx-auto\">\n Especialistas en <span class=\"text-brand-emerald\">Dise\u00f1o de Interfaz de Usuario, Experiencia de Usuario en Juegos, Dise\u00f1o de HUDs, Creaci\u00f3n de Iconos de Juego y Wireframing y Prototipado.<\/span>\n <\/h2>\n \n <p class=\"mt-6 text-lg text-slate-400 max-w-4xl mx-auto leading-relaxed mb-10\">\n La mejor interfaz es aquella en la que el jugador no tiene que pensar. En <strong>Gameartoutsourcestudio<\/strong>, elevamos la retenci\u00f3n y la inmersi\u00f3n de los jugadores fusionando una est\u00e9tica visual deslumbrante (UI) con una arquitectura de la informaci\u00f3n impecable (UX). Desde \u00e1rboles de habilidades complejos en juegos de rol de mundo abierto, hasta visores en pantalla (HUD) minimalistas para shooters competitivos, dise\u00f1amos sistemas que no solo se ven espectaculares, sino que se sienten instintivos. Integramos arte, psicolog\u00eda cognitiva y fluidez t\u00e9cnica para crear interfaces que mejoran la jugabilidad sin obstaculizarla.\n <\/p>\n \n <div class=\"flex flex-col sm:flex-row justify-center gap-4\">\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"bg-gradient-to-r from-brand-emerald to-brand-cyan text-darker px-8 py-4 rounded-full font-bold text-lg hover:from-brand-cyan hover:to-brand-emerald hover:text-darker transition-all shadow-[0_0_20px_rgba(16,185,129,0.4)] flex justify-center items-center gap-3\">\n <i class=\"fa-solid fa-paper-plane\"><\/i> Consultar a un Experto UX\n <\/a>\n <a href=\"#servicios-uiux\" class=\"px-8 py-4 rounded-full font-bold text-lg border border-brand-emerald\/50 text-brand-emerald hover:bg-brand-emerald\/10 transition-all flex justify-center items-center gap-3\">\n <i class=\"fa-solid fa-compass-drafting\"><\/i> Explorar Servicios UI\/UX\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"servicios-uiux\" class=\"py-24 bg-dark relative border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-20\">\n <i class=\"fa-solid fa-cubes text-4xl text-brand-emerald mb-4\"><\/i>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6\">Nuestros Servicios de Dise\u00f1o UI\/UX<\/h2>\n <p class=\"text-lg text-slate-400 leading-relaxed\">\n Nuestro enfoque cubre el ciclo de vida completo del dise\u00f1o interactivo. Abordamos la investigaci\u00f3n del comportamiento del jugador, la estructuraci\u00f3n visual l\u00f3gica y la creaci\u00f3n de activos pulidos listos para ser implementados directamente en el motor de su juego.\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-emerald transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-emerald-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-emerald group-hover:text-darker transition-all text-brand-emerald shadow-inner border border-brand-emerald\/20\">\n <i class=\"fa-solid fa-palette text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Dise\u00f1o de Interfaz de Usuario (UI)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Desarrollamos el aspecto visual de su juego. Creamos botones, paneles, barras de progreso y tipograf\u00edas personalizadas que respiran la misma direcci\u00f3n de arte que sus entornos y personajes. Desde la est\u00e9tica met\u00e1lica pesada (Sci-Fi) hasta pergaminos pintados a mano (Fantas\u00eda).\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-teal transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-teal-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-teal group-hover:text-darker transition-all text-brand-teal shadow-inner border border-brand-teal\/20\">\n <i class=\"fa-solid fa-brain text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Experiencia de Usuario en Juegos (UX)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n La ciencia detr\u00e1s de la pantalla. Analizamos la carga cognitiva del jugador, dise\u00f1amos diagramas de flujo (User Flows) y estructuramos la arquitectura de la informaci\u00f3n para garantizar que tareas complejas como la elaboraci\u00f3n (crafting) o la gesti\u00f3n de gremios sean intuitivas y gratificantes.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-cyan transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-cyan-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-cyan group-hover:text-darker transition-all text-brand-cyan shadow-inner border border-brand-cyan\/20\">\n <i class=\"fa-solid fa-crosshairs text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Dise\u00f1o de HUDs (Visores)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Dise\u00f1amos el \u00abHeads-Up Display\u00bb en pantalla. Nos enfocamos en el minimalismo estrat\u00e9gico, asegurando que la informaci\u00f3n vital de combate (salud, munici\u00f3n, minimapa, br\u00fajula) sea perif\u00e9ricamente visible en fracciones de segundo sin obstruir la belleza del mundo del juego o distraer la acci\u00f3n.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-blue transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-blue-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-blue group-hover:text-white transition-all text-brand-blue shadow-inner border border-brand-blue\/20\">\n <i class=\"fa-solid fa-icons text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Creaci\u00f3n de Iconos de Juego<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Poblamos sus men\u00fas con miles de activos de lectura r\u00e1pida. Pintamos iconos de habilidades, glifos de estados alterados (buffs\/debuffs), elementos de inventario, divisas (monedas, gemas) y logros. Cada icono se dise\u00f1a para ser perfectamente reconocible incluso en las resoluciones m\u00e1s peque\u00f1as.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-emerald transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-emerald-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-emerald group-hover:text-darker transition-all text-brand-emerald shadow-inner border border-brand-emerald\/20\">\n <i class=\"fa-solid fa-network-wired text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Wireframing y Prototipado<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Antes de aplicar el arte final, creamos \u00abplanos\u00bb (wireframes) interactivos en baja fidelidad utilizando herramientas como Figma o Adobe XD. Esto permite a su equipo probar la navegaci\u00f3n del juego, los clics y la fluidez general (prototipado cliqueable) antes de invertir tiempo en el renderizado final.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-teal transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-teal-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-teal group-hover:text-darker transition-all text-brand-teal shadow-inner border border-brand-teal\/20\">\n <i class=\"fa-solid fa-list-ul text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Dise\u00f1o de Men\u00fas Principales<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Dise\u00f1amos la primera impresi\u00f3n del jugador. Creamos sistemas de men\u00fas de inicio cinem\u00e1ticos, pantallas de selecci\u00f3n de personajes, \u00e1rboles de habilidades masivos, sistemas de misiones (Quest Logs) y pantallas de configuraci\u00f3n accesibles, todo priorizando la navegaci\u00f3n eficiente con mando (gamepad) o rat\u00f3n.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-cyan transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-cyan-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-cyan group-hover:text-darker transition-all text-brand-cyan shadow-inner border border-brand-cyan\/20\">\n <i class=\"fa-solid fa-vr-cardboard text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Interfaces de Realidad Virtual (VR)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n La UI tradicional plana no funciona en VR. Especialistas en ergonom\u00eda espacial dise\u00f1an interfaces espaciales (Spatial UI) curvas, men\u00fas anclados a las manos del jugador e interfaces di\u00e9geticas (como pantallas en armas o herramientas f\u00edsicas) para mantener la inmersi\u00f3n 3D inquebrantable.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-blue transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-blue-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-blue group-hover:text-white transition-all text-brand-blue shadow-inner border border-brand-blue\/20\">\n <i class=\"fa-solid fa-mobile-screen text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Optimizaci\u00f3n de UI M\u00f3vil<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Resolviendo los desaf\u00edos de las pantallas t\u00e1ctiles peque\u00f1as. Dise\u00f1amos con la \u00abzona del pulgar\u00bb (Thumb Zone) en mente. Garantizamos zonas t\u00e1ctiles (Touch Targets) amplias, interfaces receptivas (Responsive) para m\u00faltiples relaciones de aspecto y tenemos en cuenta las \u00abmuescas\u00bb (Notches) y \u00e1reas seguras de iOS y Android.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-emerald transition-all glow-effect-uiux group\">\n <div class=\"w-16 h-16 rounded-2xl bg-emerald-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-emerald group-hover:text-darker transition-all text-brand-emerald shadow-inner border border-brand-emerald\/20\">\n <i class=\"fa-solid fa-code text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Integraci\u00f3n de UI en Motores<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n No nos detenemos en el archivo de Photoshop. Nuestros Artistas T\u00e9cnicos de UI pueden implementar directamente los activos en Unreal Engine (usando UMG \/ Slate) o Unity (UGUI \/ UI Toolkit), configurando anclajes (Anchors), resoluciones din\u00e1micas y jerarqu\u00edas limpias para sus programadores.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-teal transition-all glow-effect-uiux group md:col-span-2 lg:col-span-3\">\n <div class=\"flex flex-col md:flex-row items-center gap-6\">\n <div class=\"w-20 h-20 shrink-0 rounded-2xl bg-teal-500\/10 flex items-center justify-center group-hover:bg-brand-teal group-hover:text-darker transition-all text-brand-teal shadow-inner border border-brand-teal\/20\">\n <i class=\"fa-solid fa-wand-magic-sparkles text-4xl\"><\/i>\n <\/div>\n <div class=\"text-left\">\n <h3 class=\"text-2xl font-bold text-white mb-3\">Animaci\u00f3n de Interfaces y VFX (Motion Graphics)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed\">\n Una interfaz est\u00e1tica se siente sin vida. El servicio de Animaci\u00f3n de Interfaces proporciona esa retroalimentaci\u00f3n (feedback) jugosa e instant\u00e1nea que los jugadores adoran. Animamos la apertura y cierre de paneles, creamos microinteracciones al pasar el rat\u00f3n (Hover effects), animaciones de subida de nivel (Level Up) deslumbrantes con part\u00edculas, y aseguramos que la navegaci\u00f3n se sienta t\u00e1ctil, \u00e1gil y altamente responsiva a trav\u00e9s del movimiento y el flujo.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"pipeline\" class=\"py-24 bg-darker relative border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n \n \n <div>\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-emerald\/10 border border-brand-emerald\/30 text-brand-emerald text-sm font-semibold mb-6\">\n <i class=\"fa-solid fa-diagram-project\"><\/i> Enfoque Basado en Datos\n <\/div>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6 leading-tight\">\n Nuestro <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-emerald to-brand-cyan\">Pipeline de Producci\u00f3n UX\/UI<\/span>\n <\/h2>\n <p class=\"text-slate-400 mb-6 leading-relaxed\">\n El dise\u00f1o de interfaces para juegos no se trata solo de pintar botones bonitos; es un proceso anal\u00edtico. En <strong>Gameartoutsourcestudio<\/strong>, seguimos una metodolog\u00eda iterativa estricta que reduce el riesgo t\u00e9cnico, elimina la frustraci\u00f3n del usuario final y acelera la producci\u00f3n de los desarrolladores de frontend.\n <\/p>\n \n <div class=\"space-y-6 mt-8\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-emerald font-bold shrink-0 shadow-[0_0_10px_rgba(16,185,129,0.3)]\">01<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Investigaci\u00f3n y Arquitectura (UX Research)<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Estudiamos las mec\u00e1nicas de su juego. Mapeamos todo el \u00abViaje del Jugador\u00bb (Player Journey) mediante diagramas de flujo l\u00f3gicos, definiendo cu\u00e1ntos clics toma acceder a cada funci\u00f3n vital.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-teal font-bold shrink-0 shadow-[0_0_10px_rgba(20,184,166,0.3)]\">02<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Esquemas y Mockups Grises (Wireframing)<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Creamos bloques grises interactivos para establecer la jerarqu\u00eda visual y el dise\u00f1o espacial (Layout). Probamos esto intensamente para validar la usabilidad antes de invertir en arte.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-cyan font-bold shrink-0 shadow-[0_0_10px_rgba(6,182,212,0.3)]\">03<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Conceptualizaci\u00f3n Visual y Gu\u00eda de Estilo<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Nuestro equipo de Arte UI toma los wireframes y aplica el \u00abLook and Feel\u00bb. Generamos una biblioteca maestra de componentes (Botones, Paneles, Tipograf\u00eda, Paleta de Colores) para asegurar la coherencia.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-blue font-bold shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.3)]\">04<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Producci\u00f3n, Slicing e Integraci\u00f3n<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Se producen todas las pantallas. Cortamos (Slice) los activos optimizando los formatos y, si se requiere, implementamos y animamos directamente los archivos (Prefabs\/Widgets) en Unity o Unreal.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-emerald-900\/30 flex flex-col items-center justify-center text-center glow-effect-uiux\">\n <i class=\"fa-brands fa-figma text-5xl text-brand-emerald mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Prototipado<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">Figma \/ Adobe XD<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-teal-900\/30 flex flex-col items-center justify-center text-center glow-effect-uiux transform translate-y-8\">\n <i class=\"fa-solid fa-universal-access text-5xl text-brand-teal mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Accesibilidad<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">Daltonismo y Contraste WCAG<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-cyan-900\/30 flex flex-col items-center justify-center text-center glow-effect-uiux\">\n <i class=\"fa-solid fa-gamepad text-5xl text-brand-cyan mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Cross-Platform<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">PC, Consolas y M\u00f3vil<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-blue-900\/30 flex flex-col items-center justify-center text-center glow-effect-uiux transform translate-y-8\">\n <i class=\"fa-solid fa-code text-5xl text-brand-blue mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Motores<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">Unreal UMG \/ Unity UGUI<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"faq\" class=\"py-24 bg-dark relative border-t border-slate-800\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <i class=\"fa-solid fa-circle-question text-4xl text-brand-teal mb-4\"><\/i>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6\">Preguntas Frecuentes sobre Interfaz de Juego<\/h2>\n <p class=\"text-slate-400 text-lg\">Aclarando los conceptos t\u00e9cnicos detr\u00e1s de un dise\u00f1o de experiencia de usuario impecable.<\/p>\n <\/div>\n\n <div class=\"space-y-6\">\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-emerald\"><\/i> \u00bfCu\u00e1l es la diferencia real entre UI y UX en los videojuegos?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n La <strong>UX (Experiencia de Usuario)<\/strong> es el \u00abesqueleto y el cerebro\u00bb. Es la l\u00f3gica de c\u00f3mo funciona algo, cu\u00e1ntos pasos se requieren para equipar una espada, c\u00f3mo fluye la informaci\u00f3n y si es frustrante o intuitivo. La <strong>UI (Interfaz de Usuario)<\/strong> es la \u00abpiel y la belleza\u00bb. Es el dise\u00f1o visual de esa misma pantalla de inventario: los colores, el estilo de la madera del panel, el brillo del bot\u00f3n y las fuentes utilizadas. En nuestro estudio, ambas disciplinas trabajan en conjunto continuo.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-teal\"><\/i> \u00bfQu\u00e9 es la Interfaz \u00abDi\u00e9getica\u00bb y cu\u00e1ndo se recomienda usarla?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n La UI Di\u00e9getica es aquella que existe dentro de la narrativa y la geometr\u00eda 3D del mundo del juego, visible tanto para el jugador como para el personaje (ej. el contador de munici\u00f3n en el arma de Halo, o el holograma de inventario en Dead Space). Se recomienda en juegos de inmersi\u00f3n profunda, terror (Survival Horror) o Realidad Virtual (VR). Nuestros dise\u00f1adores colaboran con los equipos 3D para modelar interfaces directamente en los \u00abprops\u00bb y entornos del juego.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-cyan\"><\/i> \u00bfC\u00f3mo abordan la adaptaci\u00f3n de UI para juegos multiplataforma (Cross-Platform)?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n El mayor desaf\u00edo multiplataforma es la escala y el m\u00e9todo de entrada (Input). Lo que funciona para un cursor de rat\u00f3n en PC, es inoperable para un controlador de Xbox o un pulgar t\u00e1ctil en un m\u00f3vil. Dise\u00f1amos con un enfoque modular. Creamos gu\u00edas de atajos de teclado din\u00e1micas (Input Prompts) que cambian al vuelo, ampliamos las zonas interactivas (Hitboxes) para pantallas t\u00e1ctiles y garantizamos la escalabilidad de las fuentes (Dynamic Typography) para que sean legibles a 3 metros de un televisor de consola.\n <\/p>\n <\/div>\n \n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-blue\"><\/i> \u00bfExportan los activos listos o los integran directamente en el motor del juego?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n Ofrecemos ambos niveles de servicio. Como est\u00e1ndar, entregamos carpetas organizadas con activos cortados, hojas de sprites y gu\u00edas de estilo. Sin embargo, nuestro servicio premium (Integraci\u00f3n de UI en Motores) permite que nuestros Artistas T\u00e9cnicos trabajen directamente en su repositorio (Perforce\/Git). Ensamblamos los Canvas en Unity o los Widgets en Unreal Engine (UMG), vinculamos las animaciones y dejamos las variables expuestas para que sus programadores de Frontend solo tengan que conectar la l\u00f3gica del backend.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 relative overflow-hidden bg-gradient-to-b from-dark to-slate-900 border-t border-slate-800\">\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-brand-emerald\/10 via-darker to-darker -z-10\"><\/div>\n <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n \n <i class=\"fa-solid fa-object-group text-6xl text-brand-emerald mb-8 glow-effect-uiux rounded-full bg-slate-800 p-6\"><\/i>\n \n <h2 class=\"text-4xl md:text-5xl font-bold text-white mb-6\">\n Construya la Conexi\u00f3n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-emerald to-brand-cyan\">Perfecta con su Jugador<\/span>\n <\/h2>\n <p class=\"text-xl text-slate-400 mb-12 max-w-2xl mx-auto\">\n No permita que una interfaz confusa arruine grandes mec\u00e1nicas de juego. Conf\u00ede en nuestro equipo especializado en dise\u00f1o centrado en el jugador para elevar su retenci\u00f3n, accesibilidad y acabado profesional.\n <\/p>\n\n <div class=\"bg-slate-800\/50 backdrop-blur-sm border border-slate-700 rounded-3xl p-8 md:p-12 shadow-2xl\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n <div class=\"text-left\">\n <h3 class=\"text-2xl font-bold text-white mb-4\">Auditor\u00eda y Consulta UX<\/h3>\n <p class=\"text-slate-400 mb-8 text-sm\">\n Comun\u00edquese con nuestros Dise\u00f1adores Principales de UI\/UX. Ofrecemos evaluaciones exhaustivas de flujos de usuarios en juegos en desarrollo y estimaciones de producci\u00f3n completas sin ning\u00fan compromiso.\n <\/p>\n \n <div class=\"flex items-center gap-4 mb-6 group cursor-pointer\">\n <div class=\"w-12 h-12 rounded-full bg-brand-emerald\/20 flex items-center justify-center group-hover:bg-brand-emerald\/40 transition-colors\">\n <i class=\"fa-solid fa-envelope text-xl text-brand-emerald\"><\/i>\n <\/div>\n <div>\n <p class=\"text-xs text-slate-500 uppercase tracking-wider font-bold\">Solicitudes de Proyecto<\/p>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"text-lg font-bold text-white hover:text-brand-cyan transition-colors\">\n info@gameartoutsourcestudio.de\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"flex items-center gap-4 group cursor-pointer\">\n <div class=\"w-12 h-12 rounded-full bg-brand-teal\/20 flex items-center justify-center group-hover:bg-brand-teal\/40 transition-colors\">\n <i class=\"fa-solid fa-shield-halved text-xl text-brand-teal\"><\/i>\n <\/div>\n <div>\n <p class=\"text-xs text-slate-500 uppercase tracking-wider font-bold\">Total Confidencialidad<\/p>\n <p class=\"text-sm font-bold text-white\">Evaluaci\u00f3n bajo NDA Seguro<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-darker rounded-2xl p-6 border border-slate-700 text-left\">\n <h4 class=\"text-lg font-bold text-white mb-6 flex items-center gap-2\">\n <i class=\"fa-solid fa-earth-americas text-brand-cyan\"><\/i> Disponibilidad Global de Talento\n <\/h4>\n <div class=\"space-y-4\">\n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-emerald transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-map-location-dot text-brand-emerald group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Am\u00e9rica del Norte (USA\/CAN)<\/span>\n <\/div>\n <span class=\"text-xs text-brand-emerald bg-brand-emerald\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Principal<\/span>\n <\/div>\n \n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-teal transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-landmark-flag text-brand-teal group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Europa Continental \/ UK<\/span>\n <\/div>\n <span class=\"text-xs text-brand-teal bg-brand-teal\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Principal<\/span>\n <\/div>\n \n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-blue transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-torii-gate text-brand-blue group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Asia-Pac\u00edfico<\/span>\n <\/div>\n <span class=\"text-xs text-brand-blue bg-brand-blue\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Activo<\/span>\n <\/div>\n\n <div class=\"mt-4 pt-4 border-t border-slate-700\">\n <p class=\"text-xs text-slate-500 leading-relaxed\">\n <i class=\"fa-solid fa-circle-info mr-1\"><\/i> Nuestros Lead UX Designers facilitan sincronizaciones diarias mediante plataformas \u00e1giles para asegurar una integraci\u00f3n perfecta sin fricciones horarias.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-darker py-12 border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-6\">\n \n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-gamepad text-2xl text-brand-emerald\"><\/i>\n <span class=\"font-bold text-xl tracking-tighter text-white\">\n Gameart<span class=\"text-brand-cyan\">outsource<\/span>studio\n <\/span>\n <\/div>\n \n \n <div class=\"flex flex-wrap justify-center gap-4 text-sm text-slate-500 max-w-5xl\">\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-palette text-brand-emerald\"><\/i> Dise\u00f1o de Interfaz de Usuario<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-brain text-brand-teal\"><\/i> Experiencia de Usuario en Juegos<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-crosshairs text-brand-cyan\"><\/i> Dise\u00f1o de HUDs<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-icons text-brand-blue\"><\/i> Creaci\u00f3n de Iconos de Juego<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-network-wired text-brand-emerald\"><\/i> Wireframing y Prototipado<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-list-ul text-brand-teal\"><\/i> Dise\u00f1o de Men\u00fas Principales<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-vr-cardboard text-brand-cyan\"><\/i> Interfaces de Realidad Virtual<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-mobile-screen text-brand-blue\"><\/i> Optimizaci\u00f3n de UI M\u00f3vil<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-code text-brand-emerald\"><\/i> Integraci\u00f3n de UI en Motores<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-wand-magic-sparkles text-brand-teal\"><\/i> Animaci\u00f3n de Interfaces<\/span>\n <\/div>\n \n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-darker hover:bg-brand-emerald transition-colors\">\n <i class=\"fa-brands fa-linkedin-in\"><\/i>\n <\/a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-darker hover:bg-brand-teal transition-colors\">\n <i class=\"fa-brands fa-artstation\"><\/i>\n <\/a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-darker hover:bg-brand-cyan transition-colors\">\n <i class=\"fa-brands fa-behance\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n \n <div class=\"mt-8 pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4\">\n <p class=\"text-slate-500 text-sm text-center md:text-left\">\n © 2024 Gameartoutsourcestudio. Todos los derechos reservados. Divisi\u00f3n de Dise\u00f1o de UI\/UX e Interacci\u00f3n.\n <\/p>\n <div class=\"flex items-center gap-2 text-slate-400 text-sm font-semibold bg-slate-800 px-4 py-2 rounded-full\">\n <i class=\"fa-solid fa-envelope text-brand-emerald\"><\/i>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"hover:text-white transition-colors\">info@gameartoutsourcestudio.de<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n<\/body>\n<\/html>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gameartoutsourcestudio | Dise\u00f1o de Interfaz de Usuario, Experiencia de Usuario en Juegos, Dise\u00f1o de HUDs, Creaci\u00f3n de Iconos de Juego, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"wangjianchen02@gmail.com","author_link":"https:\/\/3danimationart.co.uk\/ka\/author\/wangjianchen02gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Gameartoutsourcestudio | Dise\u00f1o de Interfaz de Usuario, Experiencia de Usuario en Juegos, Dise\u00f1o de HUDs, Creaci\u00f3n de Iconos de Juego, […]","_links":{"self":[{"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":1,"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/pages\/22\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/3danimationart.co.uk\/ka\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}