Logo of UI Challenges
Sign in
Wireframe example for Tutorial Overlay Guide
An example interpretation of the prompt
Icon of target

Tutorial Overlay Guide

Icon of book open

Design the first-play tutorial overlay that teaches controls without kicking the player out of the game. It should sit on top of live gameplay and point to the exact control or HUD element being explained.

Treat it like a guided sequence: each step introduces one action, one on-screen cue, and one short line of instruction. The player should always know what to do next and what changed after they did it.

The overlay needs to feel native to a game menu layer, not a separate help page. Use in-context callouts, spotlighting, and restrained motion so the game remains visible behind the guidance.

Make the flow work for a first-time player who may be slow, distracted, or using a controller. The UI should support advancing, repeating a step, or backing up without losing the current game state.

Icon of book open

Anchor each hint to the exact in-game object or control it refers to; if the game camera moves, the callout should still feel attached.

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.