Cyberpunk 2077—User Interface (Part 2)

Cyberpunk FUI futuristic game HUD ingame Interface manual UI ux

INTRODUCTION

From 2018 I was (and I am still) working on Cyberpunk 2077 in the CD PROJEKT RED studio as a Senior UI Artist. And in this second Cyberpunk 2077 portfolio presentation, I want to show you stuff that didn't fit into the first one.

PART_04

User Interface concept

To achieve coherent and consistent identity, an unmistakably unique blueprint of the user interface with an ambition to build upon the lore and technology used in Cyberpunk 2077 the rules and concept had to be defined and followed.

The biggest struggle was with the efforts to create the military system, with the hostile nature and with a degree of aggression expressed and rendered in RED colour. It was a bold decision and a walk against the stream of all the conventions and design habits. Just because the colour RED is a default it is inevitably causing a discrepancy with its general use, communicating malfunctioning, warnings, low battery, danger, etc. The aesthetical direction was based on UI Art Bible, which is in THE PREVIOUS PRESENTATION, and we kept on it and we were iterating and exploring ways around to make our UI comfortable to use and to navigate through, yet having the non conform attitude. That was our goal with UI for Cyberpunk 2077. note: There were a few side steps with different colours experiments, but it never really felt right.

In this particular chapter I am diving a little deeper into our manual, outlining some of the rules, reasons behind the font selection, colour palettes, constructing UI building blocks, layout arrangements and schematically showing why our HUD is curved by the shader.

DISCLAIMER: NOT ALL OF THE PRESENTED DESIGNS ARE IN THE GAME 1:1. ALL OF THEM ARE MOCAPS. SOME OF THEM ARE MY FAVORITE VARIANTS, WHICH WERE NOT ACCEPTED OR SELECTED. AND SOME OF THE MINOR FEATURES YOU'LL SEE WERE NEVER IMPLEMENTED. INGAME 'BACKGROUND' SCREENSHOTS ARE FROM A SLIGHTLY MODIFIED GAME, NOT 100% OFFICIAL RELEASE.

loading...

public static void main(String[FULL—SCREEN_PANELS] args) {
        String className = "USER_INTERFACE";
          String newLine = "\n";
        String classStart = "public class " + className + " {";
        out.displayln(outputCode);
        out.close();

PART_05
Fullscreen Panels

In chapter 05 I will show you the fullscreen panels I was responsible for. The essence of the fullscreen panels is their informative purpose, perfectly organized layouts, and systematic interactions leading to a comfortable and clear enough user experience while the player operates and interacts with them. Fullscreen panels are covering and delivering large sums of data about the world of Cyberpunk 2077.

Character Creation

HUB MENU

Inventory item management

Backpack and Item Preview

Map

Attributes and Skills

Stats panel

Journal 1.0

Codex panel

Tarot Cards

ADJUST V'S APPEARANCE

loading...

public static void main(String[WORK IN PROGRESS: Heads-up display] args) {
          String className = "USER_INTERFACE";
        String newLine = "\n";
        String classStart = "public class " + className + " {";
        out.displayln(outputCode);
          out.close();

PART_09
WORK IN PROGRESS (HUD)

HUD is something I was not working as much as on the all previous chapter, especially in the implementation and iteration phase, but those I had something to do with, or which I was redesigning are covered in this gallery.
㋛.

Interactions / speedometer / Dialog / Quest tracker

Call Vehicle popup

Contacts popup

Text messages popup

Radio stations popup

Pockets / looting / nameplates 2.0

Scanner (one of propositions)

Hacking minigame (light proposition)

Braindance 2.0

Photomode

loading...

public static void main(String[WORK IN PROGRESS: others] args) {
          String className = "USER_INTERFACE";
        String newLine = "\n";
          String classStart = "public class " + className + " {";
          out.displayln(outputCode);
          out.close();

loading...

public static void main(String[WIP_video footage: others] args) {
          String className = "USER_INTERFACE";
        String newLine = "\n";
          String classStart = "public class " + className + " {";
          out.displayln(outputCode);
          out.close();

loading...

public static void main(String[assets] args) {
          String className = "USER_INTERFACE";
          String newLine = "\n";
        String classStart = "public class " + className + " {";
          out.displayln(outputCode);
          out.close();

loading...

public static void main(String[BONUS_PART] args) {
          String className = "USER_INTERFACE";
          String newLine = "\n";
        String classStart = "public class " + className + " {";
          out.displayln(outputCode);
          out.close();

BONUS_PART

CYBERPUNK EDGERUNNERS

Some of the work I've done for the game was also used in the studio Triggers anime series — Edgerunners. Here are some samples from this wonderful show, which is a great addition to the Cyberpunk universe. If you haven't seen it yet, I say give it a chance ㋛.