Disconnected: UI y landing page para un juego indie

Empecé como candidato a artista 2D pero terminé liderando la UI de un juego de terror indie. Diseñé una interfaz de smartphone dentro del juego y una landing page promocional que genera hype sin spoilear la trama.


Plataforma
Desktop, tablet and mobile
Año
2026

Resumen;

  • Pasé de artista 2D a líder de UI después de que mi trabajo de prueba superara expectativas. Primer proyecto con Unreal Engine.
  • Diseñé una interfaz de smartphone dentro del juego con un sistema de diseño cohesionado que abarca menús, UI del teléfono y landing page.
  • Simplifiqué la cuadrícula de apps y la iconografía basándome en grabaciones de gameplay, mejorando los tiempos de reacción durante secuencias de persecución.

¡Ve la landing en vivo aquí!

¡Tienes correo!

El estudio me contrató como artista 2D pero me pasó a diseño de UI después de ver mi trabajo de prueba. Era mi primera vez usando Unreal Engine y el principal desafío era crear una interfaz de smartphone que se viera bien renderizada en un entorno 3D de escritorio.

Mi primera propuesta para la UI, con poco contexto y en 3 días.

Misión

Tenía que diseñar un sistema móvil funcional dentro del juego y un sitio web teaser. El objetivo era hacer la UI legible en el motor del juego y crear una página de marketing que atrajera jugadores sin arruinar momentos clave de la historia.

Flujo de usuario
Menú principal
Flujo de usuario
Pantalla de carga
Flujo de usuario
Ajustes
Flujo de usuario
Game Over

Diseño

Investigué cómo se renderizan las interfaces dentro de Unreal Engine, estudiando juegos como GTA V para ver cómo se ve un teléfono 3D en una pantalla de escritorio. Esto requirió romper algunos patrones estándar de usabilidad móvil para asegurar que los elementos siguieran siendo legibles en ángulos extraños y durante el movimiento. Construí un pequeño sistema de diseño para mantener los menús, el teléfono del juego y la landing page cohesionados.

Teléfono en entorno 3D
Teléfono dentro del juego, funcionando en Unreal Engine.

Flujo de usuario
Pantalla principal
Flujo de usuario
Notificaciones
Flujo de usuario
Pantalla de carga
Flujo de usuario
Chat
Flujo de usuario
Pantalla bloqueada

A través de grabaciones de gameplay, me di cuenta de que algunos iconos eran difíciles de distinguir y la cuadrícula de apps era frustrante durante las escenas de persecución, así que simplifiqué el layout para mejorar los tiempos de reacción.

Para la landing page, tomé la decisión de eliminar al villano principal. Aunque el marketing estándar sugiere mostrar los mejores activos, sabía que revelarlo demasiado pronto arruinaría la experiencia, así que centré el diseño en construir misterio e intriga.

Sección Hero
Otras secciones

¡Ve la landing en vivo aquí!

El final

Actualmente estamos preparando la demo para eventos como Guadalindie y buscando publisher. La colaboración con el equipo fue excelente y ya estamos buscando oportunidades para volver a trabajar juntos.

Me di cuenta de que diseñar cambia mucho cuando eres un usuario potencial del producto. Esto me enseñó a separar mi gusto personal de las necesidades del público objetivo, centrándome en la empatía real en lugar de diseñar solo lo que yo querría para mí.