Francesco Gualandi's profile

UI / UX Concept for Reporters: The Wild

The following word is part of a bigger project named "Reporters: The Wild" that it can be seen on its whole here.

Reporters is a 3D stealth game developed as final project during the Digital Bros Game Academy Course, on a commission from Video Games Without Borders Association.

Playing as Daniel Carter, a photojournalist working for a wildlife magazine, the player will help his friend Emily, who works in a natural reserve in South-eastern Asia, by investigating and exposing the poaching phenomenon plaguing the local fauna.

During the early stages of the project, I was in charge of the creation of a first version of the game interface that could give all the needed informations to the player without cluttering the screen. The elements put on the screen are: a minimap that could report the position of objectives and enemies; a selection menu for the smartphone accessories and one for the gadgets available, as well as the mission infos.

Because of the lack rendered game images at that time in development, in order to create the interface we used images from videogames like Playerunknown's Battlegrounds, Splinter Cell Blacklist, Horizon Zero Dawn e Tom Clancy's The Division.
_______________________________________________________________________

Il seguente lavoro fa parte del progetto più grande "Reporters: The Wild" che può essere visionato nella sua interezza qui.

Reporters: The Wild è un gioco stealth in 3D, sviluppato come progetto finale durante il corso alla Digital Bros Game Academy, come commissione per Video Games Without Borders.

Il giocatore vestirà i panni di Daniel Carter, un fotogiornalista al lavoro per una rivista che tratta di fauna selvatica, nell'intento di investigare e mettere a luce il fenomeno del bracconaggio che affligge la fauna locale, in aiuto dell'amica Emily che lavora in una riserva naturale dell'Asia del sud-est.

Nelle fasi embrionali del progetto, mi sono occupato della creazione di una prima interfaccia di gioco che potesse trasmette al giocatore tutte le informazioni necessarie senza riempire inutilmente lo schermo. Gli elementi disposti sullo schermo sono: una minimappa che segnali la posizione di obiettivi e nemici; un menù di selezione per gli accessori del cellulare e uno per i gadget a disposizione, nonché i testi che descrivono le missioni.

In assenza di immagini di gioco finite al momento dello sviluppo, per la creazione dell'interfaccia sono state usate immagini prese da videogiochi come Playerunknown's Battlegrounds, Splinter Cell Blacklist, Horizon Zero Dawn e Tom Clancy's The Division.

Stamina bar at the right of the character that drained after action like running, climbing or jumping, and recharges at rest.
_______________________________________________________________________

Barra della stamina alla destra del personaggio che si consuma ad azioni come corsa, scalata o salto, e che si ricarica a riposo.
Portrayal of the interaction with scene's objects, like using the picklock on a door.
_______________________________________________________________________

Rappresentazione delle interazioni con gli oggetti di scena, come scassinare una porta con il grimaldello.
As the poachers in the levels have both a visual cone and a hearing sphere, for the stealth gameplay the project required to recognize whether the player was seen or heard by the enemies. As such, both situation can be reported by the relative icon on the minimap and on the third person camera, in order to warn the player.

Moreover, the bar on the top of the screen was created in order to advise the player about the general noise and alarm level. When the bar is fully red, all poachers in the area are alarmed and on the chase.
_______________________________________________________________________

Dal momento che i bracconieri all'interno dei livello hanno sia un cono visivo che una sfera uditiva, per il gameplay stealth il gioco necessitava di saper dire al giocatore se fosse stato visto o sentito dai nemici. Di conseguenza, entrambi questi casi possono essere segnalati da un'icona dedicata sia sulla minimappa che nella visuale in terza persona, in modo da avvertire il giocatore.

Inoltre, la barra nella parte alta dello schermo è stata pensata per avvisare il giocatore del livello generale di rumore e allarme. Quando la barra è pienamente rossa, tutti i bracconieri nell'area vengono allarmati e partono all'inseguimento.
For the smartphone camera gameplay, the game switches to first person camera in order to aim properly for the photo required, and the interface mimics the screen of a real photocamera with the viewfinder at the centre.
_______________________________________________________________________

Per il gameplay riguardante la fotocamera, il gioco passa ad una visuale in prima persona per permettere di mirare meglio per fare la foto richiesta, ed inoltre l'interfaccia riprende lo schermo di una vera fotocamera con il mirino al centro.
A first interface mock-up of what interactive chat could've looked like in the game
_______________________________________________________________________

Una prima bozza di interfaccia che rappresenta come sarebbero potute essere le chat in gioco
This first interface prototype was used as a base for the next version made as a group, following the same layout but modifying only graphics and icons. More than that, the visual on the phone is not full screen anymore, but first person camera on it with the chance of looking at chat, photo and articles made.
_______________________________________________________________________

Questo primo prototipo di interfaccia di gioco è servito come base per la seconda versione dell'interfaccia creata in gruppo che, seguendo lo stesso layout, ne modifica soltanto le grafiche e le icone. Oltre a questo, la visuale del telefono e delle chat non è più a tutto schermo, ma ad una vista del telefono in prima persona con la possibilità di consultare le chat, le foto e gli articoli.
This is the final result, with the same layout but with many changes to the game concept.
The stamina bar was removed, as it's now endless in order to make the game a little more accessible. The gadgets were removed and are now gatherable in a few levels in order to complete some secondary missions. Also, the smartphone functions are now limited to the flashlight.
_______________________________________________________________________

Questo è il risultato finale, con lo stesso layout ma con varie modifiche al concept di gioco.
La barra della stamina è stata rimossa, dal momento che ora è infinita per rendere il gioco maggiormente accessibile. Anche i gadget ora possono solo essere raccolti in alcuni livelli e sono fini a determinate missioni secondarie. Inoltre, le funzioni dello smartphone sono ora limitate alla torcia.
Here's the first person view of the phone, as well as many other elements I worked on, like the tutorial screens, the infos about the animals and poaching, the loading screens that introduce to the levels, layout and graphics of the articles, and I helped in making some the icons for the menus and the phone.
_______________________________________________________________________

Questa è la visuale in prima persona del cellulare, assieme ad altri elementi grafici su cui ho lavorato, come le schermate di tutorial, le informazioni sugli animali e sul bracconaggio, le schermate di caricamento che introducono ai livelli, schema e grafiche per gli articoli, ed ho aiutato a realizzare alcune delle icone per i menù e per il cellulare.
UI / UX Concept for Reporters: The Wild
Published:

Owner

UI / UX Concept for Reporters: The Wild

Reporters is a 3D stealth game developed as final project during the Digital Bros Game Academy Course, on a commission from Video Games Without B Read More

Published: