A cinematic style frame showing colour grading and UI overlays for a Battlefield 6 cutscene.

Battlefield 6

Style Frames & UI Design

Services

UI Design
Motion Design
Style Frames
Visual Development
Art Direction

Company

EA
DICE

Role

UI Design
Motion Concepts
Visual Development
3D Production

Information

Visual development work created for EA’s Battlefield franchise, exploring cinematic interface design and narrative-driven UI systems.

The project included style frame development, motion concepts and UI exploration for desktop and wearable military displays, alongside supporting visual systems such as maps, audio visualisation and layered information graphics.

Close-up of a cinematic style frame showing art direction and military UI design for a Battlefield 6 cutscene.
Close-up of a cinematic style frame showing UI design for a military desktop app.

Style Frame Design

Establishing the visual anchor for in-game cutscenes required crafting detailed style frames for cinematic interfaces. Execution focused heavily on precise post-production and colour grading to seamlessly integrate UI overlays into the environment’s lighting.

While tactical UI layouts for desktop and wearable displays, alongside motion concepts, were also developed, the primary goal was creating a polished, atmospheric aesthetic. This ensured complex data graphics and audio visualisations felt native to the world.

Close-up of a cinematic style frame showing style direction and UI design for a Battlefield cutscene.
Close-up of a UI design and style frame for Battlefield 6's cut scenes.
Close-up of UI design and post effects applied to the screen, including glitch.
Cinematic style frame showing art direction and military UI design for a map screen in a Battlefield 6 cutscene.
Cinematic style frame showing art direction and military UI design for a military desktop app in a Battlefield 6 cutscene.
Close-up of a cinematic style frame showing a UI design for a mobile device for Battlefield 6.

Mobile VS. Desktop Design

Translating the multi-layered desktop interface to a wearable mobile format required a complete architectural redesign. Mounted directly onto a soldier’s forearm, this specialised tactical device demanded a constrained, strictly utilitarian approach.

The layout was optimised for immediate legibility in high-stress environments, stripping away non-essential telemetry while retaining core functionality.

High-contrast assets ensured the mobile UI remained instantly scannable, perfectly mirroring the established visual language of the primary desktop version.

A cinematic style frame showing art direction and military UI design for mobile app in a Battlefield 6 cutscene.
Angle shot style frame showing art direction and military UI design for a Battlefield 6 cutscene.
Detail shot of a UI design for a video call, complete with audio visualization, designed for Battlefield 6.

Video and Audio Comm Design

Designing the video communication interface required a strictly utilitarian approach, avoiding overly futuristic tropes in favour of grounded military functionality. The tactical popup UI was engineered to deliver critical visual and audio data instantly.

This exploration focused on balancing the live video feed with dynamic sound wave visualisations, ensuring the transmission felt authentic to modern combat hardware.

Developing real-time sound wave visualisations was central to this phase, establishing how audio data integrates natively within the video call interface.

Close shot of a monitor showing a video call. UI design includes an audiowave for the audio. Design for Battlefield 6.
Close shot of a video call. UI design includes standard buttons for an online call. Designed for EA's Battlefield 6.
Two examples of UI design of a video call pop-up, including design of audio representation, created for Battlefield 6.