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

Tutorial/Help Overlay

Icon of book open

Design the in-game tutorial help overlay that appears on top of gameplay, not a separate menu. It should explain the current move with button hints, short instructions, and any context the player needs to act now.

The overlay needs to feel lightweight enough to sit over the action without burying the game. Use clear hierarchy so the control prompt, the action name, and the short explanation are easy to scan at a glance.

This is for a game, so the layout should respect controller input and live play. Show how the overlay attaches to the relevant on-screen moment or control, and how it stays readable while the scene behind it keeps moving.

Make the help feel temporary and relevant to the current tutorial step. The player should understand what to press, what it does, and how to dismiss or continue without confusion.

Icon of book open

Anchor each hint to the exact control or on-screen object it refers to; if the player has to map text to the scene themselves, the overlay is too vague.

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.