user's avatar
Cyberpunk 2077—User Interface (Part 1)
Game Design




PART_01
USER INTERFACES FOR THE E3 TRAILER

One of the first tasks I was working on was the UI for the E3 trailer. From the metro map, wagon informational graphics on the windows, doors, ticket machines, the taxi drivers window decals ID and license, hacker's computers, over the mirror UI, economical AR projection, massive bigwig's crowd screen, to the plenty of unnoticeable pieces like a metro smartphone, smart home apps, airplane order of drinks, fashion store offers stripe, etc.

It was a stretch from the usual UI agenda, but it was a pleasant challenge and joy to kick it all off. Despite time running against us ㋛.








WIP



 
loading...
public static void main(String[UI_ART_BIBLE] args) {
        String className = "USER_INTERFACE";
        String newLine = "\n";
        String tab = "\t";
        String classStart = "public class " + className + " {";
        String closeBracket = "}";
        String mainStart = "public static void main(String[1989] args) {";
        String dummyContent = "";
        String temp = null;
        int size = 10000;
        System.out.println(result); // To display the output to the console
        PrintWriter out = null;
        }
        out.displayln(outputCode);
        out.close();
​​​​​​​




PART_02
USER INTERFACE ART BIBLE


This is the initial form of the User Interface Art Bible, the base of an aesthetical guide through the historical and technological eras of Cyberpunk 2077. It is to be taken with a grain of salt because things obviously changed over time. An example that stands above them all is the Neomilitarism style. It's the default style of player's UI and HUD. See for yourself and compare ㋛. It took quite an evolutionary path, yet the fundamentals defined here remained.


FOREWORD — Design and civilization have danced hand-in-hand since time immemorial. Whatever the human activity, design has never failed to react. Religion and its rituals, business, and economics, the inevitable progress of technology, competition through subterfuge, subtle coercion or open conflict, social upheaval, and political reconfiguration repeatedly and tremendously affected art, advertising, mass media, architecture, fashion, industrial design... essentially, the way the world looks and the way the world works. All of the above was considered in the development of the visuals of Cyberpunk 2077. And user interfaces of computers were no exception.







Style 01 — ENTROPISM




Style 02 — KITSCH




Style 03 — NEO MILITARISM




Style 04 — NEO KITSCH




The summary mockup of the styles with appropriate devices




The fragments and snapshots of the process

 
loading...
public static void main(String[FLUFF_SCREENS] args) {
        String className = "USER_INTERFACE";
        String newLine = "\n";
        String tab = "\t";
        String classStart = "public class " + className + " {";
        String closeBracket = "}";
        String mainStart = "public static void main(String[1989] args) {";
        String dummyContent = "";
        String temp = null;
        int size = 10000;
        System.out.println(result); // To display the output to the console
        PrintWriter out = null;
        }
        out.displayln(outputCode);
        out.close();
​​​​​​​





PART_03
Fluff Screens

One of the assignments for the UI team (and the first one for me), was to create content that would be used in the environment – the variety of monitors, screens, and displays, appearing in the game world in generous numbers. Such a sum divided into sections of the medical content, industrial environment, "matrix" kind of screens for hacker scenarios, then content for civil and generic screens.

That was the first bunch over the years followed by vending machines, refrigerators, a pile of custom content for particular quest scenarios, and for screens delivering more specific information. For example, the first operation Victor does to V, Johnny's questline, or braindance studio setup for Judy, etc.

There were plenty of optimization changes, and also specific game dev production obstacles but we worked hard to achieve the best quality possible with the richest variety ㋛.
​​​​​​​

​​​​​​​



The fragments and snapshots of the process




ingame screenshots of use and implementation



Graphic design / User interface art
Vladimír Vilimovský

Art direction
JAKUB KNAPIK
ROBERT BIELECKI

ALL TEAMMATES THANK YOU (!) FOR THE SCREENSHOTS:
ul. Jagiellonska 74
03-301 Warszawa
© 2021 All right reserved 


Thanks for watching!


NOTE: Some of THE CONTENT PRESENTED IS OF A CONCEPTUAL nature AND WAS NOT NECESSARILY USED IN THE GAME.
Cyberpunk 2077—User Interface (Part 1)
2k
20.9k
57
Published:

Cyberpunk 2077—User Interface (Part 1)

This is the first part, from the two portfolio presentations, of what I have been busy with since 2018. The visual side of the User Interface for Read More
2k
20.9k
57
Published: