— 05 · Gaming · Web de lanzamiento

Void Hunt.

— Un sitio que se siente como el HUD de un caza. Sitio de lanzamiento para un roguelike de cazarrecompensas en el vacío. La home es el manual de operaciones, no un trailer.

Sector
Gaming · Web de lanzamiento
Lo que hicimos
Dirección de arte · Web design · Motion 3D
Ver sitio — en vivo
Imagen principal del caso Void Hunt
Portada

Showcase

03 viewports · 10 sections
void-hunt / 1440 × 900
Void Hunt — vista principal en escritorio
Void Hunt — vista en tablet
Tablet · 834×1112
Void Hunt — vista en móvil
Mobile · 390×844
Void Hunt — captura de escritorio (Arsenal)
01 · Arsenal 1440
Void Hunt — captura en tablet (Arsenal)
02 · Arsenal 834
Void Hunt — captura en móvil (Arsenal)
03 · Arsenal 390

Por el protocolo

10 secciones · loop ∝
Void Hunt — vista desktop de la sección 00 top
00-top
Void Hunt — vista desktop de la sección hero
hero
Void Hunt — vista desktop de la sección hud
hud
Void Hunt — vista desktop de la sección protocol
protocol
Void Hunt — vista desktop de la sección arsenal
arsenal
Void Hunt — vista desktop de la sección operators
operators
Void Hunt — vista desktop de la sección survivors
survivors
Void Hunt — vista desktop de la sección vault
vault
Void Hunt — vista desktop de la sección roster
roster
Void Hunt — vista desktop de la sección cta
cta
Void Hunt — vista desktop de la sección 00 top
00-top
Void Hunt — vista desktop de la sección hero
hero
Void Hunt — vista desktop de la sección hud
hud
Void Hunt — vista desktop de la sección protocol
protocol
Void Hunt — vista desktop de la sección arsenal
arsenal
Void Hunt — vista desktop de la sección operators
operators
Void Hunt — vista desktop de la sección survivors
survivors
Void Hunt — vista desktop de la sección vault
vault
Void Hunt — vista desktop de la sección roster
roster
Void Hunt — vista desktop de la sección cta
cta
Void Hunt — vista desktop de la sección 00 top
00-top
Void Hunt — vista desktop de la sección hero
hero
Void Hunt — vista desktop de la sección hud
hud
Void Hunt — vista desktop de la sección protocol
protocol
Void Hunt — vista desktop de la sección arsenal
arsenal
Void Hunt — vista desktop de la sección operators
operators
Void Hunt — vista desktop de la sección survivors
survivors
Void Hunt — vista desktop de la sección vault
vault
Void Hunt — vista desktop de la sección roster
roster
Void Hunt — vista desktop de la sección cta
cta
Void Hunt — vista desktop de la sección 00 top
00-top
Void Hunt — vista desktop de la sección hero
hero
Void Hunt — vista desktop de la sección hud
hud
Void Hunt — vista desktop de la sección protocol
protocol
Void Hunt — vista desktop de la sección arsenal
arsenal
Void Hunt — vista desktop de la sección operators
operators
Void Hunt — vista desktop de la sección survivors
survivors
Void Hunt — vista desktop de la sección vault
vault
Void Hunt — vista desktop de la sección roster
roster
Void Hunt — vista desktop de la sección cta
cta
Void Hunt — vista desktop de la sección 00 top
00-top
Void Hunt — vista desktop de la sección hero
hero
Void Hunt — vista desktop de la sección hud
hud
Void Hunt — vista desktop de la sección protocol
protocol
Void Hunt — vista desktop de la sección arsenal
arsenal
Void Hunt — vista desktop de la sección operators
operators
Void Hunt — vista desktop de la sección survivors
survivors
Void Hunt — vista desktop de la sección vault
vault
Void Hunt — vista desktop de la sección roster
roster
Void Hunt — vista desktop de la sección cta
cta
Void Hunt — vista desktop de la sección 00 top
00-top
Void Hunt — vista desktop de la sección hero
hero
Void Hunt — vista desktop de la sección hud
hud
Void Hunt — vista desktop de la sección protocol
protocol
Void Hunt — vista desktop de la sección arsenal
arsenal
Void Hunt — vista desktop de la sección operators
operators
Void Hunt — vista desktop de la sección survivors
survivors
Void Hunt — vista desktop de la sección vault
vault
Void Hunt — vista desktop de la sección roster
roster
Void Hunt — vista desktop de la sección cta
cta

— 01 / Desafío

El problema real.

Void Hunt sale en 6 meses. La web no puede esperar al trailer del juego. Tiene que sostener la identidad con assets en desarrollo, no con cinemáticas finales.

— 02 / Proceso

4 pasos

Cómo se armó.

  1. 01 / paso

    Léxico de operación

    Inventario de 18 objetos, 6 arquetipos de operador, 4 biomas. La home es la ficha técnica, no la sinopsis.

  2. 02 / paso

    HUD como sistema

    Diseñamos el sitio con grid de 8px, monoespaciado, esquinas recortadas. Tipo visor. Se siente como un instrumento.

  3. 03 / paso

    Arsenal interactivo

    Librería de armas con vista 3D en miniatura. Hover revela stats, click abre detalle. Sin salir de la página.

  4. 04 / paso

    Pre-registro

    Formulario conectado a Discord + lista de correo. La web se reescribió el día del launch para volverse wiki viva.

— 03 / Sistema

El lenguaje visual.

— Paleta

--bg
#08070a · Negro base fondo
--yellow
#facc15 · Acento CTA, glow, stats
--purple
#a855f7 · Rare loot, gradientes
--red
#ef4444 · Epic, alerta live, timer

— Tipografía

Aa
Anton
Anton · Títulos display
Aa
Fraunces italic
Fraunces · Acentos
Aa
JetBrains Mono
JetBrains Mono · HUD y datos

— Stack

FigmaGSAPLottieThree.jsDiscord API

— 04 / Resultado

Y después, qué pasó.

El sitio recogió 4.2k pre-registros antes del trailer oficial. La métrica que nos importa: 38% click-through del arsenal al Discord.

4.2k
Pre-registros
38%
CTR arsenal → Discord
06mo
Brief → launch

— ¿Algo así para tu marca?

El próximo
caso es el tuyo.