Logo of UI Challenges
Sign in
Wireframe example for Turning On/Off
An example interpretation of the prompt
Icon of target

Turning On/Off

Icon of book open

Design a simple binary control for turning a setting on and off. Show the control in both states, with clear labeling so the user can tell what is enabled before they tap it. This is not a style exercise; it should read like a real product control that could be dropped into a settings screen.

Show the interaction from off to on and from on to off. Include the pressed, transitioning, and settled states so the change feels deliberate. Use motion, color, or icon change only if it helps clarify the state shift.

Keep the control usable on touch devices: visible hit area, clear contrast, and no ambiguity between the active and inactive states. If you include supporting text, make sure it updates with the state instead of repeating it blindly.

Icon of book open

Make the interaction delightful! Adding a subtle animation when the state changes can make the experience more engaging and satisfying for the user.

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.