UI Immersiva / Web Interattivo / Sviluppo Webflow

Cyberpunk Redone

Un terminale di Night City, ricostruito per il browser

Abbiamo preso l'interfaccia utente del terminale al neon di Cyberpunk 2077 e l'abbiamo fatta funzionare in un browser. Poi si è evoluta. Il terminale è diventato una casella di posta per i messaggi, una radio a cinque stazioni con un lettore live, un browser NET interno all'universo di gioco e un marketplace di veicoli AutoFixer.

Cosa è questo

Questo è un progetto del Laboratorio. Nessun brief, nessun cliente, nessuna scadenza imposta da altri. Il laboratorio dello studio esiste proprio per questo tipo di cose: scegliere una tecnica, spingerla fino al limite, vedere cosa resiste. L'intera realizzazione funziona all'interno di Webflow. Un guscio CRT nero con neon, cornici HUD smussate, texture a linee di scansione e una pila di schermi che portano la finzione in un luogo sempre nuovo.

La parte difficile è che una ricreazione vive o muore in base ai dettagli. Geometria del frame. Testi interni all'universo di gioco. Il selettore delle stazioni. Le pagine dei veicoli. La fredda logica del terminale che gira sotto. Se si sbaglia la luminosità, la tipografia o il modo in cui un pannello risponde a un clic, l'intera cosa sembra un travestimento. Mettili insieme e smetti di vedere una pagina web per iniziare a vedere l'interfaccia.

Come abbiamo ricreato l'atmosfera

Due elementi fondamentali: come appare la superficie e come parla il mondo.

L'interfaccia rimane rigida. Cornici smussate, ciano su quasi nero, texture a linee di scansione, pannelli che rispondono come una macchina anziché come un sito web. Nessun elemento è arrotondato. Niente sfuma dolcemente. Un terminale è convincente perché si comporta come tale, quindi il comportamento è venuto prima.

Poi c'è il linguaggio, ed è qui che la maggior parte delle ricreazioni diventa pigra. Ogni riga di testo appartiene a Night City. Il browser NET funziona su "KEYSTONE", serve indirizzi come NETDIR://NCITY.PUB e sfoggia un'etichetta "powered by NETWATCH". Il pannello della radio timbra le copertine degli album con metadati di sistema falsi. I messaggi ti salutano con "Hey Choomba". Basta un pulsante generico o un titolo normale in qualsiasi punto e l'incantesimo svanisce, quindi nulla di generico è sopravvissuto alla revisione.

La radio è il punto in cui la ricreazione smette di essere un'immagine e inizia a funzionare. È un vero lettore audio integrato nella finzione: cinque canali, controlli di trasporto, una barra di scorrimento che funziona davvero e un pannello per le copertine degli album che si aggiorna con letture interne all'universo mentre un brano è in riproduzione. Il suono non è accanto all'interfaccia. Ne fa parte.

Da lì il mondo si apre. La casella di posta crea l'atmosfera attraverso la corrispondenza dei personaggi. Il browser elenca una directory di siti di Night City. AutoFixer si spinge oltre, fino a diventare un vero e proprio marketplace. Stessa ricreazione, testata da cinque angolazioni diverse.

La Realizzazione

Un'esperienza terminale connessa e multisistema, tutto in Webflow.

  • Schermo del Terminale: Una cornice CRT nera con neon e bagliore dello schermo, pannelli HUD smussati, texture a linee di scansione e una barra di sistema a tre schede per Messaggi, Radio e NET. Ogni schermata si trova al suo interno.
  • Casella di Posta Messaggi: Un elenco di messaggi selezionabili con testi completi, scritti in slang di Night City da personaggi come PixelWitch e NeonWave.
  • Pannello Radio: Lo schermo eccezionale. Cinque canali, tra cui 107.3 Morro Rock e 98.7 Body Heat Radio, un vero lettore audio con barra di scorrimento funzionante e controlli di trasporto, e un pannello con la copertina dell'album che mostra letture di sistema in tempo reale all'interno dell'universo di gioco mentre ogni traccia è in riproduzione.
  • Browser NET: Un browser KEYSTONE con una barra degli indirizzi in tempo reale che apre una directory di otto siti autonomi di Night City. WNS News e l'Ufficio del Sindaco gestiscono pagine di notizie complete. Delamain è una brochure aziendale con una navigazione interna a quattro schede. SamuraiWeb è una fan page di una band. Night Corp e NCPD fungono da schermate di interruzione di servizio all'interno dell'universo di gioco, un avviso di blocco NETWATCH e una pagina di server non disponibile, ognuno con un modulo di iscrizione. Un filo conduttore ricorrente di easter egg su un misterioso netrunner attraversa le notizie e gli avvisi e lega discretamente la directory.
  • Marketplace AutoFixer: Lo schermo più profondo. Un marketplace di veicoli con una barra laterale dei produttori (Thorton, Archer, Mizutani, Makigai, Quadra), pagine individuali dei veicoli che contengono la lore dell'universo di gioco, controlli per i preferiti e un meccanismo di blocco dei contenuti che rende i veicoli disponibili solo dopo aver raggiunto determinati progressi nella finzione del gioco. Un vero e proprio flusso di navigazione e scoperta al di sotto della finzione.
  • Sistema di Copy In-Universe: Ogni titolo, indirizzo, etichetta e riga di microcopy è scritto per rimanere all'interno di Night City, tenendo insieme l'intero mondo.
Cyberpunk Redone

Un'esperienza web in cui le persone vogliono vivere

Esperienze digitali immersive che fondono tecnologia, design e storytelling per trasformare ogni visita in un viaggio.

SEE ALSO

Other projects from our lab

Cyberpunk Redone Mockup
VISUAL / UI / TERMINAL

Cyberpunk Redone

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Fallout Terminal Mockup
VISUAL / UI / TERMINAL

Fallout Terminal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Drake Rebuild Mockup
3D / SPACIAL EXPERIENCE / E-COMMERCE

Drake Related

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Italian Flag
Italian