Recreating the Battlefield 4 main menu in Figma

Personal ProjectGaming UIPrototype

view the Webflow prototype ↗
Battlefield 4 — hero screen

ProductBattlefield 4 menu

I recreated Battlefield 4’s main menu UI in Figma for educational purposes, exploring layout, navigation structure and visual hierarchy.

Details

Main menu UIsurface
Personal, educational projecttype
Figma ∙ Webflow prototypetools

SCREENS

How large-scale game interfaces balance usability with a lot of content.

Home, multiplayer, soldier, campaign, servers and store, rebuilt screen by screen.

Battlefield 4: Screens 1
Battlefield 4: Screens 1
Battlefield 4: Screens 1
Battlefield 4: Screens 1
Battlefield 4: Screens 1
Battlefield 4: Screens 1