Logo of UI Challenges
Sign in
Wireframe example for Skill Tree Screen
An example interpretation of the prompt
Icon of target

Skill Tree Screen

Icon of book open

Design the skill tree screen for a game progression flow. The core layout is a branching map of abilities, with nodes that unlock using skill points and connect into visible paths.

This screen should let players understand where they are in the tree, what they can afford now, and what each branch leads to without hunting through menus. The layout needs to work at game scale: dense enough to show structure, but readable on a controller or touch device.

Treat each node as a meaningful decision point. Some skills are already unlocked, some are available now, and some are still locked behind prerequisites or level gates. The screen should make those differences clear at a glance.

The interesting part is balancing overview and detail. Players need to scan the whole tree, inspect a node, and commit points without losing track of the path they were building toward.

Keep the progression fantasy visible. The tree should feel like a living build map, not a flat list of upgrades.

Icon of book open

Use one visual language for path status: unlocked, available, and locked should differ by both node treatment and connector treatment, so the route to the next skill is readable before any focus or hover.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.